Upgrade Your Drupal Skills

We trained 1,000+ Drupal Developers over the last decade.

See Advanced Courses NAH, I know Enough
Aug 26 2021
Aug 26

To date, speed has taken a backseat when it comes to websites. But today, there’s no denying it– fast websites are effective websites. When a website provides users with underwhelming performance, everything from SEO rankings to conversion rates, ecommerce sales, and general user experience takes a hit. So — how do you get the faster site you need?

You optimize your site for speed and performance.

That’s a very simple answer to a pretty complicated question, of course. Getting your website to a high-performance tier and keeping it there requires a lot of work. Specifically, it requires monitoring that site on an ongoing basis — and that the data collected is gathered under consistent testing conditions.

This work is inarguably worth doing, but starting the work may seem daunting. Use this guide as a launching point, and begin collecting and monitoring the data necessary to achieve exceptional website performance.

Successful Website Performance Monitoring Requires the Right Tool and the Right Method

When you start digging through website analytics and aren’t happy with what you see, you’ll be anxious to make some changes. It’s important not to rush into website speed optimization without the right tool in hand, though.

There are a few different methods of testing website performance. One is to take a snapshot of how a site performs at any given moment. A tool like Google’s PageSpeed Insights (PSI) is fine for that. However, certain inconsistencies in the tool’s functionality, such as actual server location, mean that it’s not very useful for long-term monitoring. Too many variables exist for meaningful data comparison over time.

Other tools, such as Calibre or SpeedCurve, are much more useful for continuous website performance monitoring. They eliminate inconsistencies with server location and certain network conditions. They also work best for those companies fully committed both to ongoing website performance monitoring and site speed optimization efforts. Not everyone is ready to make that commitment — paying for a service, dedicating time and resources to gathering and reviewing data, and then actually optimizing for speed.

A DIY Approach for Starting Out with Ongoing Performance Monitoring

If you’re ready to start continuously monitoring website performance — and you want more than one-off test results without committing to a more advanced service — consider our recommended DIY approach. Note– this method requires a good practical knowledge of spreadsheets.

Choosing the Right Tool for Getting Started with Website Performance Monitoring

One benefit of using PageSpeed Insights and getting that one-off performance evaluation report is the fact that it’s free to use. It’s not the only free tool out there, though. To get up and running with website performance monitoring and speed optimization, we recommend using webpagetest.org (WPT). WPT is also a free tool, but offers the type of control you simply don’t get with a one-off solution like PSI (which, to be clear, does have its uses — just not for ongoing performance monitoring and testing).

Test Your Site While Maintaining Control

Control in this context means eliminating the types of variables that certain tools introduce during testing — and which can mislead you when comparing data from different tests. To present meaningful data for evaluating ongoing website optimization efforts, a good DIY tool must allow you to:

  1. Decide where requests originate from.
  2. Choose the network conditions under which your request is handled.
  3. Select which browsers you want to test for.

Without this type of control ruling out the unpredictable conditions of one-off testing tools, it’s not possible to make meaningful comparisons of data over time. Additionally, you should absolutely look for a tool that produces a Lighthouse report. In fact, if webpagetest.org did not provide a Lighthouse report in its testing, we’d look for an alternative to recommend. These metrics are that important.

Running Your Own Tests

To keep things simple for the purposes of this article, let’s see what it looks like to run the simplest test for our ChromaticHQ.com homepage. We’ll select the Simple Testing tab (direct link to Simple Testing), enter our URL, and enable Run Lighthouse Audit. Notice that Test Configuration is left as the default (Mobile - Fast 3G); more on this later. This configuration will run three performance test runs against the URL that you’ve provided. The data for all three tests will be available once the test is completed, but by default, it will show you the data for the median run (that is, not the best nor the worst of the three, but the one in the middle; that’s the one we want).

Here’s what our configuration looks like on WPT:

Screen capture of the main WebPageTest interface, depicting a primary textfield to enter a testing URL

Once we’ve filled out this simple form, we can click the Start Test button on the right, which will submit our test request and bring us to this page:

A screen capture of the WebPageTest

Keep that page open for a bit and you will eventually see that your tests are running:

A screen capture of the WebPageTest interface, showing the interstitial

And, after a few minutes, your tests will be ready:

A screen capture showing a WebPageTest result, with scores across multiple metrics.

Congratulations! You’ve taken the first step in your performance monitoring journey.

Before we move on to the next step, you should do the following:

  1. Make note of the First Byte metric. The table under the Performance Results (Median Run - SpeedIndex) heading has a First Byte column. Write down the value recorded under that column (0.837s in the above screenshot).
  2. Open your Lighthouse Performance report. You can do this by clicking on the first box near the top right that has the label Lighthouse Perf below it. That link points to the Lighthouse Performance report for the median run by default.

Capturing Results and Visualize Progress with a Performance Tracking Spreadsheet

Once you have opened your Lighthouse Performance report, you’ll be ready to move on to the next step: adding them to a spreadsheet to compare test results over time. Anyone can do this, but it does take a bit of time and effort to set up. Luckily, we’ve created a boilerplate spreadsheet to get you started.

We based this spreadsheet on the tools we at Chromatic have used internally to help inform our performance efforts for our own clients and agency partners. Using this tool, you’ll be able to easily enter your test result data, visualize your progress, and focus on the metrics that will help your team succeed.

The tool is complete with sample anonymized data, production and staging comparisons (should you want to test both), multiple pages, and configurable goals. It’s packed with enough features to kickstart your long-term performance monitoring strategy.

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web