How fast is the average website, and how much does website speed vary? Are websites getting faster? And where in the world do pages load faster or slower? This report looks into these questions based on the Google CrUX dataset which collects page speed data for millions of websites from real Chrome users. How long does it take to show the main page content?​ The average website takes 1.3 seconds to load the main page content for an average visit. To measure this we’re using the Largest Contentful Paint (LCP) metric which identifies how soon after opening a page the largest content element beco ..read more

Making your website faster can improve user experience, reduce the bounce rate, boost organic search engine rankings, and increase conversions. In this article, we have collected 10 best practices that can help you diagnose page speed issues and make your website faster. You don’t need to implement them all at once. Rather, use it as a high-level blueprint and start with choosing an area you want to focus on (e.g. hosting, caching, code refactoring, image optimization, etc.), then move on to the next one. Even putting just some of the below recommendations into practice will help you make your ..read more

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. When does the Load event fire?​ The window load event in JavaScript fires when all immediate dependent resources on a page have loaded. This includes: CSS stylesheets JavaScript code (whether async or not) Images Iframes The ..read more

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. What different types of navigations can happen in the browser?​ There are four different types of page navigations: navigate: a standard navigation triggered by typing in a URL or clicking on a link reload: the visitor clicked the "Reload this page" button in the browser back_forward: the visitor used ..read more

Interaction to Next Pain (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. How to measure INP for a page interaction in Chrome DevTools​ You can use the DevTools Performance tab to measure the Interaction to Next Paint metric. Op ..read more

Early Hints are a browser feature that allows you to start loading critical page resources as early as possible. In contrast to normal resource hints this can happen even before the server starts responding with the contents of the HTML document. Learn how this works and how you can use it to optimize your page load time. What are Early Hints?​ When a browser requests a file from a server the responds with a status code, headers, and response body. If the request went well a 200 OK status code is returned. If the server can't find the file it will return a 404 Not Found status. But servers can ..read more

Soft navigation reporting is an experimental feature of Google’s Web Vitals initiative. It allows you to measure Core Web Vitals and other metrics for dynamic URLs in single page applications. In this tutorial, we’ll look into how you can report Core Web Vitals from a React application to the console. To learn more about soft navigation reporting and Core Web Vitals, check out our article on the subject which discusses the theoretical background and the details of the technical implementation. Prerequisites​ To get started with setting up soft navigation reporting in a React application, you’l ..read more

A lot has been going on in the web performance space, especially since the introduction of Google's Core Web Vitals. This article looks at changes to how we measure page speed and how new web platform features can help you keep your website fast. You can share this article on Twitter or LinkedIn. Interaction to Next Paint is replacing First Input Delay​ In 2022 Google introduced the new experimental Interaction to Next Paint (INP) metric to measure how quickly websites respond to user interactions. In May 2023, Google announced that INP will replace the older First Input Delay metric as a Core ..read more

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. What is Suspense?​ Suspense is a React feature that allows developers to display a temporary or "fallback" UI while waiting for data to load. Once the data is loaded the component that needed the data is rendered. The Suspense component receives two props, children a ..read more

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 p ..read more