How to speed up website or factors affecting the loading of the site

Started by Bravoman1, Jul 31, 2022, 11:31 AM

Previous topic - Next topic

Bravoman1Topic starter


Purpose: To give a basic understanding of the factors that affect the speed of loading a website. Analyze each stage of the download. Give an idea of how to speed up by optimizing each load aspect that can be influenced.



I want to clarify right away that I will not give any configs and commands here, the article is intended to present a picture of the loading of the site as a whole, and then, having found a problematic place, a person will be able to at least google in the right direction.

Target audience: website owners, web-studios, specialists and amateurs. I will try to write the article in such a way 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 on 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 the website, most of them we can influence; the rest we just need to consider.

The power and quality of the client device, as well as the speed of its Internet and the distance from the server location

We can buy a normal computer for a client and connect him to high-speed Internet and we will no longer experience issues with this aspect (of course, I'm joking). Although I would definitely visit sites more frequently, the owners of which would update my computer and pay for the Internet. Jokes aside, what can we actually do if a client has poor internet and a low power device?


1. Locate your site in a data center that is in close proximity to potential website customers and make sure that it provides a wide enough channel for the planned load. Simply put, choose a good hosting. Many underestimate the importance of this item, in vain underestimate.

2. The weaker the device, the longer it takes to create new connections to the server, which means we need to reduce the number of these connections. Often, the site owner has no idea how hard his website is loading, and thinks that slowdown problems are clearly not due to the site, but simply because the clients have slow Internet.
It should be taken into account that you, as the owner, are on your site more frequently than others, and all the contents of the website has long been cached by the browser, which means that it is not loaded every time you navigate through the pages (unless, of course, you have static caching configured in the client browser), but is taken from the cache. Accordingly, not only traffic is saved by not loading your Internet channel every time, but connections are not created to download these files.

You can see the number of connections, loading stages and page weight in the browser developer tools. In Google Chrome, in order to open the developer tools, it is enough to right-click anywhere on the page, click "View Code" and go to the Network section there.


Loading can be divided into several stages, each stage of loading a page of your website is important.

1. Server response time. The time it takes to complete this download step is commonly referred to as "server response time". Now I'll tell you what happens during this time and how this time can be reduced if it is prohibitive for you, and in general, what server response time is considered prohibitive.

Let's break this down into subsections:

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 aspects that can affect this stage.

Further, until the server sends the finished page in response, several stages go through, and for each specific site, the stages may differ. I will take as an example a php website with a MySQL database.

1.2 The request is received by the web server, it finds in the list of virtual hosts the one that matches the request and processes the virtual host, in our example the site is in php, which means the web server will contact php to generate the page, which in turn will fill the page the data will be sent to the database. After the page is generated, it will be transferred by the web server to the client browser.

Caching at each stage plays a very important role, caching at the web server level, caching at the php level (opcache), caching of queries in the database (memcache), there may be other caching options, I cited these as the most common. This is just the stage that you can influence and this stage needs to be given time.


Here are ways to speed it up.

    Choose fast hosting or even better VPS, VDS or even a physical server. If you are not competent in such a choice, it is better to ask for help from a specialist or ask for recommendations from friends who already use certain hosters. Pay attention to where the hoster's data center is located: ideally, if it is located in close proximity to your potential clients. I personally use foreign servers, if only the website is being DDOS-attacked, some hosts provide low-quality DDOS protection, and here I already have to put up with pings and delays.

    Proper server configuration will help speed up the response from it. Here the choice of more nimble software and its correct configuration play a role. For the web server, I use Nginx, where I use hhvm with php 7.1 whenever possible, the choice of php version, as well as hhvm, for the most part also depends on the code of your website: if the site uses deprecated functions, then you 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 against typical attacks, http-authorization as an additional authorization on all admin panels, anti-spam, anti-virus, etc.


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, on my screen the server response for the dnray site is 3.48 s - this is a bad time, but DNray is essentially not to blame here. I have 3G internet of mediocre quality. Therefore, I recommend tracking this particular stage of loading using the service.


The HTTP status code should 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. Google PageSpeed, if I'm not mistaken, also makes sure that the server response does not exceed 200 ms and, if the website exceeds the recommended time, it warns that you need to reduce the server response.

Well, at the very bottom we can see that the response is compressed using gzip.

DNray has passed the first stage of loading on five (no, no, I'm not sucking up at all).

Those whose sites also passed these requirements can read on, but the rest should think about my recommendations and continue reading the article after you finalize the first stage.

2. DOMContentLoaded - this is how this page loading stage is called in the developer tools, and if in a simple way, this is the very moment when the visual page loading is completed.

What should you pay attention to here.


2.1 The number of connections - DNray has a lot of them, if you have a lot of them, you should think about reducing the number of these connections. 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 can you shorten 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 images 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 loading some unnecessary components, and, if possible, delay the loading of js or put them at the end, or at least make their loading asynchronous. CSS, too, by the way, would be nice to optimize.

    If you delay loading css, then the page will blink when surfing the website - in my opinion, this is unacceptable, but we can load the css needed to display the top of the site at the beginning, and the rest later. Here it is better to consult with a layout designer, I am not one, so do not take these recommendations literally.

    Switch to http/2, this version of the protocol allows you to load all the elements in 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 will explain. At the moment, http/2 is not yet supported by all devices, so some customers will continue to use the website on previous versions of the protocol, so this recommendation will help speed up page loading for fresh devices with current browser versions.


2.2 The weight of the page and components loaded from it.

    Remove unnecessary comments in the code.
    Use compression.
    Optimize site contents, compress and merge css and js, compress images, etc.


And there is another recommendation that will help reduce the number of connections and reduce the weight of the page and the content posted on it. This is a kind of panacea, although it requires certain skills in setting up.

Module for web-server PageSpeed. It is also available for nginx - ngx_pagespeed and for apache2 - mod_pagespeed. It is better to read more about what it can do in the official documentation, its settings are very flexible. I will only note that it is able to perform concatenation on the fly, which will help reduce the number of connections, and it also squeezes contents very well, reducing the weight of the page and its content.

At this stage, I can give DNray  a hard 4, and then only for the lack of http / 2, although I would probably still reduce the amount of loaded elements and make a concatenation.
This stage of loading the page should ideally not exceed 2-3 seconds (although there is no end to perfection and I have clients who want faster even with a loading speed of less than 1 second). If you have more time, you should consider the recommendations I gave above.

3. Load - this is the moment when the browser wheel stops spinning, that is, the page is fully loaded. This is a less critical stage of loading and it is frequently slowed down by third-party chats for communicating with clients on the website and other secondary components. If you follow the recommendations that I gave above, then this stage will also become faster. I want 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 load all statics only from your server. Placing static on third-party sites and in a CDN will only be beneficial at high loads, and for unloaded sites it will only play a minus.

4. At this stage, you can not look at all, since in fact the page is loaded and here the browser will always load something when communicating with the website.

5. With this figure in the screenshot, I marked the place where the number of downloadable elements on the page and the weight of the page with all components are displayed. It should be borne in mind that if it is not an issue for a PC to load a page of 2.5 MB, then for a mobile browser with a weak 3G it becomes more problematic. In particular, I have 3G Internet and DNray does not load as fast as other sites for me. For mobile devices, ideally, the page should weigh less than 1 MB. Here, either reduce the size of all contents on the pages or make a mobile version.


P.S.

Advantages of downloading content from the side:

    Reduce the load on your server.
    The same static data, namely css, js, images and fonts, could have already been loaded earlier while browsing other sites that also use this static and they will be loaded from the browser cache.


Cons of downloading contents from the side:

    Often, public CDNs and sites that store fonts, images, css and js have a high load, since they are used by hundreds or even thousands of sites with different levels of traffic, as a result, it turns out that sometimes giving back is more faster than saving 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 website, then at least you know where to dig. I also want to note that a well-written site code and optimal layout will also speed up your website, but this is not my destiny - these points have already been sufficiently described on the Internet.
  •  

amitkedia

I have never used it for my sites, but I have encountered 5 times with clients who had some problems on their websites. Ajax didn't work, styles were displayed wrong, informers, scripts, pictures from remote ones didn't load.
Every time I solved it by disabling this module, which overwrites the files and names of everything that it sees.
There was no time for a usual disassembly, they don't pay for the analysis)

Do not tell me, do such problems arise when the module is configured incorrectly or if the code is not good? Or is this thing generally banned for complex websites and does not work on them?
  •