Skip to main content

All articles

· 4 min read

The load event was never built to measure page load time, but it was there when developers needed it and saw widespread adoption to measure page speed. Today more modern metric like the Largest Contentful Paint are available and should usually be preferred over the Load event timing.

This article looks at when the load event fires and how useful it is as a metric today.

· 3 min read

Page navigations in the browser can be categorized into different types, for example an initial navigation or a reload of an already open page.

This article looks at how different navigation types result in page load time differences and how you can detect the type of navigation in the browser.

· Updated on · 7 min read

Interaction to Next Paint (INP) is a performance metric that will become one of the three Google Core Web Vitals in March 2024.

INP tends to be harder to improve than other page speed metrics as it requires a page interaction to be measured and optimizing it often involves debugging complex JavaScript logic.

This article will explain how you can use Chrome DevTools to analyze page interactions and make your site respond to them more quickly.

· 4 min read

Google's Core Web Vitals assessment tells you how well your website does on several user experience and page speed metrics. Passing the assessment delivers a better experience for visitors on your website and can help you rank higher in Google.

This article explains how to run a Core Web Vitals assessment, what it means if your site fails the assessment, and what you can do about it.

· 12 min read

Suspense in React has been in development for several years. With the release of React 18, it's now mature enough to be used in production for data fetching and building server-side rendered applications. In this guide, you'll learn about Suspense and how you can take advantage of it to make your React applications more efficient.

· 12 min read

Currently, there is no standardized way to measure Core Web Vitals and other web performance metrics inside single page applications (SPA) because they rely on soft navigations to respond to user actions, which are not as obvious to detect as hard navigations.

As of now, web performance monitoring tools can’t easily report web performance metrics for soft navigations. Instead, most metrics focus on the initial page load.

The main reason for this measurement gap is that we don’t yet have an agreed definition of what user actions qualify as soft navigations, which would allow developers of web performance tools and browser vendors to coherently detect and measure Web Vitals in single page applications.

However, there’s already some progress in the development of soft navigation reporting.

The Chrome developer team have started work on defining the heuristics and creating the APIs for reporting web performance metrics for soft navigations. The development is currently at an experimental stage, and the proposals are still not set in stone.

· 13 min read

Webpack Bundle Analyzer is a tool to visualize and analyze the size of JavaScript application bundles. You can use it to identify any large and redundant modules contributing to the overall bundle size.

As your app grows in complexity and accumulates more packages, your bundle can quickly become too large. This impacts your app's overall performance, especially during the initial load when the bundles need to be downloaded and parsed.

The bundle analyzer provides a detailed breakdown of your application's bundle size and composition, including the size of individual modules and their dependencies.

In this guide, we'll create a simple React application that has some performance issues. We'll then use Webpack Bundle Analyzer to analyze the application bundle and identify the areas that require optimization.

· 10 min read

Network request waterfalls show what resources are loaded when opening a website. This helps developers and website owners understand why different content elements show up at different times and how it can be optimized.

Recently I made a wall calendar with 12 request waterfalls for a conference, highlighting different web performance issues. This article goes through these waterfalls one by one and explains what they show. You can also test your own website to see what you can optimize.

· 7 min read

The developer tools that ship with Chrome or other browsers are very helpful when developing and testing your websites. However, when you encounter mobile-specific issues that you can’t replicate on your desktop or laptop, these developer tools become less helpful. That's where remote debugging comes in.

Remote debugging allows you to run your website natively on a mobile device while still using your main computer for testing and debugging. This way you can find and fix bugs that only occur on real mobile devices. Remote debugging is also useful for seeing how your site performs on mobile data networks and on devices that might not be as powerful as your development machine.

This article explains how to integrate remote debugging into your development workflow to investigate mobile issues on your site.

· 17 min read

We regularly get requests to include carbon emissions in our website speed test results. However, we don’t display this data as it cannot be meaningfully calculated for a particular website just based on the URL.

This article explains how the internet contributes to carbon emissions, how CO2 calculators work, and why the numbers they report should not be used for decision-making.

· 6 min read

When opening a website your browser downloads a bunch of text files, for example the HTMl document, CSS stylesheets, or JavaScript application code. The larger these files are the longer it will take load them and visitors will have to wait longer for your page content to appear.

This article takes at HTTP text compression, a simple but effective way to reduce your page weight and improve page load time. We'll also compare the two most common text compression algorithms, GZIP and Brotli.

· 4 min read

Synthetic website performance tests measure page load time in a controlled lab environment with a specified network speed.

Since these tests are often run on a computer with a fast network connection, the network needs to be throttled to achieve a consistent result that reflects how visitors with a slower connection would experience the page.

