Fixing Core Web Vitals on WordPress: LCP, INP and CLS
How to fix Core Web Vitals on WordPress: practical LCP, INP and CLS fixes for heavy sites full of machine photos, plus how to measure before and after.
By Downway Team 3 min read
To pass Core Web Vitals on WordPress, you need to fix three things: LCP (how long the largest element on screen takes to appear), INP (how fast the site responds to clicks and taps) and CLS (how much the layout jumps while loading). On industrial sites the culprit is usually the same: huge machine photos, heavy sliders and too many plugins.
Prerequisites: measure before you touch anything
Record current values for three to five key pages (home, category, two products, contact) in PageSpeed Insights, looking at field data where available, and in the Core Web Vitals report in Search Console. Google's reference targets: LCP under 2.5 s, INP under 200 ms and CLS under 0.1. Back up the site and test on a staging copy.
Fixing LCP
- Identify the LCP element, almost always the hero image or banner. PageSpeed Insights shows which one it is.
- Resize the image to its real display size. A 4000 px photo displayed at 1200 px is waste.
- Convert to WebP or AVIF and compress. 3 MB photos often drop below 200 KB with no visible loss.
- Do not lazy-load the hero image; keep that for images below the fold. If possible, preload the LCP image.
- Use page caching and hosting with a good response time. A slow server undermines everything else.
Fixing INP
INP gets worse when a lot of JavaScript runs. On WordPress, the main sources are plugins and heavy page builders.
- Deactivate and delete plugins you do not use; test one at a time to learn the impact.
- Avoid animated sliders, chat widgets and pop-ups loaded on every page; load them only where they make sense.
- Defer third-party scripts (analytics, pixels, maps) or load them after first interaction.
- Consider swapping a heavy page builder for a lightweight theme if the problem persists.
Fixing CLS
Layout shifts happen when the browser does not know an element's size before it loads.
- Set width and height on all images and embedded videos.
- Reserve space for banners, ads and cookie bars instead of pushing them over the content.
- Use font-display: swap and preload the main fonts to avoid text jumps.
- Avoid injecting content above what has already been shown.
A before and after example
Picture, as a hypothetical example, a product page with a 3.5 MB banner, five slider and animation plugins, and a 5 s mobile LCP. After compressing and converting images, removing two plugins, deferring third-party scripts and enabling caching, it is common to see LCP fall to around 2 to 3 s. Exact numbers vary by hosting and content.
What to measure at the end
Repeat the tests on the same pages and compare with your baseline. The Search Console field report takes about four weeks to reflect improvements, because it uses real-user data. If the site still misses the targets, a lightweight rebuild may be worth it, like the performance-focused website development projects.
Frequently asked questions
Do Core Web Vitals affect rankings?
Yes, they are part of the page experience signals, but relevant content weighs more. They work as a tiebreaker and improve conversion.
Do I need a caching plugin?
Usually yes, but pick one and configure it well. Two caching plugins at once cause conflicts.
Why does my test result change every run?
Lab tests vary with network and server. Prioritize field data and average several runs.