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.Â
Our experts can lower the LCP time of your site to raise user experience. Let’s help!
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).
The LCP metric in Core Web Vitals will influence a site’s rank on Google. Talk to experts today!
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.
Frequently Asked Questions (FAQ)
How to find the largest Contentful paint?
The largest Contentful paint element on your page can be found in the Structure tab of GTmetrix's report. It is listed under "Largest Content Paint Element" and will tell you what was actually detected as being the biggest content element by a website crawler like Googlebot or BingBot.
How to preload the largest Contentful paint image?
If GTmetrix flags it as an asset that should be prefetched and loaded before a user actually interacts with your site or app then you can resort to using a link tag in your HTML header just like any other key assets.
Why is LCP so high?
Do you ever find yourself scrolling through a website, only to see the load timer ticking up on your screen and feel hopeless? The loading time is measured in milliseconds. If it takes 300ms for something above-the-fold (load before) to appear on the page then users will think that content isn't showing fast enough which leads them not going any further down into their scroll because they don't want an even longer wait - this lower conversion rate means reduced profits! Know what's happening behind all those loading dots too; there are images still waiting to be loaded onto our screens. That might sound like we need really big files but smaller ones actually work best so long as they're large.
How do I reduce the largest Contentful paint time?
In order to reduce the largest Contentful paint time, you should consider optimizing your server and use signed exchanges (SXGs). Optimizing your server will ensure that it is running at peak performance which may help with slow response times. Signed exchange guarantees are very important because they prevent a potential attack on the system by an unknown third party who might be able to steal or modify messages between two parties without detection thus enabling them access through this vulnerability in SSL/TLS protocol.
What is a good LCP score?
To provide the best possible user experience for your customers, you should strive to have an Largest Contentful Paint of 2.5 seconds or less so that users can quickly and easily see what they are looking at on your site without waiting too long. In order to ensure this happens for most people who visit your site, it's important not only how fast the page loads when tested in general but also by device type (desktop vs mobile).
Does LCP affect SEO?
LCP has been incorporated into several vital Google metrics. As a result, it is now considered as important as an SEO ranking factor by the search engine giant. The main reason for this is that LCP factors in user experience and if content was once the most popular metric to measure quality on-site back then, there are simply more sites with great content out there than ever before which means your site needs something extra special to stand out from the crowd.
How is LCP measured by Google?
LCP is measured by Google as the time it takes to paint its largest, most contentful areas. FID measures how long a user has to wait for input before their desired action can be completed with regards to latency and speed of response. CLS looks at page visits in percentage points based on whether or not they're relatively lightweight interactions like scrolling through a list or clicking an item versus heavier ones such as filling out forms that require full focus - more often than not these are used for conversion rates when measuring conversions from one stage of web browsing (mobile) to another (desktop). To measure LCP efficiently, total blocking time must also be taken into consideration since this will affect both latencies and speeds of responses from your site's servers.
Does CLS affect SEO?
Google's Page Experience Update will soon affect SEO rankings, and it is crucial for business owners to optimize their CLS score. These changes rolled out in June 2021, which means that your LCP metrics (together with FID) can now also impact your ranking on Google Search Engine Results Pages-. Optimizing a site’s content literacy strategy should definitely take priority in any company’s digital marketing efforts moving forward as this update has the potential of greatly affecting an organization's web traffic - especially when combined with other tactics such as link building campaigns or keyword optimization strategies.
Is LCP a ranking factor?
To stay in organic rankings and maintain those visitors, it's really important to keep track of your LCP. LCP was once just a minor factor when considering rank but with this update from Google, it has become one of the most influential factors! Stay up-to-date on how you are performing with regard to these guidelines so you can continue maintaining an organically ranked website while staying true to what matters: satisfying your customers.
How do I get a higher CLS score on Google?
The Cumulative Layout Score is calculated by multiplying the Impact Fraction by the Distance Fraction: Cumulative Layout Shift (CLS) = Impact Fraction x Distance Fraction. The amount of an impact and distance, or how far your layout shifts from being in order plays into this calculation - so if you're shifting enough it will be easy to calculate for yourself what that value should theoretically be. For example, let's say we had one page with 100% positive margin shift but 0% negative margins; our cumulative layout would only have a 1/100th chance of having any issues at all! Using these odds though doesn't mean you can just use those values as-is when calculating
