How to test your website's performance

Much in the same way that mobile-first design is an afterthought to many designers, so too is web performance for developers. Fortunately, you don't need to be a developer to test the performance of your website.

The modern web performance testing tools are great. Many of them will provide great UX feedback on your Core Web Vitals alongside very granular technical feedback (or "lab data") and even provide avenues for how you can address these issues.

It's important to understand that web performance can't be accurately measured by any single indicator. Web performance is a series of important milestones in the loading experience and even well into the browsing experience.

Core Web Vitals

Core Web Vitals is a Google-led initiative to standardize a set of signals that are essential for any great web experience. These are characteristics that describe how it feels to use a website.

• Largest Contentful Paint measures loading, the time it takes for the majority of your visible content to render to the screen.
• First Input Delay measures interactivity, how quickly user interactions are met with a response from the interface.
• Cumulative Layout Shift measures stability, how much content jumps around as other content is loading.

Web Vitals are important to focus on as it is reported Google will use them as soon as May 2021 to help rank your website in search results.

Lab Data

We talked in more length about this granular web performance data in an earlier post, but here is a non-exhaustive list at some of the more interesting pieces of data being investigated.

• Time-to-first-byte (aka TTFB) is the time it takes a web server to respond to a URL request
• First paint is the time when the first pixel is painted onto the screen, like a background color.
• First contentful paint is the time when the first piece of content can be seen.
• First meaningful paint is the time when the content the user cares about finally loads.
• Time-to-interactive (commonly referred to as TTI) is the time it takes for a website to be usable. For instance, it's quite common that content will load before interactive elements that might lean on JavaScript to work, like buttons, menus, etc.

The feedback for how to improve your site is often pretty comprehensive, and it can play a pivotal role in helping your development team diagnose problems and make meaningful optimizations. But hey, it's not just on developers. Performance is a design element, after all.

Here are some tools to get you started:

Google's PageSpeed Insights
Google's PageSpeed Insights offers, well, insights into your core web vitals and important diagnostic data, useful to any member of a team managing a website—including designers.

Pingdom Website Speed Test
Pingdom has a very similar tool to get a second opinion. Although the results help diagnose mostly technical issues, Pingdom's great UI makes it easy to understand. You even have the benefit of being able to test from multiple locations around the world. This is a great tool for developers.

GTmetrix
GTmetrix provides insight on core web vitals and other lab data from a more high level. They're able to balance an easy-to-skim UI well with providing actionable feedback. This tool has the most pronounced "speed visualization" of all the tools, allowing you to see screenshots of your site at various loading milestones.

Google's Test My Site
If you have a mobile site that drives sales, this is the tool for you. Google will run your mobile site through PageSpeed Insights, among other tools, and compile a comprehensive and beautiful PDF full of actionable advice on how to improve performance. It requires your email, but it's worth it. Besides, it's not like Google doesn't already know more about you than you ever will.

Core Vitals Browser Extension
Whether you're taking care of a lot of websites or snooping out competition, this browser extension can help speed up your testing workflow. Test often and you'll notice things you need to optimize as you're building instead of needing to investigate later.

Lighthouse Browser Extension
Lighthouse is the exact suite of tools that Google uses to measure its "lab data" in the PageSpeed Insights report. If you're concerned with the gritty details and find yourself using PageSpeed Insights a lot, consider this extension.

These tools are a great starting point but don't treat them as the final say in your site's performance. Many sites that load in less than a second don't get a perfect or even near-perfect score, so clearly they don't tell the whole story. Your users don't care about your PageSpeed score. They just care that they don't have a long, boring passive waiting experience.