How I Achieved A Perfect 100/100 Google PageSpeed Score
07 Jun 2017
Here’s my take on how to get 100/100 on Google’s PageSpeed tool.
My dirtiest trick (how to deal with Google Analytics code affecting your score) is at the very bottom of this article.
Keep in mind, not all of these techniques are necessarily very fun to implement or use.
I’m using Jekyll to generate my static site, which is hosted on AWS EC2 t2.micro instance.
Minify your CSS/HTML/JS
Inline your critical CSS as needed
Remove as much clutter as you can from your page
CSS Tips (asynchronous Bootstrap loading)
The most important things you need to do: minify your css! Include as much of your CSS as you can inline, Google loves that.
I used Bootstrap 4 for this project, mainly just to play with it. Here’s quick hack for asynchronously loading Bootstrap after page load - Google will penalize you unless you do some variation of this.
This will load Bootstrap after the page has loaded - beware, this is going to give you the unholy FOUC (Flash Of Unstyled Content). Although Google slurps this up, and will reward you for it, I really think the FOUC is ugly. Yes, there are ways around it (tweaking display settings on the container), but it’s just so ugly.
Here’s my custom build script for creating thumbnails automatically, compressing images, building the site with Jekyll, and finally uploading to AWS S3 (the EC2 instance polls the S3 bucket for changes every few minutes)
The script assumes you keep all of your images in the ./public/img/ directory. It will create a thumbnails directory with all photos resized to be no wider than 445px.
The script then compresses all of the images (to Google’s liking) in public/img/, and runs the Jekyll build script.
After the site is built, it’s uploaded with the AWS CLI to an S3 bucket. Note that we enable the --size-only flag - since Jekyll regenerates things all the time, this will stop AWS CLI from blindly updating identical files that simply have different timestamps.
I know some people use jekyll-assets for this, but the setup and configuration turned me off.
This script is perhaps a bit overkill, but the main aspect (thumbnail creation and Google-approved image compression) allows me to use this snippet in Jekyll for thumbnails:
Which you would use like this:
This piece of code lets me easily display inline pictures without worrying about massive original image sizes.
My httpd.conf file
The main settings you’re interested in, from my httpd-conf file, located in /etc/httpd/conf/
These settings will address most of Google’s grievances with Expiration tags and browser caching.
My sneakiest trick of all - Dealing with Google Analytics
Okay, so you are probably running the Google Analytics code on your site to track visitors. The problem is that Google PageSpeed will throw a fit about redirects and leveraging browser caching when it encounters the Google Analytics script.
Some authors have gone to the lengths of downloading the GA.js every day to their server with a cronjob, then serving that file locally.
I’d rather just get straight to the point:
Yup, we just disable the script if the User Agent indicates Speed Insights. Cheating? Sure, kinda. But the other fixes for it are just as hacky, and a way bigger pain in the ass.
Some other useful tools for testing pagespeed are Pingdom, YSlow and GTMetrix! They will all ding you on various measures (GTMetrix really, really wants you to use a CDN), but they are a great way of seeing how your site performs.
Here are some sample results:
Those stats aren’t half-shabby - keep in mind at the time of testing, I had 12 images on the front page, which accounted for most of the page weight. I could have cheated and hidden pictures, but these are more real-world results.
Thanks for reading. I hope I’ve helped you in some small way on your way to reducing your page load time.