Web Performance Calendar

When working on the web, we all end up coming across situations where the experience for the user seems a bit janky. This happens either when you are dogfooding, or the users actually highlight facing that slowness, or you see that for yourself in your performance metrics or tools. What one’d do in such a […]

Introduction You are probably wondering: “What a user centric metric like INP has to do with Puppeteer? Isn’t Puppeteer a tool that lives in the synthetic world?”, or why “Tsvetan, who works on mPulse, a Real User Monitoring system, is messing with synthetic tools?”. The truth is that mPulse and the other Real User Monitoring […]

Last year I came across Jeremy Thomas’ demonstration of Web Design in 4 minutes where he guides the reader step-by-step through beautifying a bland web page. It was powerfully effective, and I began thinking how neat it would be if there was a similar walkthrough based on web performance. WebPerfDemo is the result of that […]

Web developers often spend a lot of time and effort optimizing their web pages to perform better. One of my favorite optimizations is properly setting content expirations to specify how long the client should consider the content to be “fresh”. Here are some good references for caching MDN and RFC 9111. These techniques allow the […]

Some of the times the performance opportunities are easily found and are one of the usual suspects: image size; uncompressed assets; bundle size; preconnect; prefetch; etc. But sometimes the root cause is not as easily found, and those might be on the other side of the server-client boundary. But how can you address and identify […]

If you’re reading this, you probably already know that Interaction to Next Paint (INP) will become the new Core Web Vital metric for responsiveness in March 2024. INP has already been talked about a few times in this year’s Perf Calendar by Brian, Ivailo, and Sander, so if you need a refresher on what it […]

Some things happen in a document during navigating away, right before switching to the new document, especially in same-origin navigation scenarios. We’re not currently measuring them in Navigation Timing. Perhaps we should? Blind spot This came up whe discussing the ongoing deprecation of the unload event. Up until now, we measured the unloadEventStart and unloadEventEnd […]

Introduction to Chrome tracing What is a Chrome trace? If you’re just getting started learning about tracing, you should read this fantastic introduction from the Perfetto tracing documentation. I like their definition: Tracing involves collecting highly detailed data about the execution of a system. A single continuous session of recording is called a trace file […]

Performance engineering, being rather a narrow field by itself, has many well-established specializations. While main generic principles are the same, it is surprising that the overlap in specific skills is rather small and working in one specialization it is easy to miss what is going on in another specialization – making them almost isolated silos. […]

SPA site owners most likely are aware of the gap in Core Web Vitals data for their site. Most metrics (FCP, LCP, FID) are only reported by the browser once, so can’t be measured even if sites were willing to put in extra effort. TTFB is similar, but could potentially be calculated for soft navigations. […]

Delivering cached HTML pages to recently logged in (=RLI) visitors is unfortunately a guarantee to frustrate users! On websites where both guests and authenticated users navigate the same pages, a recently logged in user runs the risk of seeing anonymous content (loaded from the browser cache) and having the frustrating impression that they are logged […]

CLS is a Core Web Vital that measures the visual stability of a website. But in practice, there are a ton of scenarios that we simply do not consider during the development process that could affect the CLS score down the line. In this article, let us take a quick look at some common cases […]

Last year, during a talk at the New York Web Performance Meetup, we discussed a significant issue affecting the performance of Shopify stores. We have over 3 million websites on the Shopify platform and our aim was to improve performance across at least 1 million of them. By introducing new features we have improved Largest […]

According to Shopify data, Largest Contentful Paint is the most impactful performance metric on conversion and bounce rate. And yet, according to the technology report data from November, LCP has the lowest pass rate out of all Core Web Vitals. That’s even including the new Interaction to Next Paint! In theory, the Largest Contentful Paint […]

Web Performance can be a tricky business. There’s a huge number of moving parts in a modern website and it can be difficult to find, diagnose and fix performance issues correctly. What makes it easier is that lots of websites each face the same issues, at least before they’ve had a lot of optimisation work […]

tl;dr: The Declarative Shadow DOM is a novelty in standardization which enables the server-side rendering of web components. This approach, in contrast to the traditional JS-based Shadow DOM, reduces client-side processing, improves load times, and offers SEO benefits by being part of the initial HTML. Introduction In the evolving landscape of web development, our quest […]

Responsive HTML video is a web standard again, and with recent patches to Firefox (oh hey!) and Chrome that match Safari’s preexisting support, it now works across all modern browsers! That means you can use media queries for delivering your videos and potentially save your users some precious bytes. As I’ve noted in prior articles, […]

I recently attended the performance.now conference and was lucky enough to listen to Patrick Meenan’s talk on Compression Dictionaries which really got me excited. Since then I’ve been interested in exploring how compression dictionaries could be applied to the web applications i’m involved with. What are compression dictionaries? I will try and be brief as […]

Many years ago my former colleague Gilles Dubuc wanted to know if Wikipedia users’ performance gets faster over time so he added a new metric: The CPU Benchmark. Essentially it’s a JavaScript loop that runs for a small number of our users. By collecting how long time the loop takes we have a metric that […]

Where do you go to talk about performance? WebPerf Slack If you’ve been in the webperf community for a while, you probably know about the Web Performance Slack workspace, webperformance.slack.com. (If you haven’t already joined, please reach out for an invite!) Slack is amazing for realtime discussion. It’s honestly the best place to go today […]

Web Performance Data Explained Web performance data is essential for both auditing a website and demonstrating the positive impacts of our optimisation efforts. While audits present numerous opportunities for change, their full potential can be missed if we don’t effectively communicate their importance to stakeholders. This is where the CrUX History API, standing for Chrome […]

At the recent PerfNow conference, Tammy Everts highlighted a major challenge in web performance: the excess of different metrics. This issue becomes clear when considering a scenario like a retail company launching a new website. The web development team tracks various metrics like load time, user interaction, and server response times. However, for the marketing […]

Introduction I wish to bring you with me on a journey to learn about optimizing a library for localization, I would like to share my learnings with you on benchmarking, profiling, and optimizing. At Swissquote Bank, we use client-composed micro-frontends, and our platforms are usually available in at least 8 languages. To support this requirement, […]

Recently, a post from the web performance monitoring tool DebugBear about why they won’t report website carbon emissions in their platform caught my attention. It’s a very good post, pulling together information from a lot of sources, and presenting the reasoning behind their decision. As I read it, I found myself nodding along to parts […]

Earlier this year, I was exploring data on the sites I work on and found that a 500ms reduction in the session’s median First Contentful Paint (FCP) results in a 20% increase in user engagement. By definition, conversion events, such as purchases, only occur in engaged sessions. Given my employer’s desire to boost conversions, it […]

99.9. That’s the percentage of origins with a good First Input Delay score on desktop. Source: HTTP Archive Seeing these statistics, it’s easy to conclude that the web peaked in responsiveness. However, we all know that these numbers do not illustrate the real world. You’ve probably experienced a laggy or glitchy website at least once […]

Revisiting a study of the fastest way to parse large chunks of JSON such as those often used in SPA-type applications to set up state. In 2023 things have changed compared to 2019.

An analysis of Speed Kit RUM data on over 780 e-commerce websites shows: INP is worst on product category pages (AKA “product listing pages”). Several common patterns are responsible for sluggish responsiveness on listing pages.