DEV Community

loading...
Cover image for Building an image optimization tool to win the PageSpeed game on autopilot

Building an image optimization tool to win the PageSpeed game on autopilot

Roman Sedykh
Project manager going into product stuff
・1 min read

Hi dev.to!

We’re building an image optimization tool called PageDetox. Its purpose is helping to win the Google PageSpeed game.

I want to ask you for URLs to analyze and provide you with optimization instructions to raise your image score up to a 💯.

How does the tool work?

  • You analyze a page on autopilot, request a report
  • We provide the report together with a personalized workflow for optimizing images

The analyzer is there and ready, while the step-by-step optimization part is work in progress.

Here’s the instruction design we want to start with:

  • Upload files to an Image CDN (since we're with Uploadcare, we stick with using that service; if you're a fan of other solutions, pick your favorite. Uploadcare provides a CDN URL that allows applying Image Transformations on the fly, we make use of it)
  • Get those CDN URLs
  • Replace the src attribute in <img> with srcset
  • Make each version of a source image with on-the-fly transformations taking analyses results into consideration

Check an example below ⬇️

So, shoot me your page URL in the comments. I’ll be supervising each set of instructions and ask what was unclear/going wrong, a custdev kind of thing.

If you’ll have any feedback regarding the app’s flow, I’d appreciate you sharing it.

Thanks!

Discussion (2)

Collapse
showmeyourhits profile image
Alex Ozhigin • Edited
Collapse
rsedykh profile image
Roman Sedykh Author

Here is a comparison of tinkoff.ru to the top 500 financial services sites — (I've run tinkoff.ru 10 times to get the average because Lighthouse report is highly fluctuating).

What stands-out:

  • weight is on par with others (both desktop and mobile are 9% lighter)
  • 40% / 60% more pictures (desktop / mobile)
  • images weight 54% / 49% less then on competitors' sites
  • desktop images are already fully optimized, small room for optimization (you can shed 9.69%, 45KB), but mobile can be optimized by 62% (saving 263KB), which will result in savings 1.46s for the full load with a fast 3G / weak 4G connection

That leads to the 72% desktop Performance Score, which is 53% better compared to the niche average! But the mobile score is only 25%.

To fix mobile performance, Lighthouse suggests optimizing offscreen images, converting all images to webP, and making them more responsive. It's also interesting that it doesn't suggest quality optimization.

Our model predicts that this will improve mobile Performance Score by 8, up to 33%.

Just in case, here is a checklist with key image optimization techniques.