Acceleration of website loading time

  • Home>
  • Blog>
  • Acceleration of website loading time

A slow website is a problem that worsens your audience's perception of you, negatively affects site traffic and conversion. The worst thing is the desire to close the slow website as soon as possible and return to the search results to your competitors.

There are reasons for this problem and there are solutions. Today I will talk about how to speed up the loading of your site.

Why is the site loading slowly?

Usually, several reasons at once significantly slow down the site. I will list the most common ones:

  • selection of CMS (site management system),
  • a lot of extra files (js, css, and so on) used in the site template,
  • incorrect server settings,
  • unoptimized images and fonts.

The combination of such errors leads to sad results: a lot of requests, a large page size, extremely long page loading. The site does not necessarily have to have a lot of images and a lot of functionality. Even the pages of the simplest website can load for 10 seconds.

The site is loading slowly

Yandex and Google recommended that the average page load time of your website was less than 3 seconds. This is quite an achievable figure for almost any site.

It is important to remember that the content itself on the pages, its quality and quantity are a higher priority item than the loading speed of the site. That is, there is no need to optimize the download speed to the detriment of the content of the site pages.

In addition to the displayed content, there is also an internal part of the site. I want to work with a convenient site management system that allows you to quickly make improvements and implement new functionality.

Fastest site

The fastest website is a single html file, without a CMS, inside which there is nothing but text. But such a site will most likely not bring you sales. Conclusion: we need to find a compromise option that will allow the site to load quickly without compromising content and functionality.

CMS impact on site loading speed

The two most popular CMS systems in Russia by default have certain problems with optimizing the download speed. I'm talking about Wordpress and 1C Bitrix. The developers want to introduce more functionality into the initial delivery package. The problem is that 99% of the time you won't use it.

As a result, it turns out that a dozen extra files are loaded in vain. Naturally, this negatively affects the speed. Below is an example of such an outrage.

Lots of extra 1C Bitrix files

Everything superfluous needs to be found and neutralized (disabled). Any programmer will be able to do this, since there is nothing complicated about it.

Unfortunately, if we are talking about 1C Bitrix, then the problem is not only in the extra files, but also in the general slowness of the engine of this CMS. In general, I do not recommend using 1C Bitrix. A paid CMS that brings with it a lot of problems that are not present in free CMS is nonsense.

But the problem with a lot of extra files can occur on any CMS system. It will simply be created by your hired programmers, and not by 1C Bitrix developers. I propose to consider in more detail the ways to solve this problem.

Optimization of the number of requests to the server

Negatively affects the loading speed of the site not only the size of the files, but also their number. 1 uploaded file = 1 request to the server where your site is stored. Unfortunately, it is impossible to make 200 requests at the same time to download 200 files that make up the page of your site.

Request queue when loading page

Therefore, we disable unnecessary files, and combine the necessary ones. For example, it is enough to simply combine the ccs files that are responsible for the appearance of your site into one. It is advisable not just to combine them, but to compress their contents. You can do this using plugins for CMS or online services, for example, CSS Compressor.

CSS compression

The situation is similar with javascript files. But there are several features. If possible, we transfer their loading to the end of the page code. We use asynchronous loading (we add async to the connection string of the script). You can compress and merge js files as well as css files.

It is important to load scripts only on the pages where they are used. For example, if a complex calculator for calculating the cost of delivery is used only on one page, then you do not need to download js files on the other twenty that are responsible for its functionality.

As a result, you can do without downloading a couple of compressed files instead of 20, which will greatly speed up the loading of the site pages.

Optimized site

Switching to the HTTP/2 protocol smooths the situation with the number of requests, but not all virtual hosting services support it. You will also need to purchase an SSL certificate to switch from HTTP/1.1 to HTTP/2.

Optimal server settings

First, you need to enable Gzip file compression. Usually, it's just a tick in the hosting settings. The picture weighed 50 kb, and it will weigh 40 kb. Everything is simple. However, I still come across sites where compression is not used.

Secondly, we use caching of static files. For example, the content of the header and footer of the site is repeated on all pages. Why download it every time if you can download one and save it on the visitor's computer. Subsequent downloads will be from there - this will significantly reduce the loading time of the second and subsequent pages of the site.

Images, css and js files are most often cached. File types, as well as the time that these files are stored in the cache, can also be configured. Usually, files are cached for a period from a week to a month.

The level of complexity of configuring file caching is similar to enabling Gzip compression. Below is an example of a hosting setup Locum.ru.

Enabling Gzip compression and file caching

Image optimization

There are a lot of pictures, photos and illustrations on any modern website. They are of different formats, of different sizes. Some are found only on 1 page, some on every page in the site header or footer. Images can and should be optimized.

Images must be uploaded in the resolution in which they are displayed on the site. Sometimes you can see a tiny logo that turns out to be a PNG file of 2000x500 pixels, 1 megabyte in size. 1 megabyte is the size of all the files of one full-fledged web page. This logo should weigh 50 times less.

