I'm seeing that

Hello,
I'm seeing that the images have been optimized on mobile, and my site has increased its speed significantly. Unfortunately, I'm not seeing the same results on desktop. In fact, it's about half of the speed of mobile. According to google developers, it's because the images need compressing. Did the plugin compress for mobile, and not desktop?

  • Bojan Radonic

    Hey Jacqui,

    How are you doing today?

    Google page speed test has two reports for image optimization, let me try to explain:

    1. Losslessly compressing - This one's is telling that image can be optimized and that's what smushing does.

    2. Compressing and resizing - This shows that the images are resized via HTML and CSS

    The second one is what's shown in your results and that's because your theme is loading images larger than it's HTML holder, for example 680x900 thumbnails on your homepage but the actual HTML holder of that image is 631x477 so the image is resized with CSS to fit in that holder. This means that your page is loading larger image that it really needs to which is why you're getting reports that images need to be optimized. Please see screenshot:

    Unfortunately this is not something Smush can deal with since the theme code is most likely written in the way to call the larger image, and even though the image is compressed Google doesn't like loading image larger than its holder, so this is something you need to check with the theme developers.

    Hope this helps

    Cheers,
    Bojan

  • Jacqui

    Hi Bojan,

    Thank you for the quick response. I know the WP Smush can't handle this one, but I was wondering if you could point me towards another resource? The issue I'm seeing is that it looks like front page is loading the thumbnails at 361, which it's pulling from the featured image, but I obviously can't put a bunch of tiny photos on my site. The featured image is also on the top there on the front page, so making it small would make that top photo small. I'm just not sure how to fix this.

    Can you point me in the right direction?

    Thank you,
    Jacqui

  • Bojan Radonic

    Hey again Jacqui,

    Both Hummingbird and Google Page Speed insights should point to these specific images in their reports, I know that's not specifically helpful as it does not point to the place on your site where this image is. On your home page both images right below the navigation and featured images for posts below are using larger images then the actual thumbnails.

    Your home page should just be a template created by your theme (unless there is a page builder that I missed), with that said themes usually register thumbnail sizes by using "add_image_size" function that you should be able to find in theme functions.php, these image sizes are later called in theme templates. So to fix this you'll probably have to do one of the following:

    1. edit those image sizes in your theme functions.php
    2. register new image size and edit theme templates calling your new image size on those templates

    In both cases I'd suggest creating a child theme just so your changes are not overriden by the next theme update. In either case I'd suggest contacting theme developers asking for advice on how to change this for that specific theme.

    Also keep in mind that WordPress creates those thumbnails on image upload so once you make these changes in the code make sure to regenerate thumbnails so your new thumbnails can be created, easiest way to do that would be to use plugins such as this one: https://wordpress.org/plugins/regenerate-thumbnails/

    Hope this helps

    Cheers,
    Bojan