How to speed up the loading of web pages to save visitors who are not used to waiting.
Introductory Facts
First of all, download speed affects behavioral factors: viewing depth and number of failures. Fast sites have a higher conversion rate. The success of search promotion is also indirectly dependent on speed: ceteris paribus, Google takes into account the page load time.
- Google engineers found that the user notices even a trifle download delay of 0.4 seconds;
- The user is likely to leave the page if it loads 3+ seconds;
- Mobile users are ready to wait a little longer – 6-10 seconds;
- 79% of users of online stores will not make a second purchase if the site was loaded for the first time for a long time.
Financial Times Experiment
Representatives of a business newspaper conducted an experiment with a new publication site.
The participants were divided into two groups. The first, control, looked through pages with usual loading speed, and the second – with a delay of five seconds. In the second stage, four groups took part: the control and three more, whose participants “got” a delay of one, two and three seconds. The viewing depth during the session was taken as the conversion rate (examined users who visited at least two pages) and calculated the difference between the converted users in each group.
When you visit two pages, the difference between the graphs is not striking, but when you visit three or more pages, a gradual decrease in all loading delay options is noticeable – and the larger the viewing depth, the greater the difference. At the lowest speeds, with a delay of three and five seconds, the conversion rate was 7.5% and 11% lower compared to the control group.
The longer the download delay, the less pages are viewed per session. The result of the study shows how important download speed is for user engagement and, ultimately, conversion.
Download speed can be measured using these services:
How to increase website loading speed
1. Reduce page load
Use gzip compression, this will reduce file transfer time to the browser. The volume of transmitted data will decrease by 4-5 times, and the download speed will increase.
2. Reduce the amount of graphics
Delete unnecessary images. Where possible, use text instead of obviously heavier graphics.
The jpg format is best for photographs. PNG is preferable for other elements of the site – icons, illustrations, etc., provided that the images are correctly compressed. Keep in mind that the site will be viewed on different devices and in different browsers.
You can use one scalable image, but it will take up a lot of space and slow down page loading. It’s better to use several images adapted for different devices so that the browser loads the right one – this can be done using the Imager plugin. It replaces placeholders with transparent images, pulls the src attribute to each and assigns the desired size, after which you just have to download several image options of different sizes.
3. Reduce the number of browser requests
This item echoes the previous one. One way to reduce the number of browser requests is to remove some of the elements from the page.
Use CSS sprites – image files containing multiple images at once. This is the best way if the site has a lot of small images and icons. Combine several CSS and JS files into one, this will reduce the number of HTTP requests.
To see the number of browser requests in Chrome, go to the “Developer Tools” (Settings → Advanced Tools) and go to the Network tab.
4. Enable data caching
Configure the server so that the user’s browser caches data – in this case, when you first visit the site, some page elements (images, CSS and JS files) will be saved automatically. Next time, the browser does not waste time downloading them.
However, this method helps to increase the download speed only on repeated visits to the site.
How to enable caching?
Use the headers module of the Apache web server, which monitors and modifies the headers of HTTP requests and HTTP responses. The browser loads data from the server into the local cache, which rarely changes, and when you visit the site, it loads it from the cache. You can also cache files of certain types for a specified time, after which they will be downloaded from the server again.
5. Reduce CSS and JavaScript code size
Special services to simplify JavaScript and CSS remove “extra” characters (spaces, comments) from the code and reduce its loading time. To increase speed, they can be more effective than standard gzip compression. Google recommends that small .ss files be pasted directly into an HTML document.
You can use these services:
Place CSS files at the top of the page, and JS files at the end.
If the CSS files are located in the header, the page is rendered gradually, which creates a positive impression of the site. Placing JS files at the bottom of the page allows the browser to first load the content of the page, and only then deal with the scripts.
Successful customization!