You are currently viewing Largest Contentful Paint: An Easy Explanation

Largest Contentful Paint: An Easy Explanation

Largest Contentful Paint is a brand new Google user experience metric and soon to be a ranking factor. Learn what’s and how to optimize for it.

Largest Contentful Paint (LCP) is a Google user experience metric. It’s set becoming a ranking factor in 2021. This guide explains what LCP is and how to attain the best scores.

Definition of Largest Contentful Paint

Largest Contentful Paint is a measurement of how long it can take for the main content of a page to download and be ready to be interacted with.

what’s measured is the largest image or block of context inside the user viewport. Anything that extends beyond the screen isn’t used to calculate the score.

Typical elements which are measured are images, iframes, video poster images, background images, and block-level text elements like paragraph tags.

Why is Largest Contentful Paint Measured?

LCP was chosen as a key metric for the Web Vitals score because it accurately measures how fast a webpage may be used. In addition it’s simple to measure and also to optimize for.

Block-level Elements Used to Calculate the LCP Score

Block-level elements used for calculating the Largest Contentful Paint score can be the and elements; and also the heading, div, form elements.

Fundamentally any block-level HTML element that contains text elements may be used, so long as it’s the largest one.

Not all elements are used. For instance, the SVG and VIDEO elements aren’t currently used for calculating the Largest Contentful Paint.

LCP is an easy metric to understand because all you need to do is take a take a take a look at your webpage and determine; what the largest text block or image is and after that optimize it by making it smaller or removing anything that would prevent it from downloading rapidly.

Since Google includes most sites in the mobile first index, it’s best to optimize for the mobile viewport first; then the desktop.

Delaying Large Elements Might Not Help

Occasionally a webpage will render in parts. A large featured image might take more time to download than the largest text block-level element.

What happens in this case is that a Performance Entry is logged for the largest text block-level element. But when the featured image on top of the screen loads, if that element takes up more of the users screen (their viewport); then another Performance Entry object will be reported for that image.

Images Can Be Tricky for LCP Scores

Web publishers commonly upload images at their original size and after that use HTML or CSS to resize the image to display at a smaller size.

The original size is what Google refers to as the “intrinsic” size of the image.

If a publisher uploads an image that’s 2048 pixels wide and 1152 pixels in height, that 2048 x 1152 height and width are considered the “intrinsic” size.

Now, if the publisher resizes the 2048 x 1152 pixel image to 640 x 360 pixels; the 640×360 size image is called the visible size.

For the purposes of calculating the image size, Google uses whichever size is smaller between the intrinsic and visible size images.

Image Sizes and Largest Contentful Paint

It’s possible to achieve a high Largest Contentful Paint score with a big intrinsic size image that’s resized with HTML or CSS to be smaller.

However it’s a best practice to make the intrinsic size of the image match the visible size.

The image will download faster and your Largest Contentful Paint score will go up.

How LCP Handles Images Served from Another Domain

Images served from another domain, like from a CDN, are usually not counted in the Largest Contentful Paint calculation. Publishers who want to have those resources be a part of the calculation need to set what’s called a Timing-Allow-Origin header.

Adding this header to your site might be tricky because if you use a wildcard (*) in the configuration then it could open your site up to hacking events.

In order to do it properly you’d have to add a domain that’s specific to Google’s crawler in order to whitelist it in order that it may see the timing info from your CDN.

So at this point, resources (like images) which are loaded from another domain (like from a CDN) won’t be counted as part of the LCP calculation.

Scoring you have to Be Aware Of

All elements which are in the users screen (the viewport) are utilized to calculate LCP. That implies that images which are rendered off-screen and after that shift into the layout once they’re rendered might not count as part of the Largest Contentful Paint score.

On the opposite end, elements that start out in the user viewport and after that get pushed off-screen can be counted as part of the LCP calculation.

The way to Get the LCP Score

There are two kinds of scoring tools. The first one is called Field Tools and the second one is called Lab Tools.

