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

lcp-score-remarks

LCP score courtesy: https://web.dev/vitals

 

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)

ATTACHMENT DETAILS lcp-simplied-explanation-timeline-largest-contentful-paint

LCP explained with the help of a timeline

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.

LCP-SCORE-ABOVE-THE-FOLD-EXPLANATION

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.

  1. Upgrading Hosting plan
  2. CDN for Images
  3. Minifying CSS and HTML
  4. 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

  1. Slideshow
  2. Featured Image
  3. Featured Video
  4. 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 Slideshow: Slideshow has its own Javascript and multiple images inside it, which takes time to download.
  • No Animation: It has javascript takes time to load and increases the loading time, thereby LCP score.
  • 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.
  • No use of plugin: Eliminate the use of a plugin to which uses javascript for this over-the-top content, as this will take time to get executed.
  • Use images, videos & elements with javascript below the fold of the webpage.

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-face {
font-family:”Open Sans Regular”;
font-size:14px;
font-display:swap;
}

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.

Note: If fonts are added using JavaScript on your website, then this method won’t work.

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.

The user browser first reads the HTML on the page and starts executing the requests. This execution happens from top to bottom. So the reading of the CSS file, Image files, Javascript file on the webpage happens from Top to Bottom.

CSS and Image files are being downloaded parallelly, so the problem is with the Javascript file. Incase of javascript, the browser has to first download execute, and then moves to the next line (unlike parallel execution of CSS and Image files).

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.

This is getting bloated or maximizes due to various reasons such as excessive use of plugins, use of page builders throwing excessive, bad coded website, DOM nodes created by Javascript. etc.

The way to avoid or minimize the DOM size is to add Lazy loads on the webpage, split large content into multiple pages, add infinity scrolls, avoid the use of memory intense Javascript, avoid DOM nodes created by Javascripts, etc

2. Not to keep Javascript at the top

Avoiding keeping Javascript at the top can be a solution, to improve LCP but there are other ways for example use of Defer attribute. Using Defer attribute, it downloads the Javascript and stops the execution until the full paint HTML is parsed.

defer-tag-long-term-seo-code

Use the above defer tags, to every javascript line.

For WordPress users, this can be done using the Free plugin named Async JavaScript

setting of autoptimize plugin to defer

2. Minify HTML, CSS, & Javascript files to improve LCP site loading time

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.

cloudflare-minify-javascript-html-css-feature

Google recommends the following tools to minify.

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.

Image Optimization

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.

Image Format

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.

Recommendations

  • 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.

Resources

https://web.dev/vitals/

https://web.dev/lcp/

https://developers.google.com/speed/docs/insights/MinifyResources