DEV Community

Cover image for How I Approach WordPress Core Web Vitals Before Rebuilding Anything
Amr Osama
Amr Osama

Posted on

How I Approach WordPress Core Web Vitals Before Rebuilding Anything

How to Improve WordPress Core Web Vitals (2026)

A senior developer's practical guide to improving WordPress Core Web Vitals — LCP, INP, and CLS — often without a full rebuild.

favicon amr-osama.net

Most slow WordPress sites do not need a full rebuild first.

They need a proper performance diagnosis.

When I audit a WordPress site, I usually start with three questions:

  1. What is delaying the largest visible content?
  2. What JavaScript is making interaction feel slow?
  3. What layout shifts are happening after the page starts loading?

Those map directly to the three Core Web Vitals:

  • LCP: how fast the main content appears
  • INP: how responsive the page feels
  • CLS: how visually stable the layout is

1. Start With LCP

For WordPress sites, LCP problems usually come from one of these:

  • oversized hero images
  • render-blocking CSS
  • slow hosting response time
  • too many plugins loading assets early
  • sliders or builders delaying the first meaningful section

Before touching plugins, I check the actual LCP element. If it is the hero image, I optimize image size, preload strategy, responsive sources, and server delivery.

If it is text, I look at CSS, fonts, caching, and server response.

2. Reduce JavaScript Pressure For INP

INP is where many WordPress sites struggle, especially sites using heavy page builders, tracking scripts, chat widgets, popups, and large plugin stacks.

The fix is not always “remove JavaScript.”

Usually, I look for scripts that can be:

  • delayed
  • loaded only on the pages that need them
  • replaced with lighter code
  • moved away from the initial interaction path

A WooCommerce product page, for example, should not load the same assets as a blog post.

3. Fix CLS With Stable Layouts

CLS is often caused by simple layout issues:

  • images without dimensions
  • ads or embeds loading late
  • fonts swapping badly
  • sticky headers changing size
  • dynamic banners appearing above content

The boring fix is usually the right fix: reserve space before things load.

4. Measure Before And After

Performance work should not be guesswork.

I like to capture the starting point first, then measure again after each meaningful change. Otherwise, it is too easy to install five optimization plugins and never know what actually helped.

My Practical Order

For most WordPress sites, I follow this order:

  1. Measure real issues first
  2. Identify the worst template or page type
  3. Fix images and LCP delivery
  4. Reduce unnecessary scripts
  5. Stabilize layout shifts
  6. Review hosting and caching
  7. Only consider a rebuild if the architecture is the actual problem

A rebuild can help, but it should be the conclusion of the audit, not the first guess.

I wrote more about my WordPress performance process here:

https://amr-osama.net/services/wordpress-performance-optimization/

And this is my main site if you want to see the kind of WordPress and WooCommerce work I focus on:

https://amr-osama.net/

Top comments (0)