1 – Optimize images
The images are particularly bandwidth intensive. To optimize them, start by resizing them.
Many webmasters are content to define the display size of images in CSS declarations, requiring the browser to download the original image. Thus, if an image measuring 1000 x 1000 pixels is displayed in the format 100 x 100 pixels, the browser is forced to download an image ten times heavier than necessary.
Another way to optimize images is to compress them. Several free tools, such as tinypng, allow you to reduce the size of a file while preserving acceptable quality, for a compression rate ranging from 25 to 80%.
2 – Use caching
Why force visitors to download the same images each time the page is loaded? The storage time depends on both the browser settings and those of your server.
Enabling browser caching allows temporary storage of data on the visitor’s computer, in order to reduce loading time on their next visit.
3 – Activate compression
Enabling compression is equivalent to archiving your website in a .zip folder. This feature makes it possible to significantly reduce the size of a web page, and therefore to speed up its loading.
The compression rate of HTML and CSS files can reach 50 to 70%, as much less data to download for the visitor. Compression must be configured on the server, and therefore depends on your host.
4 – Optimize CSS files
CSS declarations are loaded before a page is displayed. The longer the download, the longer visitors wait. Optimizing CSS files therefore allows faster access to your pages.
This type of detail quickly accumulates and interferes with the performance of a website. So examine your CSS style sheets to remove unnecessary declarations, and then when unnecessary declarations are removed, reduce the size of the CSS files. This operation consists in eliminating the superfluous spaces in order to lighten the file as much as possible. How to proceed? First check if your CMS has a CSS optimization feature, and if it is activated.
5 – Place the scripts below the waterline
Another way to control the loading of scripts is to associate defer or async attributes with .js files embedded in your website.
These tags each have their use, which is important to distinguish.
The async tags allow the simultaneous loading of the page and the scripts, but the latter are loaded out of order. Typically, the lightest files are loaded first. For some scripts, this option can be disastrous.
The defer attribute delays the loading of scripts until all of the content has been loaded. The scripts are then loaded in order. Just check that this deferred loading does not interfere with the functioning of the page.
To use these attributes, simply add them to the tags as follows:
Choose an attribute based on the relative importance of each script. The async attribute is suitable for priority scripts, which must be loaded quickly without hindering access to the content. The loading of secondary scripts can be delayed in order to speed up the display of the page. However, be sure to test each script to avoid any malfunction.