Basic Level - Recommendations for LCP and CLS Scores

I will try to share the simplified and basic version of Largest Contentful Paint (LCP) and Cumulative Layout Shift (CLS) elements of PageSpeed Insights application with increasing importance especially for SEO work for individuals without professional knowledge.

In previous months, I shared detailed blog post about CLS: What is Cumulative Layout Shift

When you look at the related websites, online articles and PageSpeed Insights website, you will see that LCP and CLS elements have a very technical explanation and I saw from the questions and comments that people without advanced knowledge couldn’t understand these concepts. Actually, despite the complexity and technical knowledge, I would like to explain these two elements in a basic and understandable way. In this article, I want to simply talk about how individuals with basic HTML knowledge or who manages a website can update these elements for their websites.

First, you should remember that the main purpose of LCP and CLS elements, their scoring or assessment is to make sure your website benefits users more. So, if a website is loading fast when you click on it, if there are no layout shifts or vibration, if the users can rapidly access the content they want and read it easily, there is no problem. These two values measure the duration and properties I have summarised and gives your website a score. On PageSpeed Insights, you can measure a website or an URL and access related scores and data. Again, you can get recommendations to improve on this website. Similarly, you can view these measurements and recommendations for your website from the Developer section of the Chrome browser.

CLS is an algorithm that measures the time and layout shift between when you click on a website and until all the elements on the website are loaded. Let’s give the example like this: we are interested in news, we clicked on it when the website is loading, we instantly saw the title and the content below it... But let’s assume there is an image between the title and the content and let’s imagine that the related image is completely loaded after we start to read the news. In this case, the content we are reading will shift to the bottom of the page which will make it harder for us to follow and makes us uncomfortable. Here we have a negative user experience. Here, what is asked from us to leave the related image space empty until the entire content is loaded and to make the content appear without layout shift... This means we need to fix the location of the elements that will be loaded late before the loading is completed. To do that, assigning width and length to the images in our content can be the simplest option. When the height in the related location is defined, space will be empty until the image is loaded and layout shifts will be prevented. In addition to that, it is very important to use optimized images. Using large images will decrease your website CLS score. Remember that JavaScript on your website can significantly impact your CLS score. Therefore, I recommend removing the unnecessary JavaScript and applications from your website.

When you make a CLS measurement for your website or content, your score is very good if the CLS score is below 0.1. If this score is between 0.1 and 0.25, you can overcome your small CLS score problem with improvements. But if your score is above 0.25, you need to increase your website CLS score with significant work.

Sample Screenshot for CLS:

Example That Has Negative Effect on CLS Score:

Example That is True For CLS:

In the simplest form, Largest Contentful Paint is the total time between clicking a website until the largest elements on the related page are completely loaded. With a simpler definition, the element that is loaded the last on a webpage is the element with the largest size. These are generally the image files. Therefore, Largest Contentful Paint shows the time until the website is fully loaded or when all the user content is visible. In terms of user experience, it is important for this time not to exceed 2.5 seconds. This means it highlights the importance for all the files on the related page to be loaded in 2.5 seconds for the website performance. Therefore, the most important thing you need to do here is to remove the unnecessary images on your website. Then, you need to compress the remaining images by using a tool like tinypng.com and upload them back to the website. As your large images have smaller dimensions and as you have few such files, your LCP score will be better.

Google defined Largest Contentful Paint (LCP) in the official resources as follows: It is the time between URL request by the user until creating the largest visible content elements in the visible space. The largest element is generally an image or a video or a large text at the block level. This is important as it informs the user that the page is actually loaded.

If the LCP score of a website is below 2.5 seconds, it is accepted as a fast loading website. If the duration is between 2.5-4 seconds, the value should be improved. If it is above 4 seconds, this is considered as a bad or slow value. Google’s research shows that a website loading under 2.5 seconds satisfies visitors. Values above 2.5 seconds make the visitors uncomfortable and the bounce rate significantly increases. For Google that really cares about user experience, websites with LCP score below 2.5 seconds are one step forward.

As you can see both CLS and LCP scores are actually algorithms to satisfy the visitors by fundamentally ensuring your website load fast. By looking from this perspective and considering my fundamental and simple recommendations below, it is possible to immediately increase your scores for these elements.

Speeding up your website is actually the summary of this article. To do that, you can simply apply the following to your website:

• Use quality hosting service. This might be the most important thing for your website to be fast.
• Do not have too many images on your website. Choose a sufficient amount of images that summarise the topic. Correctly choose your image dimensions and compress the images before using them. If you are using a banner, choose images with 2000px width and then, compress the image with an application such as tinypng.com and upload to your website.
• Avoid unnecessary JavaScript.
• Compress and use your JavaScript and CSS files.
• Choose classical fonts. Like Tahoma or Arial... Since these fonts are installed on all computers, they will prevent using an external source and helps your website to save on speed.
• Use the JavaScript that slows down the first load of your page at the end.
• Avoid unnecessary animation and motion. These types of applications will slow your website down.
• Make your content which is your text readable. Use the coding such as strong or em when you really need them. Don’t use too many different colours on your website. Try to have your texts in one colour and harmony.
• Think clean and simple; avoid complexity. Present what you want to give simple and clear.

As you can see, it is actually really simple to follow these items above. When you look at them in detail and implement them on your entire website, you will witness your LCP and CLS scores increasing rapidly. Since you will achieve higher user satisfaction when you do these on your website, you will be one step ahead in your SEO work as well.

You can contact me if you need professional support for LCP-CLS or SEO work.