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.
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:
Sample content area...(When the page is loading)
Sample content area....
After the image is loaded
Example That is True For CLS:
Sample content area...(When the page is loading)
Sample content area....(Image is loaded)
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.
- 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.
- 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.