Question

Google PageSpeed: Properly size product catalog images on mobile

  • 24 August 2021
  • 0 replies
  • 21 views

I've built my woocommerce store with Elementor Pro, reaching good results with desktop view on Google PageSpeed Insights. In Wordpress Customizer I've set product catalog image width to 450px, which is the size the images are getting rendered on desktop view with 1920x1080 px. 

 

On mobile view everything looks like desired, but product images are loaded in 450px width but only are rendered in something like 200px width. This causes long loading times on mobile, because the loaded images are larger then they should be on a phone and Google PageSpeed gives low rankings because Google suggests to properly size the (product catalog) images.

How can I tell wordpress or Elementor to load product catalog images in smaller sizes?

 

At first, this may seem like a small improvement, but on a product archive page with 20 products, having images loading with 25 kb instead of 100 kb makes a total difference between 500kb and 2mb loading.


0 replies

Be the first to reply!

Reply