Session 7 – What is Largest Contentful Paint + Improving it

What is LCP and how do we improve its score?

What does Largest Contentful Paint (LCP) mean? How to reduce the amount of LCP and make this number green in WordPress site? Can I optimize LCP myself without special knowledge? In SEO teaching, we intend to address these issues.

I am the author of this article, I am Pouria Ariafar from SEO teaching, this is not a translation article from other sites, we tried to gather a good article for you from the knowledge and experience we had along with a series of reputable sites. We are happy to be with us.

In the previous article, we talked about what First Contentful Paint is and how to optimize it. The Largest Contentful Paint factor was initially used by Google in the Google Lighthouse, and after a while the Gtmetrix tool considered this as one of its factors. In general, no matter what Google does, everyone else behaves according to it, whether they read it or not.

It is noteworthy that speed factors are no longer as simple as in the past, and to solve many of these SEO factors requires high expertise (in the field of programming and SEO and sometimes UX) and just reading a few Persian and foreign articles is not a special task. کرد. I said this first so that we do not expect too much from ourselves or the article یک

There used to be a series of measurements like Load or DOMContentLoaded that are not good now, because most of the time what the user sees does not match what these measurements show. But recently there’s a series of user-centric metrics like First Contentful Paint (FCP) that we talked about earlier in SEO teaching and said that FCP is a measure that measures the beginning of the user experience, but now suppose you just show a color or an icon in Now show the load, so FCP alone is not very useful, here the LCP comes in and plays a more important role.

 

What is Largest Contentful Paint?

One of the most important performance reporting parameters in gtmetrix is the LCP (Largest Contentful Paint) parameter, and about 25% of the Performance score depends on the LCP. In fact, among the GTMetrix parameters, we can say that it is one of the top two.

The Largest Contentful Paint measure measures the display time of the largest page content and is better than FCP. LCP had no place in the previous version of GTmetrix and now, thanks to Google Lighthouse, it has entered the new GTmetrix. Each speed measurement tool calculates the LCP in a specific way. But the new GTmetrix considers the largest content in the top half of the page (Above the Fold) as LCP. We should try to keep the time difference between FCP and LCP almost negligible.

In the image above, we see that when it is set as FCP, the user does not see anything on the screen. But the moment the LCP is set, the appropriate content is loaded on the page.

If you optimize LCP and reduce the load time of this criterion, you can almost get a number above 50 in GTmetrix because there are many similarities between the LCP factor and other GTmetrix factors.

 

How to optimize LCP or Largest Contentful Paint?

Do not think that LCP optimization is a very simple task and reading this article will make your site rank green, not only this article, but there is no article that you can easily get green or A reading by reading it. The work is highly specialized and it takes a long time to get a good ranking, you should try to read all the articles related to speed, there are about 50 articles in SEO teaching that can help you (the slave of treasure is not possible, so any What is the term and you do not know to search for it)

The concept of LCP standard is easily understood. So to reduce the time of Largest Contentful Paint, it is enough to illuminate the largest content in the upper half of our page and try to optimize it. The largest content of the page can be seen through the Structure tab in the Largest Contentful Paint Element section. In this section, GTmetrix tells us which page content is intended as LCP. Of course, sometimes it has bugs and it is not true.
For example, if this content is a photo, we need to optimize its size. This will make the user notice the page is loading and feel satisfied.

The following can be the biggest obstacle to improving the speed of your site in the LCP factor:

1- Slow response time of server or hosts

The longer the browser waits to receive content from the server, the longer it takes to render on the browser screen. So it increases the Largest Contentful Paint time. Improves server response time directly on page load as well as speed metrics, including LCP.

What is the best host for me? Iranian host or foreign host? There are cases that we have to find the answer for ourselves before buying.

First of all, we really need to know where and how to improve the content and resources of our site so that the server responds well to users. One of the criteria to realize that your server or host is slow is the TTFB criterion. Be sure to read the article TTFB reduction. But here is the summary:

  • Optimize server settings
  • Use a convenient and strong cache
  • Use a good and strong CDN
  • Improve third-party files and resources on the site (use rel = “preconnect” and rel = “dns-prefetch” in these files)
  • Use Service Worker (improves the speed and access of the site in offline time)
  • And …