However, there are different ways to throttle the network. This article explains why packet-level throttling is the most reliable option and how it’s different from network throttling in Chrome DevTools or the default settings in Google Lighthouse.

· 8 min read

Google Lighthouse is a great tool to automatically test the quality of your website and find ways to improve.

Lighthouse provides scores from 0 to 100 across four categories: Performance, Accessibility, Best Practices, and SEO. This article will focus on the Lighthouse SEO score and how to improve it.

· 3 min read

Lighthouse is a free tool developed by Google that analyzes your website and generates a report on your page speed, accessibility, and SEO.

All you need to do is provide your website URL and Lighthouse automatically runs through a large number of individual checks (called audits). You can see how well you do on each audit and what you can do to improve.

This article looks at the different options you have for running Lighthouse what the differences are between them.

· 14 min read

A Content Delivery Network (CDN) can help you make your website load quickly anywhere in the world. CDNs provide local infrastructure across the world, so your visitors can fetch data quickly from a nearby data center instead of from a different continent.

This article first takes a closer look at the concept of CDNs. What they are exactly, what type of content you can serve on them, and when do they deliver the most value? Then we go through how exactly to use a CDN like Cloudflare to improve your web performance.

· 3 min read

Bits of information that search engines use to decide what pages should appear in search results are called ranking signals. There are several groups of ranking signals, for example looking at content relevance, quality, and user experience on the destination web page.

This article explains what Google's page experience signals are and how you can optimize them.

· 25 min read

'Responsive images' is an umbrella term for a number of image optimization techniques that allow web designers and frontend developers to reduce page weight, improve site speed, and enhance user experience.

As image weight impacts your Largest Contentful Paint score, one of Google's Core Web Vitals metrics included in its search algorithm, you can also improve your SEO rankings by using responsive images.

Since images are a key aspect of web performance, in this article, we'll look into responsive images in detail, including their pros and cons, a handful of code examples, a couple of recommendations, and a bit of theory related to the subject.

· 9 min read

Downloading or regenerating parts of a website can be slow, so caching is used to save resources for reuse later on. This can be done on the server backend or in the browser.

With server caching frequently requested data like fragments of HTML or database query results are saved. When a website visitor then requests these resources they can be served quickly. Server-side caching also reduces CPU load on the server.

Browser caching means storing downloaded resources locally on the user's device. For example, this can be done for images or CSS stylesheets. When a page is visited again the browser can reuse these resources instead of having to download them again. That way page content appears much more quickly.

· 8 min read

Page weight is one of many metrics used to measure the performance of a website. It looks at how much data needs to be downloaded after opening a page.

This article looks at what factors contribute to high page weight, how you can optimize it, and what it means for SEO and page speed.

· 11 min read

React Developer Tools is a powerful Chrome extension that helps debug your React app. It analyzes your app's component tree structure along with the state and props of your components and provides a detailed analysis of each component's performance and rendering times.

Developed by Meta, the company behind the React library itself, this extension is a practical addition to your React workflow in a variety of scenarios:

  • Debugging your React app and verifying that a component is receiving the correct props and holding the correct state
  • Identifying the root cause of performance issues when some components are rendering slowly
  • Inspecting the context values passed to each of your components and checking that the global state is being correctly shared between them

If you're curious about how you can start using React DevTools to debug your app and improve its performance, this guide is for you. The article first looks at React DevTools in a little more detail and then demonstrates its utility through an example app.

· 17 min read

Choosing the right image format is the first and most important step when it comes to image performance. We want our websites to load fast, but we also want our images to look good. Balancing these two concerns is the core of image performance.

Image formats are file types for digital graphics that have evolved over time to make use of new software and hardware technologies and faster networks. These days we have plenty of options to choose from, including file types for raster images, animations, vector graphics, and next-generation images.

In this article, we’ll look into the most important image formats for the web and help you decide when to use which image file type.

· 5 min read

Many site speed testing tools provide recommendations to make your website faster. But it can be hard to tell whether these recommendations will work and how big the impact will be.

To estimate how much an optimization will help you need to try it out on your website. But deploying a new change to a staging server can be slow.

The local overrides feature in Chrome DevTools offers a solution. It allows you to make changes to your website locally and then measure how they impact performance.

· 6 min read

Google Search Console (GSC) is a free service Google provides to website owners. It provides them with insight on how much Google search traffic they get, what pages are showing up in Google, and what they can do to optimize their website.

Since the Page Experience Update in 2021, Google has used the Core Web Vitals metrics as a ranking factor. This article will take a closer look at the Web Vitals data that's available in Google Search Console.

