5 ways to improve the loading time and performance of your website in 2019

When the new iPhone comes out, many rushes to be the first to see it, play it and review it.

When there is breaking news, people are stuck to their TV screens waiting for updates while reporters rush to be the first to deliver. No wonder people expect this same kind of agility and speed when surfing the web.

They want their user experience not to be hampered so they can effortlessly receive the information they were looking for.

The importance of website loading time

Nowadays, users do not have patience with websites with low loading speed or inadequate performance.

In a study conducted by Akamai, approximately half of web users expect a site to load in 2 seconds or less. If it does not load in 3 seconds, those users tend to leave the site. You need a professional web developer to overcome this.

An even more alarming statistic is that 64% of buyers who are not satisfied with the experience and loading time of an online store will take their business elsewhere.

This means that not only are you losing your current visitors and decreasing conversion rates, but you run the risk of your site losing traffic from those customers who may have referred your website to others.

On this day, the seconds make the difference. You can no longer allow your website to get stuck with non-optimized images and files. Your users expect your web pages to load fast, and they will not stay if they do not.

With this in mind, let's look at ways to optimize your website to get the best possible performance.

Minimize HTTP requests

HTTP (Hypertext Transfer Protocol) requests are counted each time a browser retrieves a file, page or image from a web server.

According to Yahoo, these requests tend to occupy approximately 80% of the loading time of a web page. The browser also limits requests between 4-8 simultaneous connections per domain, which means that loading more than 30 assets at once is not an option.

This means that the more HTTP requests you need to load, the longer it will take the page to recover them, which will increase the load time of your web page.

How to decrease HTTP requests

While it seems that it limits the layouts of your pages keeping them simple, there are several tactics that you can use to decrease HTTP requests to alleviate your browser.

Combination of CSS / JS files: instead of forcing the browser to retrieve several CSS or JavaScript files to load, try combining your CSS files into a larger file (same for JS). While this can be a challenge if your style sheets and scripts vary from one page to another, the management to merge them will ultimately help long-term load times.

Use the queries to load only what is needed. If you discover that you only need to upload certain images to the desktop or need to run a specific script only on mobile devices, using conditional statements to load them can be an excellent way to increase speed. In this way, it is not forcing the browser to load a variety of scripts or images that will not be useful for certain devices or views.

Reduce the number of images you use: if you find that some of your pages have enough images, try deleting some, especially if the size of your files is large. Not only can this help reduce HTTP requests for images, but it can also improve your UX by eliminating distracting images that do not correspond to your written content.

CSS sprites: when appropriate, the combination of images that you use quite often on your website in a sprite sheet and access to images using the CSS background image and the position of the background prevents your browser from constantly trying to recover several images every time certain pages of your site are loaded. In this way, the browser only retrieves the one that can be used several times on the page by correctly placing the correct image for each area of ​​the page.

2. Use CDNs and delete unused scripts / files

Most likely, many of your users are not near your web server.

Reducing this distance by distributing your content on a variety of geographically dispersed servers is not a viable option, and will be a bit too complicated to implement.

This is where a content delivery network (CDN) comes into play. A CDN is a collection of web servers distributed in multiple locations so that the content can be delivered more efficiently to users. CDNs are typically used for static content or files that must be touched once they are loaded.

The servers are selected according to the proximity measure of the user's network. For example, the server is chosen with the fastest response time and / or the least number of network hops.

Larger companies tend to own their own CDN, while medium-sized companies will use a CDN provider such as Edge Cast.

Smaller companies may find a CDN unnecessary or out of your budget, so the use of websites like CNDjs that have a library of JS and CSS files and frames can help you avoid hosting certain files on your own servers at time that increases its loading time.

If you find that your company's website could benefit from the use of CDN, take the time to also evaluate your site to recognize if there are scripts or CSS files not used on your site.

While the easiest (though slowest) is for your developer to go through your website and review each page, there are some tools like UnCSS that can remove unused styles from your website and decrease the size of your CSS file.

3. Browser cache

Browser caching allows assets on your website to be downloaded to your hard drive once in a cache, or in a temporary storage space. Those files are now stored locally on your system, which allows you to increase the speed of subsequent pages.

Tenni Theurer, formerly at Yahoo!, explains that 40-60% of daily visitors to your site come with an empty cache. Therefore, when users visit, you must do so that the first page they see loads fast enough to inevitably continue with the rest of your website (with even faster loading times).

Static assets have a shelf life of at least a week, while third-party items, such as widgets or ads, only last for a day.

CSS, JS, and images, and media files must have a week's expiration, but ideally, a year, as the RFC violet guidelines will already do.

You can get more information on how to enable caching here.

4. Compress images and optimize files

The images currently occupy 60% of the average number of bytes loaded per page, around 1504 KB. When compared to other page resources such as scripts (399KB), CSS (45KB) and video (294KB), the images occupy a large number of HTTP requests sent.

As I mentioned earlier, remove any image of assets that you think you do not need. This includes icon libraries that only use two of those three additional sources that you thought you could use but did not use, and images that might be replicated with CSS (such as colored backgrounds or gradients)

Once you have removed those assets, look at the images you have on your site and see their sizes. Most of the time, many people tend to download images from photo archive sites and upload them to their server and use them without bothering to optimize them for the web.

If you use large images, especially for hero images, run them through optimization software such as Compressor.io or Image Optimizer. Keep all your images below 150 KB, no more than 1920 pixels wide, at an average / average quality level / 72 dpi. If it is larger, you will notice that the images load very late after the page is displayed, as well as the slow response times to the user's behavior.

When it comes to what file extensions you should use for what, use this as a basic formula:

·         SVG is suitable for vector images where you want to receive a lot of details.

·         Certain icons can use font libraries such as Font Awesome to render certain graphics instead of saving individual images.

·         PNG should be used for the images you need behind a transparent background, such as a circular image of a person or the "F" logo of Facebook.

·         JPG is better for photographs or anything where fine details are less important.

While the images will continue to occupy most of your HTTP requests, optimizing them and your other assets will ultimately maintain the size of the images and increase the performance general overview of your website.