Four 100s: What It Actually Took to Max Out Lighthouse
· Chirag Gadhvi
I ran Lighthouse on my portfolio expecting a pat on the back.
It gave me a 36.
Thirty-six. The site looked great, but on a phone the main content took almost 10 seconds to show up. So I opened Claude Code and started cleaning up.
The crimes
- 11 MB of images. Full-size screenshots squeezed into tiny cards.
- A 1 MB JavaScript file that had to load before anyone saw anything.
- A background video nobody asked for.
- A spinning 3D coin that redrew itself every single frame. It was cool. It was also killing performance.
Watch it happen
https://youtu.be/oBPv3zvrpWk
The fixes
Shrink the images. Everything became WebP, resized to the size it's actually shown at. 11 MB became 380 KB, and one icon went from 300 KB to 1 KB. This single change did the most.
Load less up front. Pages you haven't opened yet don't load until you open them. I also removed two heavy libraries that were loaded for tiny jobs. The JavaScript got cut in half.
Let CSS do the spinning. The same animations, run by the browser's graphics chip instead of JavaScript. They look identical and cost almost nothing.
Show the first screen instantly. My name and intro are now plain HTML built ahead of time, so they appear before any JavaScript runs.
Polish the little stuff. Slightly brighter grey text, better image descriptions for screen readers, and a fixed llms.txt for AI tools.
The result
Performance 100. Accessibility 100. Best Practices 100. SEO 100. Agentic Browsing 3/3.
The lesson
Start with your images. They're probably the problem. They usually are.
And if Lighthouse gives you a 36, don't take it personally. Take it as a to-do list.