I was pleasantly surprised to see that my simple, bare-minimum website had scored 99/100 for speed. While I knew it would be difficult, I set out to see if I could improve the score even further and achieve a perfect 100.

getting-100-pagespeed-score.md

title: "Getting a perfect 100 Google PageSpeed score"
slug: "getting-100-pagespeed-score"
category: "devlog"
published: true
date: 1672688227

I was fed up with the snail-paced performance of my Gatsby website and knew it was time for a change. So, I went back to the drawing board and crafted something magnificent. Introducing my lightning-fast, sleek and simple website, hosted on Cloudflare Pages, with just a single HTML file!

However, even with all the optimization tricks I had up my sleeve, my pagespeed score was stuck at 99 out of 100 for speed and 83 out of 100 for SEO. I'm a perfectionist and wouldn't settle for anything less. So, I took it upon myself to dive deeper and find ways to take my website to the next level.

One small tweak that made a massive impact was swapping to a locally-hosted version of the "water.css" library. This move chopped my site's load time in half and brought me one step closer to the coveted 100/100 score.

The next biggest hindrance to performance was the Cloudflare Web Analytics snippet, which I had no power over. But I wasn't going to let that beat me. After conquering some SEO challenges, I finally hit the jackpot - a perfect 100/100 score for both speed and SEO!

To take my SEO score to the next level, I whipped up some straightforward sitemap and robots.txt files and fixed the mobile tap area on two links. These tiny tweaks resulted in a flawless 100/100 score for both speed and SEO. I'm over the moon with the end result - a simple, fast, and ultra-minimal website that I'm proud to call mine.

Wow, just redid the pagespeed analysis and my score plummeted to 99. Time to put on my technical hat!

I dug into the detailed score sheet and this is how Google averages your final scores. Check out my 100/100 score sheet and the drop to 99 score sheet.

As you can see, my Total Blocking Time shot up to 66ms from 0ms, which ultimately brought my score down to 99.

Here's my 100/100 score sheet.
Here's the drop to 99 score sheet.

My biggest roadblock was the Largest Contentful Paint. I couldn't figure out why it was taking so long. I searched the Google performance docs and found the following recommendation:

<!-- from -->
<link rel="stylesheet" href="/water.min.css" />
<!-- to -->
<link rel="preload" as="style" href="/water.min.css" />

However, when I tried this, it broke my styles so I had to revert back. Bummer.

Desperate times call for desperate measures, so I decided to look into GoatCounter instead of relying on Cloudflare Web Analytics. GoatCounter allows me to copy and paste its script directly into the body tag, which would save a lot of speed since I wouldn't need to request a bulky script from elsewhere. (looking at you Cloudflare m8.)

Results with Cloudflare analytics
Results without Cloudflare analytics

Before I added GoatCounter's count.js, my index.html was 9.18 KB. After embedding the script, it skyrocketed to 19.9 KB. My site essentially doubled in size!

Despite the increase in size, would I become faster? Let's find out. Yes, it became faster. (PageSpeed Result)

And, finally, after Cloudflare cast its spell flawlessly, I can confidently declare I AM SPEED. (PageSpeed Result)