Blog / Articles25 September 2018

How to check the site’s loading speed and make the right conclusions

The topic of loading speed of the sites is becoming more and more relevant now: slow pages not only drive users away, but also can cause a decline in search positions. To speed up the site correctly, it is not enough to know whether it is loaded quickly or slowly. How do you know which factors slow down your pages? How to find out what you can correct quickly and get a significant increase in speed, and which corrections, on the contrary, are not worth the effort?

The loading time of the page is influence by many factors. They refer to the actual size of the resources (images, scripts, styles, etc.) either in kilobytes, or to the delays in transmission and processing of server responses, as well as to the number of external resource connections. In addition, the loading speed is greatly influenced by the quality of the user's Internet connection, the distance from the client to the server. Therefore, in each case it can be different for one page. However, there are a number of online services that will not only show you the estimated values ​​of the page loading speed, but will also give you an idea why you got such a result.

Please note! This article was written before the update of PageSpeed ​​Insights that rolled out November 12, 2018. This update which influenced the mechanisms for calculating ratings. Therefore, some of the information presented below is no longer relevant. The interface of the tool has also changed: now it doesn't look the same as in the screenshots. You can read about what has changed by this link. However, the general principles for analyzing the results described in "How to understand exactly what do you need to optimize?" section remained generally relevant.

We also released an updated version of this article, from which you can learn how to use the new version of this tool. (Added on 12/11/2018)

Services for checking the loading speed

At Arto Web Agency, we mainly use two tools for checking. The first of them is Google PageSpeed Insights. Its interface is simple and straightforward: the line for the site addressand the "Analyze" button, after clicking on which you will get a short report. Note that PageSpeed ​​Insights analyzes not the entire site, but a specific page. If you enter the main page address, then you will get results only for it.

The PageSpeed ​​Insights report does not estimate page loading time in seconds for small and not very visited sites; it just estimates the speed optimization on its own scale from 0 to 100. A value less than 60 means a low level of optimization (red zone), from 60 to 79 – medium level (yellow zone), 80 and higher – good level (green zone). The information in the report is on two tabs: desktops and mobile devices, and the number is considered separately for each of them.

Example of PageSpeed ​​Insights report

For large and visited Internet portals, a new Page Speed section ​​appears in the report, where two metrics are displayed: First Contentful Paint (FCP) shows the time after which the user starts to see at least one element of the page, and DOM Content Loaded (DCL) shows the time for which the HTML content of the page is loaded completely. This information is taken from Chrome User Experience Report. It is based on the interaction of real users with the site, so it can be shown only when the data is sufficient.

Example report for a site that is in Chrome User Experience Report database

Below, in this report, graphical diagrams are displayed showing the distribution of site’s users by FCP and DCL metrics. Here you can see for which percentage of visitors each metric was rated as "slow" (red), "medium" (yellow), or "fast" (green).

More recently, for sites that appear in the Chrome User Experience Report, an additional function has appeared. By the "origin:" command typed before the URL or by link in the report, you can go to the average data on the loading speed of all pages of the resource. The link can be seen if you entered the address of the page that has not enough statistical data, if such data is available for other pages of the site.

Example report with a link to an average data on the site

Another important component of the PageSpeed ​​Insights report is the optimization tips at the bottom. Here you can see what you should do to speed up the page. This tool has 10 rules in total, and for each of them recommendations are given, if necessary.

PageSpeed ​​Insights tips for page improvement

PageSpeed ​​Insights has one more important indicator, which, unfortunately, does not appear in the usual web version of the service. This is Impact – a number that shows how strongly a certain rule affects the loading speed in comparison with the rest. By its value, you can understand which factors slow down the page most strongly. You can see this indicator using APIs Explorer. To run the analysis, fill in the URL field (you can leave the rest blank) and click Execute. Search for the "ruleImpact" phrase in the text of the report to find this parameter for each of the 10 rules.

Fragment of the PageSpeed ​​Insights API Explorer report with the Impact value for the "Optimize Images" rule

By the way, we made a research of Ukrainian online stores' loading speed using PageSpeed Insights API. You can see its results here.

The second tool we use is GTmetrix. It has a slightly more sophisticated report interface, designed for technical specialists. Unlike PageSpeed ​​Insights, this service shows an estimated page load time. However, do not completely trust this number: GTmetrix servers are in Canada, so the displayed speed is likely to differ significantly from the real for Ukrainian users.

GTmetrix report example

