Introduction The Performance Panel is used for detailed investigations on traces captured during page load or during user interactions. It’s a critical tool for understanding and debugging performance issues, but it can be overwhelming to newcomers. Previously I wrote about the Landing screen released back in Chrome 129 but I didn’t cover recording and analysing […]
This is a step-by-step guide on how I use Chrome DevTools (DevTools from now on) to detect Web Performance issues on a website, as well as validate hypotheses to fix some of the problems found. Disclaimer Before diving in, I want to clarify that: this is not a guide on how DevTools works, it’s a […]
Introduction Modern web performance issues often come from delayed rendering rather than network speed. Client-side hydration and heavy JavaScript pipelines can prevent browsers from showing content as early as they could. Several solutions already exist, like SSR or SSG to mitigate this. They help a lot, but in practice, SSG pages need to be rebuilt […]
What is BFCache? The Back/Forward Cache, or BFCache, is a browser mechanism that allows a page to be restored instantly when a user uses the browser’s Back or Forward buttons. Unlike a simple HTTP cache, BFCache preserves the entire state of the page in memory: DOM, JavaScript, application state, scroll position… When everything works as […]
Time-To-First-Byte (TTFB) is a popular performance metric, yet there are many problems and nuances with it. Not only does it have several different definitions, it is usually also a “compound” metric, comprised of many subparts. To make matters worse, several of those subparts are frequently zero or non-existent, often making it difficult to (meaningfully) compare […]
Tales of two pages… What’s the difference between these two pages?: https://www.example.com/ https://www.example.com/?utm_source=email I mean they’ve got different URLs, but many of us would probably guess that that utm_source URL query parameters (or “URL params” or “search params” as it’s sometimes known) is not meaningful to the page contents and is more used for analytics […]
Why optimizing on p75 is a starting point. Optimizing for p90 should be our common goal. What is a percentile? The 75th percentile (p75) means 75% of users had an experience that was equal to or better than that value, and 25% were worse. If you work with Core Web Vitals, you live in the […]
Over the course of 2025, I have completed 100 site speed reviews at DebugBear. This is a free service we offer to trial accounts looking for a brief assessment of their current web performance. Requests consistently come in from small independent websites to much larger teams, across a wide range of industries. Each site speed […]
Even though Cumulative Layout Shift (CLS) has been a well-known metric for about five years now, I still frequently encounter negative scores on major websites during my web performance audits. The most frequent causes of CLS I encounter fall into two categories: Promotional banners at the top of the page, which appear with a slight […]
A long time ago, in 2014, I did the “A Short History of Performance Engineering” Ignite talk at the Velocity conference (slides and video). A lot of new developments have happened since 2014, so here is an updated text version – incorporating feedback and new events. Chronology Performance Engineering has a rather long and fascinating […]
Optimizing LCP (Largest Contentful Paint) is not just reducing the file size of your images, there’s a lot more that goes into optimizing the loading strategy – and you can only grasp where the bottleneck is if you understand the sub-parts that make LCP. LCP is one of the Core Web Vitals metrics that measures […]
How mainframe-era techniques and native browser APIs outperform modern frameworks The Numbers Before the philosophy, the receipts: Frontend (multicardz.com): 32KB JavaScript bundle (15% of minified React) <100KB total payload including HTML, CSS, fonts, everything 0ms Total Blocking Time 0 Cumulative Layout Shift 0.3s First Contentful Paint 100 Lighthouse score Backend: 32ms server processing to select […]
Web performance is a lot like walking on those moving walkways at the airport. When it moves smoothly, you barely notice it. You feel fast. Supported. In control. But when one section stutters, even just a hiccup, your whole body reacts. You lose balance for a moment. You hesitate. Something feels off. Websites behave the […]
performance.now() 2024 was the year we officially launched the W3 RUM Community Group. The idea to form a community group around real user monitoring (RUM) came from the desire to come together as vendors, organizations and even independent consultants to identify opportunities to improve our tooling and push the boundaries of what’s possible. Our goal […]
My website has an animation of clouds moving across the screen. It formerly had an animation of a sun with pulsing waves which is now static. An important performance consideration decided how this came to be in my small website: the almighty compositor. This article is intended to be an approachable story and practical example […]
Loading styles on the web is something that looks trivial at first. You just add a <link rel=stylesheet> to your page (or <style> for inline styles) and you’re done. But if you wanted to load CSS fast, all of the sudden you run into trouble… Assuming you have a traditional web app (or what the […]
Have you heard of React Server Components? Even if you don’t work with React daily, you probably have. It’s been the hottest topic in the last few years in the React Community. And in addition to being the fanciest new toy, Server Components are quite often mentioned in the context of performance. As in, they […]
Remember YSlow? If you do, skip to the next header. YSlow? Back in the olden days circa 2007-ish, there appeared a tool called YSlow. It was a Firefox extension (Chrome wasn’t a thing, not even a sparkle in anyone’s eye) that codified 13 best practices for speeding up web pages based on research by Steve […]
Last year, in the article “5 tips to effectively optimize INP in React,” we focused on what developers often underestimate when optimizing React. React is not automatically fast, and long JavaScript tasks can arise from perfectly common constructs. A larger DOM and more components mean more work during hydration and a slower UI during interaction. […]
The Inconvenient Truth: How Web Performance Case Studies Undermine Our Relationship with Business
by Martin Michálek
Despite its critical importance to online business, web performance is still fighting for attention from key stakeholders. Abstract technical metrics are not enough; people want to see money and the actual influence on revenue. For this, we use data or case studies. But are we really as good at presenting numbers as we think we […]
A high-level view of performance reporting In the performance community, we spend a lot of time talking about tools, metrics, budgets, thresholds, regressions, and dashboards. But at the end of the day, the real challenge is not collecting data, it is making sense of it. A great report does not overwhelm. A great report tells […]
To build instantly loading websites was always my goal. For years, however, this remained an aspirational target rather than a technical reality for the open web. We spent a decade optimizing critical rendering paths and shaving milliseconds off Time to First Byte, but the physical limits of the network always kept “true instant” just out […]
With web performance, less is typically more: When possible, send less data, make the browser do less. Here are several examples where you can replace common JS patterns with HTML and CSS.
Canvas-based rendering has become a prominent tool for building complex web UI interfaces. When working with large images on canvas, one critical challenge stands out: keeping the main thread responsive during image decoding. Unfortunately there’s no universal way to decode an image for canvas’ drawImage() without blocking the main thread across all browsers. An approach […]
After 25 years building sites for global brands, I kept seeing the same pattern appear. A team ships new features, users quietly begin to struggle, and only later do the bug reports start trickling in. Someone finally checks the metrics, panic spreads, and feature development is put on hold so the team can patch problems […]
When I explain the difference between lab (aka synthetic) and field data to people, one of the things I mention is that the lab allows for testing under repeatable, controlled conditions. Each test run offers an apples-to-apples comparison with previous tests, and results are available almost immediately. On the other hand, field data measures actual […]
Most HTML documents are relatively small, providing a starting point for other resources on the page to load. But why do some websites load several megabytes of HTML code? Usually it’s not that there’s a lot of content on the page, but rather that other types of resources are embedded within the document. In this […]
If you have a statically generated website hosted on a CDN, it’s probably very fast (unless you add too much client-side JavaScript). However, for dynamically generated pages that load content from a database, one of the most overlooked ways to speed up the perceived page load speed is HTTP streaming. Unless you do streaming on […]