2 – Blocking sources

We should try to reduce and improve the blocking resources inside our site, now what does it mean? I will explain more

The browser needs to parse the HTML page to be able to display any content inside the site page so that it can create a tree DOM. But to complete the HTML parse it has to render resources like JS and CSS.
In fact, JS and CSS are blocking sources here, delaying both FCP and LCP. So in short, we have to defer these blocking resources. Everything we feel is non-critical, that is, we load any of these resources that we think has a lower priority at the bottom of the site so that the site servant can go faster. The user is displayed.

Reduce CSS blocking resources

We need to make sure that at least the necessary CSS code is loaded first and enters the blocking render phase, and here are some things that can be done:

  • Minify CSS – Compress CSS files
  • Defer non-critical CSS – Load non-critical files at the bottom of the site
  • With rel = “preload” and onload = “this.rel = ‘stylesheet'” as well as defer
  • Inline critical CSS – Load priority files at the top of the site inline inside the style tag like the image below

Reduce JS blocker resources

We should try to load the same JavaScript that the user needs, and the less JavaScript you load, the better the speed will naturally be, but what do we do in practice?

  • Exactly the same as we said in CSS, all of the above applies to JS.
  • Due to the differences in different browsers and the different compatibility they have, polyfills are used in programming to resolve these incompatibilities, but this also slows down the website. Therefore, dear programmers are advised to use type = “module” for the main code and nomodule as well as defer for code that may not be browser compatible.

3- Slow or heavy resource loading time

It is true that loading blocking resources such as CSS and JS slows down and worsens site performance, but there are other sources that can have a direct impact on site speed.

Like:

Tag <img>
The <image> tag inside the <svg> tag (different from the top <img> tag)
Video tag (of course, using the poster feature in this video tag can help a lot)
Image or video that is loaded in the background and in the form of url (..).
And …
The above can make your LCP site worse in GTmetrix, and now we want to explain a little more about the solutions.

Optimize and compress photos

We talked a lot about photo SEO in SEO teaching, we said before that images and photos play a very important role in page load and on average, images on websites take up 60% of the total volume, so optimizing and compressing images can help a lot. Load your site quickly.

  • Do not upload duplicate images, many friends do not find the desired photo that was previously uploaded on the site and upload the same photo again, or a site has several authors and all duplicate photos are uploaded. It is better to give appropriate descriptions and names for the photos so that the search capability inside the images is very responsive. In GTmetrix we had an error called Server resources from a consistent URL that pointed to this issue.

     

  • Compress the images. I suggest you read the article Optimize Image and Optimize Image. We mentioned different methods in the article. Friends of the programmer can also get help from the packages available in this link. Friends, why should we upload photos with a size of, say, 5 MB? Previously, we had a dear friend in one of the site speed service projects, all of his photos were over 1 MB. Please pay attention and work in principle.

     

  • Choose a good format for photos. We wrote a good article about optimizing images and various formats. Our suggested format is PNG-8 or webp. But be sure to read the article as well.

     

  • You can also use the CDN for images. I think both imagekit and cloudinary are great for using cdn.

     

  • WordPress friends are recommended to read the article on the best plugin for image optimization.

     

  • Merge thumbnails into one image, combining photos with the CSS Sprites method has always been a good option to improve the loading speed of photos.

    Use Preload for important resources

    Preload helps you load resources faster, you should not use Preload for everything because it loses its function, you should only use it for images, videos, important CSS and JS files. In fact, any source that has a higher priority can use this preload and insert it in the head tag. Some examples:

<link rel = “preload” as = “script” href = “script.js”>
<link rel = “preload” as = “style” href = “style.css”>
<link rel = “preload” as = “image” href = “img.png”>
<link rel = “preload” as = “video” href = “vid.webm” type = “video / webm”>
<link rel = “preload” href = “font.woff2” as = “font” type = “font / woff2” crossorigin>

You can even set responsive images in Preload:

<link
rel = “preload”
as = “image”
href = “wolf.jpg”
imagesrcset = “wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w”
imagesizes = “50vw”
>

Resource compression

