A quick note before you start: these fixes range from simple settings changes to edits that touch your site’s code, theme files, or plugin configuration. Getting them wrong — especially around scripts, fonts, and image delivery — can break layouts or functionality elsewhere on the site. If you’re comfortable with WordPress and basic dev tools, go ahead. If not, it’s worth having your web developer implement these, or schedule a free audit with us and we’ll handle it for you.
Knowing what LCP, INP, and CLS measure is one thing — actually moving the numbers is another. The good news is that most sites aren’t failing because of dozens of obscure issues. They’re usually failing because of a small handful of root causes that show up again and again. Here’s where to focus for each metric.
Improving LCP (Largest Contentful Paint)
LCP is almost always about how fast the biggest visible element — usually a hero image or heading — can be downloaded and rendered.
Compress and resize images. A hero image straight out of a camera or stock library is often 5-10x larger than it needs to be. Resizing to the actual display dimensions and compressing with modern formats like WebP or AVIF can cut load time dramatically with no visible quality loss. A plugin like Convert for Media can bulk-convert and compress your entire media library — this works especially well out of the box on LiteSpeed servers, while on Nginx setups it may need some extra configuration to make sure converted images are actually served instead of the originals.
Use a content delivery network (CDN). A CDN serves files from a server geographically closer to the visitor, which matters a lot for sites with visitors spread across regions or countries. Cloudflare is a common starting point and has a free tier that covers the basics, though getting the most out of it for Core Web Vitals (caching rules, image optimization features) usually means some configuration beyond the default setup.
Preload the LCP element. If the largest element is an image, adding a preload hint tells the browser to start fetching it immediately, rather than discovering it partway through parsing the page.
Cut render-blocking resources. CSS and JavaScript that must fully load before anything appears on screen delay LCP directly. Deferring non-critical CSS and JavaScript, and inlining only the styles needed for the visible part of the page, helps the browser show something sooner. Caching and optimization plugins like WP Rocket (paid) handle much of this automatically, while a free asset management plugin such as Asset CleanUp lets you unload scripts and styles on a per-page basis — useful for stripping out plugin assets that only need to run on specific pages.
Improve server response time. If the server itself is slow to respond to the initial request, everything downstream is delayed. Good hosting, caching, and a lightweight theme/plugin stack all matter here.
Improving INP (Interaction to Next Paint)
INP is about responsiveness — how quickly the page reacts once someone clicks, taps, or types.
Audit third-party scripts. Chat widgets, analytics tools, ad scripts, and tracking pixels are some of the most common INP culprits, because they run JavaScript that competes with the browser’s ability to respond to user input. Removing scripts that aren’t earning their place is often the single biggest INP win available.
Break up long JavaScript tasks. When a single script runs for too long without pausing, the browser can’t respond to anything else during that time. Splitting heavy work into smaller chunks lets the browser stay responsive in between.
Defer or lazy-load non-essential JavaScript. Anything that isn’t needed for the initial interaction — below-the-fold widgets, secondary features — can be loaded after the main content is interactive. Lightweight plugins like Flying Scripts (delays third-party scripts until a user interacts with the page) and Flying Pages (prefetches links the visitor is likely to click next) are purpose-built for this and pair well with the deferred-loading approach above.
Reduce DOM size and complexity. A page with an excessive number of elements (common with heavily nested page-builder layouts) makes every interaction more expensive for the browser to process, because there’s simply more to update.
Improving CLS (Cumulative Layout Shift)
CLS is about visual stability — making sure things don’t move around after they’ve already rendered.
Always set dimensions on images and embeds. Specifying width and height (or using aspect-ratio in CSS) lets the browser reserve the right amount of space before the image loads, so nothing shifts when it arrives.
Reserve space for ads, embeds, and dynamic content. If a slot is going to be filled later (an ad, a video embed, a related-posts widget), give it a fixed minimum height up front rather than letting it appear and push everything down.
Be careful with web fonts. If a custom font loads after the page has already rendered with a fallback font, and the two fonts have different sizes or spacing, text can visibly reflow. Using font-display: optional or matching fallback font metrics closely can reduce this.
Avoid inserting content above existing content. Cookie banners, promotional bars, and “we use cookies” notices that slide in from the top are common offenders — if they’re going to appear, reserving the space for them from the start avoids the shift.
A practical starting order
If you’re not sure where to begin, this order tends to produce the most noticeable results for the least effort:
- Run a Lighthouse or PageSpeed Insights report and note which metric is weakest
- If it’s LCP — start with image compression and a CDN
- If it’s INP — start by auditing and removing unnecessary third-party scripts
- If it’s CLS — start by setting explicit dimensions on images and embeds
- Re-test after each change rather than making everything at once, so you can see what actually moved the needle
Core Web Vitals improvements tend to compound — fixing image sizes often helps LCP and CLS together, and removing a bloated script can improve INP while also reducing overall page weight. Small, targeted changes, tested one at a time, usually beat a single big “optimization pass.”
Not sure where to start, or don’t want to risk breaking something? That’s exactly the kind of work we do. Get in touch for a free Core Web Vitals audit and we’ll tell you what’s actually worth fixing on your site.