The #ChromeDevSummit site is live, happening Nov 12-13 in San Francisco, CA
Check it out for details and request an invite. We'll be diving deep into modern web tech & looking ahead to the platform's future.

Measuring Performance

Before setting out on what might be a long and arduous journey, we would be wise to first determine whether we even need to make the trip (spoiler alert: we do). The first step, then, in improving our pages' speed is to measure current performance and analyze where and how we can make positive changes.

Of course, loading speed isn't just a thing, it's actually many things. Multiple factors affect a page's load time, and we need a way to examine which ones we should address. Many tools are available for this purpose; here are some worth considering.

Lighthouse

Quoting from its Google WebDev page, "Lighthouse is an open-source, automated tool for improving the quality of web pages. You can run it against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, and more."

Lighthouse at the Chrome Webstore

Again, it can't be explained better than this: "You can run Lighthouse as a Chrome Extension, from the command line, or as a Node module. You give Lighthouse a URL to audit, it runs a series of audits against the page, and then it generates a report on how well the page did. From there, use the failing audits as indicators on how to improve the page. Each audit has a reference doc explaining why the audit is important, as well as how to fix it."

In fact, Lighthouse is now available directly in Chrome DevTools. From the Chrome vertical dots menu, choose More Tools, then Developer Tools, and then click the Audits tab. Choose which audits you want Lighthouse to perform, and click Run audit. Lighthouse provides one or more comprehensive reports that detail your page's performance characteristics.

Lighthouse

PageSpeed Insights

This Google tool performs a broad-spectrum page analysis and delivers both raw results and improvement suggestions. It provides separate reports for mobile and desktop devices.

Google Pagespeed Insights

To use it, enter a URL and click Analyze. The report's suggestions include brief explanations such as "Leverage browser caching", a list of specific resources to look at, and links to more detailed explanations, many of which we'll cover shortly.

PageSpeed Insights

WebPageTest

Similar to Pingdom, this site runs a series of tests on a URL and generates several reports. It not only lets you choose from among 50+ test sites, using a dropdown or a spiffy map interface, it also lets you specify a browser and even a mobile device so you can compare page performance in a variety of environments.

https://www.webpagetest.org/

To use it, give it a URL, select your preferred settings, and click Start Test.

WebPageTest

Pingdom

This popular tool runs a full page test and returns a highly detailed, but quite readable, report; and it lets you choose a Pingdom site from which to run the test, from San Jose to Stockholm.

https://tools.pingdom.com/

To use it, enter a URL, choose the test site location, and click Start Test. Pingdom's report includes an overall grade, a general summary, specific insights with individual letter grades and detailed resource references, any response codes returned, content size and requests by type and domain, and a spiffy file request timeline graph.

Pingdom

Summary

These are but a few of the many tools available to help measure web page loading and performance speed, but they are among the most popular and useful. You should try to test your page with as many different tools as possible and compare the analyses for both common factors and unique outliers.

Also, the proper application of these tools is partially a reflection of where they fit in your workflow. Consider these general recommendations.

  • Lighthouse is primarily for your local iteration as you build your site.
  • WebPageTest is excellent for testing on real mobile devices and envisioning a more real-world setup.
  • PageSpeed Insights is great if you aren't sure where to start and want a useful overview of improvement opportunities. PageSpeed Insights recently started including data from the Chrome User Experience Report and might best capture how your real-world users will experience your site.

As you might expect, the scores and recommendations for a single URL will vary among test suites, because each uses its own rules and algorithms to analyze pages. But you will almost certainly find that a number of performance issues -- image size, HTTP requests, minification, zipping, caching, and more -- keep popping up. These potential speed gains are low-hanging fruit, issues that can easily be tackled with modest effort that pays off in significant performance wins.

Let's start with one of those wins.

Feedback

Was this page helpful?