In a recent Perf Planet Advent Calendar post, Tanner Hodges asked for what many folks who work in this space would like for the holidays: a unified theory of web performance. I propose four key ingredients: Definition: What is “performance” beyond page speed? What, in particular, is “web performance”? Purpose: What is the purpose of […]
Largest Contentful Paint is a loading performance metric that’s part of the Core Web Vitals program. It measures the time the largest contentful element (a block of text or an image) was displayed to the user. When thinking about expanding LCP’s definition and adapting it to animated images, video resources or progressive images, we intuitively […]
If a tree falls in the forest and no one is around, does it make a sound? Likewise, if a web page loads in a background tab then does its load time really matter? As a user, the time it takes for background tabs to load may seem irrelevant since you are unlikely to notice […]
Table of Contents The JS Self-Profiling API What is Sampled Profiling? Downsides to Sampled Profiling API Document Policy API Shape Sample Interval Buffer Who to Profile When to Profile Specific Operations User Interactions Page Load Overhead Anatomy of a Profile Beaconing Size Compression Analyzing Profiles Individual Profiles Bulk Profile Analysis Gotchas Minified JavaScript Named Functions […]
User experience vs. diagnostic metrics A few years ago, Google introduced the Core Web Vitals metrics. If you’ve been following web performance for a while, you know there are already a lot of metrics. Dozens and dozens of them, and new ones are being experimented with continually. So it’s not surprising that one of the […]
Before a web app goes live, it is a very good idea to perform load testing: apply artificial user load to the application. I’m going to describe a couple of tips on how to prepare, run, and analyse a load testing session. Some pieces of advice may feel quite obvious, yet I hope it will […]
Despite being likely the most deployed data exchange format in the software industry to date, and beside the existing competing implementations chasing the best way to stringify or parse faster than a speeding bullet, there are still various “gotchas” around this standard that most developers are unaware of, and some of these gotchas could arguably […]
The aim of this article is to provide a quick introduction to ClickHouse for the Web Performance community. The article talks about some interesting Core Web Vitals queries and points to where we can find help about ClickHouse. During the past few years I was searching for a database that suits my hobby project Basic […]
One of the questions I am periodically asked is about presenting a business case for performance. It is rather a tricky question that may have many layers in it. While there is no generic answer, here are some building blocks. Original Approach In the beginning, during the mainframe era, it was rather easy to present […]
As a rule of thumb, you can say that the smaller the payload of a website or application, the faster it is. While we are used to reducing payload by identifying critical and minifying all code, compressing files “at rest” and in transit, and bundling resources, we don’t pay that much attention to HTML payload. […]
Jamstack is the way to build sites. The core of Jamstack is – Javascript, Markup, and API (JAM). At first look, it really correlates with any modern way of building sites, but Brian Rinaldi has a great writeup on how it is different. There’re a lot of ways to build Jamstack sites using different Static […]
Redirects are notoriously bad for performance. This article explains how to remove redirect penalties using a new technique called Redirect Liquidation. In a nutshell Instead of returning a 301/302/307 status code when an old URL is requested; You directly serve the new content and inject a <script> in your HTML to update the Location Bar. […]
Five years ago I was trying to help Sam Smith to get his PiNC project to work. I wasn’t able to help him and the project didn’t work 100%. But I really liked his idea: A network connection conditioner for a handful of low-end devices in my home office It would be great to have […]
tl;dr – if we, as a webperf community, are able to bring the environmental impact of a website into the common #webperf lexicon, then maybe it can raise up in corporate awareness and actually become an agent for change. The last PerfPlanet article I wrote a couple of years ago, was playing with taking the […]
Introduction Users of WebPageTest and other synthetic performance testing tools are familiar with the concepts of “First View” and “Repeat View” measurements. From the WebPageTest documentation: First View: The First View row is a test that was done with a browser that had its cache and cookies cleared out and represents what a first-time visitor […]
Working From Home Working from home has been an adventure for most folk. What’s been interesting to watch is the increase in web activity globally. I have been fortunate enough to interact with people in different countries, and while discussing with them, I noticed the frustration they face when attempting to access content on the […]
Core Web Vitals are a set of well-known metrics used to measure your website performance. It’s often the entry point to investigating what is wrong with someone’s website and measure the progress made optimizing the overall speed and stability. Some of you (or your clients or employers) might not have the budget to invest into […]
Happy 25th birthday CSS! Yes, today marks 25th year of CSS’ existence. Source. Contrary to what some may have you believe, CSS is not the worst. CSS is lovely, CSS is empowering, CSS is… well, here to stay. Unfortunately many a web developer (this author included) don’t bother to properly learn CSS. We just… tinker […]
Background In 2020, Google launched the Web Vitals metrics, which included a responsiveness metric: First Input Delay. But First Input Delay is not perfect. It only measures a portion of the latency users feel for the first user input. To capture more latency and measure more user inputs, our team (Chrome Speed Metrics) is experimenting […]
In the spirit of reddit’s /r/explainlikeimfive let me try to summarize the art and craft of web performance optimization for the uninitiated reader. The word “performance” can be misunderstood, so let’s define it first. Say you have work to do. Your performance would be measured by how quickly you can do this work. If Jane […]
While the practice of web performance has been around for a while and the ability to study and debug JavaScript (JS) errors has improved over the years, we’ve never really looked at the impact errors have on performance. JavaScript errors are among the more complex metrics collected by Akamai’s Real User Monitoring (RUM) tool (mPulse[1]), […]
CSS is the worst. Not only it blocks rendering, but it may slow down JavaScript execution, depending on what’s around it. Let’s see an example. Baseline: before Here we have a more or less ordinary web page’s <head>: some initial inline JavaScript, followed by a couple of external styles and scripts and then an inline […]
The addition of the async and defer attributes for the <script> element were extremely helpful for lessening the impact of non-critical JavaScript resources on the HTML parsing process. Many vendors ask to include their JavaScript at the top of the <head>, and when challenged about potential performance impacts respond by saying just to add the […]
Loops are generally not great from the performance perspective, but often times it’s relatively easy to pinpoint and optimize those inefficient function you wrote and call inside of a loop. But sometimes, especially with JavaScript, the functions causing the performance hit are the ones that are provided to you by language. Let’s look at the […]
Even if you’re not superstitious, after you’ve been doing something for 13 years, it may be as good time as any to stop and look back. And forward too. The Calendar This Web Performance (Advent) Calendar started as an impulse, in December 2009 I started writing one article a day and kept going. No idea […]
It’s not what you look at that matters, it’s what you see. — H.D. Thoreau Most performance conversations, at one point or another, will get to the subject of caching. And for a good reason. Caching helps to hide some of the biggest performance inefficiency in many systems. That’s right, hide not fix. Whether it’s […]
Every type of content was not created equal. Nor should it be served the same way. At a high level, you can separate your content into 3 groups: infinitely static — image is a perfect example of this. Once an image has been published, you should never update it (because multiple reasons) and should be […]
Building UI has always been a challenge. One of the main problems to solve is state management. React applications are not an exception. When Facebook announced the library, we considered it a view layer. Quickly after that, we realized that it’s more than that. With its one-direction data flow, React made the front-end development a […]
HTTP compression is an important part of the big web performance picture. We’ll cover the history, the current state and the future of web compression. Lossless data compression makes things smaller Lossless data compression algorithms exploit statistical redundancy to represent data using fewer bits than the original representation in a reversible way. Claude Shannon described […]
The Core Web Vitals (CWV) were announced in May 2020 and as part of that announcement Google said they would be “evaluating Page experience for a better web”. Crucially that this evaluation would form part of their search ranking algorithm: in short, faster websites would rank higher than equivalent slower websites and get more traffic […]
Memory can leak in various ways. In any reasonably sized app, you can bet memory is leaking somewhere. The effects of these leaks can be benign or they can be annoying (sluggish app) or they can be devastating causing the browser to crash the tab on your app. That’s why it’s important to keep an […]
We’re at another inflection point in Web history. Web3 is all the rage, as is privacy, security, AR/VR, edge computing, quantum computing, 5G, Internet of Things, and beyond. More browsers are converging, new features are coming out every day, and everyday developers are just trying to keep up. How does web performance fit into this […]
A lot, maybe even too much has been written about icon loading strategies already. CSS-tricks.com already had a great (inline) SVG versus icon font comparison way back in 2014. But here I am, in 2021, a frontend developer enthusiastic about performance and still using web fonts to show icons on my site. FontAwesome, to be […]
Lab-based performance tools run tests on a throttled network connection. This allows them to produce more consistent test results and capture how a page would load for users on a slow mobile connection. While Lighthouse supports several different throttling methods, the default used by tools like PageSpeed Insights is simulated throttling. Lighthouse first collects data […]