Improve your Google CLS Score by Optimizing Image Sizes Using Plain CSS

 

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.

Above is the definition of CLS from Google web.dev. 

Google has included CLS (cumulative layout shift) as an important metric for measuring a page and a forthcoming metric for ranking a page as it evaluates the user experience of a website. You can measure your website's score here.

Simply put, a high CLS score means that your ranking will be low. Ideally, CLS should be 0 for a webpage. There are many elements on a page which can contribute to increase in CLS, the biggest contributor as per our experience, are the Images that are displayed on a Webpage. 

If images are not loaded properly, then they can cause the page elements to shift or pushed when they load, impacting the CLS score. 

Today, we'll see an very easy and efficient way to reduce the impact on CLS by image loads. 

We'll also see how to correctly display images as per the screen size of the media device, which is really relevant in today's world of mobile devices, and the range of screen sizes available.

The first step is how to correctly put the image attributes in the HTML tags. 

<!--width and height attributes have to be included to calculate the aspect ratio and prevent CLS-->
<img src="pics/logo/web_logo.png" class="cls-img" width="1500" height="300" alt="Computengine Logo"/>
Notice the 3 attributes that we have included --> width, height and class

Width and Height are the attributes that you have to change for every image that you include depending upon the image size. These attributes are going to be used to calculate the display section that the browser needs to keep aside when the image renders on screen, so that the web elements are not pushed down, effectively reducing the Cumulative Layout Shift (CLS)!

Notice the class attribute. This class is a custom CSS class that we are going to create now, and it is the main item in this tutorial. As its a custom class, you can name it whatever you want!

Here is the CSS code that you can simply re-use. Note that its enclosed in <style> tag. It has to be put inside your base HTML template, before the </head> tag, so that it in included in each and every page automatically. Also, note that it cannot be included in a CSS file, as it needs to be processed during the initial page load of the POM. That's why we are keeping it in <head>

<style>
	@media screen {.cls-img {width: 75%;height: auto;aspect-ratio: attr(width)/attr(height);}
	@media screen and (max-width: 1000px) {.cls-img {width: 75%;height: auto;aspect-ratio: attr(width)/attr(height);}
	@media screen and (max-width: 500px) {.cls-img {width: 100%;height: auto;aspect-ratio: attr(width)/attr(height);} 
</style>            

The @media screen will measure the screen width and apply the style accordingly.
500px are smaller resolution mobile screens where we will show an image at 100% width, and height will be adjusted automatically.
1000px are good resolution mobile and tablet screens, and we can apply a different width here.
Anything above 1000px, we can apply a different width %.

attr(width)/attr(height) will take the attributes from your image, which you have declared, and use it to calculate the aspect ration. 

You can make adjustments to the width attribute in the <style> according to your website. That's it folks! We've learnt a simple and efficient way to correct the CLS on our page without using any javascript processing code!

Thanks for Reading the Article. If you have reached this far, we hope that the article was useful to you! Please Like/Share/Follow us on FacebookTwitterTumblr.


Comments

Popular posts from this blog

Calculate Your CTC Hike Percentage

Java Program to Find a List of Prime Numbers (Step by Step)

Java Program to check Palindrome

What is my IP Address - How to find your IP address on Local Network using Command Prompt, and External Network using JavaScript Code

Reduce Server Load from Dynamic Page Search - Create a Dynamic JavaScript based Table filter