How To Measure Website Loading Speed And Increase It

How To Measure Website Loading Speed And Increase It

Post Summary.

Reading time: ~9 minutes

  1. What Is Website Loading Speed
  2. Site Load Speed And Ranking
  3. Upload Speed And Conversion
  4. Services For Measuring Website Loading Speed
  5. How To Increase Website Loading Speed
  6. Dependence of site speed on hosting
  7. How To Speed Up Server Response Time.
  8. Loading Speed Of Dynamic And Static Sites
  9. Website loading speed
  10. Influence Of Images On Website Loading Speed
  11. The Influence Of Styles On Website Loading Speed
  12. Scripts And Website Loading Speed
  13. Third-Party Scripts And Site Speed

This article will tell you how website speed affects conversions, give a list of services for checking website speed, and a large set of recommendations that will help your website load much faster.

What Is Website Loading Speed

Site load speed is the time it takes for a page to load with all text, images, forms, advertising banners, and other content.

But in terms of conversions and usability, the only important thing is how quickly the page loads in the form the user needs right after entering the site. Unfortunately, it may only be 30% of all content and features. So the download of this particular part should be accelerated in the first place.

Site speed is essential to the user. People don’t like to wait too long, and slower sites will get more bounces and fewer conversions.

Site Load Speed And Ranking

Google is gradually increasing the importance of loading speed as a ranking factor. Since 2010, it has been evaluated for sites on the desktop, 2018 this factor was connected to the evaluation of mobile sites, and in May 2021, a new group of elements is rolled out – Web Vitals.

Web Vitals is a whole group of criteria by which Google will measure the vitality and usability of sites for the user. Within the framework of this article, we are interested in three key factors – Core Web Vitals, two of which just assess the site’s speed and response to user actions, and the third is responsible for the stability of the site page.

Upload Speed And Conversion

Website loading speed directly affects your conversion rate. For example, mobile sites with loading times under 2 seconds have 15% higher conversions than the average mobile site. At the same time, the moderate mobile site loads in 15.3 seconds.

Services For Measuring Website Loading Speed

Next – a selection of services that will check the site’s speed and give recommendations on improving. The entire collection can be tested for free; no registration is required.

Lighthouse

Chrome tool that tests website loading speed based on Core Web Vitals metrics. Lighthouse is launched from the developer panel in all browsers based on the Chromium engine – Chrome, Opera, Edge, and Yandex.Browser. You need to open the checkout page, open the developer dashboard and go to the Lighthouse tab, and it can be either a standalone item or under the Audits tab.

Before checking, it is better to clear the cache and open it in private mode. Otherwise, the result may turn out to be blurry. The instrument is still only in English.

Google PageSpeed ​​Insights

A free tool from Google based on the identical Lighthouse. The only difference is in the format – PageSpeed ​​Insights is launched on a separate page and not through the developer dashboard. Checks parameters from Core Web Vitals and makes recommendations for corrections. The result can be viewed separately for the desktop and mobile versions of the page.

Pingdom Tools

It is an English-language service. The servers from which the speed check is carried out are located in Asia, Europe, America, and Australia.

It produces a reasonably detailed report: an overall score, scores for critical criteria, response codes, the weight of content on the page, and the number of HTML requests by type of content and domains. In addition, there is a waterfall diagram for the loading time of different elements. Finally, you can check the site loading speed for free and without registration. For money – set up an automatic check, which will go almost in real-time.

Uptrends.com

In terms of functionality, it resembles the previous service: you can configure testing by location, device, browser, and speed. There is a slightly awkward interface and a minimum of data in the report – a waterfall chart by load time and diagrams by the volume of requests to the server of various elements and their weight on the page. From the differences from other services: it runs the test three times at once to evaluate not only the general indicators but also the efficiency of caching.

How To Increase Website Loading Speed

Slow loading is usually a whole complex of reasons, ranging from problems with unsuitable hosting and ending with illiterate optimization of site files. I’ll tell you about the main reasons that can reduce the site’s speed and give tips on improving the situation with each of them.

Dependence of site speed on hosting

There is a chance that your site is loading slowly due to problems on the part of the host. To understand this, you need to study the server response time – this is the time interval between the moment when the browser sends a request to the site server and the receipt of the first byte of information.

How to find out the server response time. The metric can be called either TTFB (time to the first byte) or “server response time” or “server wait.”

If you use one of the services from the selection above, look for it as a separate figure in the report or at waterfall diagrams. The diagram shows at once which server is giving information for a long time.

  • In analytics systems reports. In Google Analytics, it is a report “Site loading speed” in Yandex.Metrica – “Standard reports” / “Monitoring” / “Page load time”. Here, it is important to look at the indicators and the dynamics – if the response time grows, this is bad.
  • In-browser developer tools. In Chrome, Mozilla, and Opera, they are opened with Ctrl + Shift + I. Open them in a new tab, find the Network section there and go to the desired site on the same charge.

How To Measure Website Loading Speed And Increase It

How To Speed Up Server Response Time.

Make sure your hosting capabilities match the workloads your site creates. Depending on the size of the site and its traffic, you need to choose the optimal type of hosting and a tariff with sufficient resource quotas. There are several main types of hosting, which differ in how the computing resources of the equipment are distributed between the sites of different clients and the level of site isolation from each other:

shared hosting – hosting with shared resources. The simplest, cheapest, and most unpredictable option. A single physical server computer hosts many different client sites within the same operating system. Typically, all computing resources are available to all areas without any reservation, and the isolation level of one client’s sites from other clients’ sites is minimal. 

