For the last project I worked on, the goal was to build a new modern, light and performing layout. All the most modern and crossbrowser frontend techniques have been used; e.g. grid, flex, custom properties, etc.
The final result was placed at the analysis of Lighthouse, a tool present on Chrome. In this phase, despite having respected the most canonical construction rules, we came across new measurement parameters defined in Vitals - https://web.dev/learn-web-vitals/
Among these parameters, I pleasantly discovered Cumulative Layout Shift (CLS).
Cumulative Layout Shift (CLS) is an important, user-centric metric for measuring visual stability because it helps quantify how often users experience unexpected layout shifts—a low CLS helps ensure that the page is delightful.
Getting a high score from Lighthouse means respecting the rules of the web, being rewarded by search engines, giving the guarantee of being able to let everyone read your content.
How many times, due to line problems, has it happened to you to load a page, start reading the textual content and suddenly an image appears that moves, up or down, what you were reading? Really frustrating!
To solve this problem on the page https://web.dev/cls/ there are several tips, such as passing the measures via attribute (nein nein nein ...).
I preferred to recall the image in a div or link declaring a .o-skeleton class with responsive and aspect ratio properties (16: 9 or 4: 3).
Here is the example code. In your browser settings, you can set the page loading speed simulation.
Top comments (0)