How to Optimize the Largest Content Drawing (LCP)


Hello in the article you are looking for, it is not too late to learn something new! In this article, you will learn how to get your site into production for the first time in the search engine. Here's the topic.

LCP is a basic web metric that measures how long it takes for a larger element to become visible in a viewport.  Until LCP is not loaded, 

you will not see almost anything on the page.  

That's because the LCP element is always above the fold - that's at the top of the page.



 Usually, an LCP is an image or a block of text.  

However, it can also be a video or an animation.  

The LCP element can differ between mobile and desktop.

 As you can guess, the biggest component is the most relevant to the user experience and the perceived upload speed.


 Think about it: if the largest element of the page does not load quickly, the user experience will not be good.  You might be looking at a nearly blank page, waiting for the page to load... You could even leave the site!  When browsing, a few seconds can make all the difference.


 That's why Google has included LCP as one of its Core Web Vitals metrics - metrics that measure how great your user experience is.


 LCP will be rolled out in June as part of a new rating factor, the Page Experience Signal.  For this reason, Largest Contentful Paint is important not only to provide a great user experience but also to improve your SEO Performance.


 Furthermore, LCP accounts for 25% of the total PageSpeed ​​Insights score.  By improving its performance, you are likely to improve your page speed score. In short, LCP is one of the most important performance measures at the moment.


 What is a good LCP score?

Greatest Paint Guarantee

A good result means that the LCP should be less than or equal to 2.5 seconds.  If so, the page will get the green score and pass the assessment.



 If your LCP score is between 2.5 and 4.0 seconds, the score "needs improvements" - you will get an orange score. Suppose LCP is more than 4 seconds.  Then the result is "weak", and you need to fix it ASAP.

 Now let's see how we can find the LCP element.


How to find and measure the largest content graphic

There are several ways to find and quantify the LCP element, using both lab and field data. Here are the most popular tools you can use to test LCP.

 Lab data tools:



Field data tools:

  • Search Console - Dynamic Web Essentials (field data) report.

  • You can learn more about the difference between Lab and Field Data in our post on PageSpeed ​​Insights.

  • PageSpeed ​​Insights (if applicable).

  • Chrome user experience report (field data).


Let's review some of the easiest and most effective tools:

  • PageSpeed ​​Insights and Search Console.
  • Measure and find LCP with PageSpeed ​​Insights.
  • PageSpeed ​​Insights is the easiest way to measure and find an LCP element.


 After testing your URL page, you will get an LCP score in Lab Data and Field Data (if any).  You'll also get PageSpeed ​​recommendations to improve your performance. Go to the Diagnostics area and find the "Largest Content Graphic Element" section.  You will find out what the LCP element for the page you are analyzing is.

 Let's go through some examples and make things easier to understand.

 LCP example from mobile. Let's analyze the WP Rocket blog page from mobile.


 We test the performance of the page in the tool and go to the diagnostic area.  The LCP element is H1, which is the title of the blog post:


LCP-mobile-Example

As long as the headline loads quickly, the page will provide an excellent user experience.

  • LCP-mobile-example

  • LCP example from desktop

  • Now let's look at the same URL from the desktop.


We again go to the diagnostic area and look for the LCP item.  Not surprisingly, LCP is not the same for mobile.  For desktop, LCP is an image:


 Desktop-component LCP

 More precisely, it is the image of the post.


 LCP - Desktop - Example

 Since PageSpeed ​​Insights is a page-based tool, we recommend running several tests for different pages. For a comprehensive analysis, you should also make use of Search Console. Measure and find LCP on Search Console, You can evaluate your performance at the site level and spot any issues with the Web Essentials report in Search Console.


You will be able to access both offers from mobile and desktop:

Once you open the report, you'll see how your site's pages are performing according to each threshold: good needs improvement, and bad.


Mobile Tab for Web Basics Basic Report - Search Console

The Search Console report aggregates each Core Web Vital performance by status, issue type, and URLs.


