LCP or Largest Contentful Paint is one of the vital parts of Google’s Page Experience’s Core Web vitals. Google has It is very complicated to get the time of LCP time below 2.5 sec for a good LCP score.
What is LCP in Core Web Vitals?
LCP stands for Largest Contentful Paint, it is the loading time of the largest part of your content appearing above the fold. For a good user experience, Google recommends the LCP value should be within 2.5 sec (which is also referred to as its optimum score) of when the page first starts loading.
The below diagram illustrates the same. The LCP value from 2.5 sec to 4 sec needs improvement and a value above 4 is poor
Simplified explanation: LCP (Largest Contentful Paint)
Referring to the diagram at the very top, you can notice that when a webpage is being loaded, after a while (say 1 sec) you see some part of the webpage appear on the screen. A few seconds later (say 2.6 sec) you will see some more parts appearing. After few more seconds (say 5.6 sec), you can see the entire web page is loaded on the screen (browser)
So what do you think will be the LCP score of this website? To find that out, you have to count the time of the largest content element (marked image block) appearing on the screen. So the LCP score of this example website is 2.6. Thus, for a 2.6-sec LCP score (in the above case) it requires improvements.
An LCP element can be an image, Video, Slider, big block of text, or any other multimedia. (appearing the biggest)
Note: LCP score is the time required for the largest content paint element to appear above-the-fold (of the page only). The content part below the fold is discounted.
And thus, the LCP score doesn’t belong to the entire website but to its individual pages. Also, to set the LCP score, Google doesn’t wait for the entire webpage to load. To determine LCP score Google measures the time to load only the Largest element (above the fold content).
As the mobile and desktop appear differently and so the LCP scores of both desktop and mobile versions of the site are different. But Google is using the LCP score of the mobile version of the site as LCP score of the entire website.
How to bring an LCP score below 2.5 sec?
There are few ways in which we can improve the LCP score of the site, a few of which are as follows.
- Upgrading Hosting plan
- CDN for Images
- Minifying CSS and HTML
- Enable caching
The above are the conventional ways of keeping the LCP in check. There are other methods too for reducing the LCP score
Placing the LCP elements below the fold.
As LCP score is the loading time of the Largest Content Paint (LCP) element lying above the fold. This loading time should be less under 2.5 secs.
The trick is to identify the LCP element and place it below the fold. Placing the elements below the fold will replacing the current heavy LCP element with a lighter element and may also reduce the LCP time under 2.5 sec.
In many cases, the over the fold content has LCP elements such as
- Featured Image
- Featured Video
- Embedded Animation
So the point here is to first optimize the above elements (Optimize Images, optimize text blocks, don’t host the video)
The clever thing to do is to plan the content of the webpage in such a way that these heavy elements will lie below the fold.
Above the fold, also known as critical path content can be found out by using Free websites such as Sitelocity.com This way you can have this multimedia for a better website experience alongside the lower LCP score (below 2.5 sec).
Elements to Optimize or move below the fold to Lower your LCP scores are as follows
- No Hosted Videos: Hosting video on a website can shoot LCP time over the roof, due to the size of the video itself
- Optimize Image: Try optimizing images. Keep the Image smaller than the text box. You can also use CSS to generate background.
- Keep text blocks small: Generate gradient and then insert static text, this way you can optimize your text block.
Fonts and page loading time and LCP score
Fonts if they are unique, are required to be downloaded by the user to see your website content. This may take time and increase the LCP score. One thing can be done, you can use the below HTML code (marked red, in the place where you have declared your fonts)
font-family:”Open Sans Regular”;
This will make website content visible using the font present on the user’s phone until your unique font is downloaded. Once, that’s done the code will replace the font present inside the phone with your own unique font. This way, downloading your unique font won’t affect the content appearing on the web page (as the website will be using the font inside your phone) and won’t increase the LCP score.
For WordPress users, they can install & activate a plugin named “Swap Google font Display” by Gijo Varghese. No setting, No activation required.
Website Technical factors affecting LCP scores
1.Render-blocking resources to improve LCP site loading time
When a user tries to enter your website through his browser. The visitor’s browser sends a request to your web server after which it starts accessing the webpage.
Thus, the rendering is hampered due to Java script, and this is called the render-blocking resources.
LCP can be improved in 2 ways
1. Minimize DOM size
DOM stands for Document Object Model. The DOM is a tree-structured Object representation of your HTML where each HTML element (for example the body or h1) is represented by its own node.
While creating the codes for simplification and to avoid complexity the developers use spacing, commenting, and naming for the code to be easily readable and understandable by themselves or fellow developers for future reference. Unfortunately, your server doesn’t require this spacing, commenting etc increases the code and thus also takes time during the execution of these codes, thus, increasing the site loading time.
Hence, minifying is the process to remove all these extra spaces, comments and reduce or crunch variable labeling, etc.
For WordPress users, they can use the Free plugin “Autoptimize”
For Cloudflare users, they have this feature to minify in the “Speed” tab.
Google recommends the following tools to minify.
- To minify HTML, try HTMLMinifier
- To minify CSS, try CSSNano and csso.
Image affecting the LCP score
This is the most common and probably the biggest factor which affects the LCP score. Images in many cases are the Largest Contentful Paint, above-the-fold. Issues related to Images and site loading time have already been discussed, out of which 3 problems affect LCP score.
This is related to the size of the image. Heavy Image in Megabytes on the webpages requires more time to download and faster internet. So, LCP loading time also increases. The size of the image is directly dependent on the LCP score if the image is the Largest contentful paint on the webpage lying above the fold. There are several tools that helps you to reduce the size of the image. 1) Reduce Images or 2) ShortPixel are some of the free tools used to reduce image size.
The size of the image also differs with its type. A png image is relatively heavy compared to jpeg, or BMP image is the heaviest of the two. Here, selecting the correct image format plays the key. If you want an image with a clear background, then use png or else use jpg image wherever possible. This will reduce the image size of the LCP element (an image in this case)
Consider using Webp Images. It is a game changer. Google has brought a new image format named webp. This is considered as the lightest image format, and has very good images quality, considering its size. It has qualities of png as well as jpeg image format, it it has lowest size and can give transparent background.
The only constrain using this format is that it is not supported by many editing software since it is a relatively new format, this you have to rely on plugins. There are webp converters plugins available for Custom coded website, they will automatically convert your images of jpg, png and bmp files and replace them with the webp format automatically on your website.
- WP-Rocket’s Imagify Plugin does this very handsomely.
- Webp converter for media is another plugin which converts jpeg, png image files to webp on the website
Correct Size of the Image
The size of the image also depends on the pixel value or the resolution of the image. Selecting the correct pixel value also reduces the size and thereby affects the LCP score.
Image optimization techniques have already been mention in our Image SEO article, you can refer them to reduce the size of your Image LCP element.