The Google toolset for site performance analysis

We review the tools provided by Google to assess your site performance.

site performance image

Site performance is a big deal. To emphasize an obvious point, if your site pages don’t load quickly, your users are going to drop off at an alarming rate.  In this article, we assess a variety of tools provided by Google to understand your site performance and potential bottlenecks.

Chrome Dev Tools: Network Tab

The Network Tab in Chrome Dev Tools is a great place to start looking at your page performance.

First, it gives you a good sense for how heavy the page is: HTML, Fonts, CSS and JS.  Typically images are a major culprit in this area and there are many approaches to reducing their footprint. Second, it gives you a high level sense for how long each asset is taking to load and the sequence of the loading. It is easy to drill down into each asset load for further details:

For example, we can see that the overall request took 148ms to load and that 80ms out of that (more than 50%) was spent waiting for a response from the server (also called TTFB – Time to First Bite).

Pagespeed Insights

This is hands-down the most useful tool in the Google arsenal: easy to use and tons of insights of ways to optimize. It analyzes your site performance for both mobile and desktop, gives it a score (algorithm) and provides a lot of recommendations for improvements.

This is also available as an API, accessible via command line and offered within Chrome DevTools. Use it well!

Chrome Dev Tools: Performance Tab

Next up is the Performance Tab of Chrome Dev Tools. This is a heavy hitting analysis of all the browser events — useful for advanced analysis and optimization. We find this to be much more useful for single page applications (SPAs) rather than straightforward sites.

The browser tracks important events such as: First Paint (FP), First Contentful Paint (FCP), First Meaningful Paint (FMP), Time to Interactive (TTI) and others. Picking the right metrics is the topic for a different post. It suffices to say that this is the place where you find all this useful information that you can use to benchmark and analyze your site performance.

Chrome Dev Tools: Coverage Tab

You can use this tool to see the percentage of the document (HTML/Font/CSS/JS) loaded vs. what is actually used.

For example, we can see that the first javascript asset is a major culprit. 95% of the code is actually not used when rendering the page.

Firebase Web Monitoring

With Firebase, we move away from the browser tools and towards server-side monitoring. Firebase is typically setup and configured in the Google Cloud.  It provides a wealth of insight into your site performance.

You can now move away from anecdotal testing and focus on the average, median and other statistical measures. You can also monitor performance changes over time.

Performance Budget Calculator

You can estimate your site performance with the cute utility offered by Google. For a given range of HTML, JS, CSS and Font sizes, it computes the expected range for Time to Interactive. This can give you a sense for what to expect with your page.

Related Insights

Practical guidelines to optimize images for site performance

Images comprise 70% of an average page size. Optimizing them for mobile, tablet and desktop can have a significant impact on site performance. We discuss ways to do this.

Vinod Pabba

Performance

10 ways to speed up your website

A slow site will make your SEO ratings go down, cause you to lose revenue and increase your bounce rates. We cover 10 ways to speed up your WordPress site.

Vinod Pabba

Performance

Strattic vs. WPEngine : Who is Faster?

Strattic is an innovative WordPress WebOps platform that is also a static site generator. We compare its capabilities with WPEngine in this post. We also migrate a website from WPEngine to Strattic and compare site performance between these platforms.

Vasi Eswar

Performance

Subscribe to our newsletter