Core Web Vitals for WordPress Agencies: Technical Fixes That Actually Work
Core Web Vitals are not just another Google metric to check off. They directly impact your client's rankings, conversion rates and — when they fail — your agency's reputation. Here is what I actually do to fix LCP, CLS and INP on agency WordPress projects, based on real client sites, not generic optimisation blog posts.
The Three Metrics That Matter
LCP
Largest Contentful Paint
How fast the main content loads. Target: under 2.5s. The most common CWV failure on WordPress sites — usually caused by unoptimised hero images or render-blocking resources.
CLS
Cumulative Layout Shift
Visual stability while the page loads. Target: under 0.1. Caused by images without dimensions, late-loading fonts, or dynamically injected content pushing things around.
INP
Interaction to Next Paint
How responsive the page feels when users interact. Target: under 200ms. Heavy JavaScript execution — common with page builders and analytics scripts.
Fixing LCP: The Order of Operations
LCP is usually the first metric agencies need to fix, because it is the one that fails most often. Here is the exact order I follow:
1. Optimise the LCP Image
In most WordPress sites, the LCP element is the hero image. Start here, not with caching plugins.
- Convert to WebP or AVIF — 30-50% smaller than JPEG at the same quality
- Serve appropriately sized images (srcset) — no 2000px hero image on a mobile viewport
- Add
fetchpriority="high"attribute to the LCP image so the browser prioritises it - Avoid lazy loading on above-the-fold images — it delays the LCP
2. Eliminate Render-Blocking Resources
Every CSS and JS file that blocks rendering adds milliseconds to LCP. Page builders are the worst offenders here.
- Inline critical CSS (above-the-fold styles) directly in the HTML head
- Defer non-critical CSS — load it after the page renders
- Use
deferorasyncon non-critical JavaScript - Remove unused CSS with tools like Asset CleanUp or Perfmatters
3. Server and Caching
Once the front-end is optimised, server response time matters. Enable server-level page caching (not just plugin-level), use a CDN with UK/EU edge nodes, and ensure PHP is version 8.1+ — PHP 7.x adds 30-50% to server response time on the same code.
Fixing CLS: Stop the Page From Jumping
CLS is the most annoying CWV failure because users feel it. Text jumps, buttons move, images pop in and push content down. Here are the specific fixes:
- Set explicit width and height on every image: Browsers need to reserve space before the image loads. Use the
widthandheightattributes — modern browsers handle responsive sizing from these correctly. - Reserve space for embeds and iframes: YouTube embeds, Google Maps, social media widgets — they all load asynchronously and push content around. Wrap them in a container with a fixed aspect ratio.
- Handle web fonts properly: Use
font-display: swapand preload critical fonts. Match fallback font metrics to the web font to minimise the layout shift when the font swaps in. - No late DOM injections above the fold: Ads, cookie banners, newsletter popups that inject HTML after initial render will trigger CLS. Load them below the fold or reserve space for them.
Fixing INP: Make the Site Feel Fast
INP (Interaction to Next Paint) is the newest Core Web Vital, replacing FID in 2024. It measures the latency of all user interactions — clicks, taps and keyboard inputs — throughout the page's lifetime, not just the first interaction.
- Audit your JavaScript: Use Chrome DevTools Performance panel to record a typical user session. Look for long tasks (over 50ms) that block the main thread. Break them into smaller chunks.
- Reduce third-party scripts: Analytics, chatbots, heatmaps, social sharing — each one adds JavaScript execution time. Remove any that are not essential. Defer the rest.
- Page builder INP issues: Elementor and Divi sites frequently fail INP because of heavy JavaScript bundles. If INP is failing on a page builder site, consider migrating to a lighter stack or implementing serious JS optimisation.
Real Results: Before and After
| Metric | Before | After |
|---|---|---|
| LCP | 4.8s | 1.6s |
| CLS | 0.32 | 0.02 |
| INP | 380ms | 85ms |
| Lighthouse Performance | 42 | 94 |
| Mobile PageSpeed Score | 31 | 89 |
Typical results from an Elementor-based agency client site after optimisation. Results vary by site.
Need Core Web Vitals Fixes on Client Sites?
I handle WordPress performance optimisation for UK agencies — LCP, CLS and INP fixes that measurably improve rankings and conversions. White-label, delivered with before-and-after reports your clients will appreciate.