Case Study

Case Study: How Squoosh Quietly Became My Favorite Web PageSpeed Weapon

Share

I’ll be honest — for years, image optimization was the chore I kept shoving to the bottom of my to-do list. Every WordPress build I shipped looked gorgeous, clients were thrilled, and then I’d run a PageSpeed Insights test and watch my score crumble under the weight of a single hero image someone dragged straight off their iPhone. You know the one. 8MB, full resolution, shot in portrait mode, doing absolutely nothing to deserve that file size.

That’s how I found Squoosh, Google’s free, open-source image compression tool, and it has genuinely changed how I hand off projects. No plugin bloat, no server upload, no signup wall — just a browser tab and a slider that turns “why is this page loading like it’s 2009” into “ship it.”

 

What Does Squoosh Actually Do, You Ask?

Squoosh runs entirely in your browser using WebAssembly, which is easy way of saying your images never leave your computer. Nothing gets uploaded to a server, nothing sits in someone else’s cloud — it’s all processed locally, which is exactly the kind of privacy-by-default I want when I’m handling client assets. I also do not want to spend hours trying to boost a page speed score due to processing images.

Once an image is in, Squoosh lets you compress and convert it using modern codecs like WebP, AVIF, MozJPEG, OxiPNG, and JPEG XL, and shows you a live, side-by-side before-and-after comparison as you drag the quality slider. You watch the file size number drop in real time while the image on screen barely changes. It’s a little bit magic and a little bit addictive — I’ve absolutely lost ten minutes just nudging the slider back and forth to squeeze out an extra 15KB. Generally the suggestions are enough but sometimes I get a little proud.

Now The How-To: My Actual Workflow!

Here’s exactly what I do with every hero image, blog thumbnail, and background graphic before it goes anywhere near a WordPress upload button:

  1. Head to squoosh.app. No install, no account. Drag your image into the browser window.
  2. Pick your output format. For photos, I default to WebP or AVIF — both give you dramatically smaller files than JPEG at the same visual quality. AVIF usually wins on size, but I double-check browser support for the project before committing to it as the only format.
  3. Drag the quality slider and watch the comparison. Squoosh splits the screen so you can drag a divider across the image and see original versus compressed side by side. I aim for the lowest quality setting where I genuinely can’t tell the difference — usually somewhere between 65 and 80 for photos.
  4. Check the resize panel. If an image is being displayed at 1200px wide but was uploaded at 4000px, Squoosh lets you resize right there before you even get to compression. This step alone has saved some of my sites more than compression itself.
  5. Download and upload to WordPress. That’s it. Drop the compressed file into your media library like normal.

For a full site, I’ll batch through the image folder this way before launch, and it rarely takes more than twenty or thirty minutes even for a media-heavy site — a small time investment against the alternative, which is a client emailing me two weeks post-launch asking why their site “feels slow.”

For the record, I also use the best caching and optimization plugin on the planet I have found in the biz, Flying Press. Simple easy to use and takes the headache of trying to get that CSS and JS load great out of the box. The combination of these two great tools has been a winner!!!!

The Anecdotes (Because Every Tool Has a Villain Origin Story)

I still think about the non-profit site I inherited where the “optimized” hero image was a 6.4MB PNG of a sunset — full color depth, no compression, doing the job of representing hope and renewal while also actively strangling the Largest Contentful Paint score. PageSpeed Insights gave that page a 31. Thirty-one. I ran the same image through Squoosh, converted it to WebP, dropped it to a sane display size, and got it down to 240KB without losing a single visible detail in the clouds. The score jumped to the high 80s on that change alone. I didn’t touch a line of code. I just stopped shipping an image that was secretly the size of a small novel.

Then there was the client who insisted their product photography “had to stay PNG” for quality reasons, right up until I showed them the Squoosh comparison slider live on a call. Watching someone drag that divider back and forth, unable to spot the difference between a 3MB PNG and a 180KB AVIF, is one of my favorite moments in this job. It’s the fastest way I’ve found to win an argument about file formats without saying a single condescending word.

And my personal favorite: a photographer client whose portfolio site loaded so slowly that Google was flagging it before real visitors even had the patience to scroll. Every image was untouched RAW-adjacent output straight from Lightroom. We ran her entire gallery through Squoosh in one sitting, format by format, and her Core Web Vitals went from “needs improvement” across the board to green in every category. She now runs every new gallery through Squoosh before it goes live — it’s become part of her process, not just mine. That’s a time optimization win, friends!

Why This Matters for PageSpeed Insights In A Nutshell

Images are almost always the biggest lever you can pull on a PageSpeed score. Largest Contentful Paint, in particular, is usually determined by how fast your biggest visible image loads — and that’s directly tied to file size. Trimming an oversized hero image down through Squoosh routinely does more for a site’s score than hours of code-level optimization, purely because you’re removing the biggest bottleneck instead of shaving milliseconds off smaller ones.

It’s not a replacement for caching, a good hosting setup, or clean code — but it’s the fastest, lowest-effort win I know of, and it costs nothing. I also have combined the best caching plugin I have found Flying Press, trust me this is a game changer and you can find it right here, 

The Insightful Takeaway

Squoosh isn’t flashy-the page hero image is the actual header. It’s a quiet little browser tab that doesn’t ask for your email, doesn’t nag you to upgrade, and doesn’t try to be anything more than what it is: the best free tool I’ve found for making images small without making them look small. If you’re staring at a red PageSpeed score and wondering where to start, start here. Drag an image in, watch the slider, and see what happens to your score. One last thing before you go – run your test in a clean browser-no extensions or tabs. I’d bet it’s more dramatic than you expect.

Related Post