How to get 100 on Google PageSpeed

It's important to have a fast website. No one enjoys clicking on a link and then waiting and waiting for the page to load. Many users will even abandon a site if they have to wait too long for it to load. Furthermore, search engines will rank sites lower both if the pages load slowly and if users tend to abandon the site. For this reason it is doubly important to have a website that loads quickly. There are many, many things that come into play that make a difference between a slow webpage and fast webpage.

One of the most popular tools to test how fast a webpage loads is Google PageSpeed. A perfect score of 100 is rarely seen. There are many reasons for this and even more factors that go into how quickly a page loads. There are many excellent guides out there that go into detail on easiest ways to improve the load times of a webpage. This article will not be a comprehensive guide but will focus on a couple of surprising items that we found recently that significantly impacted our score. We'll also discuss why we decided not to address them and why you may not want to have that perfect 100 Google PageSpeed score either.

We recently redesigned our entire website to be fast, secure and responsive. We knew that we had a fast website as in many tests it loaded in less than half a second. We also knew that we had an efficient website as the total data transferred and number of requests made was extremely low. We were therefore surprised that our PageSpeed score was 89 on desktop and even more surprised that it was 71 on mobile.

We were already caching everything pretty aggressively, had already compressed and minimized all resources. We were using HTTP2 (previously called SPEEDY) so why were our scores so low. It turns out it was due to only two issues.

1. The biggest hit came from just a few lines of code. The offending lines were:
   <style type="text/css">
     .fouc{display:none;}
   </style>
   <script>
     document.getElementsByTagName( 'html' )[0].classList.add( 'fouc' )
     document.addEventListener( 'DOMContentLoaded' , function() {
       document.getElementsByTagName( 'html' )[0].classList.remove( 'fouc' )
     })
   </script>
   Removing these lines raised our score to 98 on both desktop and mobile. So what do these lines do and why did they have such a big impact? All that this does is hide what is called a Flash of Unstyled Content (FOUC). Normally a browser downloads resources in order and starts to display them as they come in. This causes the browser to display certain things before downloading all of the resources to tell it exactly how to display it the way we want to. In order to avoid this we added these lines to hide everything until the browser has all of the necessary resources. This all happens in a fraction of a second and in testing we found that adding these lines made the user experience better and had no noticable effect on page load speed.
   
2. The other hit came from two scripts that we were loading. The scripts in question: Google Analytics. By removing Google Analytics from our site our score then became 100 on both desktop and mobile.
   

So now we know how to score a perfect 100 on Google PageSpeed. But what does our site score today? 71 on mobile and 89 on desktop. That's right we could score 100 but we chose not to. It's important to remember that tools like this have a purpose but they shouldn't be relied on exclusively. We still love Google PageSpeed and will continue to use it extensively but there is no replacement for expertise. It does exactly what it was designed to do - help make the internet faster by helping people improve the most common things that make the internet slow. However, there is no tool that can completely replace actual testing in real world circumstances by people that understand the underlying technologies.