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 Facebook, Twitter, Tumblr.


Comments

Post a Comment

Popular posts from this blog

Calculate Your CTC Salary Hike Percentage - Online Calculator to find your New Salary

-
Image
  Did you receive a Salary Hike? Congratulations!  Using this CTC Hike Percentage calculator you can calculate: Percentage Hike Received New Expected Salary Old Salary (yes, you already know it! But if you want to compare, we've included that feature as well!) Receiving a Salary Hike is a really happy occasion. It means that your work is valued in your organization and the organization is willing to invest in you and your career growth. But as any human being, you are interested in exactly how much you have received. Most organizations provide either a lump sum amount in the hike letter or mention a percentage. Employees are left wondering that if I have received a certain amount of hike, what exactly is the percentage when compared to my old or previous salary. In the same way, if percentage is mentioned, then the employee is left wondering what will be my new salary.  So, we have a very simple solution for y...
Read more

Find the Longest Streak of 1's in a Binary Array using Java Code

-
Image
  You have been given an Integer Array which contains only 1s and 0s, and asked to find the longest running streak of 0 or 1 in the array. Sound familiar? Its a common interview question. Let's try to find a solution using Java.  We would required two counters here, 1 counter to keep track of the running count, and the second one to keep track of the maximum running streak found.  We'll loop through the array using a for loop.  Here is the code for your reference: /**  * Find the longest Streak of 1s  * @author computengine.com  * @param a  * @return the length of the longest streak  */ public int findLongestStreak ( int [ ] b ) { System . out . println ( " Array for processing: " + Arrays . toString ( b ) ) ; int count = 0 , max = 0 ; //loop through the array for ( int i = 0 ; i < b . length ; i + + ) { //increment count when 1 is found if ( b [ i ] = = 1 ) count + = 1 ; //if count is greater...
Read more

Java Program to read Excel File and Load into Array

-
Image
Excel is one of the most important productivity tools used in offices. It is also a great organizational tool, and its really easy to create tables in excel to store different kinds of data.  When doing automation, excel is an important tool to store data for automation scripts, which makes reading Excel data using Java code an important Interview Question. So, today we'll learn how to read an excel sheet using Java, and return the contents as a String Array. The Array can then be utilized as per your requirement.  We are reading an xlsx file, the most recent and most popular excel format. We need to import the below classes: import java . io . File ; import java . io . FileInputStream ; import org . apache . poi . xssf . usermodel . XSSFCell ; import org . apache . poi . xssf . usermodel . XSSFRow ; import org . apache . poi . xssf . usermodel . XSSFSheet ; import org . apache . poi . xssf . usermodel . XSSFWorkbook ; java.io.File and java.io.FileInputStream will ...
Read more

Java Program to Read a Properties file and return a Property Value

-
Image
  Properties file in Java is used to store configurations, data or settings for a project. They have been utilized as Object Repositories for Automation Projects in the past (and still are used in legacy projects) until the Page Object Model came along.  This makes reading of Properties files an important concept in Java. This Tutorial will cover the below topics: 1. Create  Properties file in a Java Project 2. Set Properties in the file 3. Read the Properties file using Java code and return the value Let's first see how to create a Properties file for your Project. Its really easy.  In Eclipse, right click on the folder where you want to create the file, and navigate to New -> File. Now enter the file name, and make sure to enter the extension as .properties The file has been created! Now, the next step, i.e. enter some data in the file that we'll read using Java. The properties stored in the properties file have to follow a certain format.  You can enter l...
Read more

4 ways to add New Line Character to a String in Java

-
Image
When you are required to output Strings with your Java code, more often than not, there is a requirement to format the output correctly.  Adding a newline character between two strings in order to separate them, or create a paragraph is one of the most common requirements. Let's look at a few ways today, on how to output a newline between two Strings. 1. System.out.println inbuilt function One of the easiest ways, is to use the function System.out.println(). The println() function will automatically add a new line to the output, if using two strings.  Sample: String s1 = "This is a String." ; String s2 = "This is another String." ; System . out . println ( s1 ) ; System . out . println ( s2 ) ; If you don't want to use a separate System.out.println for every String, there are other ways as well. Read on! 2. Add a newline character "\n" You can simply append newline character yourself to the strings, and use a single System.out.print command...
Read more