Measure, Optimize & Monitor.

Addy Osmani

·

Follow

3 min read

·

Nov 12, 2018

--

5

Listen

Share

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 .