What is the Largest Contentful Paint and How to Optimize It?

Starting June 2021, Google will roll out its new page ranking update called Core Web Vitals. As part of the update, Core Web Vitals will influence your site’s ranking on Google. Core Web Vitals consists of three metrics. The three metrics are Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), and First Input Delay (FID). In this write-up, we will discuss in detail about Largest Contentful Paint (LCP).     

What is the Largest Contentful Paint (LCP) Metric?

Largest Contentful Paint (LCP) is a Core Web Vitals metric. LCP measures when the largest content element (main content) in the viewport becomes visible. LCP indicates the time it takes for the main content of the page to finish rendering on screen. 

The main content could be an image or a text block. The LCP time would be relative to when the page first started loading. In essence, Largest Contentful Paint (LCP) reports the render time of the largest element in the user’s viewport on a page. LCP contributes a solid 25%. It weighs the most towards the website performance. 

LCP is a pivotal metric for measuring load speeds of a page. The LCP value tells you how fast a page can load and render all the visual elements to the screen. It is a user-centric metric, as a fast LCP helps to keep users on a webpage. 

What is a Good Largest Contentful Paint (LCP) Score?

Websites must aim to keep the Largest Contentful Paint to less than 2.5 seconds. In other words, limit the rendering time of the main content on a page to anything under 2.5 seconds. The below picture shows how we managed to keep the Largest Contentful Paint (LCP) value of Virtina website to under 2.5 seconds.

Core Web Vitals will influence the user experience and performance of your website. A part of that comes from Largest Contentful Paint. Ensure you optimize your website’s Core Web Vitals. That includes taking the best measures to optimize the LCP. 

Use any of the following tools to measure your website’s Largest Contentful Paint (LCP) value. Some of these tools use field data of actual users. Other tools simulate user behavior in a lab environment to determine performance. PageSpeed Insights is the best tool for making a quick page analysis.

How is the Largest Contentful Paint (LCP) Reported? 

Only the elements that get rendered and stay visible to the user can get considered as the LCP. Elements that haven’t yet loaded don’t get considered as rendered. As such, these elements don’t get considered for Largest Contentful Paint. Elements lower on a page can become the LCP when they are in the user’s viewport. 

If an LCP element gets removed from the viewport, it could remain the largest contentful element. It’ll stay as the LCP till another larger element gets rendered on the page. When the user starts interacting with a page, there is a good chance that LCP elements will also begin to vary.  

How Do LCP Elements Behave and Get Handled on a Webpage?

The LCP content must appear in a user’s viewport. If an element features outside of the viewport, it doesn’t count. If the element gets clipped, that section of the element won’t count toward the size.

The size accounted for visual elements is either the visible size or the intrinsic size. Images expanded to a larger size will report their inherent size. Photos that get downgraded to a size smaller than their intrinsic size will register their display size.

For text elements, the size of their text nodes gets considered. For all elements, their CSS touch-ups will not get considered. Any margin or border applied with the help of CSS isn’t accounted for. 

In some cases, the Largest Content Element (LCP) changes as content loads on a webpage. When new content gets added to the DOM, the largest element changes. E.g., a user scrolling down will trigger a change in layout. At the same time his viewport changes, the content that was the largest gets removed from the viewport.

Mostly a late-loading content will end up as the LCP compared to the content already on the page. But that’s not the case always. In some instances, the earlier loaded LCP element will remain the largest element throughout the load process. Since all the other elements on that page are smaller than this element. Even as other content on a page emerges, the earlier element remains the LCP.

Common Largest Contentful Paint (LCP) Elements

The Largest Contentful Paint (LCP) detected on Virtina website is the <H1> header tag. But, the LCP element will vary from website to website. As such, for your website, it may be a different element altogether. You can visit Page Speed Insights and access the Diagnostic section to view the exact Largest Contentful Paint (LCP) element for your website. 

The largest element will be a feature image or maybe the <H1> tag in most cases. Some of the other common LCP elements appearing on websites include, <img> element and blocks of textual content. It could even be a background image loaded with the url() function or <image> element inside an <svg> element. 

How to Improve Largest Contentful Paint (LCP)?

Optimize Servers

Servers with slow response time take longer to forward content to a browser. As such, the browser takes longer to render anything on the screen. Slow servers delay the process to return webpage content. Thus, owners must assess and improve server-side code. 

Initiating this, will lower the time it takes for the browser to receive the server data. Instead of serving a static page on a browser request, the web frameworks on the server side must create the page in real-time. The frameworks must follow proper protocols and performance guidance to prepare a page.

• Optimize the server’s application logic to make pages faster. 
• Optimize the way your server queries databases. You can even migrate to a different database.
• Upgrade the server hardware. You get to have more memory or CPU.

Content Delivery Network (CDN)

