DEV Community

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

Collapse
 
rsedykh profile image
Roman Sedykh

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.