[Smush Pro] Worse Performance With Smush Pro

When I as using the regular Smush, webpagetest.org gave a "B" rating on image compression. I have implemented everything in Smush Pro and now have a "C" rating for this. I resize my images to what they need to be before I upload them, so not sure what's going on. I don't upload large images and have Wordpress adjust their size.

  • Patrick Freitas
    • Staff

    Hi Eldon

    How are you?

    Sorry to hear you are having this issue, I can see the report for your images are Losslessly compressing, this means the images are being resized by CSS or HTML.

    I checked the reported images and you can see the theme is using the image as a background image and it is resizing the images using CSS.

    [image pos="0"]

    Unfortunately, the Auto Resize image from Smush CDN only will get images that use <img> tag, not background images, this would need to be fixed on the theme.

    Please, contact the theme provider and ask them to avoid resizing images on CSS.

    However, the score shouldn't decrease after installing Smush, wouldn't you mind please, grant the support access and we can take a look at the Smush Settings?

    Support access Guide on
    https://premium.wpmudev.org/docs/getting-started/getting-support/#chapter-enabling-support-access

    Let us know when support access is granted.
    Best Regards
    Patrick Freitas

  • Nastia
    • Support Rock Star

    Hello Eldon

    I trust you're doing well

    To get better results on Google Page Speed Insight, please go to the Smush > Bulk Smush, and under "Resize my full size images", add the suggested dimensions for width and height, which on your site are 1600px wide × 1024px high. Please see this screenshot. Enable Smush my original full size images option so the original images will be optimized.

    Please run a bulk Smush after this. Just in case, consider enabling Store a copy of my full size images so the images could be restored.

    Also, try enabling image CDN, to get a better score for image optimization, from Smush > CDN, and within – these options:
    - Automatic Resizing
    - Enable WebP conversion

    Let us know how it went!

    Cheers,
    Nastia

  • Dimitris
    • Support Star

    Hello there Eldon,
    hope you're doing well today! :slight_smile:

    I inspected your website and noticed that the latest reported images in WebPageTest and Google Pagespeed Insights are being used as background images via CSS:

    Current Smush CDN doesn't support these and we wait for a future release to support that (that's already tasked and worked on by our devs). I really can't provide any estimated time of this release, we could still use Bulk Smush though, in order to optimize the local images, until new Smush CDN update. The major issue with the reported images is that they are much larger than their container in the homepage and you should actually use a smaller thumbnail for them (medium or large instead of full size), or even better, the theme you're using should be coded better to do that automatically.

    I could provide more exact insights if I could access back-end. As support access is expired/revoked, please re-grant it so I can have a better look. You can find detailed information about it here: https://premium.wpmudev.org/docs/getting-started/getting-support/#chapter-5

    Please do reply back here when access is granted because we don't get any notifications about it.
    Thank you,
    Dimitris

  • Eldon
    • WPMU DEV Initiate

    Really need some help here. To summarize:

    - I have granted support access again
    - terrible image optimization scores on home page
    - WPMUDEV support states these are coded as "background images" which are not processed
    - I have provided information about the Thrive Architect element called "Post Grid" that displays these images
    - I need to know how, if there is any way, to optimize these images using this SMUSH-IT plugin

  • Patrick Freitas
    • Staff

    Hi Eldon

    How are you today?

    - I have provided information about the Thrive Architect element called "Post Grid" that displays these images

    They will need to improve this from plugin side, modifying to use <img> or <figure> tags instead of using an inline background, or another solution would finding a different Post Grid which will render the image correctly using the tags.

    - I need to know how, if there is any way, to optimize these images using this SMUSH-IT plugin

    I double checked your Smush configuration, for a complete Smush you can activate the Smush my original full size images and then run a new Bulk Smush, it will make sure all images sizes included Full Size will be Smushed.

    However, as my teammate said, the Smush won't server on CDN or resize the background images.

    You would need to edit the image manually or upload it on the right size, once done the Losslessly compressing issue will be gone.

    Note the Smush will compress your image correctly as I suggested enable the Smush my original full size images for complete Smush, but unfortunately for the Post images from the plugin, the size will need to be done manually or finding a different post grid plugin.

    Best Regards,
    Patrick Freitas

  • Eldon
    • WPMU DEV Initiate

    Regarding these background images used in the "post grid" on the home page - the statement below was made earlier, if I don't use the Smush CDN can this issue be resolved? If not, can you help me understand where to find the images I need to manually resize? The path I see in the webpagetest.org report seems to be the original upload, which Wordpress would convert to other sizes as needed. I don't know where to locate the exact images that are used in the home page.

    "Current Smush CDN doesn't support these and we wait for a future release to support that (that's already tasked and worked on by our devs)."

  • Dimitris
    • Support Star

    It can be resolved if you manually resize these images to match the container of the Post Grid element. Keep in mind though, that if these images are being used elsewhere as well, like in the single post view, then that image will be resized as well.

    That's why it'd be better if you could feedback this to Thrive authors, as the Post Grid element doesn't allow you to select a specific thumbnail version of the images but it uses the full size image by default.

    So what you select as a Feature Image of a post is actually correct, as you can't select a specific thumbnail size for it.

    You should either contact Thrive to re-examine this element, use another workaround like another plugin that can build such posts grid in a better way or wait for the Smush update that will support these images via the Smush CDN servers.

    Warm regards,
    Dimitris

  • Eldon
    • WPMU DEV Initiate

    I did contact Thrive and go the response that a few others have asked for the same thing and it "might" be included in a future release.

    Meantime, I have started to search for a plugin to display the current blog posts on the home page in a similar manner. Or at least something attractive. Have not had much luck so far. I believe you have done all you can do, and I appreciate it.

  • Dimitris
    • Support Star

    Hello Eldon,
    appreciate the feedback on this! :slight_smile:

    I made a small research about free plugins that you could try out, hope that's helpful!
    https://wordpress.org/plugins/content-views-query-and-display-post-page/
    https://wordpress.org/plugins/post-grid/
    https://wordpress.org/plugins/the-post-grid/
    https://wordpress.org/plugins/gridable/
    https://wordpress.org/plugins/grid-plus/
    https://wordpress.org/plugins/wp-ultimate-post-grid/

    Thank you,
    Dimitris

  • Eldon
    • WPMU DEV Initiate

    Thanks for the post grid plugin suggestions. I actuallly discovered that the theme I am using has a [grid] function that I used to do pretty much the same thing and it actually looks better and works fine with SMUSH.

    Now I have something else. See attached image. This is a template made with Thrive Architect. When I insert the images, they get the yellow outline. I am using the CDN though and it seems to imply that CDN images will be automatically resized thus eliminating this yellow outline issue. See two images, one is the template and the other is with the "Inspect" function. This page has not been published yet, this is the preview.

  • Eldon
    • WPMU DEV Initiate

    Support access granted, now getting you to the template in question is the trick.

    1) click on Pages/All Pages/Top Brands of L-Theanine (in draft status)
    2) click green button in the middle that says "Launch Thrive Architect"
    3) on that next page, scroll down to see the images in question

    Point being, I thought using the SMUSH CDN would eliminate this issue, whatever it is.

  • Pawel
    • Staff

    Hello Eldon!

    I checked the page you mentioned and found the issue. I'm not sure what is happening here, so I forwarded your case to our Smush developers and I'm waiting for feedback from them. They will take a look and suggest a solution for the issue.

    I set up a reminder to check for a reply and will keep you posted here as soon as they respond. Please give us some time for a reply from the devs, we really appreciate your patience on this issue.

    Kind regards,
    Pawel

  • Eldon
    • WPMU DEV Initiate

    Thanks Anton, but the question was why the images on the page I pointed to were showing the yellow outline. I am trying to optimize to the max and wondered if I'm using images that are too large. I don't know if your CDN handles all those issues or not.

    • Anton Vanyukov
      • Developer

      Eldon,

      They are marked, because the containers for the images are 170px x 323px, while the actual images are 158px x 300px. If you're fine with the image quality, you can ignore the warnings, as the "Detect and show incorrectly sized images" feature in Smush will highlight all the images that are not properly sized (be it smaller or larger than the container)

      Best regards,
      Anton

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.