Field tools are actual measurements of a site. Lab tools give a virtual score based on a simulated crawl using algorithms that approximate Internet conditions that a typical user on a cell phone might encounter.

The way to Optimize for Largest Contentful Paint

There are 3 main areas to optimize (plus one more for JavaScript Frameworks):

  • Slow servers
  • Render-blocking JavaScript and CSS
  • Slow resource load times

A slow server might be an issue with DDOS levels of hacking and scraper traffic on a shared or VPS host. You might find relief by installing a WordPress plug-in like WordFence to find out if you’re experiencing an enormous onslaught and after that block it.

Other issues might be misconfiguration of a dedicated hosting service or VPS. A typical issue might be the amount of memory allotted to PHP.

Other issues might be out-of-date software like an old PHP version or Content management system software that’s out-of-date.

At worst scenario is a shared server with multiple users which are slowing down down your box. In that case moving to a better host is the answer.

Google has a neat tip for dealing with CSS that’s not essential for rendering what the user sees:

“Remove any unused CSS entirely or move it to another stylesheet if used on a separate page of your site.

For any CSS not needed for initial rendering, use loadCSS to load files asynchronously, which leverages rel=”preload”and onload.

<link rel=”preload” href=”stylesheet.css” as=”style” onload=”this.rel=’stylesheet’”>”

Field Tools for LCP Score
Google lists three field tools:

PageSpeed Insights
Search Console (Core Web Vitals report)
Chrome User Experience Report

The last one, Chrome User Experience Report, requires a Google account and a Google Cloud Project. The first two are more straightforward.

Citations

How to Optimize for LCP

What is LCP?

Timing Attacks and the Timing-Allow-Origin Header

Rohit Shetty

Rohit Shetty born and brought up in Mumbai is a Digital Marketer by profession and a writer and philanthropist by passion. Rohit started his career with First Step Publishing in Mumbai in 2011 as a Digital Marketer and excelled in the field of Publishing. With First Step Publishing, Rohit eliminated the cumbersome process of waiting for a writer to get published. With First Step Publishing, Rohit Shetty has been known for marching forward with some great titles and allowing first-time authors to find a platform and publish their content in a market space that focuses on branding a certain 'author' rather than scouring talent. In an interview with DNA, First Step Publishing has been reported to be one of the fast-growing publishing firms based in Mumbai. The firm has the tagline 'Paying Ways For New Writers' which is meant to reflect the motive with which it was founded. Rohit Shetty holds two National Records Records being Book With the Shortest Title " i " with Limca Book of Records Special Literature Edition and with India Book of Records as well. He holds the title of the Most Published poet of India in 2012 and 2013 with India Book Of Records and Unique World Records. Apart from writing, Rohit is also an active Philanthropist and works towards Education and Health sectors. Awards and Recognitions Nominated four times for India’s Fourth Highest Civilian Award Padma Shri in 2017, 2018, 2019 and 2020 2012: Rohit has been recognized for his work and felicitated at the Grand Finale of Mulund Fest in 2012 by MLC Mr Charan Singh Sapra and MPCC President Mr Manikrao Thackrey 2012 and 2013: Most Published Poet by India Book of Records 2015: Book with the Shortest Title from Limca Book of Records, India Book of Records 2018: Member of NITI Ayog Atal Movement of change and Mentor of Change 2019: Nominated by Social Samosa as 40 Under 40 Digital Marketers in India 2019: Rohit Digital Marketing Blog www.rohitnshetty.com ranked 13th Spot as India's Best Digital Marketing Blog by Expertido 2019: Rohit Digital Marketing Blog www.rohitnshetty.com was also Ranked in Top 50 India’s Best Digital Marketing Blog by Feedspot 2019: Received prestigious Dr APJ Abdul Kalam Memorial Award for work towards building the nation 2020: Global Brand Icon Awad by Brand Opus 2021: Rashtriya Prerna Award

Leave a Reply