For example, you may have some URLs that don't work well for LCP.  If so, in the report, you can read “LCP issue: Longer than 2.5 seconds (for mobile).”


By clicking on the row associated with that specific issue, you will arrive at a page that provides a list of URLs that need to be fixed.  While these URLs are an example, they can give you a very accurate idea of ​​what's going on.


It will be very easy to find the URL pattern and go ahead with the fix and validation.


What factors affect LCP and cause slow result

For WordPress sites, three factors affect LCP: slow server response times, blocking of rendering of JavaScript and CSS, and slow resource loading time. slow server response times.


The browser makes a request to the server, but the server takes a very long time to send the requested content.  Since the browser is not receiving the content quickly enough, it takes a while for something to be displayed on your screen.  As a result, the loading time is not great.  The LCP score is affected.


 You'll fix the problem by optimizing your Time to First Byte, using a CDN, and establishing external connections early.


 JavaScript and CSS display is prohibited

 The browser makes a request and gets the content from the server.  At this point, the browser will display and show the content, right?  Not so fast.


 To display any content, the browser must parse (or parse) the HTML of the page and make it "readable" in the HTML structure of the page - that's the DOM tree.  Then the entire content will be rendered and rendered - unless some scripts and style sheets prevent HTML parsing.  These scripts and stylesheets are displaying blocking resources.


 As a result of this block, the analysis was delayed.  Again, the content you requested takes quite a bit before it loads.  LCP performance is affected again.


 You will address these issues by deferring and removing unused JS files.  Do not worry!  You will find all the information you need in the next section.


 Slow resource load times

 Other files can also cause poor performance and a bad user experience: images, videos, block-level elements such as HTML and CSS files.


 As you already know, LCP links to the elements at the top of the page.  This particular problem appears when these files are displayed above the fold and take a long time to load.  As a result, load time and LCP are affected again.

 You'll manage resource load times by optimizing images, reducing and compressing CSS, JS, and HTML files, and preloading critical assets.


 


Bottom line: How quickly the browser receives and displays the requested content determines the LCP score.

Let's understand how to fix all these issues in detail.

Basic Web Essentials cheat sheets are the easiest and fastest way to learn how to improve LCP, FID, and CLS and prioritize your performance tasks.




How to reduce the largest content with paint longer than 2.5 seconds or 4 seconds on mobile and desktop. Here are ten ways to improve the performance of "Largest Guaranteed Content" and fix Search Console's "LCP issue: longer than 2.5 seconds or LCP issue: longer than 4 seconds" situation, both from mobile and/or desktop.


Optimize first-byte time and reduce server response time:

  • Use a CDN.
  • Defer JavaScript.
  • Minify CSS and JS files.
  • Use the preload of important assets.
  • Remove unused JavaScript.
  • Optimize your photos.
  • Compress text files.
  • Establish third-party connections early.
  • Defer non-critical CSS and inline critical CSS.
  • Let's see them in detail.


For each suggestion, you will find a piece of information about its effect on performance - from low to high.  The highest effect is the highest chance of improving the result of the largest guaranteed content after following that specific recommendation.


Optimize first-byte time and reduce server response time

 Performance effect: high


One of the main causes of bad LCP is slow server response.


You can measure your server's response time by looking at the time to the first byte (TTFB).


Every time you want to consume any piece of content, the browser sends a request to the server.  TTFB measures how long it takes the browser to receive the first byte of content from the server.


By optimizing your TTFB, you will improve your server response time and LCP score.


Please note that a good TTFB should be less than 200ms - you can quickly check this metric by testing your URL on WebPageTest.



There are two ways to fix bad server time:


You can also choose one of the best WordPress hosting providers that include a server-level caching option.


      

 Enable page caching

 By enabling page caching, your site pages will be stored as HTML files on the server after the page is loaded for the first time.  As a result, the content will be displayed faster.  It is an easy and effective way to improve TTFB.



Cache tab

As the first thing, the hosting provider should have servers that are close to the majority of the users.  The closer the users are to the server, the faster the data will be sent.


