Core Web Vitals (CWV) are three performance metrics that Google uses as ranking signals: Largest Contentful Paint (LCP), Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS). Improving these scores does not just help with SEO. It directly improves the experience your visitors have on your site. Faster pages get more engagement, lower bounce rates, and higher conversion rates. Here is a thorough, practical approach to improving each metric on WordPress.
Measure Before You Optimize
Before making any changes, establish a baseline so you can track your progress. Use these tools to measure your current Core Web Vitals:
- Google PageSpeed Insights: Enter your URL at pagespeed.web.dev. The top section shows field data from real users (if available), and the bottom shows lab data from a simulated test. Field data is what Google actually uses for rankings.
- Google Search Console: Go to the "Core Web Vitals" report under "Experience." This shows aggregated data across your entire site, grouped by mobile and desktop. It highlights which URLs need improvement and which ones pass.
- Chrome DevTools: Open DevTools (F12), go to the "Performance" tab, and run a recording while loading your page. This gives you detailed timing data for every resource and rendering step.
- Web Vitals Chrome Extension: Install the "Web Vitals" extension for real-time CWV measurements as you browse your own site.
Write down your baseline LCP, INP, and CLS values. After each optimization, re-test to confirm the improvement.
LCP Optimization: Make the Main Content Load Faster
LCP measures how long it takes for the largest visible element (usually a hero image, heading, or large text block) to appear on screen. Google considers an LCP under 2.5 seconds as "good." Here is how to bring it down:
- Identify your LCP element: In PageSpeed Insights, scroll to the "Largest Contentful Paint element" diagnostic to see exactly which element is your LCP. Knowing this tells you where to focus.
- Optimize the hero image: If your LCP element is an image, compress it, convert it to WebP or AVIF, and make sure it is sized appropriately for the container. A 3000px wide image in a 1200px container wastes bandwidth. Add
fetchpriority="high"to tell the browser to prioritize downloading it. - Preload critical resources: Add a preload hint in your
<head>for the LCP image so the browser starts downloading it immediately instead of waiting to discover it during rendering:
<link rel="preload" as="image" href="/wp-content/uploads/hero.webp" fetchpriority="high" />- Reduce server response time: A slow TTFB delays everything. Use a caching plugin (see our caching guide), upgrade your hosting if TTFB consistently exceeds 600ms, and consider a CDN to serve content from geographically closer servers.
- Eliminate render-blocking CSS and JS: Move non-critical CSS to load asynchronously and defer JavaScript that is not needed for the initial render. WP Rocket's "Optimize CSS Delivery" and "Delay JavaScript Execution" features handle this automatically.
- Use a CDN: Serving static assets (images, CSS, JS) from edge servers near your visitors reduces latency. Cloudflare, BunnyCDN, and KeyCDN all integrate well with WordPress.
- Remove unnecessary plugins: Each plugin can add CSS and JS files to the page. Deactivate and delete plugins you no longer need. Use the Query Monitor plugin to see which plugins add the most overhead.
INP Optimization: Make Interactions Feel Instant
INP measures how quickly your page responds when a user clicks a button, taps a link, or types in a field. Google considers an INP under 200 milliseconds as "good." Poor INP usually comes from JavaScript blocking the main thread. Here is how to fix it:
- Reduce JavaScript execution time: Audit your plugins and remove any that add heavy JavaScript you do not need. Sliders, social sharing widgets, and complex page builders often contribute significantly. Use the Coverage tab in Chrome DevTools (Ctrl+Shift+P, type "Coverage") to see how much of your loaded JS is actually used.
- Defer non-critical scripts: Add the
deferattribute to scripts that are not needed for the initial page load. Plugins like Flying Scripts let you delay specific scripts until user interaction (scroll, click, or keystroke). - Minimize third-party scripts: Analytics trackers, advertising pixels, live chat widgets, and social media embeds all run JavaScript. Each one adds execution time. Consolidate where possible, load them after user interaction, or replace heavy embeds with static alternatives (for example, a screenshot of a tweet instead of the Twitter embed script).
- Break up long tasks: JavaScript tasks that run longer than 50ms block the main thread and delay user interactions. If you write custom JavaScript, use
requestAnimationFrameorsetTimeoutto break heavy computations into smaller chunks. - Reduce DOM size: A large DOM (over 1500 nodes) makes every JavaScript operation slower because the browser has to process more elements. Simplify your page structure, remove unnecessary wrapper divs, and consider whether every section of content is truly needed on initial load.
CLS Optimization: Stop Content from Jumping Around
CLS measures how much visible content shifts unexpectedly during page load. Google considers a CLS under 0.1 as "good." Layout shifts frustrate users because they cause mis-clicks and disorienting visual movement. Here is how to eliminate them:
- Set explicit image dimensions: Always include
widthandheightattributes on your images. WordPress does this automatically for images inserted through the media library, but images added manually in custom HTML or through page builders may lack these attributes. Without dimensions, the browser does not know how much space to reserve, causing content to jump when the image loads. - Reserve space for ads and embeds: If you display ads, set a
min-heighton the ad container that matches the expected ad size. The same applies to YouTube embeds, social media widgets, and other third-party content that loads asynchronously. - Use font-display swap: When custom fonts load slowly, the browser may hide text until the font is ready, then suddenly show it, causing a layout shift. Set
font-display: swapin your@font-facedeclarations so the browser shows text immediately in a fallback font and swaps to the custom font when it is ready:
@font-face {
font-family: 'CustomFont';
src: url('/fonts/custom.woff2') format('woff2');
font-display: swap;
}- Avoid injecting content above the fold after load: Banners, notification bars, and cookie consent popups that push content down cause layout shifts. Use sticky positioning or overlays instead of inserting elements into the document flow.
- Preload web fonts: If your theme uses custom fonts, preload them so they are available sooner, reducing the time the fallback font is displayed:
<link rel="preload" as="font" href="/fonts/custom.woff2" type="font/woff2" crossorigin />WordPress Plugins That Help with Core Web Vitals
Several plugins address multiple CWV metrics at once:
- WP Rocket: Page caching, CSS/JS optimization, lazy loading, delay JS execution. The most comprehensive single plugin for CWV improvements.
- Autoptimize: Free plugin for CSS and JS minification, concatenation, and inline critical CSS. Works well alongside a caching plugin.
- Perfmatters: Lightweight plugin to disable unused WordPress features (emojis, embeds, dashicons), manage scripts per page, and add preload hints.
- Flying Scripts: Free plugin that delays JavaScript execution until user interaction. Especially effective for third-party scripts like Google Analytics, Facebook Pixel, and chat widgets.
- OMGF (Optimize My Google Fonts): Downloads Google Fonts locally and optimizes their loading, eliminating the external request and improving both LCP and CLS.
Monitoring Improvements Over Time
Core Web Vitals field data (the data Google uses for rankings) updates over a rolling 28-day period. This means improvements will not show up in Search Console immediately. After making changes, wait at least four weeks before evaluating the impact in Search Console. In the meantime, use PageSpeed Insights lab data and the Web Vitals Chrome extension for faster feedback. Set up a monthly routine: run PageSpeed Insights on your key pages, note the scores, and compare them to the previous month. This helps you catch regressions early, especially after plugin updates or theme changes.
Verify Core Web Vitals with InspectWP
InspectWP checks many factors that influence Core Web Vitals: content encoding (GZIP/Brotli), HTTP protocol version (HTTP/2 or HTTP/3), total number of images, JS and CSS file counts, and overall HTML size. Use these metrics as a starting point to identify which areas need attention. Run a scan after each optimization to confirm the improvement.