Google PageSpeed Insights Now Recommending Lossy Image Compression
Google PageSpeed Insights Now Recommending Lossy Image Compression
It’s time to start optimizing your images for lossy compression if you haven’t already because Google PageSpeed Insights has quietly started recommending this form of image optimization.
Google has updated the documentation for its popular pagespeed insights tool to include lossy image compression.
Fortunately, you can compress the images on your WordPress website and go lossy in just a few clicks with our WP Smush Pro plugin.
But unfortunately, PageSpeed Insights has proven to be broken, or at least somewhat of an unreliable tool, which I discovered after several hours of testing.
Before you start throwing your half-filled coffee mugs at your screen, in this post I’m going to run you through the details of Google’s PageSpeed Insights changes as well as how to apply lossy compression to your images with Smush Pro. I’ll also give a full explanation of my testing process that led me to believe PageSpeed Insights is broken.
What is PageSpeed Insights?
The Google PageSpeed Insights tool is a gauge for your site’s performance. You can enter any URL and run a test which results in a score ranging from zero to 100 for both mobile and desktop versions.
The score you get is based on the time it takes to load above-the-fold content and the whole page.
You’re also given suggestions on ways you can improve your score and the higher it is, the better your site is presumed to perform.
PageSpeed Insights Goes Lossy
The documentation for Google’s PageSpeed Insights tool was last updated on March 29, 2017, at the time this was written, and includes recommendations for lossy image compression.
The documentation also includes a checklist for image optimization, which states:
Experiment with optimal quality settings for raster formats: don't be afraid to dial down the 'quality' settings, the results are often very good and byte savings are significant.
The Image Optimization guidelines further recommend lossy compression:
JPEG is a lossy format. The compression process removes visual details of the image, but the compression ratio can be 10x larger than GIF or PNG. Reduce quality to 85 if it was higher. With quality larger than 85, the image becomes larger quickly, while the visual improvement is little.
Historically, lossy compression wasn’t recommended and the change was quietly introduced and included as a factor in determining a site’s score in a PageSpeed Insights test.
However, this doesn’t mean you should immediately use lossy compression on all your images since a section of the PageSpeed Insights documentation advises its use in only certain cases:
Are you optimizing a photo, screenshot, or a similar image asset? Use JPEG.
It also advises you use the PNG format for images with fewer colors such as a digital illustration or a screenshot of WordPress’s backend.
You can also check out our post The Complete Guide to Mastering Image Optimization for WordPress for more detail.
While no official statement has been released to explain the reasons why these changes were made, EWWW Image Optimizer speculates in an update that the change likely has to do with the fact that image compression technology has advanced and isn’t as rudimentary as it was a decade ago.
Why Change to Lossy Compression?
With all that in mind, if it’s appropriate to use JPEG format for an image you want to use on your WordPress site based on Google’s recommendations outlined above, then you should go ahead with lossy compression.
There are two main reasons why you would want to do this:
- Reduce the file size of the image: This decreases a page’s load time
- Rank higher in search engine (read: Google!) results: A faster loading site means a higher ranking one
The higher you rank in search engine results, the more users find you, which increases your site’s traffic.
Using lossy compression properly not only serves to improve your PageSpeed Insight’s score, but also the traffic to your site. For details, check out our posts: Speeding Up WordPress With the Free WP Smush Image Compression Plugin and Why Trying to Get a 100 Score on Google PageSpeed Insights for WordPress Is Never Going to Happen.
Enabling Lossy Compression with WP Smush Pro
Fortunately, you can automatically apply lossy image compression when it’s appropriate with Smush Pro.
Smush Pro is an image compression plugin that you can set and forget since it can auto-optimize your images in WordPress when you upload them. It includes also a super-smush feature, which is a multi-pass lossy compression option. And, it compresses your images two times more than lossless compression.
The free version of this plugin happens to be the champion in Torque’s 2017 Plugin Madness competition!
With Smush Pro, you have the option to convert PNG files to lossy JPEG when there’s an opportunity to reduce image file sizes and without a noticeable quality loss.
These two features are exactly what the documentation for Google PageSpeed Insights recommends. Here’s how you can enable them to automatically compress your images when it’s needed.
Installation and Setup
Once it’s installed and activated, access the settings by going to Media > WP Smush for single installs of WordPress and to Network Settings > WP Smush for Multisite networks.
Scroll down and find the Super-smush my images option. Click the toggle button toward the right to enable the option for lossy compression.
Next, enable the Convert PNG to JPEG (lossy) option by clicking the toggle button to the right. Selecting this setting gets WP Smush Pro to check if converting a PNG image to JPEG would result in a file size reduction.
1.6 million WordPress Superheroes read and trust our blog. Join them and get daily posts delivered to your inbox - free!
When those two options are enabled, you can choose to enable or disable other settings of your choosing and when you’re done, click the Update Settings button at the bottom of the page to save your changes.
Once that’s done, you can bulk smush your images again to apply these new settings to all your pre-existing images in your Media Library</strong.
Go to your admin dashboard > Media > WP Smush and click the Bulk Smush Now button.
Leave the window open and wait for the bulk smush feature to complete. Once it’s done, you can go ahead and test your site for speed using the PageSpeed Insights tool, though, be forewarned, it may not be accurate or reliable.
Google PageSpeed Insights is Broken
PageSpeed Insights is up and running, but is it reliable? I ran tests for several hours so I could take screenshots to better explain the changes mentioned above, but what I found instead were inaccurate and inconsistent results.
I also asked a colleague to run the same tests to confirm and he received completely different results.
Here are the steps we took to test Google PageSpeed Insights:
- Create a fresh test site with the default TwentySeventeen theme
- Published a new page with two to three images that absolutely needed optimizing
- Set this new page as the homepage
- Ran the site through Google PageSpeed Insights
- Optimized the images using Smush Image Compression and Optimization
- Waited at least one hour longer than the recommended 30 seconds between PageSpeed tests
- Tested the site with PageSpeed Insights
- Installed and activated WP Smush Pro and optimized images with it
- Once again, we waited about one hour before running another PageSpeed test
- Tried another PageSpeed Insights test
While we both went through these steps, the results were different for both of us after each test:
- At first, my tests showed no images needed optimizing, while the opposite was true for my colleague.
- After the second PageSpeed Insights test, nothing changed.
- The third test showed the opposite results for both of us.
- When we tried to run the test again, the results were the same as described above, except in reverse where my result showed I needed images optimized whereas my colleague didn’t need any optimized according to the test.
I also tried other variations to see if Google PageSpeed Insights could pick up on the glaring mistakes or changes I had made:
- Uploaded images that were set in the PNG format, but should have been saved as JPEG
- Used images that were in the correct file format, but weren’t optimized in any other way
- I waited several hours in between tests, in case there was a caching issue
- Ran tests through an uncached browser and different browsers
- Tried using a different theme including TwentySixteen
- Cycled through about 15+ different unoptimized images
- Other test results showed the header image from the TwentySeventeen theme wasn’t optimized so I tried uploading it to the TwentySixteen theme and didn’t get that same result.
After well over eight hours of testing, I couldn’t get the same results as either of the original tests.
I would often make changes such as using a different theme and images and the results would be the same as the previous tests. I also tried running several retests with no changes and suddenly the results showed the theme or images had issues that weren’t shown before.
No matter what I tried and how many times I tried to run the tests over and over, the results weren’t consistent. The least amount of time I waited between tests was about 30 minutes and I would often wait as least an hour or two.
After two days and losing track of time, I gave up. I concluded that Google PageSpeed Insights could be broken after denying it for two days.
I do recognize that this testing is by no means complete. That’s why I encourage you to give it a try yourself and let me know what your results are in the comments below.
It’s Still Worth Using Lossy Compression
Even if my tests are accurate after more testing has been undergone and PageSpeed Insights is found to be unreliable, Google’s newly updated Image Optimization and Optimize Images guidelines for lossy image compression are accurate.
The documentation reflects an industry-wide standard for best practices. Optimizing your images also helps your site load faster, which you can accomplish with WP Smush Pro. For an even faster site, you can also use our Hummingbird performance plugin.
In turn, a faster loading site helps boost your search engine rankings. Page speed is also the primary benchmark for many other popular tools which test sites for loading speed.
While Google PageSpeed Insights is a popular tool, it’s not the only one you can use in case you also find it’s unreliable. Check out How Fast Is Your WordPress Site? Find out with These Free Speed Testing Tools for details.
For more details and experiences with Google PageSpeed Insights, check out Why Trying to Get 95+ on Google PageSpeed Insights for Your WordPress Site Will Drive You Mad! and Why Trying to Get a 100 Score on Google PageSpeed Insights for WordPress Is Never Going to Happen.