How to Pass Google Core Web Vitals Under 1.0 Seconds

Largest Contentful Paint (LCP) is the moment the biggest piece of content in the first screen finishes rendering. Google's Core Web Vitals call an LCP of 2.5 seconds or less "good", but that is a ceiling, not a target. Getting a WordPress page under one second is realistic when you treat the LCP element as the most important request on the page and remove everything in front of it. Here are the changes that matter most, in the order we would make them.

Find your LCP element first

Every fix below depends on knowing which element is being measured. Record a page load in the Performance panel of Chrome DevTools and follow the LCP marker, or read the "Largest Contentful Paint element" diagnostic in PageSpeed Insights.

On most WordPress themes it is one of three things:

• the hero or cover image at the top of the home page,
• the featured image of a post,
• a large block of heading text when there is no image above the fold.

Check the home page, a post and a landing page separately: they often have different LCP elements.

Serve a correctly sized image

The most common LCP problem is a hero image far larger than the space it fills.

• Resize before you upload. Twice the largest display width is plenty for sharp results on high-density screens. For a full-width hero that is usually around 2400 pixels wide, and far less for a content-width image.
• Let WordPress build the srcset. When you insert an image through the block editor, WordPress generates several sizes and a srcset and sizes attribute, so phones download a small file. Themes that print images with hand-written <img> tags or CSS backgrounds skip this, so prefer blocks or wp_get_attachment_image().
• Use a modern format. WebP is supported by every current browser and WordPress has accepted WebP uploads since version 5.8, and AVIF since 6.5. Either is typically much smaller than an equivalent JPEG. An image optimisation plugin can convert your existing library.

Do not lazy-load the hero

Lazy loading helps images further down the page and hurts the LCP image, because the browser delays the request until layout is known. Recent WordPress versions leave the first large image eager and mark it with fetchpriority="high", but page builders, sliders and some optimisation plugins override that.

View the page source and find your hero <img>. It should not have loading="lazy", and ideally it carries fetchpriority="high". If a plugin adds lazy loading everywhere, use its exclusion setting for the first image or for a specific CSS class.

Preload the image when the browser finds it late

If the hero is a CSS background, or is inserted by JavaScript (sliders are the usual culprit), the browser cannot discover it until the stylesheet or script has run. A preload hint in the <head> starts the download immediately:

<link rel="preload" as="image" href="/wp-content/uploads/hero-1200.webp"
  imagesrcset="/wp-content/uploads/hero-800.webp 800w, /wp-content/uploads/hero-1600.webp 1600w"
  imagesizes="100vw" fetchpriority="high">

Preload only the one LCP image on that template; several preloads compete for bandwidth. Better still, replace the slider with a single static image.

Cache the HTML

The browser needs the HTML before it can request anything else, and an uncached WordPress page is built by PHP and the database on every visit. Time to First Byte (TTFB) sits directly in front of LCP.

A page caching plugin stores the finished HTML and serves it to anonymous visitors without running WordPress. To confirm it works, load the page twice in a private window and compare TTFB in the DevTools Network panel. Logged-in users and checkout pages are normally excluded, so test signed out.

Get render-blocking CSS and JavaScript out of the way

A stylesheet or synchronous script in the <head> blocks rendering until it has downloaded and run, and every plugin can add to that queue.

1. Remove what you do not use. Deactivate plugins that are not earning their place.
2. Defer scripts. Most analytics, chat and marketing scripts can load with defer or after the page has rendered. Optimisation plugins often offer a "delay JavaScript" option; test forms and menus afterwards.
3. Trim CSS. A "critical CSS" feature inlines the styles the first screen needs and loads the rest later.

Keep web fonts from holding text back

When the LCP element is text, fonts decide when it can paint.

• Use font-display: swap so text renders immediately in a fallback font.
• Host fonts on your own domain to save a connection to another origin.
• Load only the weights and character sets you use.
• Preload the one font file used by the LCP heading.

Measure, change one thing, measure again

PageSpeed Insights shows two kinds of results. Field data comes from real Chrome users over the previous 28 days, so changes take time to show up there. Lab data comes from a Lighthouse run on a throttled mid-range phone profile and responds immediately. Use the lab score to check each change, and the field data to confirm real visitors benefit.

Run Lighthouse from Chrome DevTools in an incognito window so extensions do not skew results, test the mobile profile, and run it three times and take the median: single runs vary.

Make one change at a time. Image size and lazy loading usually give the biggest improvement for the least effort, caching comes next, and scripts and fonts hold the last few hundred milliseconds.