Our old site loaded 3.9 MB before it painted anything: jQuery, Bootstrap, AOS, slick, fancybox, a countdown plugin, an icon font, a Google Maps SDK nobody used, and fifteen eagerly-loaded PNGs. The rebuild ships 90 KB. None of it required a framework.
Most of the weight was images nobody looked at
Fifteen images loaded on first paint because not one carried loading="lazy". Three product screenshots alone were 1.4 MB. Re-encoding to WebP took them down 85%, and replacing them with hand-authored SVG took the whole set to 21 KB.
The single biggest win was not a library at all. Three avatars on the page were full-size blog banners - one was 792 KB - being scaled into 34-pixel circles. That one fix was worth more than every other optimisation combined.
The JavaScript was mostly doing nothing
We counted what the 273 KB of scripts actually did on the homepage: a scroll-to-top button, a mobile menu, a carousel, and fade-in animations. That is about 80 lines of vanilla JavaScript.
- jQuery, to toggle a class
- Bootstrap JS, for a dropdown that had no items
- Two carousel libraries, for one carousel
- A Google Maps SDK, with a live API key, on every page - including the ones with no map
What we would do first on someone else's site
If you only have an afternoon, the order is almost always the same:
- Add loading="lazy" and width/height to every image below the fold
- Find the largest image and check what size it actually renders at
- Delete the libraries you can name a single use for
- Turn on gzip - it is one line of config and roughly 75% of your CSS and JS
The part that is not about bytes
Deleting a dependency removes a security surface and a version bump you would otherwise own for years. The Maps SDK we removed had been shipping a hard-coded API key in the page source of every page on the site since it was added.
