The async and defer attributes exist to help you make your website load faster. This article explains what these attributes do and when you should use them.

The Cumulative Layout Shift (CLS) metric measures how much content moves around on a web page after rendering.

However, sometimes real users experience layout shifts that can’t easily be replicated in lab-based test results. This article looks at why this happens and what you can do to identify and fix these layout shifts.

Browsers load a website by requesting resources from a server. Each request has a different priority that determines when resources are allocated to loading the file and how quickly the resource is loaded.

This article looks at why resource priorities matter and what you can do to optimize them and make your website faster.

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.

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.

Earlier this month Google released the CrUX History API. CrUX is the Chrome User Experience Report which provides real-user page speed metrics for millions of websites. The History API allows us to see how the speed of a website has changed over time.

This article explains how you can use the API to look up page speed data for a website.

PageSpeed Insights is a free tool that Google offers to website operators. It automatically analyses your website, focusing on page load time.

This article will look at how reliable PageSpeed Insights data is and what role it plays for SEO.

The web works by clients requesting resources from servers using the HTTP protocol. Server connections are needed so that data is transferred reliably and securely.

This article will look at how browsers create connections to servers on the web, the network round trips that are needed to create a connection, and how all of this impacts page speed.

What happens when you open a web page in your browser? How is content loaded from the internet and displayed to the user?

This article takes a look at how resources are loaded using the HTTP protocol and how they come together to form a web page. We’ll also take a look at what this means for how long it takes to load a website.

The way we measure and optimize website speed is always changing. New web standards are introduced (and eventually widely supported), new tools are developed, and new metrics suggested.

This article takes a look at some of the ways that the web performance landscape changed in 2022.

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.

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.

The CSS @import rule can be a convenient way to load additional stylesheets. But it can also make resources on your website render more slowly, causing your website to take longer to render.

Loading a new web page takes time, but about 20% of mobile navigations are actually initiated by the browser Back and Forward buttons.

The back/forward cache speeds up these navigation by restoring previously loaded page content.

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.

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.

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.

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.

Render blocking websites can slow down your website and increase Core Web Vitals metrics like the Largest Contentful Paint.

This article explains the performance impact of render blocking resources and what you can do to solve these issues.

This article explains what Lighthouse simulated throttling is and how it can lead to inaccurate site speed metrics. We'll also look at alternative ways to test your site speed.

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

Site 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.

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.

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.

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.

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.

Fade-in animations make a website look more polished, but can also cause a slower Largest Contentful Paint. That's because of how elements with an opacity of 0 are counted when measuring LCP.

This article explains why fade-in animations can delay LCP and what you can do about it.

This article looks at how the anti-flicker snippets used by A/B testing tools like Optimizely and Adobe Target can negatively impact web performance.

Peter Suhm recently wrote about how his form builder Reform uses Reform for their own business.

In the same spirit, this post takes a look at how we use DebugBear to monitor site speed internally.

Web performance has become a more important topic for Technical SEOs since Google has started using the Core Web Vitals metrics as part of its search result rankings.

This article looks at some of the tools you can use to measure performance and explains the advantages each tool brings.

Performance budgets help your business stay on top of web performance, ensure a good user experience, and optimize SEO.

This article explains how performance budgets work and how you can implement them in practice.

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, Cumulative Layout Shift, and First Input Delay.

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.

Lighthouse tests usually perform a non-interactive cold load. However, real users interact with the page, and load pages again with some resources already cached. User flow support in Lighthouse lets you test sites beyond the initial page load.

Chrome is adding a new Recorder tab to the DevTools, letting users record and replay user journeys.

The Core Web Vitals are a set of user experience metrics that Google uses as part of it's search result rankings. But how easy is it to game them?

I was recently looked at the speed of the Waitrose homepage and was surprised by its massive uncompressed HTML document size: 3.5 MB.

This article takes a look at how images make the document so big and asks if this reduces site speed.

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.

A Content Security Policy (CSP) lets developers improve security by putting restrictions on what resources can be loaded on a page. For example, a CSP can only allow requests from certain domains, or block inline script tags.

This report investigates how 1000 of the most popular Chrome extensions impact browser performance and end-user experience.

Google released Lighthouse version 8 this week. This article looks at how the Performance score and Lighthouse report have changed compared to version 7.

I recently made some performance improvements to the DebugBear homepage. This article explains how to use the loading="lazy" HTML attribute to make your website render more quickly.

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.

Google will start using Core Web Vitals as part of their rankings in May 2021. This page goes through common questions about Core Web Vitals and how they affect rankings.

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.

Re-rendering React components unnecessarily can slow down your app and make the UI feel unresponsive. This makes the user experience worse and causes a higher Interaction to Next Paint metric.

This article explains how to update components only when necessary, and how to avoid common causes of unintentional re-renders.

Chrome's developer tools provide a lot of information on what's slowing down your site and how to make it faster. This article explains how to use the DevTools Network tab to debug performance issues.

Opening a page in the Google Cloud Console always takes a long time.

Here are some metrics I collected on a high-end 2018 MacBook Pro on a UK-based Gigabit internet connection.

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.

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.

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.

Lighthouse automatically evaluates the performance, accessibility, and technical SEO of your website. But did you know that you can add your own custom tests as well?

Memory leaks can hurt the performance of your website and even crash your page, especially on mobile devices.

In this article we'll explain how to debug JavaScript memory issues and look at some common problems.

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.

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.

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.

For my report on extension performance I first needed a list of Chrome extensions. This post takes a deeper look at the full list, looking at the most popular extensions, extension ratings, paid extensions, and top extension authors.

Update: read the 2021 Chrome Extension Performance Report

I tested how the 1000 most popular Chrome extensions affect browser performance.

The main metrics I'll consider are CPU consumption, memory consumption, and whether the extension makes pages render more slowly.

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%).

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?

Sometimes DebugBear customers notice that a file isn't always served compressed. What's the cause of that, and is there anything that can be done?

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.

This article compares two approaches to monitoring website performance: lab-based monitoring and collecting field data from real users.

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.

This article explains why you might see score and metric differences between PageSpeed Insights and other tools.

Live chat widgets are a quick and easy way to contact support. However, adding live chat to your website will impact its performance, as the browser needs to download and run the code to display the widget.

I tested 21 different chat widgets to see how they impact page performance.

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.

Resource Hints can improve page performance by giving the browser extra information that it can't infer from the document HTML. For example, you can tell the browser to preload certain network resources that the page will need to render later on.

The Element Timing API lets you track when images appear on the screen.

While this could be done with JavaScript, the Element Timing API is more accurate and doesn't require blocking JavaScript execution.

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.

Network throttling can simulate how users on a slow connection would experience loading a website. There are different ways to simulate a slower connection, and you'll see different results depending on which one you use.

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.

I tested 26 Chrome extensions to measure their impact on CPU consumption, page download size, and user experience.

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.