Hummingbird + Smush = PageSpeed and Performance Report Not Happy

I have Hummingbird active and engaged.

WP Smush Pro has done it's thing.

STILL Google PageSpeed and Hummingbirds' own Performance Report still say I need to optimize my images.

What's up?!

  • Dimitris

    Hey there Matthew,

    hope you're doing good today and thanks for joining us! :slight_smile:

    I scanned your website using our WP Checkup service and truly noticed that all images coming from your server are mentioned that need "Compressing and resizing".

    The compressing part is what Smush takes care of, cutting down the file size.

    Resizing though, like changing image size in pixels, isn't performed and that's the issue here.
    For example, you upload an image 300*300px but you don't use a version larger than 100*100px in your website. Try shrinking and/or cropping your images properly, so they are equal to the largest container dimensions that are going to be used. To do that, you can either try default WP image editor or any other image editing program and re-upload/re-assign them to your website.

    Hope that was some help, let me know if further assistance is required here!
    Warm regards,
    Dimitris

  • Matthew

    Hey Dimitris and thanks for the reply,

    It looks like most of the images are 300x300, and the largest size the site uses is 382x382. When I click "How to fix", it says that the site needs to resize because the content is not using an image that big...which is wrong.

    Also, 300x300 does not seem like an image that needs resizing. I would think over 1000x1000 would be the start.

    Speed tests expect images to be less than 300x300?! That can't be right.

    Also, WP Checkup says that Hummingbird is not installed...but it is.

    What do I do about that too?

  • Adam Czajczyk

    Hello Matthew!

    No test expect images to be less then 300x300. The "resize" suggestion means that an image is larger than a HTML container holding it.

    For example: an image of 300x300 pixels size can be displayed inside a "div" element of 250x250 pixels. That's a common scenario and works fine but a test will detect it and suggest resizing. The point is to make all the images that are used on site fit exactly their containers sizes. That's not always possible due to the way the given theme is built or how a given plugin works so often you can simply ignore it. In some cases though, especially if those images are used as parts of the theme, that's absolutely doable and is a good way to further optimize site's performance.

    I'm not sure however why WP Checkup doesn't detect Hummingbird. I checked your site again and can see that it suggests installing it, however I can also see that it's reported as installed in your account.

    I have asked WP Checkup developers for suggestions on this and I'm awaiting their response. Please keep an eye on this thread and I'll let you know as soon as I get a replay.

    Kind regards,
    Adam

  • Matthew

    Hello Adam and thanks for the reply.

    What size does this page use... https://www.getfreecds.com/product/somebodys-miracle-2/

    As I said before, it looks like 382x382 to me. So, the image is even smaller than the container.

    Why would it say it should be resized when the image smaller than the container?

    Also, I assumed WordPress/woocommerce uses the 150x150 for index pages. Those are the exact size as the container. And, I 2x compressed them with Smusher.

    What should I do?

    I'd like to get a good PageSpeed score for my client.

  • Dimitris

    Hey there Matthew,

    hope you're doing good today! :slight_smile:

    The issue here is concerning your homepage and it should be due to the images under the "Recent Releases" section. The actual image size that's being fetched is 300*300px while the container is around 175*175px.

    The appropriate template part should be altered so a thumbnail of 175*175px should be loaded instead.

    Also, due to the responsive design, these widths are set via percentages for each viewport, so it may be easier if you use a CSS rule like

    .woocommerce ul.products li.product a img
        max-width: 175px;
    }

    to surpass the "around" part. :wink:

    Warm regards,
    Dimitris

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.