· 31 min read

The HTTP protocol lets browsers and other applications request resources from a server on the internet, for example, to load a web page. HTTP/3 is the latest version of this protocol, which was published by the Internet Engineering Task Force (IETF) as a proposed standard under RFC 9114 in June 2022.

It aims to make the web faster and more secure by providing an application layer over QUIC, a next-generation transport protocol running on top of the lightweight User Datagram Protocol (UDP). We’ll discuss the different network layers in depth further down in this article.

· Updated on · 4 min read

To make your website load quickly you need the browser to prioritize loading the most important resources first. The new fetchpriority attribute for img, iframe, script, and link tags can help achieve this by marking the most important resources in the HTML.

· 9 min read

The web is best experienced with a fast network connection. Still, a large number of people will visit your site using slower speeds. They might visit your page while on the road or in a remote place.

Faster loading times can help you keep more visitors and positively influence your website SEO.

The Chrome DevTools network throttling feature lets you imitate degraded network conditions. In this article you will learn how to use it and how exactly it works.

· 6 min read

A slow website can not only negatively impact the experience for visitors, but also make it harder for new users to find the website.

Page speed measures how long it takes for a website to load. After navigating to a page, it often takes several seconds for the page content to appear.

This article looks at some of the reasons why site speed matters to your users. We’ll also look at case studies showing the results that different companies have seen from optimizing site performance.

· 6 min read

I've always been annoyed by the slow speed of the Google Cloud Console web app. In 2020 I wrote about how a single page loads 16 MB of JavaScript. That same page now loads 21 MB.

But are other cloud providers better? I looked at real-user data from the Chrome User Experience Report and also ran my own tests.

This article looks at Google Cloud Platform (GCP), Amazon Web Services (AWS), and Microsoft Azure.

· Updated on · 17 min read

Google’s Chrome User Experience Report (CrUX) is a dataset of real user metrics that assess the overall performance and user-friendliness of a website. In addition to other key indicators, it includes the three Core Web Vitals that Google uses in its search ranking algorithm.

Understanding the Chrome User Experience Report can help you improve your SEO rankings and page load times. You can also use it to compare your website to those of your competitors.

· 9 min read

Real-user metrics are aggregated across many different website visitors using different devices. In contrast, to run a lab test you need to select a single test device. That's the case both when testing locally in Chrome DevTools and when using a dedicated performance tool.

Discrepancies between lab and field data are incredibly common. This can be confusing: what data should you believe, and what are the best device and network settings to use when running tests?

The device configuration you should use depends on what your goals are. This guide explores different options and explains their pros and cons.

· Updated on · 13 min read

Server-side rendering (SSR) addresses the performance and search engine optimization issues of single-page JavaScript applications. In contrast to client-side rendering, it generates static content on the server before sending it over to the user’s browser.

Server-side rendering improves site speed and results in better Core Web Vitals scores. However, sometimes it can be difficult to implement and might also increase First Input Delay.

In this article, we’ll look into server-side rendering in detail. We’ll see how it works, what problems it solves, how it compares to client-side rendering, and what pros and cons it comes with.

· Updated on · 4 min read

In June 2021, Google started using Core Web Vitals as a search result ranking factor. The Core Web Vitals are a set of three user experience metrics: Largest Contentful Paint, Interaction to Next Paint and Cumulative Layout Shift.

For each of these metrics, Google defined thresholds that websites have to meet in order to get SEO benefits. A website that doesn't pass the Core Web Vitals can drop in search rankings.

This article looks into which of these metrics is hardest to pass and causes the most problems for websites.

· Updated on · 8 min read

Lab-based performance tests often give different results from data that's collected from real users. This article explains the differences between these two ways to measure site speed and how they lead to different test results.

We'll focus on Lighthouse and the Chrome User Experience report, but note that there are many other ways to collect lab or field data.

· Updated on · 11 min read

The Chrome DevTools Performance tab is packed full of features that let you audit page performance in depth. You can use it to test both the initial load of your website as well as how quickly it responds to user input, as measured by Google's Interaction to Next Paint metric.

This article explains how to use the Performance tab to profile your site and interpret the results.

· Updated on · 5 min read

Preload <link> tags are a type of browser resource hint. They tell the browser to start downloading a file before they would have been discovered otherwise.

You can use preload tags to make your site load faster, but when used incorrectly they can also slow it down. This article highlights common mistakes when using preload hints, and explains how to avoid them.

· 11 min read

Site builders let you create your own website without writing any code, but the websites they generate aren't always fast. Slow page load times not only affect the experience of your visitors, but can also hurt SEO.

