A Few Ways To Improve Your PageSpeed Insights Score

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 paranoid 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 necessary 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. That seems like a logical conclusion. Google wants feedback on this but I’m not running a charity. I don’t have time for that.

So what did I do to improve my score?

Moving to a faster server will probably not improve your PageSpeed Insights Score. The things Google complains about have little to do with server speed.

Shrinking Images

Google’s biggest complaint: images that aren’t compressed perfectly. More or less, 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. Also you need PNG files when small details are really important. Otherwise, try to avoid them! So what can you do besides turning into a werewolf? If you have root access to your server (hopefully you have CentOS) can you do a “yum 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 {} \;

Use this at your own risk. I didn’t want to compress too hard to 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.

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 need to 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.

Do your part: Complain to all of your plugin authors and advertisers :-)

a) Their plugin should load Javascripts in the footer.
b) Their plugin should minify Javascript and CSS properly.
c) Their plugin should use the “async” tag.

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. Why? Because a, b and c (aforementioned) can break various parts of your website. 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 :-)

If you want to fix the “render-blocking CSS” warning message, try this plugin. Found this “Async JS and CSS” plugin thanks to Raelene Wilson. FWIW, I turned off the “Load Javascript asynchronously” option because I had already solved that issue.

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.





PJ Brunet

#eCommerce #Marketing #Pinterest #Freelance #WordPress #Developer #Designer #PHP #Linux #MySQL