One of the most important functions for compressing resources such as HTML is the GZIP function. We already talked about activating gzip in SEO teaching.

Of course, most reputable hosts as well as popular CDNs do the compression process by default, now it may be with the gzip function or whatever, however you can track this from your site hosting and if you use a CDN You can go to the Caching section and set this up, and if you want to do it yourself, read the article above that we linked.

Load resources based on user speed

Did you notice that when your net speed is low and you are watching YouTube videos, it shows you low volume and low video quality? A great way to display content is based on the user’s internet speed, and the slower the user’s internet speed, the smaller the video volume provided by the site.

Now, if you have a professional programmer or a large site, you can also implement this feature on your site and the content will be different according to the user’s note.

For example, the following code is an example, and when the image is displayed, the user’s net speed is, for example, 4G.

if (navigator.connection && navigator.connection.effectiveType) {
if (navigator.connection.effectiveType === ‘4g’) {
// Load video
} else {
// Load image
}
}

 

Use Service Worker

I talked about Service Worker a little higher, Service Worker improves speed, PWA sites have this feature, for example, Digikala and Snap are both Service Workers, these sites also have accessibility in offline time, of course, this should be in Create codes and some do not, such as AMAZON

4- User side processing

User-friendly cooking can be a good option, especially if we have strong frameworks for this, such as React, which is supported by Facebook, or Angular, which is supported by Google, or a lightweight framework, such as Vue, which makes all pages one page and one. Design a site page.

We did the same thing on the SEO teaching Tools site, and the whole site is designed as a single page and the processing of other pages is done on the user side, but we have to be careful how much JavaScript code we have? This new and good method may get worse due to improper use and slow down the site. Because the processing is user-friendly and the page is still not displayed to the user while sending the request for a long time.

The above issue increases the Largest Contentful Paint time. So it is better for sites that process the user side (basically say client-side render) to write their code optimally and pay special attention to this issue.

  • Non-critical JavaScript as well as Minimize and compress it. Of course, the defer option can also be appropriate, and we mentioned it before. We already had an article about Defer parsing of JavaScript in gtmetrix.
  • Using server-side rendering can also help a lot with server-side rendering
  • The pre-rendering feature helps a lot for single-page pages, and sometimes this is better than sever side rendering.
    Of course, it should be noted that single pages, if written well, have a much higher speed than other regular sites.

As you can see, some methods of improving LCP are similar to FCP optimization.

Where is LCP other than GTMetrix?

FCP is almost everywhere, as mentioned in the Console Search Tutorial. You can see this metric in Google PageSpeed ​​Insights, Google Lighthouse, and the Core Web Vitals Search Console report.

Largest Contentful Paint contribution to Performance report
Remember that the purpose of site speed monitoring tools like GTmetrix is ​​to help us create a better user experience. Thus, the LCP score directly affects the Performance Score in the new GTmetrix and is 25% of the LCP Performance Score.

Of course, in github, you can dynamically see the share of each factor well.

How much LCP is good?

  • Less than 1.2 seconds: Good
  • Between 1.2 and 1.6 seconds: Acceptable, but requires optimization
  • Between 1.7 and 2.4 seconds: Slightly longer than standard
  • More than 2.4 seconds: Much longer than standard

So it can be said that the standard distance between FCP and LCP should be approximately 0.5 to 1.5 seconds.

 

Largest Contentful Paint

The LCP criterion considers the user experience better than the FCP and also has the greatest impact on the page performance score. This criterion specifies the display time of the largest page content.

Now by reading the article, you should know what is Largest Contentful Paint? And you understand the ways to optimize and improve this metric, and of course you now realize how difficult it is to be able to improve LCP. This criterion constitutes 25% of the Performance Score and is a large share.

To improve LCP, you need to consider a series of important factors, which are at least 20, and we mentioned above, in other words, improving and optimizing the LCP factor can not be solved by giving a code.

Finally, it is recommended that you seek help from an SEO expert or someone you trust and know to get better results. You can also ask questions in the comments of SEO teaching site.

Be sure to follow the instructions for fixing SEO teaching gtmetrix errors. Or if you are interested in technical SEO, follow the technical and technical SEO topics.

Leave a Comment