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>
withsrcset
- 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!
Top comments (2)
tinkoff.ru/
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:
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.