About this teardown
Most slow pages are not slow for exotic reasons. They are slow because of a handful of very ordinary decisions, stacked together. This teardown applies fixes one at a time so you can see which ones actually move the needle.
The starting point: 38
- LCP: about 6.1 seconds. The hero image was a 2.4 MB JPEG, lazy-loaded by the theme.
- Total Blocking Time: over 1,200 milliseconds, mostly from a chat widget, a reviews app, two ad pixels and a heatmap tool.
- CLS: 0.31, from a promo bar injected at the top, product images without dimensions and a late font swap.
Step 1: Stop lazy-loading the hero (38 to 49)
Removing loading=lazy from the hero and adding fetchpriority=high let the browser request it immediately. No other change, and LCP dropped by more than a second. This is almost always the best first move.
Step 2: Resize and convert the hero (49 to 58)
The hero was resized to the largest size actually displayed and served as AVIF with a WebP fallback, using srcset for smaller screens. The file went from 2.4 MB to well under 200 KB on mobile.
Step 3: Defer third-party scripts (58 to 79)
This was the biggest single jump. The chat widget moved behind a facade that loads on click. The reviews app, pixels and heatmap tool were delayed until after the page became interactive. Total Blocking Time fell from over 1,200 milliseconds to under 200.
Nothing was removed
Step 4: Fix layout shift (79 to 88)
- Added width and height to every product image.
- Changed the promo bar to reserve its space in the initial HTML instead of pushing the page down.
- Added a size-adjusted fallback font so the swap no longer reflowed text.
CLS went from 0.31 to 0.02. Because CLS is a quarter of the lab score, fixing it is worth a lot of points, and it makes the page feel calmer to use.
Step 5: Trim render-blocking CSS and fonts (88 to 94)
Unused stylesheets from removed apps were deleted, the main font was preloaded, and two unused font weights were dropped. First Contentful Paint and LCP both improved.
Step 6: Lazy-load below the fold (94 to 97)
Product grid images, the footer map embed and a video lower on the page were lazy-loaded with native attributes, freeing bandwidth for the content in the first screen.
What this teardown shows
- The two biggest gains came from the hero image and third-party scripts. Start there.
- Layout shift fixes are cheap and worth more points than most people expect.
- The last few points take the most effort. Passing Core Web Vitals for real users matters more than reaching 100.
- Lab scores are a guide. Confirm the change in field data in Search Console over the following weeks.
Doing it in one step
Steps one, three, four and six are exactly what LightLoader automates from a single script tag. Steps two and five, resizing source images and cleaning up old CSS, are one-time housekeeping worth doing either way.
Want a teardown of your own site? Run it through PageSpeed Insights, note the three biggest opportunities, and work through them in the order above.