WP Smush Pro - Images Optomized / Score Still Very Low

Hello!

I upgrade to WP Smush Pro and Hummingbird to optomize my site's performance. After running WP Smush Pro my image optimization score do not improve and ever drops sometimes. It is now very low (13/100) and fear this is dramatically slowing down my site.

How do I improve this? See test performance screen images attached.

  • Rupok

    Hi John McKeon,

    I'm so sorry to see the inconvenience you are having. Let me try to help you in solving this.

    Can you please tell us what Hummingbird shows when you click on "Optimize Images" ? Does it provide any image link to compress or resize? Can you please try super-smushing all your images? I believe that will help.

    Another thing I must point out, Hummingbird doesn't score only on image size, but also on image dimension. For example, if you have a div of 200X200 px and use an image of 400X400 px as a background of that div or inside that div, that is not really optimum. You can always go to your Dashboard > Media section and resize images from there according to the frame size where the image will be used. That will reduce your file size dramatically for the whole site. I went to your site, checked couple of images, and most of them were larger than their frame.

    I can see that you have more than 8000 image files and it's not really a good idea to resize them one by one. So, you can create a custom image size in WordPress as a custom thumbnail. This article will give you idea regarding how you can do that: http://www.wpbeginner.com/wp-tutorials/how-to-create-additional-image-sizes-in-wordpress/

    After doing this, you can call proper thumbnails for your theme to fit the frame.

    Can you please try super smushing all your images first and let us know if that helps? I could tell you better about the issue if I could check your current configuration and make some tests on your site. I tried to login with Support Access but it showed me this:
    The admin did not enable remote access. Please ask the user to grant access.
    Can you please grant us Support Access so we can check your site configuration and suggest you better about resolving this?

    To enable support access you can follow this guide here:
    http://premium.wpmudev.org/manuals/wpmu-dev-dashboard-enabling-staff-login/

    Please let us know if you have any confusion. We will be glad to help further.

    Have a nice day. Cheers!
    Rupok

  • John McKeon

    Hi Rupok,

    I've completed the WP Smush Pro Super-smush and it only increase my optimize images score from 14 to 21.

    I am reading thru the WPBeginner article for 'How to Create Additional Image Sizes in WordPress' and trying to understand how this can help my performance image issues.

    I've also granted remote access to thru WPMU Dev. Can you please the Hummingbird Dashboard report (image attached) and check my site configuration and suggest some further resolutions?

    Thanks!

    [image pos="0"]

  • Nithin

    Hi John McKeon,

    Hope you are doing good today. :slight_smile:

    Thank you for enabling support access, I checked your website in Google Page Speed:
    https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fwww.americanfootballinternational.com%2F&tab=desktop

    And it seems like you are using Jetpack Photon which has it's own optimizing algorithm, and hence due to that, the images are loaded over from the WordPress CDN. WP Smush Pro doesn't have control over the images loaded through the CDN, and hence you are getting a low score.

    The result from Page Speed shows that, the image needs to be compressed, and re-sized according to the content width, ie you are loading a bigger image than the current content width of your theme. For eg: The image is having a size 500 x 500 px, while the themes content width is 300 x 300, you'll have to resize the image to 300 x 300 in order for it to rank higher in PageSpeed.

    I'm pinging the developer asking to give a look, and to see whether the images can be optimized before it get's loaded over the CDN via Photon, will keep you posted asap. Have a nice weekend. :slight_smile:

    Kind Regards,
    Nithin

  • Nithin

    Hi John McKeon,

    Hope you are doing good today. :slight_smile:

    I got an update regarding this, Jetpack Photon makes use of it's own algorithm, and caches the images for a very long time period, so even after smushing the images using WP Smush Pro, if Photon in being used, it'll serve the old un-optimized images from it's CDN. Since Jetpack Photon doesn't have any option to purge it's cache, I'm afraid there isn't any workaround for this.

    The images marked in the Google Page speed are loaded via the Jetpacks CDN. If you are looking for CDNs, you'll have to make use of for eg Cloudflare, or such similar services. If not, you could disable the Jetpack photon module, and resize the images while smushing to improve your website score.

    I hope this helps. Please let us know if you still need any further assistance. Have a nice day. :slight_smile:

    Kind Regards,
    Nithin

  • Nithin

    Hi John McKeon,

    Hope you are doing good today. :slight_smile:

    You will only have to subscribe to Cloudflare, if you are looking for a CDN. If not, you just have to turn off Jetpack Photon module, and re-run WP Smush Pro.

    If you re-check PageSpeed, you'll notice images marked as Compressing and resizing . For such images, you'll have to compress, and re-size the images using WP Smush Pro.

    You might find this thread helpful on how to resize such images, according to your themes content width: https://premium.wpmudev.org/forums/topic/resize-images#post-1133838

    If you still have any doubts, please do let us know, we would be glad to give a closer look. Have a nice day. :slight_smile:

    Kind Regards,
    Nithin

  • Kasia Swiderska

    Hello John,

    And if I were to disable Photon and re-run WP Smush Pro, would it still be advisable for me to subscribe to a CDN like Cloudflare?

    After you disable photon, re-run Smush and (this is also important step) resize your images so they will fit their containers perfectly, you should see improvement in your site score.
    Using CDN service will also help - but this is additional step - those above are more important.

    kind regards,
    Kasia

  • Nithin

    Hi John McKeon,

    Hope you are doing good today. :slight_smile:

    Sorry for any confusions, you'll have to resize all your images individually, so for example if you check your logo image: ie Logo-14-E03-01-1-1-e1473348775786.png. It has a dimension of 952px X 414px, hence your image is larger than the content width of your theme, which is 257px X 112px.

    In order to find the content width of that particular image in your theme, you'll have to right click on that particular image, and select Inspect Element/Inspect. You can see the screenshot below which shows the content width of your logo:

    Once you have figured out the dimensions as shown above, you'll have to go to, Media > WP Smush, and under Resize original images, you'll have to add these dimensions as shown in the screenshot, and save the settings.

    Once done, re-uploading the image will smush, and re-size it according to that dimensions, make sure to update this new image as your logo.

    You'll have to repeat the above step for each, and every images which is marked as Compressing and resizing in Pagespeed. Once done, please clear you CDN cache, so that the changes are reflected.

    It seems like the support access is disabled, so wasn't able to give a look at your current settings. If you still have doubts, or issues. Please enable support access, so that we could give a closer look. You can grant access from WPMU DEV > Support > Support Access > Grant Access, or check this manual: http://premium.wpmudev.org/manuals/wpmu-dev-dashboard-enabling-staff-login/

    Kind Regards,
    Nithin

  • Nithin

    Hi John McKeon,

    I have quite a few images that need this and this seems like A LOT of manual work. Is there no way to automate this?

    I'm afraid, at the moment there isn't any automatic process, as the values of resizing of images entirely depends upon each themes content width, and it can vary from one theme to another.

    I logged into your website, and uploaded a new logo which is resized to 257X112px, and that has cleared the issue for your logo image, and your score has improved from 57 to 60. You'll have to repeat the process as explained in my previous comment, for each image to get this sorted.

    Please let us know how that goes, so that we could give a closer look, if needed. Have a nice day. :slight_smile:

    Kind Regards,
    Nithin

  • John McKeon

    Thanks Nithin,

    I guess I have a question here still and part of your explain confuses me.

    For example, see the image below;

    Hummingbird is telling this needs to be resized/compress (see below)

    However, this is the minimum recommended image size for my theme's featured image (620x400). If I reduce this, it will no longer fit my feature image spot.

    So why does this show up and recommended for reduction? What do I do for an image like this?

    Thanks,

  • Rupok

    Hi John,

    Thanks for the screenshot. I can see that all images used in your site front-end are being called from "wpengine.netdna-cdn.com" location, but when I went to your "Dashboard > Media" section and clicked on an image thumbnail, the location showing for that image is "http://www.americanfootballinternational.com/wp-content/uploads/... ..." . So I think Smush has optimized all images which are stored in your "/wp-content/uploads/" directory but your site is using CDN images which are not optimized. And that's why the issue is occurring, I'm not sure, though.

    Can you please disable CDN and check if it reflects any change in Hummingbird Image Optimization score? Please let us know. If this doesn't help much in this issue, we will be glad to investigate further.

    Have a nice day. Cheers!
    Rupok

  • Kasia Swiderska

    Hello John,

    I've disabled the CDN and purged it. But these images keep showing up in my queue as needing recompressing. What is the deal?

    It says "Compressing and resizing" - images are compressed, smushed in Smush - then next step is resizing.
    I checked again your site in google page speed and first image it shows is this one:

    you can see that in place were should be placed image 160x103 px is placed image with size 620x400 px. Google pay attention for that type of issues - and will show this as image that needs compression and resizing.
    In this particular place image smaller image thumbnail should be placed. This is handled by your theme - by Hot Topix Category Light Widget in file widget-catlight-links.php

    and then in functions.php you can see that this widget is using much bigger size it should be there

    at the moment - you would need to rewrite that theme so it will use right thumbnail sizes in places where its is using bigger ones.
    So for this particular case I showed above, in file widget-catlight-links.php post-thumb should be replaced with thumbnail (that is size around 150-150 so it will be better choice).

    Then, when right sizes will be load google page speed test should show you better score.

    kind regards,
    Kasia

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.