[WP Smush Pro] GTmetrix Optimized Images Version

Hi,
Even I am setup Smush Pro , i have some photos not optimized in GTmetrix report .In recommendations part GTmetrix list of images and offer optimized version of it.

My question is , If GTmetrix offer optimized version why Smush doesn't optimized it
Thanks

  • Adam Czajczyk

    Hello Mohamed

    I hope you're well today and thank you for your question!

    I have checked the site that you assigned to this ticket with GTMetrix and I see three grades related to images on site there.

    1. "Optimize images" - graded at A (99)

    There are two images reported there with a size reduction of 54B in total. GTMatrix suggests that lossless compression could save that amount there but since I don't have access to your site I can't check these images. It's possible that the they weren't smushed yet for some reason or that they weren't smushed at all e.g. because the image size that they are using is no longer registered on the site. These are just two possibilites though. Another one is that they are actually optimized already but that's reported only due to the difference between compression algorithms. 54B for two images (34B for one image and 24 for another one) is a difference really small - something that wouldn't affect site performance in any noticeable way.

    If you would enable support access to the site, I'd be happy to take a closer look at it to make sure about it, to give you more accurate response.

    2. "Specify image dimensions"

    That's an issue of a theme or a plugin that's displaying the reported image. Browser renders images faster if the image size (width or height or both) are specified in a page source as it doesn't have to "calculate" dimensions. However, this is not related to Smush image optimization.

    3. "Serve scaled images"

    This is yet another issue that's related to the theme or the plugin outputting reported images. The message there says that given image is being displayed inside a container that's smaller than the image itself. For example - an image of 563x200 pixels is displayed on site as 256x91 pixels image which means that browser has to dynamically change its dimensions. The solution is to identify where these reported images are used on site and then resize/crop them accordingly to match their container sizes and replace on site.

    To sum it up, out of these three issues the first one is directly related to the Smush Pro plugin. However the "nano-scale" difference of only 54 bytes is tiny enough to be explained by the "metrics error margin" - in that sense that the algorithms used in both tools (Smush and GTMetrix) might be responsible for this. The half kilobyte is way to less to make a noticeable change in site's performance so I wouldn't worry about it much. However, I'll be glad to check your site to make sure about the issue and see if and how it could be solved.

    If you enable support access to the site so I could take a closer look at it, just let me know here, please.

    Kind regards,
    Adam

  • Adam Czajczyk

    Hello Mohamed

    Thank you for your response.

    This is interesting, indeed. I did switch to test server to "London. UK" and I see what you meant. My initial test was from default location of Vancouver, Canada.

    Seeing the result from London, I performed even more tests, switching locations and quite "weird" is the fact that actually London seems to be the one that's bringing that long optimization list while the other locations perform just fine.

    I took a look at the site then and it looks like the images in Media Library are optimized (including full size images and even super-smushing enabled). That should give better compression that even suggested by GTMetrix!

    I think you might be right about CDN being involved here. CDN's do cache some resources and your site is using CloudFlare. Furthermore, there's a caching plugin on site which also is not integrated with CloudFlare so even clearing cache on site doesn't clear it on CF.

    I think it would be worth to try to: clear cache on site and then put CloudFlare in a "dev" mode (there's an option for this in CloudFlare account dashboard) and then test again. If the results become consistent that would clearly confirm CDN "messing that up".

    Best regards,
    Adam

  • Adam Czajczyk

    Hey Mohamed

    Honestly, I didn't see that before! It's a first time I ever crossed across this. I mean, I've seen issues similar when the performance results where different depending on location but so far never in relation to such "hard factors" like size of an image file. Usually the differences are rather related to e.g. connection performance, DNS'es etc.

    If you are able to set a staging site to check this, that would be great. I was testing with my own site too but I couldn't replicate this so I'm very interested in results from such staging site of yours.

    Keep me updated please!
    Adam

  • Mohamed

    Hey Adam Czajczyk ,
    For this reason I prefer don't take clients on other web-hosting servers, crazy things :rolling_eyes:

    Screens below for client's origin website with CF CDN and the other for the stage website , both tested at London server.

    The point is Optimize Images parameter is A (99%)

    In this way I think the problem in CDN, What do you think?

    Note : WP Checkup result ask for Optimize six images to reduce their size by 91.4KiB (65% reduction).

  • Predrag Dubajic

    Hi Mohamed,

    This does indeed seem like a CDN issue, it might be best to discuss this with your host and CloudFlare for more information.

    Note : WP Checkup result ask for Optimize six images to reduce their size by 91.4KiB (65% reduction).

    These are probably because you have some images on your home page that are larger than the image holder, those are usually shown as Compress & Resize reports, so even if they are optimized their size in pixels is larger than the holder.

    For example, if you check your Recent Posts section the featured images there are 720x390 while the holder is only 360x195.
    Same thing happens with Latest News widget in footer, images loaded are 150x150 while the holder is only 50x50 pixels.
    You should check this with theme developers as the code is written in a way to load larger image so this needs to be changed to use thumbnails that will match the image holder.

    Best regards,
    Predrag

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.