Google announced on November 10, 2020 that the "Core Web Vitals" will influence the SEO of your pages from May 2021. The article is available here.
To summarize the "Core Web Vitals", it's a bit like a grade that we give to your website to see if it is healthy. It also takes into account the loading of pages. This is the reason why we talk about it in this article.
A so-called "static" page is a web page that has been generated in a file.
To understand how these pages work, let's start by explaining how a classic CMS like Wordpress works for example.
When you change the text of a page of your website:
For this type of operation, we speak of dynamic pages.
Dynamic pages take a long time to load.
With static pages, the modified text is not loaded from the database but directly from a file with the entire web page. This allows an ultra fast loading!
Technique that analyzes the used and unused code for the loading of a page
When we arrive on a web page, it starts to load several files. For example:
All these files are essential to make your website work properly and must be used in an optimized way.
A phone does not have the same performance as a computer. That's why this optimization is important if you want to have a fluid website on all media.
Below, an example of "code coverage" of the files of a page:
|Name||Total size||Code size used||Code coverage|
|styles.css||48 KB||12 KB||25 %|
|app.js||9.3 KB||4.1 KB||44 %|
|analytics.js||44.9 KB||19.6 KB||44 %|
The closer the "code coverage" value is to 100%, the more optimized your page is.
The ability of a website to load the right elements at the right time.
Let's take the example of loading an image when it is visible.
Let's say you have a page with a lot of pictures. If you don't use the lazy loading technique, all your images will load at the beginning and at the same time. This will simply slow down the loading of your page.
The lazy loading can be used for any type of web elements but it is especially used for :
How to implement lazy loading for your website?
Your developer has several choices to use this technique:
We can see today that there is still no simple and optimized solution. It is therefore necessary to adapt this solution according to the needs of the company.
The image below is loaded with the "IntersectionObserver" technique.
When you want to optimize your web pages, the principle is to reduce their weight. Here are some techniques that you can apply to your files:
Avoid reloading an element that has already been loaded before
There are many types of caches on the web. Here are those that interest us the most:
The cache is simply set with rules that your developer will define.
An example of a cache rule: I want to cache the "Google Analytics" file for 12 months in the browser to avoid reloading it the next time I visit the website.
Find all our articles on the development of a website
WEBSITEThe complete guide to creating a website
You want to create your website but you have many questions? Our guide answers all your questions simply.
WEBSITEDark or light mode? Which one to choose and why?
In this article we explain the advantages of dark mode and why it is better for your eyes.
WEBSITEIs maintenance mandatory on my site?
We explain what maintenance consists of, on which types of website it is essential and the rates.
Alexis Le Baron
WEBSITEWhat Google tools can I use on my site?
Google provides many free tools. Here are 13 essential tools to monitor and improve your SEO.
WEBSITEWhat is a customized website?
There are several types of custom-made websites, depending on your needs. We detail them point by point in this article.
Alexis Le Baron
WEBSITEHow does the monitoring of a website work?
This article explains the usefulness of monitoring and details which alerts to set up and with which tools.
Alexis Le Baron