Choose a fast server hosting service

Fast hosting can make a huge difference in performance.  And maybe it's time to upgrade your hosting plan!




You must also choose the correct server host type.  A dedicated hosting server will ensure the fastest performance.  Consider the amount of traffic on your site, and make your decision.


By enabling caching and choosing fast hosting, you'll take care of the following PageSpeed ​​Insights recommendations:

  • Reduce server response times (TTFB)
  • Servicing fixed assets with an efficient cache policy.

 

Use a CDN

A CDN helps you reduce the length of time between a user request and a server response.  This amount of time is latency.  The round-trip time between the browser request and the server response is the round-trip time (RTT).


If users are away from the server location, it may take some time before all assets (e.g. images, JS, CSS, and videos) are sent.  The response time and RTT will be high and it will affect the load time and LCP score.


You have already seen how your server location can affect the performance of your site.


A CDN solves the problem thanks to a worldwide network of servers.  No matter where your users are.  Every time they request a page, they will get the assets from the nearest server.  So easy.


RocketCDN is the best way to allow users to access your site quickly and easily.


If you want to know more about the advantages of CDN and the different types, you can read our article.


Choosing a CDN will help you address the following PageSpeed ​​recommendations:

Servicing fixed assets with an efficient cache policy

Activate text compression.


Please note that the CDN will only address these recommendations if properly configured.  The default options may not be enough to improve performance as expected.


Defer JavaScript

Display blocking resources such as JavaScript files are one of the main reasons for a poor LCP score.

Deferring JavaScript files will help you address the issue.  In other words, it will change the priority of the JS files being loaded. to remember?  The browser analyzes the HTML, builds the DOM tree, and then renders the page - unless there is any blocking resource to slow down the process.


The browser will only process and load JS files by deferring JavaScript after parsing the HTML document and building the DOM tree.  Since nothing is blocking the process, rendering will be much faster - and the LCP meter will improve.


You can add the defer attribute to JavaScript files so that the browser can detect which resources should be deferred.  The browser will parse the HTML and build the DOM tree without interruption.


Here is an example of the defer attribute:

<script defer src="/example-js-script"></script>

The easiest way to manage JavaScript resources is to take advantage of WP Rocket and the Delayed Load Javascript Def feature.


You can select this option on the File Optimization tab.  Moreover, you can easily exclude certain JS files from deferring if the defer feature conflicts with any file.


File Optimization Tab - Delayed JavaScript Loading

You'll address PSI's recommendation to "remove blocking resources" in a few clicks - although the blocking resource issues don't stop here.


Let's move on to the next point about handling render-blocking resources.


Remove unused JavaScript

Another way to get rid of render-blocking resources is to remove unused JavaScript resources.  It may not be used for two reasons:


It is no longer used on your site.  They are still in the code but are completely useless.

They are not included in the above-the-fold content.  Therefore, it is not necessary to build a DOM tree.  However, these files have a reason to exist (eg Google Analytics tracking code).

You can find a list of unused JS files in the PageSpeed ​​report in the "Remove unused JavaScript" section:


List of Unused JavaScript Files - PageSpeed ​​Insights Report

There are two ways to solve this problem in WordPress:

Download JavaScript files only when needed

For example, files should only be loaded on pages that need that specific file - in any other case, JS execution should be disabled.  You can take care of this aspect with plugins such as Perfmatters and Assets Cleanup.


Delay JavaScript files

JavaScript files will not be loaded until the first user interaction (eg scrolling and clicking a button).  If there is no user interaction, the JS files will not be loaded at all.  By delaying JavaScript, JS files will not be detected by Lighthouse and will not be included in the "Remove unused Javascript files" recommendation - although not all scripts from PageSpeed's list of recommendations can be safely delayed.

For example, Google Analytics tracking code is usually included in this PageSpeed ​​Insights recommendation.  If you delay the JS files, the Google Analytics JS file will no longer be reported.

 Note:

  • Delaying JS files does not have the purpose of solving this PSI recommendation per se.
  • However, it does well in handling PageSpeed ​​audits and improving your LCP score. 
  • So it is good to know.


