22nd February 2021 · 7 minute read
Speaking as a software engineer who is passionate about user experience, I'm always searching for tools to help me ensure I'm delivering the best possible customer-experience. An observability-driven approach can shine a light on web performance and its direct impact on customers.
Which Metrics are Important to Track?
Over the last few years, Google has been promoting a growing set of metrics it has developed for tracking web performance. Given they are promoted by Google, often these metrics are associated with SEO and improving conversion for AdTech platforms, but it turns out they are excellent user-centric indicators too.
In my opinion, the following are the most important metrics that directly relate to customer experience:
First Contentful Paint
First Contentful Paint (or FCP) is recorded at the first moment any content is rendered onto the screen. FCP is an important customer metric because streaming content onto the page early helps reassure the customer your page is still loading. An FCP below 4 seconds is considered moderate, and below 2 seconds is fast.
Largest Contentful Paint
Largest Contentful Paint (or LCP) is measured by the point at which the page's largest element is rendered above the fold. Similar to FCP, LCP is an important user-centric metric because it indicates the main content has loaded and the page is useful. An LCP below 4 seconds is considered moderate, while below 2.5 seconds is fast.
Cumulative Layout Shift
Cumulative Layout Shift (or CLS) is tracked as the sum total of all unexpected layout shifts that occur on the page. An unexpected layout shift is any time an element changes its position on the page, for example when an image or video is loaded asynchronously, pushing the page content beneath it down. A CLS score below 0.25 is considered average, while a score below 0.1 is good.
First Input Delay
First Input Delay (or FID) happens when interactions occur while the browser is in the middle of a long running task. Browsers must finish running the active task before they are able to respond to any input, which can manifest in a delay that will make your site feel sluggish. Your FID score should ideally be below 100ms.
Okay, Show me the Tools!
The following is a list of tools I use regularly, or have used in the past which I recommend;
Lighthouse for Google Chrome
https://developers.google.com/web/tools/lighthouse
Google is the biggest promoter of its own web performance metrics, which should come as no surprise. As a result, they are committed to supporting surfacing these metrics in as many tools as possible.
Where this originally started was a tool called Lighthouse, which is built into and can be run directly from Google Chrome. To access Lighthouse, open the Chrome Developer tools (likely by hitting F12 in your browser), and simply select the tab that says 'Lighthouse'.
Running web performance tests on your local development machine with an 8-core CPU and 32GB of RAM is unlikely to represent a real-world test when taking into account that over 80% of all web traffic comes from mobile devices on cellular networks. Lighthouse allows you to configure your tests to run on an emulated device mode that is a similar experience to using a mid-range mobile device over a 3G connection.
web.dev
Based on Lighthouse, I primarily use this tool if I want to run a test in the context of a customer based in the US without observing the additional latency I experience being based in Australia.
KeyCDN Tools
KeyCDN Tools is a powerful suite of free tools that can test for a wide variety of detailed technical metrics that can help diagnose web performance issues. It allows tests to be run from a variety of locations, to help understand the customer experience for a worldwide audience. I use this tool to dive deeper when I'm trying to solve particular performance issues that require additional data.
Calibre
Calibre is another Lighthouse based tool that is specifically designed with a focus on tracking continuous web performance data to analyse patterns and trends. Calibre has a focus on automation and can ensure that web performance metrics do not regress over time.
Calibre has an impressive spectrum of test profiles for different devices, locations and connection speeds. It's also the only tool I know of that has test profiles for browsers with Ad-blocking or fingerprinting protection enabled (acknowledging an ever-growing segment of the market).
CrUX Dashboard
Data sourced from real-world user traffic will always be more valuable that data from one-off tests that run inside a vacuum. The CrUX Dashboard is built from data aggregated from real-world user traffic reported by the Google Chrome browser.
Google Chrome records, anonymises and aggregates data from real users and makes that data available at the end of the month in a free report. This report provides an excellent way to visualise performance trends over longer periods of time, although it does come with the downside of having a much longer feedback loop.
Next.js Analytics
If you're using Next.js and Vercel, you can setup Next.js Analytics - a tool that utilizes real-world user traffic to provide their own "Real Experience Score". Unlike the CrUX report, Vercel aggregates and reports this data back to you with a much shorter feedback loop.
Web Vitals
https://github.com/GoogleChrome/web-vitals
Lastly the most advanced option, the web-vitals javascript library. Using this option will give you more flexibility to use your preferred frameworks and other tools, but requires far more additional work to set up (if you do a bit of digging, you'll find that Next.js Analytics is using this library under-the-hood).
Additional Resources
Learn more about tracking and improving web performance from Google's official Web Developer portal.
The Calibre blog regularly posts well-researched articles about web performance.
