Google’s Core Web Vitals measure key aspects of user experience. The Core Web Vitals report shows how your pages perform, based on real world usage data (sometimes called field data). In your metric type report, you may wonder why the LCP is rated as ‘Poor’ and how to fix it. This guide will walk you through all needed steps. Let’s dive in! 

1. Largest Contentful Paint (LCP)

Largest Contentful Paint (LCP) is rated “poor” when the main content takes over 4 seconds to load. This creates a slow, frustrating experience, reducing engagement and conversions. Since Google uses LCP as a key ranking factor, poor LCP can also hurt SEO and organic traffic.

Practical steps to improve your LCP score:

• Remove or Disable Image Transitions: If images are set to fade, scale, or otherwise transition into view (especially via JavaScript), remove those transitions. That way, once the image downloads, it appears immediately. The delay from waiting for JS to finish can significantly worsen LCP.

• Use fetchpriority= ‘high’ on Important Images: For images that contribute to LCP (e.g. large hero/banner images), mark them as high priority so the browser starts fetching them before less critical images. 
  

Added fetchpriority= ’high’ to the HTML.

1. Use Tapita SEO & Speed preload key theme assets feature: This feature preloads critical CSS resources to ensure they are loaded with high priority, resulting in faster user interface.
   

• Use Tapita SEO & Speed instant page speed feature: This feature preloads links immediately when customers hover over the links, so it will feel fast instantly to customers.
  

• Identify the LCP element (usually a large banner image, hero section, or main content block) and avoid lazy-loading the LCP element: If the LCP image is lazy-loaded, it might not appear until the user scrolls or some JS triggers. For above-the-fold LCP content, it should load immediately (not lazily).

• Preload the LCP element with the preload attribute so the browser fetches it as a top priority. This ensures the main content loads faster, improving both user experience and LCP score.

• Make Images Responsive with srcset & sizes attributes: Let the browser pick the correct image size depending on screen size. Smaller devices get smaller images, reducing download time. This also prevents loading overly large images meant for desktops on mobile screens.

• If Transitions Must Stay, Move Them to Load Early / Separately: If you want to preserve transitions for visual design reasons, don’t have them buried in large, delayed JS bundles. Extract that code into its own file and load it as early as possible (and asynchronously if possible) so it doesn’t block or delay showing of the image. This reduces the delay significantly.

• Remove 3rd-party plugins or optimize them to reduce render-blocking time since not every 3rd-party plugin’s code is optimized.

What This Means in Plain Language

Simply put, poor LCP happens when the biggest thing people see on your page (like a banner image or main section) takes too long to show up. To make your main content load faster:

• Avoid fancy fade-ins or animations on big images, let them appear right away.

• Tell the browser to grab your hero image first by marking it as high priority.

• Don’t lazy-load the main banner or hero image, load it immediately.

• Preload your most important images and theme files so they’re ready as soon as the page starts loading.

• Use responsive images so smaller screens don’t waste time downloading large desktop-sized files.

• Cut back on heavy apps or third-party code that slows down your page from loading the main content.
  

Now you know what leads to poor Core Web Vitals metric types - LCP. It’s best to check this component frequently and fix any errors as soon as possible. If you need any support on this, the Tapita team is here to help.