Links, Resources, and Humans of Note
This page collects links to folks and firms sharing outstanding work on the web. If you're already caught up and just want to follow their ongoing adventures, import this OPML file via your feed reader.
Need more context? Onward.
Web Performance
Fundamentals
Web development is awash in artificial novelty, and new approaches are frequently net neutral or actively worse. To build a more critical sense of what matters, we have to understand how the systems below our code operates, if only at a high level.
These are the best resources I know of to develop that understanding from the perspective of a working web developer without a deep C++ and systems background:
-
Mariko Kosaka's series on modern browser architecture:
-
Steve Kobe's "Life of a Pixel" (2020) on YT
This talk is the single best overview of how changes in HTML, CSS, and DOM turn into light emitted on screen, and the general outline is applicable across all modern engines.
Don't worry if the C++ class names and terminology aren't meaningful, they're the least important part (unless you're working in Chromium).
Slides with notes are also available.
For more outstanding work in a similar vein, checkout the entire Chromium University playlist.
-
Ilya Grigorik's "High Performance Browser Networking"
Understanding how the network below your site works is foundational to delivering consistently good experiences, and almost everything about how networks have evolved is evolutionary (not revolutionary), so learning these aspects is worth every second you spend.
- Browsers also do...interesting...things, and once you've got a background in networking, understanding the loading heuristics of browser engines can help you build a better mental model of how site improvements will play out.
Tools
-
WebPageTest.org (originally developed and hosted by Pat Meenan) is the essential x-ray and Swiss Army knife of frontend performance. It combines a host of tools and automated analyses in a low-noise, high-confidence lab test bench for maximum confidence in results.
-
Rick Viscomi, Andy Davies, and Marcel Duran's "Using WebPageTest" remains the go-to reference despite changes in the UI under new management. I've found it particularly helpful for scripting.
-
Matt Hobbs' masterful "How to read a WebPageTest Waterfall View chart" post is the missing manual that every aspiring performance investigator should internalize. His post on configuring trace parameters is also required reading, but note that WPT's UI has drifted somewhat in the intervening years.
-
WPT is so valuable that Paul Roy and his team within Bing set up a private instance and dedicated team adds improvements both to our own bespoke UI and to the upstream open source version. A large fraction of Microsoft's most important web apps have already onboarded, or are in the process of adopting WPT monitoring.
-
-
Chromium's DevTools Performance Panel is both essential and challenging to master. Important caveats to keep in mind when using DevTools for performance profiling:
-
CPU throttling in DevTools his high-quality within the renderer process, but other processes will not be throttled (e.g., the GPU or Network utility processes), which may provide a distorted picture vs. a real device.
-
Network emulation in DevTools is a fudge and does not operate at the packet level. Prefer real link conditioning and reproducible test benches like WPT wherever possible.
-
-
about://inspect
is your portal to on-device profiling for Android and other remote devices.-
This is also the entry point for native Node debugging and performance profiling.
-
Also super useful for inspecting how the browser itself is constructed (requires command-line parameters).
-
-
about://tracing
is somewhat deprecated but remains my first port of call when DevTools aren't enough. Fed from the same set of Chromium trace events as the DevTools frontend, but with many more categories that can be enabled to deepen insight into specific subsystems.Serious performance folks all have their own set of favourite categories, and these can also be re-used inside WPT and other tools to extract deeper data in traces.1
-
Squoosh.app is endlessly useful for helping folks get a sense of scale when it comes to the value of modern image formats.
-
Paul Irish's
trace.cafe
lets you easily share DevTools traces that weren't captured via the public WebPageTest.org server. Not private, so use with awareness, but extremely valuable. -
Wireshark. No, really. It will come in handy.
-
treo.sh/sitespeed
and Google's more recent CrUX Vis tools are the best frontends I know of for quickly visualising Core Web Vitals and CrUX data. My only gripe with them is that they do not support comparative analysis, which is essential in making the business case. -
The HTTP Archive and Akamai's RUM Archive are oustanding corpuses of global state-of-play information regarding site performance. Cloudflare Radar is also the single best source I know of for public, worldwide browser and network performance statistics today.
-
Whichever RUM and monitoring tool you feel most comfortable with. Great ones include SpeedCurve, mPulse, DebugBear, and Calibre. All of their teams give back to the community, and I've seen good results with the reports that each generate.
-
A cheap Android phone.
These days, I recommend a Nokia G100, Galaxy A23, or Galaxy A16 for an authentic taste of the low-end life. Be sure to install a system-wide network link conditioner like Thottly to accurately emulate mobile networks while connected over Wifi.
-
A low-end laptop.
Most of the laptop market consists of devices sold for less than $600USD, new. For the low, low price of ~$180USD, the ultra-popular (and shockingly slow) HP 14 Laptop can be yours, too.
Reference and Resources
Guides
-
SpeedCurve's Web Performance Guide is essential reading.
-
Once again, you can't go wrong by deeply digesting Matt Hobb's tour de force post on reading WPT waterfalls.
Posts Worth Bookmarking
-
The most important thing that nearly every category of site (with a narrow set of carefully chosen exceptions) can do is to ship HTML and CSS over the wire, not JS. Getting this right goes against the tide frameworkism dogma, and making the case for it can be a challenge. To ease the lift, use gov.uk's clear guidance document as a template for your team(s).
-
Mu-An's rubric for when (and how) to let JavaScript into a project is timeless wisdom.
-
Kellan's "Questions for a new technology" should always lurk in the back of your mind.
-
Tammy Evert's post on performance plateaus hits something very deep: most sites never get fast enough to even understand how much their excesses are costing them. This effect has been demonstrated repeatedly in huge organisations, but it is not yet common wisdom. But it can be your wisdom.
-
Speaking of histograms and RUM data, it is extremely important that you build a fluency with how latency data is generally presented, the sorts of distributions it tends to conform to, and the general relationships between the sigmas of a distribution.
Experienced performance investigators never consider P50 (the median) as anything more than a diagnostic metric.2 In time, it will feel natural to instantly look for P75 and P90+ data points first, to expect each sigma to be at least a doubling in time (thanks to the erlang/lognormal shape of web latency data), and to see the interplay of networks and CPUs in the data. But it takes time and work, and that's OK.
-
Self-promotion warning!
Several years ago, I wrote up a model that teams can use to understand their progress in building performance maturity and affirmative operational control of systems to distil patterns I've seen from my own consulting.
Dora's presentation at
performance.now()
'22 expresses these ideas better than I ever could.
Courses
This is not an exhaustive list, but each of these courses covers important content in ways that are now under-appreciated by the JavaScript-Industrial Complex:
-
Lighting-Fast Web Performance (free) from Scott Jehl and WebPageTest.org
-
Learn HTML & CSS Online by Jad Joubran, a man who knows how to make the browser sing.
-
Every Layout by Andy and Heydon is not so much a course, as a toolkit with extremely extensive documentation that helps you learn the fundamentals along the way. Recommended.
-
Web Components Demystified by Scott Jehl, Web Component Engineering by Rob Eisenberg, and Dave Rupert's Web Components Course at Frontend Masters all provide sturdy grounding in the platform-native way to build high-performance, encapsulated components.
-
Google's Learn Web Performance track on web.dev is free and includes coverage of many general techniques that are helpful. Much of the same ground is also covered in MDN's (free) Web Performance module.
Blogs
Sadly, many of the folks I most respect in web performance are too busy with their impressive day jobs to maintain blogs these days. Others are writing mostly for their employers, and so a few company blogs are listed here where the signal-to-marketing ratio remains extremely high.
In addition to the à la carte links below, consider subscribing to all of these blogs in your feed reader of choice using the OPML import file
Web Performance
-
Stoyan's Planet Performance stitches the community together, particularly the aggregated community feed and annual Perf Advent series
-
Cannot recommend Nolan's work enough. Thoughtful, analytic, and public-spirited.
-
Many of the best folks working on web performance are, or have been, affiliated with SpeedCurve, including Steve, Tammy, and Cliff. The blog now includes notable guest posts by folks you should know, e.g. Sia.
-
The DebugBear Blog has been a reliable source of insight over the past few years.
In addition to Matt Zeunert's deep-dives, it folds in insightful contributions from Anna Monus and Umar Hasana who built Modern DevTools
-
The Piccalilli Blog is what would happen if troupe of badass webdev and content superstars formed a supergroup and instead of putting out one sad single, churned out bangers, week after week.
-
Scott Jehl is a name you'll keep running into, and for good reasons.
-
Zach Leatherman not only built 11ty, but continues to push on the limits of what our tools should (and shouldn't) do for us by default. I'm a fan.
-
Rick Viscomi is a quiet powerhouse behind many of the most influential tools and analyses that have made the web better in recent years, including stewardship of the Web Almananc project.
-
The Speed Kit Blog has solid new research from folks whose work I've long been a fan of, including Erik Witt and Brian Lewis Ramirez.. The RSS for it is not well linked, but you can find it here.
Web Dev News
-
CSS-Tricks is back, baby, and everyone's favourite CSS reference is once again publishing great content on the regular.
-
Smashing Magazine, thankfully, never went away.
-
developer.chrome.com/blog
is where you'll read about most of the new and upcoming features for the web platform. This is consequence of the formerly-awesomeweb.dev
site losing focus on pushing the web forward as the (misjudged) "Baseline" project has taken over much of the Chrome team's public messaging. -
The Chromium Blog has started a new series called "The Fast and the Curious" with great content that touches on many areas of the overall platform. It's still a tad bit marketing/PR focused, but there are generally links you can follow or terms you can search the Chromium repo for to learn more.
-
The V8 team's blog continues to deliver useful insights into the evolution of engine internals, but always keep in mind that if your code is spending a lot of time in JS, it's already on the back foot.
-
The Edge Blog often includes early looks at Chromium features being developed by Microsoft engineers.
-
The MDN Blog is more focused on web development than the Mozilla Hacks blog has traditionally been, and both are worth a look in.
-
Tim Perry's HTTP Toolkit Blog is full of excellent technical content about network reality.
-
Frontend Masters' Blog features strong guest writing with a good balance of web fundamentals and platform focus.
-
The New Stack has a notable frontend bent, often covering important topics with nuance lacking in the wider tech press. Writers like Richard MacManus and Loraine Lawson make it worth a subscription.
-
WebRTC Hacks is the definitive source for goings-on in the murky word of SDP munging, Plan B, and stats feedback. IYKYK.
-
CloudFour's Blog is a useful mix of platform-oriented basics and deep-dives, including from Jason Grigsby, the man who literally wrote the book on PWAs.
The Good and The Great
It's challenging to list, let alone categorize, all the lovely people whose work informs and inspires, so I won't try. What's here is simply best-effort on very little sleep, and corrections and suggestions for additions are greatly appreciated.
Most whose blogs have RSS or Atom feeds are listed in the OPML file:
- Jake Archibald
- Scott Hanselman (Obviously)
- Surma
- Andy Bell
- Heydon Pickering
- Lea Verou
- Harry Roberts (CSS Wizardry)
- Bruce Lawson
- Stuart Langridge
- Zach Leatherman
- Sia Karamalegos
- Marcin Wichary
- Baldur Bjarnason
- Tom Loosemore
- Ben Terrett
- Timo Tijhof
- Thomas Steiner
- Andy Luhrs
- Tess O'Connor
- Stephanie Eckles
- Elly Loel
- Monica Dinculescu
- Mark Nottingham
- Andrew Betts
- Marco Rogers
- Stefan Judis
- Eric W. Bailey
- Geoff Graham
- Pascal Schilp
- Sara Joy
- Mayank
- Burton Smith
- Cassie Evans
- Ben Myers
- David Baron
- Roderick Gadellaa
- Dan Appelquist
- Philip Tellis
- Brian Louis Ramirez
- Anna Monus
- Erwin Hoffman
- Jake Lazaroff
- Roman Komarov
- Sarah Higley
- Nico Martin
- Will Boyd
- Ana Rodrigues
- Rick Viscomi
- Scott Jehl
- Tim Kadlec
- Matt Hobbs
- Emery Berger
- Amy Hupe
- Evan Martin
- Jecelyn Yeen
- Barry Pollard (Tune The Web)
- Nic Jansma
- Kevin Farruiga
- James Garbutt
- Marvin Hagemeister
- Joyee Cheung
- Yoav Weiss
- Puru Vijay
- Adam Argyle
- madeline (superchupu.dev)
- Manuel Matuzović
- Manuel's htmlhell.dev
- David Darnes
- Sara Soueidan
- Karolina Szczur
- Jack Franklin
- Jason Williams
- Richard MacManus
- Ilya Grigorik
- Chris Palmer
- David Bushell
- Bob Monsour
- Sam Rose
- Henry (from Online)
- Ahmad Shadeed
- Matthew Somerville
- Serena Chen
- Lucas Pardue
- Yoav Weiss
- Alexander Podelko
- Dave Rupert
- Bramus
- Sophie Koonin
- Tiger Oakes
- Marc-Antoine Ruel
- Remy Sharp
- Max Firtman
- Paul Lewis
- Brian Kardell
- Chris Coyier
- Eric Meyer
- Chris Ferdinandi
- Simon Willison
- Heather Buchel
- Brian LeRoux
- Leonie Watson
- April King
On the off chance they see this, I also hope these folks get blogs or revive their dormant web homes (hint hint) as I know the world would be better for them sharing more. Their work has been a positive influence on me, and I recommend learning from them where you can: Yan Zhu, Amiya Gupta, Ingrid Caldas, Paul Roy, Ana Tudor, Mary Giambrone, Andy Davies, Christian Gonzalez, Rafael Citron, Amrita Mishra, Mu-An, Kenneth Rohde Christiansen, Diego Gonzalez, Chris Holt, Alice Boxhall, Bobby Rayit, Karlijn Löwik, Mason Freed, Greg Whitworth, Annie Sullivan, Yehor Lvivski, Elliott Sprehn, Edds, Erik Arvidsson, Amal Hussein, Zouhir Chaoud, and Dora Militaru
The DevTools Performance panel,
about://tracing
, and Perfetto can all open traces taken by DevTools and tracing, but not all Perfetto traces can be opened by other tools without conversion, owing to the more compat binary format Perfetto introduced. ⇐For those unfamiliar with the terminology, "performance metrics" (confusingly named) or "success metrics" are the primary measures that a system can be judged by. In an e-commerce site, this might be something like conversions (a number to maximize) or cart abandonment (minimized).
"Guardrail metrics" are measurements that help keep an eye on experience quality and/or guard against failures. In e-commerce, this might be something like API error rates.
"Diagnostic metrics" are the least salient category of metrics most of the time. They're collected over time but rarely consulted or reported on because they can help make sense of confusing changes in other, more important data. Think total session count by geography, which can help explain changes in more primary metrics by helping to identify seasonality. ⇐