What’s really slowing the home page down?
| Metric (mobile) | Likely Culprit | Why it hurts |
|---|---|---|
| Largest Contentful Paint (LCP) | 2-3 MB hero image served as a CSS background & lazy-loaded | Browser can’t “see” the image until CSS downloads → render delayed web.dev |
| Total Blocking Time (TBT) | 300 KB + of unused Elementor/Block-editor JS & font files | Extra JS pauses the main thread; unused bytes = wasted parse/compile time web.dev |
| Time to First Byte (TTFB) | WordPress/PHP every-page build + no full-page cache | Server work adds ~400 ms before anything starts to paint web.dev |
5-Step “do-this-first” fix list
You’ll pick up ~20–25 mobile points without touching your theme code.
| Priority | Concrete fix | How to do it in WordPress |
|---|---|---|
| 1. Serve the hero at lightning speed | Replace the CSS‐background with a real <img> tag, save it as WebP, ≤150 KB, 1600 px, add fetchpriority="high" and remove loading="lazy". |
• In Elementor: change the section background → “Image Widget” inside the section. • Add this in <head> (Insert Headers & Footers):<link rel="preload" as="image" href="/wp-content/uploads/hero.webp" fetchpriority="high"> |
| 2. Stop the JS party up-front | Defer everything that isn’t needed for first paint. | Install Asset CleanUp or Debloat → “Bulk Unload” → uncheck Elementor, form, and marketing scripts on the home page only WordPress.org |
| 3. Inline only the critical CSS | Generate above-the-fold CSS once, load the rest async. | WP Rocket → File Optimization → “Optimize CSS delivery” → Remove Unused CSS (site-wide) |
| 4. Give PHP a break | Serve static HTML via full-page cache + CDN. | • Enable WP Rocket page cache • One-click Cloudflare APO (automatic origin pull) |
| 5. Tidy up fonts | Local-host Google Fonts, font-display:swap, preload the first weight. |
OMGF plugin → “Replace & Host Locally” → Preload first font file |
Why these steps work
-
Browsers prioritize what they can discover earliest. A background image hidden in CSS isn’t requested until after CSS arrives; turning it into a normal
<img>& preloading shaves ~600 ms LCP web.devweb.dev -
Unused JavaScript/CSS is pure overhead. Lighthouse flags every byte, even if it never runs. Unloading page-builder assets you don’t need can cut parse/compile time in half web.dev
-
Critical-CSS + defer keeps first paint lean while still letting the full stylesheets load for interaction.
-
Caching turns dynamic PHP into static HTML, removing server generation time from the equation web.dev
Quick win checklist (15 min)
-
Export hero JPEG → compress to WebP (Squoosh), re-insert as
<img>. -
WP Rocket → Media → uncheck “Lazy-load images” only for hero (
data-no-lazy="1"). -
Asset CleanUp → unload contact-form.js, share-buttons.js, anything not used on home.
-
Enable WP Rocket cache + Cloudflare APO.
-
Re-run PageSpeed. Mobile score should land in the mid-80s to low-90s.
Do those, and the site will feel as snappy as the desktop score suggests—without a full rebuild.
Need deeper fixes (e.g. code splitting Elementor widgets)? Let me know and we’ll tackle the next layer.