Measuring Website Performance

Speed metrics that matter, and how to measure them

Website performance is important for several reasons. Being able to measure, collect, and review meaningful performance metrics is the first step in verifying that your website is performing as expected, and can help you figure out if you are providing a good user experience to your site visitors.

Before getting into the details about how and what to measure, make sure that you have familiarized yourself with the basics of website performance.

Types of Performance Metrics

There a many, many metrics and attributes relating to page loading and website performance that can be measured for sites. Here's a partial list:

But which ones are important?

If we focus our concern on actual human visitors and user experience, we can distill this list down quite a bit.

Google has defined a list of web vitals on their web.dev site, including a set of Core Web Vitals.

We will cover web vitals and Core Web Vitals in more detail in another post. But next, let's continue our discussion regarding lab data vs. field data.

Performance Data Sources

Once you have a high-level overview of all the different types of performance metrics that could be measure for a website, it's important to differentiate between the various sources of performance data.

We will group these into two categories:

• Synthetic Tests / Lab Data
  • Test results from synthetic testing tools such as PageSpeed Insights, WebPageTest, Pingdom, GT Metrix, New Relic Synthetics, etc.
• Real User Monitoring / Field Data
  • Data that is collected from actual visitors to your site, via Chrome's anonymized reporting to the Chrome User Experience Report, or from Real User Monitoring (RUM) code inserted into web pages.

Which one(s) should you use? We answer that in a bit, after we talk about the types of performance metrics.

Lab vs. Field Data

Google's web.dev site has a page about this called Getting started with measuring Web Vitals.

As we discussed in our post covering website performance basics, you almost always want to focus on performance and speed as it relates to actual site visitors.

In this regard, field data, or metrics collected from real users, should be used to help you understand what kind of performance actual visitors to your site are likely experiencing.

Synthetic testing tool results should never be used as goal or benchmark themselves. If you're doing this, You're Doing it Wrong.

Testing tools are meant to be used to understand page performance for a specific number of page loads, under very specific conditions.

Before you can use the tools effectively, you must first understand the basics of website performance thoroughly.

RUM Sources

To analyze real user metrcis (RM) data, you can either rely on data that is automatically collected by Chromium-bsed browsers in the Chrome UX Report, or you can rely on Embedded RUMscripts that measure these metrics and send them to a 3rd-party service.

Chrome UX Report

The Chrome UX Report, also known as the CrUX for short, is "a dataset that reflects how real-world Chrome users experience popular destinations on the web".

Google has a lot of useful information right on this one page:

Understanding what the Chrome UX Report is, what it contains, and how the data gets there, is one of the most important pieces for understanding how Google actually collects and uses Core Web Vitals as part of their Page Experience ranking signal.

If you're speaking to anyone who makes claims about Core Web Vitals (CWV) or how Google views website performance, checking to see if they know about and understand the Chrome UX Report is one of the easiest ways to verify if they actually know what they are doing or what they are talking about.

Embedded RUM

Website performance metrics can also be recorded by JavaScript code that is embedded directly into the website pages. Google provides a web-vitals library on GitHub, New Relic has a Browser Monitoring product, and there are other options as well. These options either send the browser performance metrics back to their own database or service, or let you decide which service should consume and hold the data.

Tools & Dashboards

There are multiple options for visualizng and analyzing real user metrics from these two types of sources. The following sections cover some of the tools that allow you to visual real user performance metrics from your website(s).

If you are hosted on SiteDistrict, the recommended and easiest option is to use our website performance dashboard pages, as it requires no additional setup, no additional costs, is availabler right alongside our other powerful WordPress hosting tools, and the data is basically real-time.

Chrome UX Tools

The first set of tools we list here are based on data collected in the Chrome UX Report.

Treo

Treo offers a Site Speed tool which displays data from the Chrome UX Report for any site which has sufficient data collected.

CrUX Vis

Google provides a tool called CrUX Vis which allows you to visualize data from the Chrome UX Report.

CrUX Dashboard

The CrUX Dashboard is another tool from Google, built on a tool from Google called Looker Studio, that allows to you review metrics from the Chrome UX Report for a domain inside report-like pages. It's a bit slower to load and use than some of the lighter-weight tools, but offers more detail than the above two options.

Google Search Console

Google's Search Console is another tool that lets you view Core Web Vitals and other data from the Chrome UX Report, for sites that you own. It is less detailed than options listed above.

Embedded RUM Tools

There are also tools and hosting providers that either automatically embed RUM tracking on sites, or allow you to enable them. To complement this feature, these providers also offer dashboards that let you visualize this data.

The data and charts from these tools can sometimes be more details or more up-to-date than than what is available from tools based on the Chrome UX Report.

If you are a SiteDistrict customers, the SiteDistrict Dashboard is the recommended & easiest option for collecting and analyzing real user performance metrics. The rest of the tools in this section require some type of additional setup effort and possibly additional costs.

SiteDistrict Dashboard

SiteDistrict also uses its own analytics code to collect browser performance data, and you can see near real-time performance data and metrics from our dashboard. Our performance data and analytics are generally far more detailed and advanced than the other options listed below, but truly proficient use still involves some investment in learning.

Cloudflare

Cloudflare's Web Analytics product, which was initially released as Browser Insights, and covered here and here, is a product that works by inserting custom JavaScript code into your website, and then sending that data back to Cloudflare, where you can then visualize it using their dashboard.

Other Tools

There are many other options in terms of embedded RUM tools & services. We don't necessarily recommend any of these services, but a few of the options include:

• RUMvisionadvertises a service for collecting Core Web Vitals for real visitors, along with dashboards for visualizing the data.
• SpeedCurvealso offers a service for tracking performance metrics from real users.
• DebugBearalthough DebugBear seems focused on a synthetic monitoring service, which we generally do not recommend, they also have an option to embed a RUM snippet into your site.

WordPress Plugins

A third option is to use a WordPress plugin that both embeds performance tracking code into your website, and also reports the metrics directly back to your site, and stores that data in your WordPress MySQL database, thus eliminating the need for an external service to store the data, and letting you review your performance data directly inside WordPress.

While this option might "sound nice", this option isn't recommended, as it can actually negatively impact your site's performance, and limits you to viewing your performance metrics for a single site at a time.

WP RUM

The WP RUM plugin is advertised as a one such option that lets you collect RUM data directly via a WordPress plugin.

Summary

Properly measuring website performance involves first understanding what kind performance metrics exists, what they represent, and that you must measure these metrics for actual visitors to your site by collecting real user metrics (RUM) data.

There are multiple options for measuring & reporting these metrics. Some are automatic and available for any site on the Internet with a decent amount of traffic. If you host your WordPress site on SiteDistrict, we also provide this automatically for you. If you are a Cloudflare user, you might already have browser performance metrics, or you might be able to enable them rather easily. Finally, there are additional options, although they all require additional setup effort and possibly additional costs.

Whatever you do, make sure you first understand the basics of website performance, and then, if you are going to work on measuring and analyzing performance metrics, focus on data from actual visitors.