So, how do you delay JS resources?  You have different options.

If you are looking for a free plugin to delay JavaScript files, you can use Flying Scripts.

Another way to safely handle any unused JavaScript is to make use of WP Rocket!  The plugin allows you to delay JavaScript execution by a few clicks from the File Optimization tab.  You can easily include a list of delay scripts and let the plugin do the job for you:

  • File Optimization Tab - JavaScript Execution Delay
  • As mentioned, by removing unused Javascript files, you will process the specific PageSpeed ​​recommendation. 
  • In general, it will "eliminate render-blocking resources" and "reduce javascript execution time".

Your LCP degree will get you another boost.

Defer non-critical CSS and inline critical CSS

For JS files, you should also defer junk CSS - all files not relevant to page rendering.  In other words, you have to change the priority of these files as well. They will be loaded after the browser displays the most relevant content on the page.


While deferring CSS files, you should also include important CSS - resources that are above the fold and that you need to load as quickly as possible.  This means that you must define your CSS (or Critical Path CSS) and include it within the HTML structure.


If you want to perform both actions on WordPress, here's what the process looks like:

First, you have to extract and embed the CSS critical path (CPCSS) using a single build tool available.  You can find one here.

 Then the rest of the classes should be loaded asynchronously by applying the following pattern.

You can read more about the process in the dedicated Google resource

Another tip is to avoid putting large unimportant CSS code in the <head> of the code.


If you want to take care of both critical and non-critical CSS quickly, you can take advantage of the CSS delivery optimization feature provided by WP Rocket.  This option will defer non-critical CSS and inline critical CSS - you don't need to do anything else.

On the File Optimization tab, you can select the option:

File Optimization Tab - Optimizing CSS Delivery

By performing these actions, you will deal with PageSpeed ​​Insights' recommendations to "remove render-blocking resources" and "avoid critical request sequences".


Minify CSS and JS files

Another effective way to improve Largest Contentful Paint is to reduce CSS and JS files.


Minification is all about improving your code by making it more compact.  It means removing any whitespaces, line breaks and comments included in the code.  As a result, minification will reduce the size of your CSS and JS files and make them load faster.


It sounds easy, but the reality is more complicated.  It's not always easy to minify both file types and make sure all the right resources are excluded - especially if you're not a developer.  Either way, it takes a long time.


The easiest and most effective way to take care of minification is to use a plugin like WP Rocket.


In the File Optimization tab, you will have the opportunity to minify your CSS and

JavaScript files. File Optimization Tab - Minify CSS and JS Files

 It will address the following PageSpeed ​​Insights recommendations:

  • minify CSS
  • minify JS
  • Avoid massive network loads.

Optimize your photos

Image optimization is another relevant way to fix a bad LCP result. Images are often an LCP element from a mobile phone or desktop.  By optimizing the loading time, you will boost the largest performance of Contentful Paint. Here's what you can do to fix any performance issues with photos.


Compress and resize your photos.  You should reduce the file size without losing quality.  The smaller the image size, the faster the loading time.


To be clear: If you use a tool to enhance your images on the desktop, it will only strengthen the original size.  Images you upload to WordPress will not be resized.  As you know, in WordPress, there are different sizes of images.  Unless you use a proper image optimization plugin, it will not improve anything for performance.


To improve some images, you can use a tool like ImageOptim.  On the other hand, if you want to enhance more images and thumbnails in bulk, Imagify is the perfect solution.  You'll reduce the weight of your photos without sacrificing their quality.  You will save a lot of time!


Convert your photos into new formats.  In general, Google recommends the WebP format.  This is why all WordPress image enhancer plugins now include the option to convert images to WebP.  Other formats you might consider are JPEG 2000 and JPEG XR.  These formats are more minor than JPEG, PNG, and GIF formats and help improve performance.


