When designing a website most people concentrate only on the structure of the content and the visual appeal of the website. This is not a bad thing if you don’t ignore other aspects such as the loading speed of your site or the popularity of it (backlinks).
In this article we will analyse one of the most important metrics that Google uses to evaluate a website: the loading speed of the site.
Contents
What are the Core Web Vitals and what are they based on?
To evaluate the quality of the performance of a website, Google created 3 standardised and more or less independent metrics that will allow you to evaluate the quality of the download speed of your site from different points of view:
- LCP o Largest Contentful Paint
- FID o First Input Delay
- CLS o Cumulative Layout Shift
Why create 3 metrics instead of one to measure the loading speed? Because no matter how fast a website loads, it may not load optimally (and this can affect the user).
We are going to study these 3 metrics one by one so that you know what they consist of and how you can increase the quality of each element.
LCP (Largest Contentful Paint)
This metric, known as “Largest Contentful Paint”, measures how long it takes for a website to load based on the largest element of the website. Google records the visual loading time of the largest element in terms of bytes.
This indicator allows you to approximate the maximum loading time of the website. This is because in theory, when the heaviest element of the site loads, the rest of the website components should already be displayed on the screen. However, as we will see, this sometimes does not happen.
- Google’s recommendation is a loading time of no more than 2.5 seconds LCP for a good loading score.
- For a medium loading score, it should be less than 4 seconds.
- If the loading time is higher than that, Google considers the loading time as poor.
FID (First Input Delay)
The First Input Delay metric measures interactivity. That is, it measures how fast the operator interacts with the page. This metric measures the response time of the page, i.e. when the page is ready for the user to perform the first interaction.
Like the previous metric, this metric measures the visual response of the content and not the loading time. In other words: this metric evaluates the navigability of your website.
It has three ratings given by Google:
- The first one is good if the loading time is less than 100 milliseconds
- In the case of being higher than 100 milliseconds and less than 300 milliseconds, it is rated as “requires improvement”
- In the case of over 300 milliseconds it is considered as poor performance.
CLS (Cumulative Layout Shift)
The “Cumulative Layout Shift” metric measures the changes in the site while it is still loading. It is common for JavaScript or CSS style sheets loading in the background to create these effects of elements changing its shape while the site is loading. Google can register them and details how long they take to load within the website. Layout shifts are understood as changes in the shape or size of page elements while the page is still loading.
Note: Google does not like layout shifts at all as they are detrimental to the user experience of the page.
Google can not only record how long it takes those elements to stop changing, but also how often these changes occur on your website (and how many).
Google evaluates this parameter and establishes that:
- Up to 0.1 is an optimal value
- In case it is between that value and 0.25 it will be in a range that needs to be improved
- In the worst case it will be above 0.25, in this case you will have a poor rank. If this is the case, it is recommended that you review your website and optimise what elements are causing layout shifts.
Tools to evaluate the speed of your site
You can use several tools to evaluate the loading speed of your website. The most logical for any SEO is Google Search Console, since (apart from seeing how the website responds at an organic level) for some time now it has integrated a section that tells you which pages of the site are slow and need to be optimised.
Other well-known tools to evaluate the speed of a website are:
- PageSpeed Insights, Google’s own analysis tool.
- Pingdom Tools
- GTmetrix, another highly recommended tool
Basic considerations to improve your website metrics
There are many elements to consider when optimising your website in terms of loading speed:
- media files involving videos, images, documents, etc.
- style sheets
- the number of scripts that the site loads
- the size of the database
- the order of loading of each of the above elements
However, we are going to look at some aspects that you can improve yourself in any WordPress and that will greatly improve the speed of your website.
Image optimisation
For image optimisation the first thing to look at is the recommended image weight. This should be between 50Kb to 200Kb as maximum weight per image, although the smaller the better. It is advisable to use transformation or compression tools to reduce the weight of the image. Some of our recommendations, in the case of WordPress are:
It is possible that you will subtract a little bit of quality to the image with this compression, however the changes will not be noticeable to the human eye.
Install a caching system
Installing a caching system allows the website to load faster because the user’s browser does not have to re-download the entire website if it detects that there have been no changes since the last visit. In other words, the browser will use the styles and files it has stored on your PC’s hard drive instead of re-downloading them, unless instructed the opposite.
Our recommendations for WordPress caches are:
- WP Fastest Cache
- It doesn’t offer as big a speed bump as you might expect but is very stable and doesn’t conflict with other plugins.
- Lite Speed Cache
- Somewhat complex to configure but offers very good improvements in loading speed and is very stable. Needs a dedicated server to unleash its full power.
- WP Super Cache
- Sometimes causes 500 errors on websites and has to be uninstalled. We haven’t used it on any website for a long time.
- W3 Total Cache
- It is the one that offers the best performance but it conflicts with Elementor and other plugins very easily. Not recommended for basic use
Caching systems improve loading speed by saving time and resources.
Optimising CSS and Javascript files
CSS and Javascript files need to be checked, not only in terms of how long they are, but also in terms of the order in which they are loaded when the website is loading.
Although it may seem unimportant, loading many stylesheets and JS files before anything else will cause the website not to be visible to the user until those files are downloaded, which to the user’s eye simply looks like slowness.
The two solutions to this problem are file minification and asynchronous file loading.
This task sounds very complex but don’t panic: most of the time these functions are included as extra options in any cache plugin (like the ones listed above). Normally all you will need to do is activate the option and check that nothing is broken on the site.
We recommend that you make a backup of the site before you do anything.