VDS / VPS – virtual dedicated server, hosting with virtualization of operating systems. Each client receives a virtual computer with its own virtualized operating system and a certain amount of reserved computing resources on one physical server computer. This option allows for more predictable and consistent results and a relatively high level of site isolation from each other at a higher cost. But situations are still possible when the excessive load on one client’s site affects the operation of another client’s site, albeit to a lesser extent.

Loading Speed Of Dynamic And Static Sites

It is worth clarifying here: it is now customary to call sites that use static hosting as static sites. That is, the speech here is about how the infrastructure of the site is arranged, its server part, with which the end-user does not directly interact.

As for the site itself as a document with which the user interacts in the browser, regardless of the hosting method, it can be either a static or a full-fledged dynamic site – with “live” elements that react to user actions to which we are all accustomed. From now on, by “static sites,” we mean sites with static hosting.

In the case of dynamic hosting, for example, a typical WordPress blog, if the server caching system is not configured, the page’s HTML code is generated every time the user loads it – requests it from the server. To assemble a page, the server runs several programs and accesses its database.

Website loading speed

All this requires a certain amount of server resources: processor power, amount of RAM. On a cheap/slow hosting server with limited computing resources, this can take a long time and will be a large TTFB. And the more concurrent requests, that is, page views, the server needs to process, the slower it will do it. So if there are too many requests, some of the visitors may not receive the site page in response. Instead, visitors will see a response from the server with a request processing error or a message from the browser that the server is not responding.

In the case of static hosting of sites, pages are stored in ready-made, pre-formed documents. Then, when the page loads, the user’s browser simply downloads and processes these documents. Since this process is much easier, it requires fewer server resources, and it happens many times faster.

Therefore, all other things being equal, a site in a static hosting option is more likely to load faster and provide a more significant number of simultaneous page views.

The disadvantage of static hosting is the need to rebuild pages every time you need to change them. It is a less automated process and requires more intervention from the site administrator. For this reason, this option is best for resources that rarely need to be edited or updated.

Influence Of Images On Website Loading Speed

Compress without loss of quality. The picture must be of the same size as it is displayed on the site. For example, a column with content on your site is 720 pixels wide, but an image 2400 pixels wide is terrible. So download images at once 720 pixels wide.

Also, run all images through a compressor to further compress them. Here is a list of free services:

  • loving,
  • Optimizilla,
  • ResizePixel.

For WordPress sites, use plugins. They will process all uploaded images and will process new ones automatically.

  • ShortPixel Adaptive Images,
  • Optimal,
  • Smush,
  • EWWW Optimizer.

Three Tips To Keep Lazy Loading From Annoying Users:

  • Don’t use lazy loading for images on the start screen of the page; let them load right away.
  • Mark the size of the pictures so that the browser immediately reserves the necessary space for them. Otherwise, the images will shift the content below them down on loading, causing jumps and degrading the user experience and Cumulative Layout Shift.
  • Adjust the loading so that the image starts loading a little before hitting the screen. This will provide a smoother transition for users.

The Influence Of Styles On Website Loading Speed

Like JavaScript scripts, CSS styles can temporarily block page rendering and rendering, slowing down the overall loading process. To avoid this, you need to highlight the “critical” part of the CSS – the styles necessary for the correct display of the part of the site that the user sees first. Next, you need to connect all the classes to the document correctly.

Output critical styles from CSS file to HTML file. For the “first screen” of the page to load faster in the form it should load, the “critical” part of the styles must be transferred from the CSS file directly to the HTML file. If this is not done, the browser, after downloading the HTML file, will request the CSS file from the server and wait until it is loaded and processed, and only then will it start rendering the page on the screen. Depending on the conditions and coincidence of circumstances, for example, a poor Internet connection can significantly increase the page rendering delay.

It is difficult to define the critical part manually – the start screen will be different on different devices and pages. Therefore, you can use tools that will do it for you:

  • online service Critical Path CSS Generator,
  • JavaScript tool Critical,
  • JavaScript tool CriticalCSS ,
  • JCH Optimize plugin for Joomla, WordPress, Drupal, Magento sites.

Please note that it makes no sense to put all the styles in the HTML file. It is because, firstly, these styles are not cached, and secondly, it will make the HTML file heavy.

Scripts And Website Loading Speed

In addition to images, you can optimize scripts written in JavaScript – they are responsible for your site’s interactivity, for example, for the beautiful flipping of photos in the gallery. Sloppy work with scripts can significantly reduce the speed of website loading.

Lazy loading of non-critical scripts. If the execution of the script is not required “as quickly as possible,” then such a script must be included with lazy loading. If this is not done, the browser will interrupt processing the HTML code of the page until the script file is loaded and executed. Depending on the number and complexity of such scripts, the quality of the Internet connection, and the available computing resources of the device on which the page is loaded, for example, mobile phones, this can greatly slow down the loading and rendering of the page.

Third-Party Scripts And Site Speed

In addition to your scripts, there may be third-party scripts on the site. They connect your location with others: for example, they collect traffic analytics, pull up a block with products or an advertising banner on the page, and open a chat with an operator.

You have little influence on these scripts, and they can slow down your site – after all, they have their domains and ways of processing and delivering information. For example, the resource from which the goods are being pulled does not work. If a product block script is simply inserted somewhere on your page, its loading will be interrupted at this script.

You can avoid problems with third-party scripts by using independent downloads. In this case, the page’s contentFirstlyIn addition, it. The will be loaded regardless of the scripts: the user will immediately see all the available content, and the hands will be packed and run whenever possible.

Thank you for reading!

Related posts

Leave a Comment

Your email address will not be published. Required fields are marked *