Slaying The "Optimize Images" Issue In Google PageSpeed Insights

I'm running the latest version of the Kalium theme on Wordpress 4.7.3 over on Flywheel (also using their CDN and running Cloudflare Pro) on a photography website where balancing image quality with site speed is extremely important.

I'm consistently getting "Optimize Images" in Google Page Speed Insights and in the performance report in Hummingbird. I installed WP Smush Pro, smushed all of my images, regenerated thumbnails, flushed all the caches (on the server and Cloudflare) and in spite of all of this, I'm still seeing the "Optimize Images" recommendation on the same images each time (see below). What's the best way to go about resolving this issue?

Optimize the following images to reduce their size by 272.9KiB (66% reduction).

Compressing and resizing https://0wl422afll-flywheel.netdna-ssl.com/wp-content/uploads/2017/03/DSC_2718_b-655x664.jpg could save 45.4KiB (70% reduction).

Compressing and resizing https://0wl422afll-flywheel.netdna-ssl.com/wp-content/uploads/2016/06/RichmondBeachfamily-2-655x401.jpg could save 42KiB (87% reduction).

Compressing and resizing https://0wl422afll-flywheel.netdna-ssl.com/wp-content/uploads/2017/03/DSC_3902_b-655x435.jpg could save 40.8KiB (81% reduction).

Compressing and resizing https://0wl422afll-flywheel.netdna-ssl.com/wp-content/uploads/2017/03/DSC_7990_b-655x435.jpg could save 37.5KiB (82% reduction).

Compressing and resizing https://0wl422afll-flywheel.netdna-ssl.com/wp-content/uploads/2016/10/City-condo-with-dog-canvas_2560pixels-655x437.jpg could save 34.3KiB (83% reduction).

Compressing and resizing https://0wl422afll-flywheel.netdna-ssl.com/wp-content/uploads/2017/03/DSC_6007_b-655x985.jpg could save 34.1KiB (42% reduction).

Compressing and resizing https://0wl422afll-flywheel.netdna-ssl.com/wp-content/uploads/2017/03/DSC_6084_b-655x986.jpg could save 29.6KiB (44% reduction).

Compressing and resizing https://0wl422afll-flywheel.netdna-ssl.com/wp-content/uploads/2017/03/CPP_logo-01.png could save 8KiB (82% reduction).

Compressing and resizing https://laragrauerphotography.com/wp-content/uploads/2016/10/lgp_logo_purple_transparent_small@2x.png could save 1.2KiB (59% reduction).

  • Vaughan

    Hi Art,

    Those images are being displayed on the site using the fullsize image, and are most likely being resized to a smaller size using CSS, ideally you should search those images, and perhaps re-upload a smaller size (dimensions) in those posts/pages.

    I did the CPP_logo-1.png for you.

    I edited the widget, which was loading the full size image,and the theme css reducing it to 180px width. So I instead changed the image url to point to a smaller thumbnail.

    Now you should no longer see the CPP_logo_1.png in the list.

    Hope this helps

    • Art

      Here's a tricky one:

      RichmondBeachfamily-2-655x401.jpg

      Can you tell where that image is being loaded on the site (or tell me how to check where it's being loaded)? That version isn't being loaded on the homepage or in the lightbox.

      The weird thing about this theme is that when I add an image to the homepage, I add it as a portfolio item. When I add a portfolio item, I select two images for the portfolio item record; one image in the body of the item and another as the featured image. Whatever image I select as the featured image is displayed in two places; the first place it's displayed is on the homepage where the portfolio loads and the next place is when the item is clicked on the homepage, the featured image is displayed in a lightbox.

      If I upload and select a 655x401 version of that image, it'll look fine on the homepage but terrible in the lightbox.

      Thoughts?

  • Art

    AHA! I think I figured it out. In the portfolio item detail, down at the bottom of the page, there's a setting under Parameters and Options > Lightbox > "Content to Show". I had it set to "Featured Image". I set it to "Custom" then selected the higher resolution version to show in the lightbox, then shrunk the featured image to a much smaller size.

    I think this is it, it's just when I run the performance report, the images are still coming up showing they're needing to be optimized. I've cleared the cache on the site and in cloudflare and re-ran the report but they're still coming up. I'm going to give it an hour or two and check back again.

  • Art

    Alright, well, one last update. I pretty much chased this thing all last night, uploading and re uploading the images that were coming up as needing to be optimized and I found that PageSpeed Insights is pretty much asking for every image to be completely optimized down to nothing, which isn't good for a photography website that needs to have quality images.

    I wound up backing way off, setting all the portfolio items to use the featured image on both the portfolio page and in the lightbox. I get the best visual image quality in both places this way.

    I also went into the Kalium theme options and set the thumbnail setting to a thumbnail image size that exists for all the images (in my case, "PORTFOLIO-IMG-1":wink:.

    I'm going to regenerate thumbnails, run wp smash pro one more time, get up, walk outside in the sun for awhile and enjoy the fresh air, content in the knowledge that my images look good and the page loads understandably and reasonably faster than most regular folks can appreciate, regardless of what PageSpeed Insights might have to say. I might even chase a squirrel or two.

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.