by Mel·Sept 18, 2025

Quick plan: make your WordPress pages feel fast. We’ll lower LCP by fixing the hero image, fonts, and critical CSS. Then we’ll improve INP by delaying non-critical JavaScript and removing bloat.

This is a practical weekend checklist. No theme rebuilds. Just the changes that move the needle.

What these metrics mean

• LCP: how fast the biggest thing above the fold appears (usually your hero image or H1).
• INP: how quickly the page reacts after you click, tap, or type.

Targets for this weekend

• LCP around ≤ 2.5s on mobile for key pages.
• INP around ≤ 200ms by reducing heavy JavaScript work.
• Cleaner first view: lighter images, predictable fonts, smaller CSS/JS.

Quick reference card

Do these first:

• Use one optimized hero image and preload it.
• Use system or locally hosted fonts with font-display: swap.
• Turn on caching, minify CSS/JS, and delay non-critical JS.
• Remove heavy sliders/pop-ups from the top of the page.
• Cut long tasks (>200ms) and trim third-party scripts.

Tools (pick one per row)

• Cache/CDN: LiteSpeed Cache (if your host uses LiteSpeed) or WP Rocket + Cloudflare.
• Assets: Perfmatters or Asset CleanUp to unload scripts/styles per page.
• Images: Native WordPress WebP (or ShortPixel/Imagify).
• Checks: PageSpeed Insights, Lighthouse, Chrome DevTools (Performance).

Saturday morning: improve LCP

1. Hero image
   • Export a clean 1600×900 WebP. Keep it as small as you can (ideally < 200 KB).
   • Use a single <img> (avoid sliders or video backgrounds).
   • Preload it in your header/template:
     <link rel="preload" as="image" imagesrcset="..." imagesizes="(max-width:768px) 100vw, 1600px" href="/path/hero.webp">
   • Add decoding="async" and fetchpriority="high" to the hero <img>.
2. Fonts
   • Prefer a system font stack or host your fonts locally.
   • If you use Google Fonts, host them locally and set font-display: swap.
   • Preload only the 1–2 weights used above the fold.
3. Critical CSS
   • Enable “Critical CSS” in your cache plugin.
   • Inline the critical CSS and defer the main stylesheet if your plugin supports it.
4. Images
   • Enable WebP and responsive sizes (srcset).
   • Lazy-load all images except the LCP hero image.

Saturday afternoon: delay JS and remove bloat

1. Delay non-critical JS (analytics, chat, pop-ups, carousels) using your cache/asset plugin.
2. Unload scripts per page (e.g., contact-form JS should not load on every page).
3. Remove above-the-fold blockers (sliders, heavy pop-ups). Move them lower or trigger later.
4. Reduce third-party scripts (keep only what you need on the pages that need them).

Sunday morning: improve INP

1. Use Chrome DevTools → Performance to find long tasks (>200ms). Defer, split, or remove them.
2. Use passive event listeners for scroll/touch. Avoid heavy work inside click handlers.
3. Prefer CSS transforms/opacity for animations. Avoid layout-thrashing properties.
4. Reduce DOM size. Remove unused blocks and collapse accordions by default.

Sunday afternoon: verify and ship

• Run PageSpeed on your home page, a top blog post, and a service page. Note the LCP element and time.
• Test on a real phone over 4G. Try the menu and search early—should feel instant.
• Publish changes → purge plugin cache and CDN → re-test. Keep a simple log of results.

Common WordPress gotchas

• Multiple optimization plugins fighting each other—pick one cache plugin and one asset plugin.
• Builder-heavy hero sections (video, sliders, layered overlays) = slow LCP.
• Loading 6–8 font weights—keep 1–2 above the fold.
• Analytics/ads injected in the head—move to body and delay if possible.

What to read next

Once key pages are stable, turn performance into a simple checklist for every new page. For content structure wins, read our AIO Optimization guide. Need help? Visit Services or see our SEO consulting overview.

Related reading

• Site Speed 101: Faster Pages, Better Rankings
• Simplify SEO: A No-Jargon Playbook
• Beginner’s Guide to SEO
• AIO Optimization for AI Overviews