GTmetrix also analyzes only one page during one check – the one you entered. A function similar to the "origin:" command does not exist in this tool. The GTmetrix report consists of several tabs:

  • PageSpeed ​​Insights API data (in the form of recommendations and with marks for the rules on a 100-point scale derived from the Impact number);
  • Yahoo!’s YSlow service data – also with marks for various rules, which largely overlap with the first tab;
  • visualization of loading time of various resources on the page;
  • display of key loading metrics on the timeline (for registered users);
  • creation of video recording of page loading (for registered users);
  • historical data on the loading speed (if available).

How to understand exactly what do you need to optimize?

The services listed above can give you a lot of tips for speeding up the page, but some of these tips will really have a strong effect, and some will not have a noticeable impact. You can understand in different ways, which onesexactly.

  • Expand each piece of advice in PageSpeed ​​Insights and see how much traffic is expected to save. Considerable savings are about 30 KB. Therefore, if the compression of images reduces the total size of the page by 200 KB, and the CSS-style minifying saves only 2 KB, then you can safely focus on the first paragraph; the second one will not have a noticeable effect on speed. If you dig deeper, you may find that compressing one image will give 100 KB of savings, and another will give only 1 KB; it is also obvious that the first one will have a valuable effect, and the second one will not.
  • Using the APIs Explorer, compare the Impact values ​​for different rules. It will help you to see in the most simplified form that, for example, the most powerful effect on loading your page is given by the external resources in the head of the document. You can combine this method with the first: PageSpeed ​​Insights will show you which files are slowing down the page, and you can decide which ones can be loaded asynchronously.

Comparison of Impact values in PageSpeed ​​Insights API Explorer. In this example, you can clearly see that the implementation of the "Eliminate render-blocking JavaScript and CSS in above-the-fold content" rule will give the most important contribution to page load optimization

  • If you have Google Analytics scripts installed on your site, you will most likely see a "problem" in the "Leverage browser caching" section: PageSpeed ​​Insights will show them as non-cached resources. In fact, developers do not recommend caching these scripts, so you can ignore this issue. However, if you want to solve this problem, then you can use a special plugin for the sites on Wordpress. It will save the Google Analytics script on your server and allow it to be cached on user’s devices. This plugin then checks every day whether the script has changed on the Analytics server. If it does, the plugin downloads it, rewrites it locally, gives a new version to users, and "asks" the browser to place a new script in the cache.
  • If the problem is displayed in the column "Do not use forwarding from the landing page," then check to see if you entered the correct address of the site: for example, with www, if the site address does start with www. Sometimes, however, the tips in this section are fair (for example, if the site immediately redirects the user to any language version), but this happens rarely.
  • Some tips from optimizing services will be easier to implement, and others will be more difficult. Note that such manipulations as enabling GZip compression, caching and, most of all, reducing server delay, require access to the server on which the site is located. Sometimes such functionality is not available, for example, on centralized platforms for creating online stores.
  • Do not try to implement all the recommendations of PageSpeed ​​Insights or GTmetrix. If the compression of a particular picture or the minification of the JS file will reduce it only by 1-2 KB, then this is usually not worth the attention. Focus on the total page size of about 1 MB (the less, the better) – services consider this value as acceptable. For server delays, a value of 0.2 seconds or less is considered as normal; if for your site it’s just slightly higher (for example, 0.23 seconds), then its optimization, most likely, will not give a strong effect.

Conclusions

Thus, in order to assess the speed of your site and the amount of work that will be required to speed it up, you need to consider:

  • the overall rate of optimization of the loading speed – if it is in the "green" zone, then, probably, you don’t need to do anything; if it is "red", then the corrections are critically important;
  • the Impact of individual rules to this indicator;
  • approximate savings (in kilobytes of traffic or seconds of time), which you will see after optimization of each rule;
  • the number of files you need to work on to optimize a particular parameter (for example, the number of images for compress or scripts / styles to move);
  • the need to involve technical specialists in the work;
  • possible obstacles for optimization (lack of access to the server, etc.).

If you understood that your website needs to be accelerated, and you cannot do it without the help of specialists, then ARTO web agency is ready to offer you its services. Contact us, we are always glad to help!

Nikolay Ashpin
SEO, blog editor
I have been engaged in copywriting since 2014, in SEO - since 2017. I am interested in Internet marketing modern trends and search engine optimization, as well as in the capabilities of the Google My Business tool, and I share the experience of using it at seminars and conferences. If you have a question about this article, please write to nikolay@arto.agency.

Be first to know about important!

How-to articles, news and reviews. We write to you when we really have something to say
COMMENTS
LEAVE A COMMENT
LOGIN
  • Facebook
  • Twitter
THIS SITE USES COOKIES
We use cookies to analyze traffic, provide social networks features, and for functions of the commenting system on the site. The list of cookies to be set is located on this page. Do you agree to accept cookies?