Learn what web performance metrics Airbnb tracks, how we measure them, and how we consider tradeoffs between them in practice.
Overview
The article discusses how Airbnb measures web performance through various metrics that reflect user experience. It details the importance of these metrics, the methodology behind their measurement, and the trade-offs considered in improving overall web performance.
What You'll Learn
1
How to measure Time To First Contentful Paint using the paint timing API
2
Why manual instrumentation is crucial for tracking Time To First Meaningful Paint
3
How to implement a Page Performance Score system for web applications
Prerequisites & Requirements
- Understanding of web performance metrics and user experience concepts
- Familiarity with web performance measurement tools like Lighthouse(optional)
Key Questions Answered
What metrics does Airbnb use to measure web performance?
Airbnb tracks five key performance metrics: Time To First Contentful Paint, Time To First Meaningful Paint, First Input Delay, Total Blocking Time, and Cumulative Layout Shift. These metrics provide insights into the user experience and help identify areas for improvement.
How does Airbnb instrument Time To First Meaningful Paint?
To measure Time To First Meaningful Paint, Airbnb requires product engineers to tag the most meaningful element on a page with an ID, allowing the system to track when this element appears. This manual instrumentation ensures accurate data collection.
What is the Page Performance Score and how is it calculated?
The Page Performance Score combines multiple performance metrics into a single score ranging from 0 to 100. It is calculated based on the weighted contributions of metrics like Time To First Contentful Paint and First Input Delay, aiding in goal setting and regression detection.
What trade-offs does Airbnb consider when improving web performance?
Airbnb often faces trade-offs where improving one performance metric may negatively impact another. For example, a faster Time To First Contentful Paint might come at the expense of a slower Time To First Meaningful Paint. The Page Performance Score helps navigate these decisions.
Key Statistics & Figures
Weighting of metrics in Page Performance Score
TTFCP: 35%, FID: 30%, TTFMP: 15%, TBT: 15%, CLS: 5%
These weightings reflect the relative importance of each metric in calculating the overall Page Performance Score.
Technologies & Tools
Frontend
Paint Timing API
Used to measure Time To First Contentful Paint for direct requests.
Frontend
Web Vitals
Provides real user metrics that align with the metrics used in the Page Performance Score.
Tools
Lighthouse
A tool that rates web pages through synthetic tests, providing insights into performance.
Key Actionable Insights
1Implementing a Page Performance Score can help streamline performance improvements across your web applications.By combining various metrics into a single score, teams can easily identify performance issues and prioritize fixes, ensuring a better user experience.
2Manual instrumentation of key metrics like Time To First Meaningful Paint is essential for accurate performance tracking.This ensures that the most meaningful elements are consistently monitored, allowing for better insights into user experience and necessary adjustments.
3Consider the trade-offs between different performance metrics when making changes to your web application.Understanding how one metric's improvement can affect another helps in making informed decisions that enhance overall user satisfaction.
Common Pitfalls
1
Failing to properly instrument Time To First Meaningful Paint can lead to inaccurate performance data.
Without a designated FMP target on each page, the metric may not be recorded, resulting in gaps in performance tracking and potential misinformed decisions.
Related Concepts
Web Performance Metrics
User Experience Design
Performance Optimization Techniques