Everything comes at the right time for those who know how to wait, except on the web where Internet users rarely show patience. When it comes to pageviews, customer satisfaction, and conversion rates, just one second can make a huge difference. In addition, the loading speed of a website has an impact on its position in natural searches, especially from Core Web Vitals of Google, one more reason to seek to accelerate it.
> Evaluate your website for free and find out how to improve it with Website Grader.” align=”middle”/>
Why is speeding up your website essential?
The performance of a website in terms of loading speed is closely linked to its performance in marketing terms. Indeed, according to Kissmetrics, we see that 40% of people abandon a website that takes more than 3 seconds to load and that 1 second of additional loading reduces the conversion rate by 7%. In relation to total traffic or overall turnover, these few percentages can represent huge gains if corrected.
Some recent CMSs, like the CMS Hub, have built-in acceleration features and thus offer excellent performance by default. But other systems, like WordPress, require performance customization and lots of fixes to deliver reduced load times.
So, to verify that a site loads fast enough, there are tools to test the speed and get detailed optimization tips. You just need to follow them to speed up your website and significantly improve its results.
10 tips to reduce the load of a web page
- Choose a good web host
- Optimize images
- Set up the lazy load
- Use caching
- Enable compression
- Optimize CSS files
- Place scripts below the waterline
- Reduce the number of plugins and widgets
- Set up a CDN
1 – Choose a good web host
The choice of host is of major importance to speed up your website since not all of them offer the same performance, nor the same prices for that matter. First of all, you have to choose the type of hosting between dedicated server and shared server. The first will offer better performance since only the customer’s site will be on it but its cost will be significantly higher. Conversely, a shared server will be shared between several websites for a much more affordable price. In this case, it is then important to ensure that the bandwidth is not restricted because, if one of the sites hosted on the shared server consumes the majority of it, the other sites will then have few resources and could experience significant delays.
Then you have to look at the technical dimension of these servers, if you have the required knowledge. Indeed, all technologies do not offer the same performance such as, for example, SSD storage, which is much faster than HDD storage. Likewise, some hosts have specialized in hosting certain CMS, especially WordPress which represents 44% of all CMS used. Finally, it is often wise to choose a host whose servers are located in the country of the visitors targeted by the site, or nearby. For example, a fashion site targeting a French audience will benefit from being hosted in France since the data will therefore have less distance to cover between the server and the Internet user’s computer. Its display times will then be much faster.
2 – Optimize images
Images are particularly bandwidth-hungry and it is therefore important to seek to optimize them. To do this, you have to follow various steps, the first of which is to resize them. Indeed, 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 larger than necessary. So, to save visitors’ bandwidth, you need to resize the images before uploading them to your website. For example, we can see the size difference between these two files after resizing the image:
The second step in optimizing images is to compress them. Several free tools, such as tinypng.com, allow you to reduce the size of a file while preserving an acceptable quality, for a compression rate ranging from 25 to 80%.
3 – Set up the lazy load
the lazy load is a technology that consists of delaying the downloading of media until it appears on the user’s screen. For example, a site equipped with lazy load will not display an image or a video until the user has scrolled to the page level where it is located. Thus, unused resources are not initially required and significantly reduce the weight of the data to be downloaded to display the site when it is opened.
4 – use caching
Why force visitors to download the same images each time the page loads? The duration of storage depends on both browser and server settings. Thus, activating the caching of the browser allows the temporary storage of data on the visitor’s computer, with the aim of reducing the loading time during his next visit.
5 – Activate compression
Enabling compression is equivalent to archiving a 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. In fact, the compression rate of HTML and CSS files can reach 50 to 70% and it is therefore as much less data to download for the visitor when opening a page. Compression must be configured on the server and thus depends on the host that has been chosen because the options differ according to the technological choices of the latter.
6 – Optimize CSS files
CSS declarations are loaded before a page is displayed, and the longer it takes to download, the longer visitors wait. Optimizing CSS files therefore makes it possible to provide faster access to the pages of the site and to improve the user experience.
Since this type of detail can quickly accumulate and interfere with a website’s performance, you should look at CSS style sheets to remove superfluous declarations. Then, once the unnecessary declarations are removed, it comes down to reducing the size of the CSS files. This operation essentially consists of eliminating superfluous spaces in order to make the file as light as possible. To do this, you must first check if the CMS used has a CSS optimization feature, and if this is enabled. For example, HubSpot optimizes CSS files by default, but WordPress does not. If the CMS does not offer this option, it is possible to opt for a free online service like csscompressor.com. Just copy and paste the CSS declarations into the tool, then click “Compress” to get an optimized stylesheet.
8 – Place scripts below the waterline
On many sites, the scripts are at the top of the page, forcing visitors to wait. The simplest solution is to place these external files at the bottom of the page, just before the tag. Most of the content can then load before the scripts.
Another way to control the loading of scripts is to associate attributes of iron Where async js files integrated into the website.
These beacons each have their uses, which it is important to distinguish clearly.
- Tags async allow simultaneous loading of the page and scripts, but the latter are loaded out of order. Usually, smaller files are loaded first, but for some scripts this option can be disastrous.
- Attribute of iron delays loading scripts until all content has been loaded. The scripts are then loaded in order and it is necessary to check that this deferred loading does not hinder the functioning of the page.
To use these attributes, just add them to the tags as follows:
The choice of the attribute is made according to the relative importance of each script. Attribute async suitable for priority scripts, which need to be loaded quickly without obstructing access to content. The loading of secondary scripts can be delayed in order to speed up the display of the page. Of course, it is important to test each of the scripts to avoid any malfunction.
9 – Reduce the number of plugins and widgets
Some CMS, like WordPress, offer the addition of extensions (called plugins) and widgets to improve the functionality offered by a website. For example, contact forms are often generated by an extension, the most famous of which is Contact Form 7. Likewise, caching management can be handled by an extension, as can securing the site. But combined, all these plugins and widgets increase the load time of each page.
It is therefore important to choose them wisely and to regularly question the merits of their presence. Some may be just useless when others will be duplicated. To take the example of contact forms, it would be useless to have two extensions to manage them. Finally, CMS are constantly evolving and sometimes offer features hitherto supported by plugins Where widgets. This is particularly the case of lazy load which appeared on version 5.5 of WordPress, allowing to remove an extension.
10 – Configure a CDN
A CDN, for Content Delivery Network, is a content distribution network made up of numerous servers located in different places around the world. When a site uses a CDN, its content is duplicated on all of these servers. Thus, when an Internet user based in Bangkok consults the Forbes site, it is the version hosted in Asia that will be served rather than the one hosted in North America. The site loading time is thus greatly improved.
To go further, use this free tool to rate your website in seconds and get free advice on how to improve it.