Dear Friends,
Did you get the news? Google will include core web vitals in the ranking factors soon…
So, folks, core web vitals are the cause of concern now that you have to take in the conscience.
Well, this blog is largely centered around Cumulative Layout Shift (CLS), an important element composing the core web vitals, let me take you to a brief tour on the meaning of core web vitals and the other two factors constituting it.
A Glance at Core Web Vitals
The core web vitals are nothing but a set of three important metrics that mainly calculates the loading speed, responsiveness, and visual stability of a web page visited by the user.
Core web vitals mainly comprise of the following three metrics
Largest Contentful Paint (LCP)
LCP is intended to observe the loading performance of a web page. Its main motive is to calculate the time period between a click and main content gets rolled on a web page.
Its value should lie within 2.5 seconds estimated from the initiation of the loading process to ensure a wonderful user experience.
First Input Delay (FID)
FID determines the responsiveness of a webpage.
It is aimed at measuring the time it takes for a user to connect with a web page.
The actions include
Choosing a menu item.
Opening accordions.
Carrying out navigations.
Passing value to the text fields and likewise…
Its value should lie within 100 milliseconds to guarantee a pleasant user experience.
Cumulative Layout Shift (CLS)
Now come the third element and the main focus of this blog i.e. CLS.
As this blog strives to introduce you to all the nuts and bolts of CLS, we will cover all the details step by step.
Let us grasp the meaning of layout shift before moving forward
What is Layout Shift
While visiting a website, did you ever notice you were aiming to click a link but suddenly an ad appeared and it got clicked unintentionally?
Or a button you were likely to click changed its position suddenly and you clicked on something else accidentally.
These unexpected movements happening on a web page are called layout shifts.
Video:
https://storage.googleapis.com/web-dev-assets/layout-instability-api/layout-instability2.webm
The occurrence of layout shifts on a webpage is quite irritating and leads to a bad user experience.
Now, let’s understand the meaning of CLS
What is Cumulative Layout Shift
CLS is an element of Google’s core web vitals that calculates the stability of a web page when the web page gets loaded.
To be more precise, suppose an element travels throughout a web page when the page gets loaded, this leads to a poor CLS value which, of course, should be prevented.
Understanding the Values of a CLS Score
Good
As you can see in the above picture, the value is considered as good and provides a motivating user experience if it lies within 0.1.
Need Improvement
CLS is not causing many problems and needs slight improvement if the value lies somewhere between 0.1 and 0.25.
Poor
Your CLS value is going beyond 0.25 and it needs a lot of improvement.
How the Value of CLS is Calculated
The value of CLS is calculated using two factors namely impact fraction and distance fraction.
Impact Fraction
The formula to calculate impact fraction is as follows
Where,
Impact region is the area impacted as a result of layout shift. Impact region is generally rectangular in shape, however, depending on the number of layout shifts, horizontally and vertically, it may end into a different, complicated shape.
And,
The viewport is a portion of the webpage a user is able to see without scrolling the page.
Distance Fraction
Where,
Move distance is the distance before and after the layout shift.
Finding the Layout Shift
Note: The above-calculated layout shift is for a single animation frame.
Finding the Value of CLS
Where,
Layout shift score 1 = score for animation frame 1,
Layout shift score 2 = score for animation frame 2,
Layout shift score 3 = score for animation frame 3 and so on...
Page Elements Affecting the Value of CLS
Fonts
Images
Videos
Forms
Buttons and so on…
Main Causes Behind a High CLS Value
If the images do not have predefined dimension values.
If the ads or iframes do not have predefined dimension values.
If the fonts are used wrongly.
If the web pages are having dynamically added content and so on…
Powerful Ways to Avoid or Overcome a High CLS Value
Add width and height attributes to the images and videos
Images and vidoes are a crucial part of any web page that makes a web page more attractive and user-friendly.
Defining width and height attributes of the images and video elements was a good practice in the earlier time.
However, with the evolution of responsive web design, the practice got vanished and developers started using CSS to auto resize the images.
The specification of these attributes is crucial to hinder the layout shifts.
Ideally, the values should be given as follows
< img src="datadab-home-page.jpg" width="1440" height="810" alt="DataDab Home Hero Image">
Also, setting the aspect ratio is crucial to avoid layout shifts
img { aspect-ratio: attr(width) / attr(height);}
Specify dimensions for dynamic ads
The visibility of dynamic ads on the web pages are in trend now, however, these ads are not so easy to handle.
These ads can be a big contributor to a high CLS if not used cautiously.
You can follow the following practices to minimize the possibilities of high CLS occurred due to ads
Define the elements beforehand where ads are likely to appear.
Provide the slot size to put ads.
Don’t deteriorate the allocated space even if no ad is displayed in the placeholder.
Choose the ad’s dimensions carefully. You can use the past data to come up with the dimensions.
Allocate the space for the broadest possible duration to avoid any hassle.
You can style a div with a specific width and height to display the dynamic ads.
Use your fonts carefully
Another main culprit that can lead to a high CLS value is your fonts.
This is due to the presence of FOIT and FOUT factors associated many times whenever your web page requires fonts from the server.
Note: Let me explain you the meaning of FOIT and FOUT if you don’t know
FOIT stands for Flash of invisible text. Whenever a font is requested from a web server, the elements of the web page are kept vacant till the time all the font assets get downloaded successfully. This is called FOIT.
Next comes FOUT. It stands for the flash of unstyled text. Sometimes, instead of keeping the place vacant, the browser displays an alternative font until the assets of the desired font get downloaded from the server. This is called the FOUT.
Lighthouse is the best tool you can utilize to determine the reasons behind a high CLS.
If the reason is the fonts, using the font : display value is the best way to avoid the problem.
The use of font : display in combination with link rel = preload will give you even better results.
Enhance Your HTTP Response
Your slow server can also create loading problems with the page layout in many cases.
The loading of the underlying elements takes some time to get loaded completely when a CDN is employed.
This causes the page content to flit around the page which may also be a reason behind your poor CLS value.
Do perform a check and optimize if needed.
Conclusion
User experience is an important factor to convert a website into either success or failure.
A high CLS is quite irritating that may lead to the loss of visitor’s interest in visiting your site or even the site abandonment.
Optimizing your CLS is, of course, a time-consuming task requiring a lot of your endeavors.
By the way, if you need Hire Dedicated Wordpress Developer to accomplish any WordPress task, you can hire our team anytime!
However, if you spend some of your precious time and efforts on it, the results are going to be amazing for sure.
So, guys, follow the guide entirely and thoroughly to take the utmost advantage.
0 Comments
Please do not enter any spam link into the comment box.