Should you self-host Google Fonts?

Google Fonts is great, but it also has a downside: it affects your page’s waterfall (during which some render-blocking may occur, as it involves CSS) as explained by Barry Pollard: The problem is that your website (say www.example.com) loads the stylesheet from fonts.googleapis.com, which returns some CSS made up of font-face declarations. This means you […]

Building mobile-first web animations in React

Talk by Alex Holachek, as brought forward at React Conf 2019: As the technology to create Progressive Web Apps continues to mature, React developers have the opportunity to write web apps that in some cases can rival native ones in terms of speed and convenience. However, one barrier to feature parity is the difficulty of […]

Smaller HTML Payloads with Service Workers

Philip Walton on how to progressively enhance your site by leveraging Service Workers to fetch partial HTML content and replace it in the DOM: On this site, after a user visits once and the service worker is installed, that user will never request a full HTML page again. Instead the service worker will intercept requests […]

Performance Budgets for those who don’t know where to start

Harry Roberts on how to set a Performance Budgets if you really don’t have a clue where to start: Time and again I hear clients discussing their performance budgets in terms of goals: “We’re aiming toward a budget of 250KB uncompressed JavaScript; we hope to be interactive in 2.75s”. While it’s absolutely vital that these […]

Move Fast & Don’t Break Things

Embedded above, but also available as a transcript, is Scott Jehl’s talk “Move Fast & Don’t Break Things” on how to keep your website performant. The talk starts of with Progressive Enhancement (of course!) and covers things such as Responsive Images, Native Lazy Loading of Images, font-display: swap;, Paint Metrics, etc. Move Fast & Don’t […]

The unseen performance costs of modern CSS-in-JS libraries in React apps

Aggelos Arvanitakis, writing for the Web Performance Calendar 2019 edition: Besides some of the great advantages CSS-in-JS boasts over traditional CSS, it may still create performance issues in certain apps. In this article, I will attempt to demystify the high-level strategies of the most popular CSS-in-JS libraries, discuss the performance issues they may introduce on […]

Native Image Lazy Loading in Chrome Is Way Too Eager

UPDATE 2020.07: the thresholds have been adjusted to be less eager: We’ve improved <img> lazy-loading in Chrome! https://t.co/zx8sf7I86L The new thresholds for when we load <img loading=lazy>: * Offer *much* better data-savings* Are closer to JavaScript lazy-loading libraries* Are rolling out to Chrome 79+ pic.twitter.com/3OHm2rnRAm — Addy Osmani (@addyosmani) July 17, 2020 For the Web […]

Simon Sinek: Performance vs. Trust

The problem in business is we have lopsided metrics. We have a million-and-one metrics to measure someone’s performance, and negligible to no metrics to measure someone’s trustworthiness. 👉 You might know Simon from other videos such as Millennials (in the Workplace) or Why Leaders Eat Last. Totally worth your time.