Typically when we think of web page performance, we think of the time it takes for a page to load. Traditionally, we used JavaScript events on the window object such as DOMContentLoaded and onload. Nowadays, life cycle of a web page load can be thought of more granularly.
So rather than measuring load with just one metric, we should be measuring the times of every moment throughout the experience that can have an affect on the user's load perception.~ User-centric Performance Metrics | Google Developers
What do we look for in web page performance testing? What ways can we measure performance? We can answer these questions more specifically by answering the following questions.
- What metrics most accurately measure performance as perceived by a human?
- How do we measure these metrics on our actual users?
- How do we interpret our measurements to determine whether an app is "fast"?
- Once we understand our app's real-user performance, what do we do to prevent regressions and hopefully improve performance in the future?
What are Website Performance Metrics?
We can think of website performance metrics as being "user-centric". When a user goes to a web page, they're typically looking for visual feedback to reassure them everything is working as expected.
The metrics below represent important points of the page load life cycle. Each answers questions about the user experience.
- First Contentful Paint: Is it happening? Did the navigation start successfully? Has the server responded?
- First Meaningful Paint: Is it useful? Has enough content rendered that users can engage with it?
- Time to Interactive: Is it usable? Can users interact with the page, or is it still busy loading?
- Long Tasks (absence of): Is it delightful? Are the interactions smooth and natural, free of lag and jank?
How to Performance Test a Website
Luckily in our modern age, we have great tools to measure web page performance. Google Lighthouse for example provides a rich variety of metrics and documentation about them.
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 | Google Developers
How to Monitor Performance of a Website
Automated Lighthouse Check is a website performance monitoring tool. It is listed as an integration among many others in the Google Lighthouse GitHub docs. Automated Lighthouse Check provides website performance monitoring so users can correlate a drop or rise in performance score to a certain code change. Automated Lighthouse Check can also notify of changes via Slack. It even provides a free public API so you can easily integrate performance checks into a continuous integration or continuous deployment pipeline.