When I ran the PageSpeed Insights Score Test on my websites last night, I turned into a werewolf. There would be no sleep.

Why is everyone concerned about this score? From the user’s perspective, the difference between a score of 30 and a score of 90 is milliseconds. The human eye can’t see the difference between a minified CSS file and a non-minified CSS file. But if this score indicates what Google wants from us, that makes me think compliance is important for ranking in Google.

If Google thinks a “green” score provides a better user experience, Google is more likely to send people to a green-score website. To me that seems a logical conclusion. Google wants feedback on this. Unfortunately, I don’t have time for that.

What did I do to improve my score?

Moving to a faster server will probably not improve your PageSpeed Insights Score. Only one of the warnings cites server response time.

 
Shrinking Images

Google’s biggest complaint: images that aren’t compressed perfectly. This is a legitimate problem and I agree with Google, this should be a priority. Although it’s a gray area. On the one hand, you don’t want slow images, especially on a wireless connection. On the other hand, depending on what you’re selling, sometimes you really do want high-resolution photos with mind-blowing detail. For example, you don’t want to over-compress an art portfolio.

What can you do? Possibly, PNG files are your biggest problem. PNG files don’t compress well. You should only use PNG files for pristine logos and UI elements where you need transparency. Otherwise, try to avoid them! So what can you do besides turning into a werewolf? You can install “pngquant” and then go to a directory like “wp-content/uploads/” and run this:

find . -name '*.png' -exec pngquant --ext .png --force --quality=80-90 {} \;

This is recursive and there’s no reversing this–so be careful! Also if you have a lot of files it will take a long time. If I could set up a cron to just shrink wp-content/uploads, that might be a good solution. Granted, I already shrink my images in the first place, but PNGQuant seems to appease the PageSpeed complaints. I have clients that don’t necessarily shrink their images optimally and other clients (photo sites) that aren’t shrinking optimally on purpose. Basically it’s a werewolf nightmare.

UPDATE: I decided to make this into a nightly cron. After hours of tweaking, here’s my masterpiece:

# Strip all metadata everywhere
find /home/www-data/ -name '*.jpg' -exec mogrify -strip {} \;
find /home/www-data/ -name '*.png' -exec mogrify -strip {} \;
# Just shrink the big images
find /home/www-data/pjbrunet.com/wp-content/uploads/. -size +200k -name '*.png' -exec mogrify -resize 900x900\> {} \;
find /home/www-data/pjbrunet.com/wp-content/uploads/. -size +200k -name '*.png' -exec pngquant -f --ext .png --quality=40-50 {} \;
find /home/www-data/pjbrunet.com/wp-content/uploads/. -size +200k -name '*.jpg' -exec mogrify -interlace Plane -resize 1200x1200\> -quality 90 {} \;

This could be improved to have “find” ignore older images that are already shrunk. Use this at your own risk. I didn’t want to compress too hard or too gentle. What does this do? It ignores images under 200kb, which eliminates the possibility of recompressing the same image over and over every night till one day it looks horrible. It also shrinks really tall and wide files to a more reasonable size, like my resume which was intentionally over 2000 pixels high. (Need to eat my own dogfood.) It also strips metadata, which alone cut 400+ megabytes off my server! Interlace “Plane” gives you better compression (progressive rendering JPEGs) and gives the user something to look at faster.

In my opinion, PNGQuant is better (overall) than OptiPNG. But like anything, you’ll have to play with the settings for your particular application.

UPDATE: Found a great free tool to shrink images. It’s a new, free extension of the Jetpack plugin: Photon. It’s essentially a free CDN for WordPress post content. Photon automatically shrinks your images based on the CSS of your blog. So if you have a 1000px image and your blog post is only 500px wide, they will scale your image down automatically. That’s a bonus for the end user. If you think about it, Photon will save everyone tons of bandwidth. Especially now that people are walking around with high-resolution cameras. I’m using Photon now on a blog with 1 million pageviews/month and so far it’s working fine. I only have one tiny complaint–the images don’t entirely pass Google PageSpeed Insight’s high standards for compression. Of course, you will still want to shrink your original images (as I already explained) but Photon is a big help to improve user experience and take some stress off your server.

2019 UPDATE: Stopped using Photon. It tends to over-compress smaller images and Jetpack tends to conflict with other plugins. Also I’m concerned it’s bad for SEO.

 
Javascripts

What else can you do? Javascripts. They are everywhere and they’re killing your PageSpeed Insights Score!

One thing I found out last night, any time you have a Javascript loading on your page, you can add the word “async” like this:

<script async src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>

However, you might find your scripts depend on jQuery loading first. So loading jQuery asynchronously causes problems. My solution was to just load jQuery in the footer and Google PageSpeed doesn’t complain:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

Can you find all of your Javascripts and change them to async? Maybe. Maybe not. It’s possible you don’t have access to those servers. Or the code is buried deep in a plugin somewhere.

If you find a “render-blocking” plugin that is not loading asynchronously, don’t complain to your hosting provider, they should not be editing and debugging your plugins. This is better solved by the plugin author. But I was still up all night trying several “scripts to footer” and “minify” plugins anyway.

a) Most of them did not improve the Google Pagespeed score at all.
b) The ones that “worked” to increase points just made the Javascripts stop working.

That effort was almost a waste of time. However, I did find “Minify Fix” and I have that installed. This WordPress plugin doesn’t really make much difference to the user but it does make the Google Pagespeed test happy. There’s a possibility Minify Fix could break your website, use with caution. UPDATE: It definitely breaks Favado lists.

If you want to fix the “render-blocking CSS” warning message, you may want to try this plugin. Found this “Async JS and CSS” plugin thanks to Raelene Wilson. As with WP Minify Fix, use with caution, it does break things.

Update: Switching to “async” caused me a few unforeseen problems that I didn’t notice right away. Everything is fine till a script loads out of order. For now, I’d say avoid “async” unless you’re aware of the ramifications.

 
NginX

You don’t want to go mucking around in your webserver configuration without a good reason. Because if something breaks, everything breaks. But I wanted to improve my Google Pagespeed score. So I had to change my NginX configuration. This is harder than it sounds because I’m hosting quite a few websites and my configuration is not typical. Without going into all the details, I added this:

location ~* \.(jpg|jpeg|gif|png|css|js|ico|xml)$ {
expires 1M;
}

What does that do? It makes your score higher :-) LOL. In the big scheme of things, browsers already cache that stuff. This is just a thing to make Google happy. Unbillable time where I’m losing sleep and not getting paid.

At this point, I’m mostly losing points off my score because of Google products: Google Plus, Google Adsense, Google Web Fonts, etc. (Frankly, I just deleted Google Plus off my pages to increase my score.) If I’m losing sleep over this stuff, I sure hope somebody at Google is cracking the whip to fix items like this:

Leverage browser caching for the following cacheable resources:
http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js (60 minutes)
http://pagead2.googlesyndication.com/pagead/js/lidar.js (60 minutes)
http://pagead2.googlesyndication.com/pagead/osd.js (60 minutes)
https://js.dmtry.com/antenna2.js?0_3882_114057145_60880592 (60 minutes)


 
Conclusion

My (desktop) PageSpeed score is now 92.

a) Because I use Adsense, which is not optimized.
b) I’m linking a Google Web Font in my header. I tried loading my “Goudy Bookletter 1911” font in my footer with Google’s recommended Javascript, but that made the text jerk around on the screen which is annoying. I’m willing to lose points here because I’m not wanting jerky text.