Use responsive images.  You should not use the same size images for desktop and mobile.  For example, if the desktop image size is large, then the mobile image size should be medium.


Page builders like Elementor allow users to upload different image sizes depending on the device.  Optimizing the mobile image is very essential, and the grade of the phone is paramount.  Don't underestimate the effect it has on your LCP score!


Exclude the LCP element from the lazy load.  While overall slow loading helps improve load time, it can worsen the LCP result, especially when the LCP element is an image and is lazy loading.  This is why excluding the LCP element from lazy loading and rendering it directly in the HTML of the page is an excellent way to improve the LCP score.


Use a static image instead of a slider.  Sliders can be too heavy to load due to the code. On the other hand, the static image generated by HTML code is lighter and faster.


By optimizing your images, you will process the following PageSpeed ​​Insights audits:

  • Efficient encoding of images
  • Image service in next-generation formats
  • The right size for the photos
  • Avoid massive network loads.


Compress text files

You should also compress text files such as HTML, CSS, or JavaScript resources.

Compression means "compressing" your files into a smaller and lighter format so that they load faster.  Once you reduce its size, the transfer between the browser and the server will be faster.  The browser will be able to load these resources faster.  Loading time and LCP will improve.


You can use compression formats like GZIP and Brotli.  On the other hand, most hosts support GZIP.  On the other hand, Brotli is more performant and is currently mostly recommended.  Learn more about GZIP vs. Brotli in our blog post.


You can easily enable GZIP compression on WordPress with a plugin.  You can choose from various options, from the direct Enable Gzip Compression plugin to WP Rocket, which automatically includes GZIP compression.  Also, some hosts enable GZIP compression by default.


Either way, it will address PageSpeed's "enable text compression" recommendation.


Use critical asset preload (as the largest guaranteed graphic image)

At this point, you know how important assets above the fold are for a good performance score.  These important resources can be fonts, images, videos, CSS, or JavaScript files. To improve your LCP score, you should always load important assets as quickly as possible. So, you may be wondering how to preload the largest Painful Paint image.


The preload option is easy to use.  It tells the browser to prioritize the loading of these resources.  In other words, preloading prevents the browser from detecting and loading these important files (including the LCP image) until later.

You can include rel="preload" in your code:

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

 Source: Google

To preload an LCP image, you can also use a plugin like Perfmatters.

If you need to preload fonts, 

you can take advantage of the

WP Rocket feature:

Preload tab - preload fonts feature

You can read more about best practices for preloading web fonts in our dedicated article.


By preloading critical assets, the PageSpeed ​​recommendation will handle "preload key requests".


Establishing third-party connections early

Making third-party connections faster is an additional way to improve the performance of your LCP.

You must use the pre-connect option.

 Let's say there is a required CSS or JS file from a third party, such as Facebook or Google Analytics.  The browser will request the external resource.



 If enabled, the pre-connect option tells the browser to establish a connection to the external domain as quickly as possible.  The browser will then process the request in parallel with the running rendering process.


 You can include rel="preconnect" in your code:

<link rel="preconnect" href="https://www.pooqle.com/">

 

As an alternative, you can use a plugin like Perfmatters.

Since your browser may not support the pre-connect option, it is always better to implement DNS prefetch as a fallback method.  It will then resolve DNS lookups faster.  In other words, external files will be loaded more quickly, especially on mobile networks.

You can add rel = “DNS-prefetch” to your code - as a separate tag from the prefetch attribute:

<head> <link rel="preconnect" href="https://www.pooqle.com/"> <link rel="dns-prefetch" href="https://www.pooqle.com/"> </head>

 Just specify the external hosts to be fetched in advance:

Preload Tab - Prefetch DNS Requests

By establishing external connections earlier, you will improve the Time to First Byte and server response time.  PageSpeed's recommendation will also address "pre-connection to required assets".


Thank you for the time you took to read this article.  We hope we have given you a valuable assistant at LCP.


0 Comments

Post a Comment

Post a Comment (0)

Previous Post Next Post

Ad

Ads