Measure, Optimize & Monitor.
Performance is a constant process, not a one-time checklist. It requires continuous monitoring and work. A useful workflow when investing in performance is Measure, Optimize & Monitor.
A few tips:
- Link performance to your business goals. Help stakeholders measure how performance impacts the core business metrics they care about. (e.g conversions, bounce rates, brand perception)
- Real-world performance is diverse. Measure performance on mobile devices & network connections common to your actual users. Understand your bottlenecks and their impact on user-centric performance metrics.
- When optimizing, load only what you need when you need it. Actively manage your payloads and keep start-up times short.
- Add performance budgets to continuous integration. Enable engineers and PMs to visualize the “cost” of each new feature. Often businesses don’t understand what is “acceptable” performance or the user-impact to perf of introducing new features.
- Ensure tests measuring lab conditions collect the same (or similar) metrics from the real-world (RUM). Performance impact on metrics in the real-world can be highly variable due to differences in devices, networks and other conditions.
- Measure optimizations had the intended effect (e.g A/B test). A “fix” may not be correct if it improves one metric at the cost of another.
- Add regular proactive reporting on performance progress to highlight success (e.g emails, dashboards, alerts). This ensures performance is a regular part of the conversation and is conveyed in a way that can be digested by more people.
At Chrome Dev Summit 2018, we just released a number of tools to help web developers on their road to faster experiences:
- The new PageSpeed Insights powered by Lighthouse and the Chrome User Experience Report, provide a convenient way to measure lab and field metrics for popular URLs.
- web.dev is a free new Lighthouse-powered developer education platform. It enables monitoring your progress optimizing your site over time.
- web.dev includes codelab-driven guides to optimize JavaScript, images or set a performance budget for your experience.
- lighthouse-ci now supports setting a budget for the Lighthouse performance score (e.g. 80/100). Teams can monitor what causes regressions. web.dev includes a handy guide for getting started.
Experiences have poor performance if they load slowly, have janky animations, freeze or consume a lot of memory. To avoid these performance problems, use the tools available to you to measure, optimize and monitor your performance. This is a good way to get fast and stay fast.