I built a similar website using 14 different website builders and tested their site speed. This post first presents the overall results and then looks at each website maker in detail.

· 9 min read

Creating a web performance team is essential for many online businesses. Improving web performance for the long term requires a culture that understands the value of performance and treats it as a priority.

Setting up a team comes with a variety of challenges, many of them depending on your company and its culture. This post guides you through some of these difficulties.

· 5 min read

Web performance metrics always vary somewhat between tests. This variability will be lower for simple static sites, and higher for complex dynamic content that changes every time the page is loaded.

One way to reduce variability in recorded metrics is to run each test several times and only save the average result.

This article will look at three different websites and investigate how much running tests 1, 3, 5, or 7 times reduces variability.

· 16 min read

Nearly every website uses JavaScript, so JavaScript performance is a growing topic in modern front-end development. In this post we'll introduce common performance pitfalls and discuss how to detect and avoid them.

We'll focus on JavaScript execution and other CPU processing that results from it. Check out our guide to Performant front-end architecture to learn more about structuring your app and prioritizing different types of resources.

JavaScript performance is important for the Interaction to Next Paint.

· 11 min read

A story on Hacker News recently argued that webpage speeds haven't improved, even as internet speeds have gone up.

This article explains why that conclusion can't be drawn from the original data.

· 10 min read

I interviewed OpenAI's GPT-3 on how to measure and improve website performance.

This article contains the interview, additional performance tips from GPT-3, and a guide to using GPT-3 on AIDungeon. I added notes to the interview when I thought GPT-3 got something wrong.

· 3 min read

Browsers can set the Save-Data: on header to indicate that a user is on a connection that's slow or has high data costs. Websites can then adjust their responses to take that into account.

How many websites have added support for this header? We tested the homepages of 1092 sites and found 4 where the Save Data header had a noticeable impact (~0.4%).

· 13 min read

This post describes some techniques to make front-end apps load faster and provide a good user experience.

We'll look at the overall architecture of the front-end. How can you load essential resources first, and maximize the probability that the resources are already in the cache?

· 5 min read

Older browsers don’t support many of the modern features that have been added to JavaScript, such as the array spread operator and the Object.entries method. To support older browsers while still taking advantage of these modern features, you need a compilation step that transforms the cutting edge JavaScript in your codebase to production code that works in all browsers.

Babel is the most popular tool used to do this transformation. The env preset allows you to transpile JavaScript to be compatible with a list of browsers you wish to support. This article will discuss the effects on compiled JavaScript file size when changing which browsers you support in Babel.

· 4 min read

Splitting your Angular app into several smaller bundles can make your site faster by reducing download and execution times. Instead of loading all code upfront it's fetched lazily when needed.

Most guides to lazy loading Angular modules use Angular's RouterModule and the loadChildren property to load code when the user first navigates to a certain page. But that means you can't lazy load code if whether the code is needed doesn't depend on a route change.

This article will explain how to lazy load Angular feature modules independently of the router.

· Updated on · 7 min read

React has gained significant popularity as a library for building UIs on the web. One of the main attractors to the library is its impressive browser performance, thanks to its implementation of a virtual DOM.

When working on small projects, you shouldn’t run into many issues. However, larger projects will typically have complex UI components, process more data, and generally have more moving parts. All of these factors can impact the performance of your app.

This article will help you understand what tools you have at your disposal to measure React performance. This can help you optimize Core Web Vitals metrics like Interaction to Next Paint.

· Updated on · 2 min read

Page speed testing tools collect a range of general-purpose performance metrics when loading a website. For example, they collect data on Core Web Vitals metrics like the Largest Contentful Paint or on the download size of the web page.

However, these metrics aren't tailored to the needs of your users. If you build a chat app the most important thing might be that messages are rendered quickly, even if the user can't send messages yet. For a game you might want to wait until all graphical assets are loaded, but not worry too much about the soundtrack being ready.

· 4 min read

Bundle splitting allows you to delay loading resources until they are actually needed. And Webpack and React make it surprisingly easy!

In this article we'll take a React component that's not needed on every page and move it from the main bundle into a separate bundle that can be lazy loaded.

· Updated on · 5 min read

It's easy to keep adding new packages and lose track of the size of your Webpack, Parcel, or Rollup bundle. But large JavaScript files slow down your page not just because they take longer to download, but also because more time is spent parsing, compiling, and executing JavaScript code.

This article outlines some tips and strategies to avoid these performance problems by reducing the size of your JavaScript bundles. Reducing your bundle size can help your website load slower and improve Core Web Vitals metrics like Interaction to Next Paint.