Largest Contentful Paint (LCP)

What is contentful paint?

In web development, "contentful paint" is any content appearing on any web page. The headings, text, images, videos, and any other content or components are part of your contentful paint.

What is Largest Contentful Paint (LCP)?

Largest Contentful Paint is one of Core Web Vitals metrics. LCP is the "loading" metric that measures the amount of time it takes for any web page to load the "main" content on the page.

LCP counts the time (in seconds) that passes from visitors initiating the load of a web page to rendering the "largest" element in the viewport.

In more simple terms, how quickly your website loads.

What elements are considered "largest" in LCP?

Google considers these elements (components) on any web page to be the “largest”:

• Images (<img>, <image>, <svg>, etc)
• Videos (iframes and other video embeds)
• Components with a background image (not CSS gradients, a real image file!)
• Block level text elements (<div> filled with text-based children like <p>, <h1>, etc)

How is Largest Contentful Paint calculated?

• LCP targets the largest element in the viewport. Looks at these specific elements—Images, video posters, text blocks, and certain background images defined by CSS. The “largest” is determined by the visible size (For example, a large hero graphic or H1).
• Only elements within the viewport are part of LCP scoring. If the largest element is below the fold and the user does not scroll, it won't be considered in the LCP calculation.
• The LCP score is measured from the start of the page load to the point where the largest content element is rendered on the screen. Load page (start) → I see largest element (end). That duration is the LCP.
• “Seeing” the element means it is rendered and painted. For images and videos, this means the media must be fully downloaded and styled. For text, it needs to be visible and styled.
• If the larger content element is visible later in the page load, LCP will be influenced.
• LCP only looks at elements within the viewport and excludes any parts outside the viewport or hidden due to overflow.
• Speed tests will attempt to ignore elements that are meaningless to users, such as fully transparent elements or those covering the entire viewport.

Does LCP influence SEO?

Neither LCP nor Web Core Vitals are ranking factors for search engines. While Web Vitals metrics will not directly affect your website rankings, they are important principles for great web developers to understand. Bad scores that indicate a bad user experience may hurt your SEO if users bounce from your website.

What is a great LCP score?

Google considers web pages that take less than 2.5 seconds to paint the largest content a good score. If LCP is longer than 4 seconds, it's considered a bad user experience.

How to improve Largest Contentful Paint in Webflow?

• Remove as many unnecessary third-party scripts as possible.
• If you can’t remove certain third-party scripts, apply async or defer.
• Optimize images and videos. Resize and compress all images and videos. Make sure images are uploaded based on their display size (For example, don’t upload a 1200px width image that displays at 300px on the page). Compress all images with a free online compression tool. Use modern and more compressible file formats like WebP, instead of PNG or JPEG.
• Load management. Set your largest contentful elements to "load eagerly" in Webflow. Improve your LCP by loading your most important content first. Then, lazy load any elements that are not crucial to LCP and user experience.
• Use a Content Delivery Network (CDN) that specializes in delivering your files efficiently.
• Preload important resources. Use the <link rel="preload"> tag to preload your largest contentful paint element. Use this on an image if it is the largest element. Or apply it to scripts that are crucial for rendering the main content.
• Optimize font in the project. Remove any unnecessary fonts and font weights in the project. Self host fonts. Font can be heavy and influence page load. Improve the font visual delivery by using font-display: swap. This makes sure text is visible during font loading.