increase your Core Web Vitals score.
Google’s user experience measure, Largest Contentful Paint (LCP), became a ranking factor in 2021.
What LCP is and how to get the greatest score are explained in this tutorial video.
What Is The Largest Paint?
How long does it take for a page’s core content to download and be available for use? LCP measures this.
The biggest picture or block of context inside the user’s viewport is what is being measured. Extending beyond the screen’s boundaries is not counted.
Pictures, video poster images, background images, and block-level text components like paragraph tags are some of the most common items to be measured.
Why is LCP measured?
Because it properly evaluates how quickly a website can be used, LCP was selected as a major statistic for the Core Web Vitals
It is also simple to assess and optimise for.
Element Blocks are used to compute the LCP score.
Section and main components, as well as header, div, and form elements may all be utilised to get the Largest Contentful Paint score at block level.
It may be utilized as long as the biggest block-level HTML element has text elements.
Several components are not used. The SVG and VIDEO components, for example, are not yet utilised in the calculation of the Largest Contentful Paint.
In order to comprehend LCP, you just need to look at your site and figure out the biggest text block or picture, and then optimise it by reducing or eliminating everything that may slow down the download process.
Google’s mobile-first index comprises the majority of websites
, thus making them mobile-friendly comes first.
It’s possible that delaying major components won’t help.
Occasionally, a web page may display in sections. The biggest text block-level element may take longer to download if it has a large featured picture.
For the greatest text block-level element, a PerformanceEntry log is created.
A PerformanceEntry object will be created if a featured picture on the screen occupies more of the user’s screen (viewport) than the rest of the content.
It might be difficult to get a good LCP score using images.
HTML and CSS are often used by web publishers to resize photos after they have been uploaded at their original size.
The “intrinsic” size of the picture is what Google refers to as the original size.
To put it another way, the “intrinsic” size of a picture that is 2048 x 1152 pixels is 2048 pixels wide and 1152 pixels tall.
The 2048 x 1152 pixel picture is now considered the viewable size if the publisher reduces it to 640 x 360 pixels.
Google calculates the picture size based on the lesser of the two image sizes: the intrinsic size and the visible size.
IMAGE SIZING NOTE
The largest Contentful Paint may be improved by resizing an intrinsically huge picture using HTML or CSS to a smaller size.
Making the apparent size equal the image’s inherent size, on the other hand, is a best practise.
Your Largest Contentful Paint score will rise as a result of the picture downloading more quickly.
When images are served from another domain, how does LCP handle them?
Images from a CDN or any third-party site are not included in the computation of the Largest Contentful Paint.
The Timing-Allow-Origin header is required by publishers who want to include certain sites in their calculations.
If you utilise a wildcard (*) in the setting of this header, your site might be vulnerable to hacker activities.
Google’s crawler must be whitelisted so that it can view the CDN timing information. You must add a domain particular to Google’s crawler to the whitelist to achieve this.
Resources (like pictures) loaded through a CDN, for example, will not be included in the LCP calculation at this point.
DO NOT FALL FOR THESE “GOTCHAS”
LCP is calculated using all components that appear on the user’s screen (the viewport). In this case, the Largest Contentful Paint score may not include graphics that are produced off-screen and then shifted into position after they are displayed.
However, the LCP computation may include components that begin in the user viewport but are subsequently moved off-screen.
WHAT IS THE SCORING SYSTEM FOR LCP
Scoring tools may be divided into two categories. Field Tools is the first, while Lab Tools is the second.
Sites may be measured using field tools.
Virtual scores are generated by lab equipment employing algorithms that mimic the Internet settings experienced by a normal mobile phone user.
Optimizing for the Largest Consolidated Paint
There are three primary areas for optimization: performance, performance, and performance.
1.Servers that are slow to respond.
- Long wait periods for resource downloads.
A sluggish server might be a problem with DDOS attacks and scraper traffic on a shared or VPS host. A WordPress plugin like WordFence can help you determine whether or not your site is under attack and then prevent it.
Misconfiguration of a dedicated server or virtual private server (VPS) might also be a problem. PHP’s memory allocation is a common source of contention.
Outdated software, such as an old PHP version or an out-of-date CMS, might also be a problem.
The worst-case situation is that your machine is slowed down by other users on a shared server. Moving to a new host is the best solution in this circumstance.
To deal with CSS that isn’t necessary for the user’s experience, Google offers this helpful tip:
Unused CSS should either be deleted or relocated to a new stylesheet if it is utilised on a different page of your website.”
Use loadCSS to load files asynchronously, which makes use of rel=”preload” and onload, for any CSS that isn’t required for initial rendering.
link rel=”preload” href=”stylesheet.css” ” as=”style” onload=”this.rel=’stylesheet’”>”
THE LCP SCORE’S FIELD TOOLS
A search on Google yields three options:
- Google’s PageSpeed Insights
- Google’s Search Engine (Core Web Vitals report).
- A report on the experience of Chrome users.
Finally, the Chrome User Experience Report needs a Google account and a Google Cloud Project. The first two are easier to understand.
LCP SCORE LAB INSTRUMENTS
Simulated scores are what lab measurements are.
Google recommends the following tools:
- Chrome DevTools (for developers).
In addition to Google, there are two other options. The third tool is offered by a third-party provider. ‘