How do you take a popular developer platform, free and maybe even open source, and build a strong business around it? Wait a minute, did she just say ‘developer’, ‘open source’ AND ‘business’ in the same sentence? I must warn you – this article is not about web performance insights or web development, but rather […]
Largest Contentful Paint (LCP) is a performance metric representing the user experience’s loading facet. It’s part of the Core Web Vitals program and measures the render time of the largest image or text block visible within the viewport. When the LCP element is an image, which happens 72% of the time on mobile devices according […]
Prologue In 1949, Claude Shannon married a computer. Her name was Betty.1 Mary Elizabeth “Betty” Moore graduated from the New Jersey College for Women in 1948 and began work the next day as a computer at Bell Laboratories.2 Her job was to perform mathematical calculations for Bell Labs engineering teams and her performance was based […]
Tracking UX data and their metrics is easier than ever. For example, using Google’s Web Vitals library and sending metrics to an endpoint of choice. RUMvision was built on top of this library, and also the foundation of this article using the attribution build of the Web Vitals library. As a matter of fact, while […]
Did you know that at the moment, right now, RUM and performance data is being collected from the Web Performance Calendar? Yes, that’s true! There is a 99.9999% chance that while you are reading this, your browser is firing a beacon that’s travelling to the Hentzner’s datacenter in Nuremberg. Thanks to Stoyan Stefanov, at the […]
The Document-Policy response header, which you may know from the JS Self Profiling API, has experimental policies to enforce performance good practices. This is useful in your local development and eventually in production. The process for In-Browser Performance Linting was first described by Tim using Document-Policy’s predecessor, Feature-Policy. An academic paper on Document-Policy and mobile […]
AI Content Generators & Training Data AI-generated content is all the rage these days. Highly creative images flood our screens and a chatbot passes an AWS exam. These new generations of text/image-to-image and language models are easy to try online & run on local devices. With the easy availability of these tools, new communities share […]
Introduction A Swiss Army knife is not merely a knife but rather an entire toolbox packaged in a light and compact container. Each tool is carefully selected to maximize utility while simultaneously minimizing size and redundancy. Mastery of the toolbox means knowing when and how to use each available tool, like choosing a corkscrew instead […]
Imagine the scenario where you click on an element and expect a response but the element doesn’t seem like it was clicked and doesn’t respond, so you click again. Those two clicks however, when the response completes, lead to undoing the action you wanted. Ever happened with you? Sounds frustrating, doesn’t it? This is the […]
The Akamai mPulse team studies Real User Monitoring (RUM) data to help our customers understand how to optimize website performance and how user behavior may be altered by changes to configurations or resource requests on their site. As a data scientist on the mPulse team, I search for patterns in our data and identify problem […]
If you deal with Web Performance, you’ve probably heard about HTTP resource prioritization. This is especially true since last year, as Chromium added so-called “Priority Hints” with the new fetchpriority attribute, which allow you to tweak said prioritizations. You may have also heard that the prioritization system changed between HTTP/2 and HTTP/3. However, what exactly […]
TLDR; We have conducted web performance research at the University of Hamburg since 2010. We came up with a approach to cache dynamic website resources like HTML and APIs which can be plugged into websites via Service Workers automatically dealing with personalization in HTML keeping caches up-to-date by crowdsourcing cache checks caching dynamic resources in […]
Mostly revealed to the Web by Solid.js, shortly after embraced by Preact, but also blended into usignal, or implemented by many others, this pattern convinced tons of developers that hooks might not be the best solution to reactivity out there, but while the concept might look and feel super simple and natural to deal with, […]
For a dynamic web application Time To First Byte (TTFB) can take time, this is certainly the case with the applications I work with. For each request the server receives, in order to respond correctly it could be performing a number of things that can add up; multiple API requests (some in a serial nature), […]
This blogpost covers how I used a Distributed Architecture (Cloud+Edge) to beat latency for the global user base of scalemates.com (largest scale modeling platform in the world) The Problem At first glance my CrUX data (Via treo.sh) indicates I should rather watch Netflix instead of further tuning performance! When we zoom in on Waiting Time […]
Much like a carpenter or handyperson, every web performance expert has a set of their favorite tools. Whether you’re new to performance or simply wanting to snoop on other people’s processes, here’s my own toolbox favorites and why. To give you a bit more context, I currently work at Shopify helping merchants improve their web […]
This post is a continuation from a last year’s post and offer an alternative solution that is easier and feels less hacky. I have a quick background here, but for more gory details, check out the previous post. Problem As the previous post puts it: A slow CSS prevents the JavaScript following it from executing. […]
Looking back at when this here little calendar started (Hello 2009!) things are so infinitely better now. Browsers are anything but the black boxes they used to be. Boxes that you needed to poke about and see what comes back. Whether you’ve been living under a rock (haven’t we all, hello 2020!) or you’re on […]
… while building a fast movies app Overview The Movies App The TasteJS movies app is a showcase for different frameworks. I was excited about it because it gave me an opportunity to test some hypothesis, and see if it holds in the context of an app that’s a bit less trivial than TodoMVC. The […]
So here’s the situation: our user initiates an action via a click. JavaScript kicks in. And it’s taking its time, doing an expensive operation. Meanwhile the browser’s frozen, the user is given no feedback of what’s going on, cannot interact with the page at all – no clicks, no test selection, no fiddling with menus. […]
A few weeks ago at performance.now(), we were able to announce the initial availability of a new public dataset of RUM data – the RUM Archive. I’d like to take a few minutes to discuss our motivation for the project, what kind of data the RUM Archive contains, how you can access it, its limitations, […]
A question I get sometimes is what goes into making a new Web Vital metric. It’s a lot more involved than you might expect! We start by deciding what to measure. We figure out the building blocks for the metric, and validate that they’re solid. We put the building blocks together into a score, and […]
Largest Contentful Paint (LCP) is one of my favorite KPI’s to focus on when improving user experience. For technical teams I advise to additionally track LCP(FE), or the Front End Component of LCP. A very simple formula: LCP = TTFB + LCP(FE) This suggestion is applicable for both RUM (Real User Monitoring) as well as […]
We all use compression in our daily work. It is boring because it is baked into everything. We don’t have to think about it. Or do we? In this article I’d like to share some thoughts about compression which will change the way you use it in the WebPerformance environment. The Setup Let’s set the […]
Seeing is believing. It can also help unearth helpful strategies. And one can never have too many ways of visualizing data. What one tool misses, another one finds. And here’s yet another tool for your toolbox. Lighthouse treemap Lighthouse comes with a treemap viewer tool (example) that Lighthouse itself uses to visualize JavaScript files and […]
Background Next.js is one of the most popular React frameworks and is seeing heavy adoption. I am working on performance remediation for a large e-commerce site built with Next. While the site has numerous 3rd party analytics, observability, and clientside A/B testing scripts, the performance bottlenecks I am facing are primarily due to large app, […]
If your “quest for fast” goes through device detection, you’ll want to pay attention to this. Introduction I’ll go out on a limb and make a wild guess: if you care about web performance, that’s because you want to deliver great UX to users. Assuming my guess is right, in the last two decades the […]
Noisy RUM data can ruin your day! Although I am a RUM (Real User Monitoring) proponent there is one downside! The danger that noise negatively impacts your technical performance analysis. This blogpost covers 3 filters to cancel out noise to avoid: Missing actual performance degradations or improvements Over or underestimating the impact of changes Being […]
According to httparchive.org images represent about 43% of the page weight for the median desktop and mobile page. There are many things to consider with images such as using the proper type, serving the appropriate image for the device and situation (srcset or <picture>), and lossless or lossy optimizations. A good lossless optimization (one that […]
Fast page loading is so last year… you should be thinking about instant page loads! To give an experience where the load is not just “acceptable”, but completely unnoticeable, we need to look beyond just optimising our loading speeds and think about how we can completely hide that load delay from the user.
You can deliver the same data story with dozens of different tools. Some have a lot more client-side weight than others. This is a case study of a couple different data visualization tools we used for the State of California’s COVID-19 site. Switching from Tableau to D3 let us radically improve performance. How big was […]
Chrome Performance recorder is a great tool for finding bottlenecks in your app, but when you read the results literally, they can confuse or mislead. Consider following JavaScript code with a simple function call inside a loop: function main() { for (let i = 0; i < 1000; i++) { foo(i); } } function foo(i) […]
Optimizing the performance of a digital product goes beyond technical tweaks. You have to make systematic changes to the organization behind it. So how to know what part of the system to work on first? When I worked as a web performance consultant for a large company with dozens of websites and sub-divisions, I came […]