Performance Metrics Beyond the Buzzwords
Web performance is increasingly complex, and teams need concrete ways to measure user experience. Generic metrics alone rarely tell the full story of how a site performs in the real world. A practical approach combines a few standard metrics with custom ones that reflect the "important pixels" of a specific interface.
Time To Interactive (TTI) remains a key indicator of how long a user must wait before the site responds without lag. However, TTI does not capture what happens when interaction actually occurs. This is where First Input Delay (FID) fits in — it measures the delay users experience when they first engage with the page. Total Blocking Time (TBT) further quantifies how severe the non-interactive period is before the page becomes reliably usable. Cumulatively, these metrics will all feature in Lighthouse v6 as it rolls out in 2020.
Cumulative Layout Shift (CLS) addresses a different, often overlooked problem: how often users encounter unexpected shifts in layout while the page loads. Beyond these four, alternatives like FrustrationIndex examine the gaps between individual metrics rather than each one in isolation. Teams can also assess ad weight impact and component-level CPU costs. First Meaningful/Contentful Paint, meanwhile, is being replaced by Largest Contentful Paint, and SpeedIndex is losing prominence as these newer metrics emerge.
Tools like WPO Stats collect case studies that show how even small optimizations — shaving a few milliseconds off load time — can meaningfully affect conversion rates. For teams that need hard figures, Sergey Chernyshev's UX Speed Calculator visualizes how speed distribution, error rate, bounce rate, and conversion rate interact given user-input values.
Automating the Easy Wins
Image compression is relatively straightforward but time-consuming, especially when a large batch must be processed. That creates a risk of images slipping into production unoptimized. A GitHub action built by the Calibre team addresses this by automatically compressing JPEG, PNG, and WebP images in pull requests. It relies on mozjpeg and libvips for near-lossless compression, removing a common maintenance burden from the development workflow.
Curated Resources for Staying Current
The performance community is active, and several resources are consistently worth following. Tim Kadlec's podcast Chasing Waterfalls has covered PayPal's performance journey, scaling a performance culture within an organization, and performance budgets alongside third-party challenges and JavaScript cost. Ben Schwarz and Karolina Szczur curate the Performance Newsletter, which sends web performance tools, talks, and resources twice a month, with an archive available for back issues.
For those starting the new year with a commitment to faster sites, the updated front-end performance checklist covers everything from budgets to single-page applications and networking optimizations. It is editable in PDF, MS Word Doc, and Apple Pages formats, allowing teams to adapt it to their own workflows.
Upcoming Events and Releases
SmashingConf events continue to prioritize extended Q&A sessions after talks, with live examples shown on stage. Early-bird tickets are available for the following stops: San Francisco (April 21–22), Austin, Texas (June 9–10), Freiburg (September 7–8), and New York (October 20–21). On January 29 at 17:00 London time, Stefan Baumgartner will give a free webinar covering the practical, real-world role of TypeScript.
On the publishing front, the pre-release of the Ethical Design Handbook by Trine Falbe, Martin Michael Frederiksen, and Kim Andersen is expected late January (pre-orders with discount; print copies ship late February).
