Largest contentful paint (LCP) is a crucial metric and ranking factor for the Core Web Vitals update that Google rolled out in 2021. Google’s purpose in analyzing LCP as a metric is to increase and uplift user experience as a foundational value that must be met if you want to get on the first page of Google and show up in the SERPs.
In short, Largest Contentful Paint measures how long it takes for the largest content above the fold to load. In general, if loading takes too long, users may get frustrated or bounce from the page—even if it’s full of great, valuable, and worthy content.
Using LCP as a technical metric for performance and presentation allows Google to take an analysis of your page and determine its likelihood to satisfy the searcher before deciding to rank it and deliver it in the SERP, or not.
What is LCP?
In finer detail, LCP measures the loading time for the largest content element on a page, and only measures content loading above the fold. The largest element can mean a few different things. It may be an image, background image, video, video thumbnail, or text elements such as headers, lists, paragraphs, or a large block of text.
“Above the fold” is what is specifically available in the viewport—what you see on the screen before tapping or scrolling. Any elements below the fold are not included in the Largest Contentful Paint metric.
Largest Contentful Paint Components, Examples, and Problems
Measured LCP components such as images, videos, and text elements are often an essential feature of a page that was well-intended and strategically placed.
For example:
- If you are a news source, you rely on a headline or image to capture your audience’s attention.
- If you sell a product, you might want an image of your product to show up above the fold.
- If you created an awesome video to supplement your content, you might place that video at the top of the article.
- If your background image is curated to showcase your brand, you’ll want that to appear quickly at the top of the page to make the greatest visual impact.
- If you wrote an exceptional study or in-depth article but didn’t use headers appropriately to break up the text, that large text block is an element that could slow down your LCP.
All of these elements were created to interest or engage an audience, but the problem is that if it takes too long for these elements to load, your audience might bounce before they engage with the page.
Google’s vision statement: “to provide access to the world’s information in one click”, is thwarted when searchers end up clicking around trying to find the fastest and best answer to their query. So in return, Google is now requiring webmasters and businesses to tidy up their technical SEO before even considering them as a candidate to rank and serve up in the SERP.
A Deeper Look at Images and LCP
Images get an honorable mention as they are often the largest elements that need to be loaded on a page. From old studies on images and websites to new studies on social media engagement and image content, research spanning beyond a decade continues to show how important images are for aesthetics, emotional appeal, and engagement—and why their continued use for web pages and content is vital to making an impact with your audience.
Large images can demand a lot from a browser. This demand can cause a delay in how fast a page loads and lower an LCP score, making your article and content less competitive than other pages that are vying for the same audience’s attention.
Google analyzes images for intrinsic size and visible size. If you upload an image to a page and then use HTML or CSS to resize the image for a smaller display/visual size, the original size is what Google considers the intrinsic size of the image.
If you resize the image before uploading, the intrinsic size and visible size match up. While Google will use whichever size is smaller between the intrinsic and visual image, matching up the two can make the image download faster, and provide a better LCP score. Point-blank, it is essential to ensure that all image files are compressed, sized, and formatted correctly—WebP, JPEG, and PNG
LCP and Search Engines: Why LCP is Used as a Ranking Factor
Google has a long history of deciding on and implementing ranking factors. From the origins of Google’s 200 ranking factors legend to today’s agile, nuanced, and ever-evolving algorithm updates, the quest is clear, Google lives and exists to serve the searcher with a stable and reliable platform.
A few of Google’s truths capture the essentials:
- Focus on the user and all else will follow.
- Fast is better than slow.
- You don’t need to be at your desk to need an answer.
- Great isn’t just good enough.
Google’s mobile-first indexing update rocked the boat and launched a need for websites to tighten their tech to truly meet the user where they search. The Core Web Vitals update takes the technical health of your site even further, focusing not only on Largest Contentful Paint, but also First Input Delay (FID), and Cumulative Layout Shift (CLS).
When you apply Google’s north star truths to LCP, the purpose, efforts, and value of using LCP as a ranking factor are clear.
- Elements on a page serve the searcher with value.
- Elements need to load quickly to serve the searcher.
- Elements need to be mobile optimized (including for LCP).
- Elements are valuable to a page, but they aren’t “enough” if they don’t load quickly and efficiently.
LCP vs FCP vs FMP
Digging into the grittier details of LCP as a ranking factor also excavates more historic ranking factors that have contributed to the evolution of Largest Contentful Paint.
First meaningful paint (FMP) was originally intended to measure how long it took for the primary content of a page to become visible to a user. However, the metrics for FMP were overly sensitive, led to inconsistent results. FMP also relied too heavily on browser-specific implementation details, which cannot be standardized across all web browsers. This metric has been rightfully retired, as you can’t use a metric you can’t effectively manage, measure, or standardize.
First contentful paint (FCP) is still used as a PageSpeed performance score, though weighted much less heavily than Largest Contentful Paint. FCP measures how long it takes for any content to be painted or rendered on the screen. While this is still important, it doesn’t accurately account for the full user experience.
FCP captures only the very beginning of the loading experience and can be triggered by progress indicators such as a loading screen or icon, which isn’t what a searcher truly came to your site for. Measuring Largest Contentful Paint is a clear indicator that can be accurately pointed to for measuring how long it takes for the largest element of your actual page to load—showing how quickly and effectively you can truly serve the searcher.
What is a Good LCP Score?
Google has set specific parameters for how they measure LCP as a metric, and Google’s web.dev has made it easy, clean, and clear what does and doesn’t cut it.
A good LCP score means that the Largest Contentful Paint took 2.5 seconds or less.
A needs improvement LCP score means that the Largest Contentful Paint took more than 2.5 seconds, but less than 4 seconds.
A poor LCP score means that the Largest Contentful Paint took more than 4 seconds.
While Largest Contentful Paint measures the time it takes for a page’s largest element above the fold to load, you also need to consider your site as a whole, not just on a page-by-page basis. As a whole, a good threshold to measure is the 75th percentile of page loads across mobile and desktop devices. This ensures that you are creating a great user experience for most of your users, not just for a few target pages.
LCP Tools: How to Measure Largest Contentful Paint
Additionally, Google’s web.dev provided a few tools to measure user-centric performance metrics such as LCP in the lab or the field.
Lab measuring and testing allow you to test and measure before releasing content on real users. Tools for lab measurement and testing include:
- Chrome DevTools.
- Lighthouse.
- WebPageTest. While the other tools are provided by Google, this tool is recommended by Google, but hosted by a third party.
Field measuring and testing test the actual experiences of users on your site in the wild. While testing in the lab can give you great insight and proxy for performance, testing in the field provides a truer measurement of actual user experience with Real User Monitoring (RUM). RUM is typically passive monitoring that collects information without having any effect on the operations of the site. Tools for field measurement and testing include:
- Chrome User Experience Report
- PageSpeed Insights
- Google Search Console’s Core Web Vitals Report
- Web-vitals JavaScript Library
Largest Contentful Paint and SEO
If you want to show up in search, you have to play by Google’s rules and develop a SEO game plan that takes a comprehensive and integrated approach to your website’s technical health, content focus, and visibility. Largest Contentful Paint is the second heaviest weighted metric accounting for 25% of the overall Performance score delivered by Lighthouse, a tool designed by Google Developers (though it should be noted that weights are subject to change as Google continues to tune their metrics).
You need to test, measure, and track LCP and the improvements that you are attempting to make.
A few key actions you can take to optimize for Largest Contentful Paint include:
- Improve server performance. Get your web host in order, where your website is hosted can impact a page’s loading time. Use a content delivery network (CDN) which can improve website load times by distributing content closer to website visitors with a nearby CDN server.
- Optimize all images with the right sizes and dimensions as indicated by your website host for both mobile and desktop. This may include specific dimensions, image format, compressing images, adding width or height attributes, etc.
- Optimize CSS and Javascript code files to deliver smaller JavaScript payloads and Critical CSS. Avoid using render-blocking CSS and JavaScript to load images and leave the process to the browser.
- Provide resources to the browser with preloading and preconnecting “rel=preload”, “rel=preconnect”, and “rel=dns-prefetch.”
- Make sure all software you are using is up-to-date.
These technical LCP optimizations may seem a bit out of touch for those that do not regularly have a hand in website development or some of the more technical aspects of operating on the web. However, seeking proven and results-driven SEO services with a reputable SEO agency like Sure Oak can assist you in meeting your technical SEO goals, and perhaps, better prepare you for Google’s next big algorithm rollout.
