Google owns a massive network of applications and products that allow individuals to improve their web presence. From Google AdWords and Analytics to the Search Console and Webmaster Academy, Google created and maintains these tools to allow you to market yourself to the world with confidence and clarity. One of the tools I’ve learned to rely on for my personal and work site is Google PageSpeed Insights.
What is PageSpeed Insights
Google PageSpeed Insights allows a designer or developer to see issues firsthand that slow page speed down. Page speed is defined as the amount of time it takes to display all content on any given page. Additionally, the speed can also track time to first byte.
Why You Should Care
It’s a fairly simple question, with an even simpler answer. Slow sites don’t convert as well as their faster counterparts. That’s because people leave slow sites. Conversion rates drop significantly (by 50%) when pages take more than 3 seconds to load. And it’s not just your users that prefer faster sites, Google does too. Although we do not know the exact number, we do know that the algorithm Google uses for search gives points to faster sites. This means that if your page loads faster than a competitor and all others things are equal, you will get listed before them.
Setting a Baseline
Before you start optimizing your page, I recommend going to the PageSpeed website to determine your baseline score. The test itself is run through an open-sourced tool (Lighthouse), and for any given site, Lighthouse will rate the page speed via mobile and desktop. Each score is given a rating between 0 and 100 where 0 is the lowest.
Your baseline score will give you an understanding of where you sit and which improvements will have the greatest impact. These should be your primary point of attention, then onto the smaller, incremental adjustments.
Factors to Speed Up Your Site
The test does an excellent job advising you systematically where your site excels at and which elements need improvement.
For our purposes there are 4 areas of importance within each report: Lab Data, Opportunities, Diagnostics, and Passed Audits. And there’s 2 sets of information for each area: 1 for mobile and 1 for desktop. Below are the results for my portfolio site, https://michaellutjen.com (mobile version).
Lab Data
Lab Data highlights how fast (or slow) your site reacts when your site is pinged.
The Data here is meant to be used as a reference point. There are no direct actions that need to be taken, but the info should be used as a northstar metric.
Opportunities
Opportunities are specific optimizations that will have a direct impact on your page speed. This section is dependent on your specific site configuration and files being deployed to the greater public. For my test, I have 2 distinct opportunities that could potentially speed up my page speed by under 1 second. By eliminating render-blocking resources I can shave a half second from my load time. Render-blocking resources are typically JavaScript or CSS files that load in the head of your page.
In this instance I have decided to keep the file in the head. I value aesthetics over speed here as my overall page speed is already excellent, and the bonus of speed doesn’t outweigh my desire for a nice looking page.
The last opportunity, reduce server response times (TTFB), could save me an additional .18 seconds. This too, at this point, is not enough of an improvement to warrant the level of effort and time involved to increase my speed.
Diagnostics
Diagnostics further discusses the performance of your application. In this instance I have 2 opportunities to improve my speed: Ensure text remains visible during webfont load, and Minimize Critical Requests Depth. Of the two updates above, neither are significant enough to warrant deeper dissecting.
Passed Audits
Passed audits detail all the items in which your page passed a specific background test. Typical topics range from properly size images and minimizing of CSS and JavaScript to avoiding multiple page redirects and avoiding enormous network payloads. Lists will differ depending on your page. In my test, I have 16 audits passed.
And that’s it. We have finished covering the Google PageSpeed Insights Test. Remember each page requires incremental updates to be made. These small, but important updates will add up to a significant increase in overall page speed.
You now have the working knowledge to increase your page speed to ludicrous speed. And keep in mind that serving an aesthetically pleasing site to your user in a respectable download time is your ultimate goal. Once you take the above steps your users will thank you. And Google will reward you too.
If you are interested in learning more about Google Analytics read my blog on how to install Google Analytics on your site. Google Analytics will allow you to understand your visitor and why they come to your site.