How to speed up a site or factors affecting site loading
Purpose : To give basic concepts about the factors affecting the site loading speed. Parse each loading step. Give an understanding of acceleration methods by optimizing each load factor that can be affected.
I want to clarify right away that I will not give any configs and commands here, the article is intended to present the picture of the site’s load as a whole, and then, having found a problem place, a person can at least google in the right direction.
Target audience : site owners, web-studios, professionals and amateurs. I will try to write an article so that it is accessible to everyone.
The reason for writing the article lies in the fact that I noticed that many do not even understand the true reasons for the brakes of their sites and decided to write this article so that a person can read and understand what he is missing. A lot of factors affect the loading of a site, we can affect most of them; the rest we just need to consider.
We can buy a normal computer for the client and connect high-speed Internet to him and we will no longer experience problems with this factor (of course, I'm joking). Although I would definitely visit sites whose owners would update my computer and pay for the Internet. Besides jokes, what can we actually do if the client has weak Internet and a low-power device?
1. Locate your site in a data center, which is located in close proximity to potential customers of the site and make sure that it provides a fairly wide channel for the planned load. Simply put, choose a good hosting. Many underestimate the importance of this point, in vain underestimate.
2. The weaker the device, the longer it creates new connections to the server, which means we need to reduce the number of these connections. Often the site owner does not even imagine how hard his site is loading, and thinks that the problem of braking is clearly not due to the site, but simply that the customers have a slow Internet connection. It should be borne in mind that you, as the owner, are on your site more often than others and all the contents of the site have already been cached by the browser for a long time, which means that it is not loaded every time you click on the pages (unless of course you have configured static caching in the client’s browser) , but is taken from the cache. Accordingly, not only traffic is saved without loading your Internet channel each time, but no connections are created for downloading these files.
You can see the number of connections, loading steps and page weight in the browser developer tools. In Google Chrome, in order to open the developer’s tools, simply click on the page with any right button on the page, click “View Code” and go to the Network section there.
Downloading can be divided into several stages, each stage of loading the page of your site is important.
1. Server response time. The runtime of this download phase is commonly referred to as the “server response time”. Now I’ll tell you what happens during this time and how this time can be reduced if you have an extraordinary one and in general what server response time can be considered extraordinary.
We divide this gap into subclauses:
1.1 Sending a request by the client’s browser.
The speed of the Internet and the power of the client’s device, as well as the remoteness of the server on which your site is located from the client and its workload are factors that can affect this stage.
Further, until the server sends the finished page in response, it goes through several stages, and for each specific site the stages may differ. I will take an example php website with MySQL database.
1.2 The request is accepted by the web server, it finds the one that matches the request and processes the virtual host, in our example, the site is in php, so the web server will turn to php to generate the page, which in turn will fill the page data will go to the database. After the page is formed, it will be transferred by the web server to the client’s browser.
A very important role is played by caching at every stage, caching at the web server level, caching at the php level (opcache), query caching in the database (memcache), there may be other caching options, I have cited these as the most common. This is exactly the stage that you can influence, and this stage needs to be given time.
Here are ways to speed it up.
1.3 Sending the generated page to the client and the moment of receiving this page will be the final stage of this part of the page loading. Here, to reduce the amount of data sent, it is best to use gzip compression.
I want to make a correction, in my screenshot the server response for the Habr site is 3.48 s - this is a bad time, but Habr is essentially not to blame here. I have 3G internet of mediocre quality. Therefore, I recommend tracking this particular download stage using the service. I use the server response verification service from Yandex for this .
The HTTP status code must be 200.
The server response here is noticeably less than on my 3G Internet. Ideally, the server response time should tend to zero, but at least it should not exceed 200 ms, although this is my personal criterion. Although no, not only mine. If I'm not mistaken, Google PageSpeed also makes sure that the server response does not exceed 200 ms and, if the site exceeds the recommended time, it warns that it is necessary to shorten the server response.
Well, at the very bottom, we can see that the answer is compressed using gzip.
Habr passed the first stage of loading on the five (no, no, I do not suck at all).
Those whose sites have also passed these requirements can read further, but the rest should think about my recommendations and continue reading the article after you finish the first stage.
2. DOMContentLoaded- this is exactly what this stage of page loading is called in the developer’s tools, and if in a simple way, this is the very moment when the visual page loading is completed.
What is there to pay attention to?
2.1 Number of compounds - Habr has many of them, if you have many of them, you should consider reducing the number of these compounds. As I wrote above, the more connections, the more resources are required to open them, and this is a good load, especially on weak devices and, by the way, on the server itself as well.
How to reduce them? In http / 1.0 and http / 1.1 , a separate connection is created for each individual file, which means our task is to reduce the number of uploaded files on the page.
Here you can clearly see how fewer connections are created using http / 2
2.2. The weight of the page and the elements loaded from it.
And there is another recommendation that will help both reduce the number of connections and reduce the weight of the page and the content posted on it. This is a kind of panacea, though it requires certain skills in customization.
Module for PageSpeed web server. It is for nginx - ngx_pagespeed and for apache2 - mod_pagespeed. It is better to read more about what he can do in the official documentation, his settings are very flexible. I will only note that it is capable of performing concatenation on the fly, which will help reduce the number of connections, and it also perfectly compresses the content, reducing the weight of the page and its contents.
At this stage, I can put Habra solid 4 and then only for the lack of http / 2, although I would probably reduce the amount of loaded elements and make concatenation.
This stage of page loading should ideally not exceed 2-3 seconds (although there is no end to perfection and I have clients who want faster even with a download speed of less than 1 sec) . If you have more time, you should consider the recommendations I gave above.
3. Load- this is the moment when the browser wheel stopped spinning, that is, the page was fully loaded. This is a less critical download phase and it is often slowed down by third-party chats to communicate with customers on the site and other minor elements. If you follow the recommendations that I gave above, then this stage will also become faster. I would also like to note that if you do not have a highly loaded project and at the same time you have VPS, VDS or physical. server, try to get all the statics loaded only from your server. Placing statics on third-party sites and on CDN will only benefit at high loads, and for unloaded sites it will play only minus.
4. You can not look at this stage at all, since in essence the page is loaded and here the browser will always load something, communicating with the site.
5. With this number in the screenshot, I designated the place where the number of loaded items on the page and the weight of the page with all the elements are displayed. It should be borne in mind that if it is not a problem for a PC to download a 2.5 MB page, then for a mobile browser with weak 3G this becomes more problematic. In particular, I have 3G Internet and Habr it does not load me as fast as other sites. For mobile devices, ideally, the page should weigh less than 1 Mb. Here either reduce the size of all the content on the pages or make a mobile version.
Advantages of downloading content from:
Cons of downloading content from:
Now, even if you have not yet figured out the reasons for the brakes on your site, at least you know where to dig. I also want to note that a competently written site code and optimal layout will also speed up your site, but this is not my destiny - these points have already been sufficiently described on the Internet.
I hope this article has been informative for you.
I want to clarify right away that I will not give any configs and commands here, the article is intended to present the picture of the site’s load as a whole, and then, having found a problem place, a person can at least google in the right direction.
Target audience : site owners, web-studios, professionals and amateurs. I will try to write an article so that it is accessible to everyone.
The reason for writing the article lies in the fact that I noticed that many do not even understand the true reasons for the brakes of their sites and decided to write this article so that a person can read and understand what he is missing. A lot of factors affect the loading of a site, we can affect most of them; the rest we just need to consider.
Power and quality of the client’s device, as well as the speed of its Internet and distance from the server’s location
We can buy a normal computer for the client and connect high-speed Internet to him and we will no longer experience problems with this factor (of course, I'm joking). Although I would definitely visit sites whose owners would update my computer and pay for the Internet. Besides jokes, what can we actually do if the client has weak Internet and a low-power device?
1. Locate your site in a data center, which is located in close proximity to potential customers of the site and make sure that it provides a fairly wide channel for the planned load. Simply put, choose a good hosting. Many underestimate the importance of this point, in vain underestimate.
2. The weaker the device, the longer it creates new connections to the server, which means we need to reduce the number of these connections. Often the site owner does not even imagine how hard his site is loading, and thinks that the problem of braking is clearly not due to the site, but simply that the customers have a slow Internet connection. It should be borne in mind that you, as the owner, are on your site more often than others and all the contents of the site have already been cached by the browser for a long time, which means that it is not loaded every time you click on the pages (unless of course you have configured static caching in the client’s browser) , but is taken from the cache. Accordingly, not only traffic is saved without loading your Internet channel each time, but no connections are created for downloading these files.
You can see the number of connections, loading steps and page weight in the browser developer tools. In Google Chrome, in order to open the developer’s tools, simply click on the page with any right button on the page, click “View Code” and go to the Network section there.
Downloading can be divided into several stages, each stage of loading the page of your site is important.
1. Server response time. The runtime of this download phase is commonly referred to as the “server response time”. Now I’ll tell you what happens during this time and how this time can be reduced if you have an extraordinary one and in general what server response time can be considered extraordinary.
We divide this gap into subclauses:
1.1 Sending a request by the client’s browser.
The speed of the Internet and the power of the client’s device, as well as the remoteness of the server on which your site is located from the client and its workload are factors that can affect this stage.
Further, until the server sends the finished page in response, it goes through several stages, and for each specific site the stages may differ. I will take an example php website with MySQL database.
1.2 The request is accepted by the web server, it finds the one that matches the request and processes the virtual host, in our example, the site is in php, so the web server will turn to php to generate the page, which in turn will fill the page data will go to the database. After the page is formed, it will be transferred by the web server to the client’s browser.
A very important role is played by caching at every stage, caching at the web server level, caching at the php level (opcache), query caching in the database (memcache), there may be other caching options, I have cited these as the most common. This is exactly the stage that you can influence, and this stage needs to be given time.
Here are ways to speed it up.
- Choose a fast hosting or even better VPS, VDS or even a physical server. If you are not competent in this choice, it is better to ask for help from a specialist or ask for recommendations from friends who already use one or another host. Pay attention to where the host’s data center is located: ideal if it will be located in the immediate vicinity of your potential customers. I personally use foreign servers, if only DDOS attacks are carried out on the site, Russian hosters provide protection against low-quality DDOS, and here you have to put up with pings and delay.
- Proper server configuration will help speed up the response from it. Here, the choice of faster software and its proper configuration play a role. For the web server I use Nginx, where possible I use hhvm together with php 7.1, the choice of php version, as well as hhvm for the most part also depends on the code of your site: if the site uses outdated functions, you will either have to update it or be content with older versions that have not so high performance. Well, use MariaBD or even Persona as a database if you have a larger project. Also, do not forget about protection: anti-brutes, filters from typical attacks, http-authorization as an additional authorization on all admin panels, anti-spam, antiviruses and more.
1.3 Sending the generated page to the client and the moment of receiving this page will be the final stage of this part of the page loading. Here, to reduce the amount of data sent, it is best to use gzip compression.
I want to make a correction, in my screenshot the server response for the Habr site is 3.48 s - this is a bad time, but Habr is essentially not to blame here. I have 3G internet of mediocre quality. Therefore, I recommend tracking this particular download stage using the service. I use the server response verification service from Yandex for this .
The HTTP status code must be 200.
The server response here is noticeably less than on my 3G Internet. Ideally, the server response time should tend to zero, but at least it should not exceed 200 ms, although this is my personal criterion. Although no, not only mine. If I'm not mistaken, Google PageSpeed also makes sure that the server response does not exceed 200 ms and, if the site exceeds the recommended time, it warns that it is necessary to shorten the server response.
Well, at the very bottom, we can see that the answer is compressed using gzip.
Habr passed the first stage of loading on the five (no, no, I do not suck at all).
Those whose sites have also passed these requirements can read further, but the rest should think about my recommendations and continue reading the article after you finish the first stage.
2. DOMContentLoaded- this is exactly what this stage of page loading is called in the developer’s tools, and if in a simple way, this is the very moment when the visual page loading is completed.
What is there to pay attention to?
2.1 Number of compounds - Habr has many of them, if you have many of them, you should consider reducing the number of these compounds. As I wrote above, the more connections, the more resources are required to open them, and this is a good load, especially on weak devices and, by the way, on the server itself as well.
How to reduce them? In http / 1.0 and http / 1.1 , a separate connection is created for each individual file, which means our task is to reduce the number of uploaded files on the page.
- Combine all css into one file and all js into one file, this procedure is called concatenation.
- Place small pictures in encoded form directly in css or in the body of the page so that separate connections are not created for them.
- It is possible to get rid of the loading of some unnecessary elements, and if possible delay the loading of js or put them at the end, or at least make their loading asynchronous. CSS, by the way, would be nice to optimize.
- If you postpone loading css, then the page when surfing the site will blink - in my opinion, this is unacceptable, but we can download the css necessary to display the top of the site at the beginning, and the rest later. It’s better to consult a layout designer, I’m not one, so don’t take these recommendations literally.
- Go to http / 2 , this version of the protocol allows you to load all elements into one stream without creating unnecessary connections. And the most ingenious ones have already thought, so why then follow the first two recommendations if you can just switch to http / 2 , now I’ll explain. At the moment, http / 2 is not yet supported by all devices, so some clients will continue to use the site on previous versions of the protocol, so this recommendation will help to speed up the page loading for fresh devices with the latest browser versions.
Here you can clearly see how fewer connections are created using http / 2
2.2. The weight of the page and the elements loaded from it.
- Remove unnecessary comments in the code.
- Use compression.
- Optimize website content, compress and combine css and js, compress images, etc.
And there is another recommendation that will help both reduce the number of connections and reduce the weight of the page and the content posted on it. This is a kind of panacea, though it requires certain skills in customization.
Module for PageSpeed web server. It is for nginx - ngx_pagespeed and for apache2 - mod_pagespeed. It is better to read more about what he can do in the official documentation, his settings are very flexible. I will only note that it is capable of performing concatenation on the fly, which will help reduce the number of connections, and it also perfectly compresses the content, reducing the weight of the page and its contents.
At this stage, I can put Habra solid 4 and then only for the lack of http / 2, although I would probably reduce the amount of loaded elements and make concatenation.
This stage of page loading should ideally not exceed 2-3 seconds (although there is no end to perfection and I have clients who want faster even with a download speed of less than 1 sec) . If you have more time, you should consider the recommendations I gave above.
3. Load- this is the moment when the browser wheel stopped spinning, that is, the page was fully loaded. This is a less critical download phase and it is often slowed down by third-party chats to communicate with customers on the site and other minor elements. If you follow the recommendations that I gave above, then this stage will also become faster. I would also like to note that if you do not have a highly loaded project and at the same time you have VPS, VDS or physical. server, try to get all the statics loaded only from your server. Placing statics on third-party sites and on CDN will only benefit at high loads, and for unloaded sites it will play only minus.
4. You can not look at this stage at all, since in essence the page is loaded and here the browser will always load something, communicating with the site.
5. With this number in the screenshot, I designated the place where the number of loaded items on the page and the weight of the page with all the elements are displayed. It should be borne in mind that if it is not a problem for a PC to download a 2.5 MB page, then for a mobile browser with weak 3G this becomes more problematic. In particular, I have 3G Internet and Habr it does not load me as fast as other sites. For mobile devices, ideally, the page should weigh less than 1 Mb. Here either reduce the size of all the content on the pages or make a mobile version.
PS
Advantages of downloading content from:
- Reduce the load on your server.
- The same static data, namely css, js, pictures and fonts could already have been downloaded earlier while viewing other sites that also use this statics and they will be loaded from the browser cache.
Cons of downloading content from:
- Often, public CDNs and sites that store fonts, pictures, css and js have a high load, because hundreds, or even thousands of sites with different levels of traffic use them, in the end it turns out that giving back is sometimes faster than saving the load .
- If you use http2 to reduce the number of connections, third-party sites will only add them to you.
Now, even if you have not yet figured out the reasons for the brakes on your site, at least you know where to dig. I also want to note that a competently written site code and optimal layout will also speed up your site, but this is not my destiny - these points have already been sufficiently described on the Internet.
I hope this article has been informative for you.