Site loading speed is a critical technical parameters for search engine optimization. The optimal performance of your online platform increases engagement, helps retain users and achieves more conversions. Therefore, one of the webmaster’s primary tasks is to ensure rapid site loading and minimize bounce rate. Here we’ll tell you what site loading speed means, why it could be slow, and how you can fix it.
What is site loading speed?
Site loading speed is the length of time users have to wait before a site opens completely with all its images, forms, and banners, etc.
Why do we need a site to open quickly?
- A low speed site won’t get into high search positions.
- Rapid loading reduces server load.
- The faster the page loads, the more conversions there will be.
How do I calculate my site’s loading speed?
You can check this parameter using the PageSpeed Insights online service. It’s fast and free. The Lighthouse algorithm allows you to define the performance of an online resource as seen by real users of mobile and desktop devices. A Google rating per se does not affect anything in PageSpeed Insights. However, the service directly shows the webmaster what problems need to be fixed and gives recommendations for speeding up the site.
Plenty of other services check this parameter, but unlike them, PageSpeed Insights shows server response time as accurately as possible.
Server response time may vary depending on current load. We recommend you take several measurements and focus on the average value. Please note: Google service caches the result for 30 seconds, so measurements should be made at intervals of at least 30 seconds.
If you find significant fluctuations, we recommend you change your hosting service. If your provider is making savings on hardware, this can increase loading time by 100-150 ms. A lot of hosting providers today offer a trial period during which you can test the site for free.
This way you can define server response time using browser tools. Open the “Network” tab (keyboard shortcut for quick launch – Ctrl+Shift+I) and reload the page after you’ve cleared the browser cache, html file loading time is also displayed there.
Site loading speed indicators
Site performance is assessed using the following metrics:
- Time To First Byte (TTFB) – server response time.
This shows how much time passes between the request being sent and the browser receiving first data. Google requires this value not to exceed 200 ms.
- First Contentful Paint (FCP) – page rendering time.
This shows the time lapse for first content (outlines of pages and images) being displayed on the monitor. This should not exceed 1.8 sec.
- Largest Contentful Paint (LCP) – main content rendering time.
This is the period of time during which the largest element (video, photo, text fragment) is displayed on the visible area of the page. LCP rate – up to 2.5 sec. Please note: when a site is launched from mobile or desktop devices, the largest element of the page will differ. The user can access the site via an anchor link and immediately get to the middle of the page and in each case, the speed will be different.
You will see the following additional performance indicators in the services:
- Total Blocking Time (TBT) – the period of time during which the user can not interact with the site (click, enter text, download file). The indicator should not exceed 200 ms.
- Cumulative Layout Shift (CLS) is a factor that determines visual stability of a page. For example, the user reads the text, while the banner loads and shifts the content or buttons. The faster the user “moves” the text, the better, ideally – up to 0.1 sec.
- Time To Interactive (TTI) – an interval of time during which the site will fully load and be ready for viewing. The normal value should not exceed 5 seconds.
Google actually recently introduced a new metric for assessing site response speed – Interaction Next Paint (InP). It will be used from March 2024 instead of the First Input Delay (fid) indicator from the Core Web Vitals family. INP will estimate the response rate based on data from the Event Timing API. It captures each delay when the user interacts with the page and provides the highest value (FID only considered the first interaction). Low INP indicates that the page responded rapidly to a user’s query on a regular basis. Thus, the lower the INP, the higher the user experience. It’s still unclear what the update will lead to. Some will be saying goodbye to JS, while others are more optimistic about the future – “so what?” they say. Everyone is equally pessimistic, meaning that everyone will retain their own positions, and nothing will change.
Causes of slow site loading speed and how to resolve them
1. The code isn’t “clean”: this is one of the most common causes of poor web resource performance. Extra spaces and empty lines, integrated styles and extra comments, as well as other signs of “dirty” coding can lead to a bloating of the site’s style sheet.
How do we fix this: code minimization – remove unnecessary elements, and compress. Where possible use only one CSS style sheet. By reducing file size, you can improve overall loading time and increase the efficiency of search engine optimization. Online tools can be used to minimize code. If the site was created using WordPress or another popular builder, you can use special plugins and extensions to minimize code.
2. There is no configured Gzip compression that allow files to be compressed in such a way that they can be recovered without loss.
How can we fix this: Enable compression of text resources (JS, CSS, HTML) by writing Gzip in the .htaccess file. Unlike other compression formats, this method is available in most browsers. It’s easy to configure and offers an optimal ratio of the degree and speed of compression.
3. Images weigh a lot. For photos, JPEG format is usually used, for images with transparency – PNG. At the same time, GIF and JPEG images weigh much more than PNG, and prevent the site from loading quickly. Best to avoid using TIFF images.
How can we fix this: Check which image formats are supported by most browsers. Review the images, logos, photos, GIFs on the site and leave only the lightest ones. Elements such as icons can be rendered directly in SVG format in the browsers. Even in Full HD they won’t look smudged and even with a weight of 1 kB are perfectly displayed on the screen. You can automatically optimize images using special plugins.
4. Caching is not configured. Site loading speed will be slower if the browser doesn’t reload all CSS, flash elements, graphics and JS files when you re-enter a site, but retrieves information from its cache.
How can we fix this: correctly set the Expires HTTP header and add the mod_expires module to the .htaccess file in the site’s root directory. In the “years”/ “month”/ “weeks”/ “days”/ “hours”/ “minutes”/ “seconds” lines, set cache storage time. We recommend you retain temporary copies of pages, styles, and scripts for several months.
5. Redirects are used. If the site has moved to a new address, the page gives a 301 or 302 redirect and only then the desired URL opens. This can take 20 or 30 seconds which the user definitely won’t want to wait for.
How can we fix this: scan sites with an outdated URL using a crawler and replace them with a new address. Redirects are most often located in the header, footer, or sidebar of the site.
6. Lots of HTTP requests. Excessive requests occur due to a variety of CSS, JS files, and images. In order to display them, the browser makes several requests for each file. This leads to long page loading time.
How can we fix this: again by minimizing the code and images. Use sprites to reduce the number of HTTP requests. Connect LazyLoad – this feature allows you to load the image as the user scrolls the page, not immediately.
7. CDN is not used. Content Delivery Network – a content delivery network that allows you to deliver static resources to the user using less loading time. CDN caches files and loads them from servers in different regions.
How can we fix this: Connect CDN, then users will access the nearest caching server in the content delivery network. This can reduce site loading time from a couple of minutes to a couple of seconds.
8. High Quality Images Full HD quality images load 3 times longer than 1000*1000px, but the difference in quality will not be noticeable on desktop or mobile devices. Images that are not fully loaded spoil the visual and irritate visitors.
How can we to fix this: test different image formats, compress to the optimum weight of less than 1MB.
9. CSS files are located at the bottom of the page. If the CSS files are at the end, the page opens in fragments, rather than gradually. This is because browsers seldom redraw elements that change style after loading.
How can we fix this: if you place CSS files in the site “header”, the blocks will be displayed in a logical sequence: – logo, title, description, navigation, basic information.
10.Problems with JavaScript. JS and jQuery plugins allow you easily to “enhance” a page with dynamic content. However, incorrect use negatively affects site performance. It takes time to load and execute JS and jQuery takes time and several API calls for data display. Thus, the site will take a long time to load.
How can we fix this: audit JS scripts and leave only those you need, ensure their asynchronous loading. Also try services that allow you to use one script for all tools such as Segment or Google Tag Manager.
P.S. Good performance makes a site user-friendly, meaning that search engines “like” it more. Don’t ignore this technical indicator, monitor it regularly and optimize site loading speed in all possible ways. This is a direct way of increasing traffic to the site and revenue from monetization with push advertising or in other ways.
