Core Web Vitals for WordPress: How to Consistently Score 95+ on Mobile
A practical guide to diagnosing and fixing Largest Contentful Paint (LCP), Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS) on high-traffic WordPress builds.
Achieving a 95+ score on Google PageSpeed Insights for mobile is not about installing five different caching plugins. In fact, stacking multiple performance plugins often causes script conflicts, bloated DOM trees, and inconsistent cache invalidation.
To pass Core Web Vitals reliably in production, you must optimize the critical rendering path: minimize server response time, prioritize visible viewport assets, and defer everything non-essential.
1. Largest Contentful Paint (LCP): Targeting Under 1.8 Seconds
Largest Contentful Paint measures how long it takes for the largest visual element in the viewport to render completely.
Explicitly identify your above-the-fold image and exclude it from lazy loading. Add a high-priority preload tag in your document <head>:
<link rel="preload" fetchpriority="high" as="image" href="/images/hero-cover.webp" type="image/webp" />
2. Interaction to Next Paint (INP): Replacing FID
Interaction to Next Paint (INP) assesses page responsiveness across the entire user session. To pass INP (target under 200ms):
- Defer non-critical tracking scripts using
requestIdleCallback. - Replace heavy sliders and carousels with native CSS scroll snap.
3. Cumulative Layout Shift (CLS): Target 0.00
Always define explicit width and height attributes on every <img> and <iframe> tag to reserve layout space before download.
Prevent web font layout shifts by using font-display: swap in @font-face rules.
4. Server-Side Execution & Database Cleanliness
Implement persistent object caching (Redis/Memcached) and clean orphaned autoloaded transients in wp_options to keep Time to First Byte (TTFB) under 200ms.