Visitors witness slow page loads when they are not close to your central server’s location. Thus, owners need to use a CDN to boost the delivery of content. CDN takes the static files, like CSS, images, and JavaScript, and delivers them through servers closer to the user’s physical location.

CDN reduces the load on the central server. It improves loading times. Besides, providing a more efficient network resource utilization. The content within the CDN gets replicated to exist in many places. Users located far away access the copy. They no longer need to wait for network requests to remote servers.

Render Blocking

Remove Render blocking resources. Delay resources like scripts, stylesheets, and HTML imports. They delay the rendering of page content to the screen. Several render-blocking resources make the users wait longer before they see any meaningful content on the webpage. As such, users see blank space or sparsely populated areas. 

Visitors will then either refresh the page, hit the back button, or abandon the site. Try to reduce render-blocking resources. Scripts and tags in the <head> of the HTML get processed. These tags will get downloaded, parsed, and executed. All this delays the rendering of content on the page and increases LCP.

• Move <script> and <link> tags to the bottom of the HTML code.
• Optimize Critical Rendering path
• Try Combining and Inlining CSS files
• Separate CSS files by device – Mobile or Desktop

Minify Code

Minifying the code will improve the LCP value. Remove any CSS characters not needed by the browser. Minify and remove this unnecessary information. Also, defer non-critical CSS. In essence, remove any unused CSS or move it to any other stylesheet. 

Minify and compress JavaScript files. Remove all the messy and complicated HTML code, merge JS files, and trim the excess code pieces. This will help reduce the number of server requests. Minifying CSS files will reduce the network payload sizes. Fewer lines of code will speed up the delivery of files to the browsers.

Optimize Multimedia

Optimize product images and videos. Save visual elements in the best format to ensure a fast page load. Use lazy load, srcset, and video embedding. Use image tools like Tiny PNG and Kraken to optimize visual elements. Compress the heavy elements to a bare minimum.

Consider embedding videos via a 3rd party like YouTube. Reduce the file size of your images without affecting their dimensions and quality. Limit the use of multi-hero-image slideshows. Use advanced image optimization software to shrink JPEG and PNG files. Where possible, use smaller images, thumbnails and limit the use of multi-hero-image slideshows.

• Decide the correct dimensions and don’t deliver oversized images.
• Manage image encoding. Don’t serve high-quality uncompressed images.
• Use Lossless compression to reduce file size without diminishing quality.
• Deliver animated content (GIFs) through MPEG4 or WebM video files.

Improve Caching

Instead of downloading the resources from the page’s server again, the browser must store static assets like CSS, JavaScript, and images. The browser can retrieve the same from the local cache. Caching ensures that a page loads fast on the next visits. Use an efficient caching policy on the server. 

Longer cache policies tell the browser to keep the files for longer. Shorter cache policies will retain the resources for a month. Shorter policies are helpful for CSS and JavaScript files that change very often. These resources will likely get downloaded on repeat visits. 

Server-side or Client-side Rendering

Owners can enable a server rendering experience to improve LCP. In this case, the main content on the page gets rendered on the server. Instead of getting rendered on the client-side. You may even use client-side rendering to serve page content. 

Handle different facets of a page on the client-side rather than on the server. But, you may need to use server-side rendering with client-side rendering. Apart from the need to minimize critical JavaScript. Else, users may not see any page content. Since the critical JavaScript hasn’t finished downloading and executing.

Why Optimize Largest Contentful Paint?

Page Speed

Increased page speeds are the number one reason to improve the LCP value of your website. A lower LCP of less than 2.5 seconds will help boost your page speeds.

User Experience

Increased page speeds will improve the User Experience on your website. Visitors are more likely to engage and interact with your website. Slow page speeds create friction and trigger abandonment. 

Conversions

A higher retention rate will improve the order placements on your eCommerce site. When users stay and engage with the site for longer, there is a higher likelihood of sales.  

Revenue and Profits

As conversions rise, expect the revenue and profits to increase as well. Not only that, a flawless and fast user experience will increase the Average Order Value (AOV) as well. 

SEO Ranking

Optimizing the LCP will improve your SEO ranking. The three core Web Vitals have become page ranking signals. Google will factor the page speed on your website to determine its rank on search engine. Rank higher and improve your Click Through Rate (CTR).

Conclusion – Largest Contentful Paint

Largest Contentful Paint (LCP) is one of the metrics used to determine a website’s performance. It marks the time at which the largest text or image element gets painted. Site owners who care about the performance of their website can’t afford to overlook this crucial metric.

They would need to put in place measures to optimize this metric at the earliest. Improving the Largest Contentful Paint (LCP) value will enhance the performance of their site. Better performance will enhance the User Experience. Elevated UX will escalate your sales, revenue, and profits.