Why Your Google PageSpeed Score Dropped & a Simple Solution
Change is Here
With every New Year comes change, resolutions, and rejuvenation. If you are responsible for maintaining and updating a website, one such change you may have been blindsided by in the new year is a drop in your Google PageSpeed score. Or maybe you didn’t notice yet. Go ahead, check your PageSpeed score right now.
If it’s lower than it used to be, don’t worry. The sky isn’t falling, it’s just overcast, and here’s how to clear things up.
In late 2016, Google appears to have significantly refactored the part of their search ranking algorithm that involves PageSpeed, prioritizing mobile speed above desktop speed. This has been in the works for awhile, as seen by Google’s Mobile Friendly Test. Now, we are finally seeing the consequences of this refactor in the PageSpeed Insights service, which serves as a window into how Google rates your site’s performance.
The first change is subtle, but says a lot. As you can see below, the mobile tab is now the default view of this report, not the desktop view. This is because mobile is now considered a higher ranking priority than desktop:
The second change is what we’ll be talking about for the remainder of this article – the significantly increased penalties Google is now levying against sites with image compression issues.
The Big Picture
The main driving factor for some of the drastic decreases in PageSpeed scores across the web is how Google’s algorithm now treats images. That is, penalties have increased significantly for images that don’t meet Google’s image compression standards.
Image compression was less of a priority in the past when desktop was the primary platform for determining PageSpeed scores. However, with mobile leading the way now, image size has become a larger factor than ever. As a result, image size issues that used to live under Consider Fixing are now appearing under Should Fix. From our estimation, every image (per page) that is insufficiently compressed knocks about 5 points off your score. Our own site had 10 such images on the home page and our score saw a 50 point drop.
The Solution: Compress Me Down
The good news is that there’s a straightforward fix for this. Compressing images should be a standard part of your asset creation and deployment process, but has often taken a back seat to CDN, caching schemas, and minification of HTML/CSS/JS. Ignoring image compression is no longer an option now that there are serious repercussions, so here’s how to start compressing:
Compressing Individual Images
When creating or editing an asset for the web, you have the option of setting an image quality value. Setting JPG output quality between 50 and 60 seems to make Google happy. You’ll probably need to experiment in the Save for Web UI to determine where the loss in quality becomes observable for each image.
If you dont have Photoshop, or just want a web solution, then Compressor.io is for you. It gives you the option of Lossy vs Lossless compression, and was slightly better than Photoshop at compressing without quality loss in our experience.
Compressing in Bulk
If your site is on a CMS such as WordPress or Drupal, you may have hundreds or thousands of images in need of additional compression. If that’s the case, you’ll want to do this in bulk. Luckily, there are tools that do just that:
WPSmush is our tool of choice for WordPress installs. It analyzes all the existing images in your media library and compresses them in one easy operation. It can also compress images as they are uploaded.
Note: We used the paid version, but there’s also a free version of the tool.
Like WPSmush, EEEW also supports both bulk image compression and compression of images as they’re uploaded. Note however that this plugin will not work on WordPress hosts whose filesystems are transient (read-only), such as pantheon.io.
TinyPNG is a module for Drupal. It will only compress on upload and requires API Keys.
ImageAPI Optimize (Drupal)
Like TinyPNG, ImageAPI will only compress images on upload, and not bulk image compression.
After you compress your images, you may have to clear your CDN/DNS or other caching schema to see the updated results, as Google tends to re-analyze cached version of image assets.
The Results: I Have the Need for Speed
After using Compressor.io to compress images contained within our WordPress theme, as well as running WPSmush to compress the hundreds of images in our Media Library, we saw our scores bounce back to normal:
Compress with Caution
Like with any changes you make to your assets, do so incrementally. Start with less aggressive compression settings and work your way up to find the compression that is right for your images. Saving a few more kilobytes might not be worth the quality hit the image will take, so experiment to find the sweet spot for images. Your users – and your designers – will thank you!