After resolving the images, you should think about compressing them. There is a simple solution: you can compress as long as the quality of the compressed image suits you. No need to overdo it - blurry images will also have a bad effect on conversion, like slow loading. I can recommend a free service tinyjpg.com.

Image compression

If you want to move to the next stage of image compression efficiency, then I present you a modern format from Google - Webp. According to my estimates, it is about 30-40% more efficient than JPEG. When we are talking about a dozen images, but we can talk about additional savings of hundreds of kilobytes.

But there is a small problem. All modern browsers support this format. Except...Safari. Alas, Apple also acts as a lagging company here.

To be sure that your picture is accurately displayed in all browsers, I recommend using the picture tag. This design will allow the browser to choose the format that it supports. Below is an example of such a construction:

<picture>

<source type="image/webp" srcset="assets/images/rocket.webp">

<source type="image/png" srcset="assets/images/rocket.png">

<img src="assets/images/rocket.webp" alt="Example" width="60" height="60">

</picture>

Also a good way to speed up page loads is to combine multiple images into one. And such an image is called a Sprite. First of all, it is worth combining all the icons that are used in the site header and footer into sprites.

After combining the icons into sprites, you need to update the site code. Now you will need to specify not the link to the icon, but the coordinates of this icon inside the sprite. In fact, the transition to sprites is quite simple. There are many services, for example, CSS Sprites Generator.

You upload your images, and the service combines them and gives you ready-made css properties in order to use them on the site.

Combining images into a sprite

Font loading optimization

Fonts take up less space than images. And the number of downloaded files is difficult to compare. However, you can save 5-10 requests and a couple of hundred kilobytes if you download exactly the fonts and symbols that you use.

Sounds logical enough, yes. Is it really different? Sure. For example, the popular service Google Fonts by default gives a link to connect not only the Cyrillic font, but in general all. That is, it turns out that you use about 100 characters, and 3000 are loaded.

Connecting fonts using Google Fonts

Be sure to first select the font varieties that you need. For example, regular + bold. We also indicate that we want to use only Latin and Cyrillic. Such simple one-time actions will reduce the number of downloaded files.

Google Fonts font optimization

But you can further reduce the font size if you select the specific characters that we want to load. The Cyrillic alphabet is not just letters from A to Z. Look at such a symbol. Do you use it on your website? And it loads together with the usual letters by default. There are dozens of such symbols.

Cyrillic Google Fonts

To select specific characters, you need links to specific font files. Google provides fonts in the WOFF2 format. A link to the files can be obtained by simply inserting the code that Google gives to connect the font into the browser's address bar.

Select the necessary files, select the necessary characters. Ranges of specific characters can be selected using the service unicode-table.com. Below is an example of connecting fonts on the current site dergunov.com.

@font-face {font-family:'Roboto';font-style:normal;font-weight:400;font-display:auto;

src:local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v19/KFOmCnqEu92Fr1Mu5mxKOzY.woff2) format('woff2');

unicode-range: U+0020-007F,U+0410-044F,U+0401,U+0451,U+2116}

@font-face {font-family:'Roboto';font-style normal;font-weight:700;font-display:auto;

src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v19/KFOlCnqEu92Fr1MmWUlfABc4EsA.woff2) format('woff2');

unicode-range: U+0020-007F,U+0410-044F,U+0401,U+0451,U+2116}

@font-face {font-family:'Roboto';font-style:normal;font-weight:700;font-display:auto;

src:local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v19/KFOlCnqEu92Fr1MmWUlfBBc4.woff2) format('woff2');

unicode-range: U+0020-007F}

How to check the site loading speed?

I recommend a free service GT Metrix, where you can see recommendations for speed optimization, file upload queue and much more. Separately, I note that the history of checks is preserved. This allows you to immediately see the results, dynamics, and graphs in the process of work.

Load speed optimization using GT Metrix

The only parameter that you should not pay attention to in GT Metrix is the download speed in seconds. The fact is that GT Metrix checks this speed by downloading your site from its server in London. This speed is very theoretical.

And the actual page loading speed can be viewed in Yandex.Metrica: Reports ->Monitoring -> Page loading time. We remove all the ticks at the bottom and put only one "Total and average". And in the table itself, I recommend 3 of the most interesting reports: the time before rendering (how long your visitors are waiting for at least some information to appear on the screen), the time before loading the DOM (roughly speaking, the full page loading time) and the server response (good hosting and sites have it within 0.2 seconds).

I'll show you an example of optimizing the site loading speed perevozki33.ru . I have completed all the above works and the average loading time has decreased from 6 to 3.5 seconds.

Order optimization of site loading speed

Do you want to have a fast website? Write a@dergunov.com, I will be glad to help you.

Author: Aleksandr Dergunov
Published: 4/8/2019