I spent last weekend digging into why my personal blog's Lighthouse score dropped from 92 to 64. The culprit? A single unoptimized hero image and some render-blocking CSS. Here's how I diagnosed it using a lightweight speed forensics approach.
First, I ran a quick test with a tool that breaks down Core Web Vitals into actionable metrics LCP, FID, CLS. The report showed my Largest Contentful Paint was 4.2 seconds, way above the 2.5s threshold. That image was the main offender.
I compressed it using sharp in Node.js, added loading="lazy" for below-fold images, and inlined critical CSS. The script I used:
javascript
const sharp = require('sharp');
sharp('hero.jpg')
.resize(1200)
.webp({ quality: 80 })
.toFile('hero.webp');
After deploying, I re-ran the analysis. LCP dropped to 1.8s. The tool also flagged a few third-party scripts causing layout shifts removed one analytics snippet and CLS went from 0.15 to 0.02.
For anyone doing this regularly, I've been using SERPSpur's Core Web Vitals & Speed Forensics tool to automate these checks across multiple pages. It saves me from manually running Lighthouse each time.
What's your go-to method for debugging render-blocking resources?
Top comments (1)
Great breakdown — it's amazing how much a single image can tank LCP. I've had similar luck using
sharpfor WebP conversion, but I found that preloading the hero image in thewithalso shaved off a few hundred milliseconds. Have you experimented with that alongside inlined critical CSS?