Google is introducing new insight audits in DevTools to help optimize Core Web Vitals and highlight performance issues. After running a performance profile, you are able to gain information on how to improve Largest Contentful Paint (LCP) request discovery.
Nobody likes waiting for websites to load. But what causes slow website performance, and what can you do about it?
In this article we'll look at 12 things you can do on your website to make it load faster. But first, let's take a look at what website performance is all about and how it's measured.
Looking for ways to reduce HTML file size on your website to improve web performance and Core Web Vitals?
This article outlines five best practices you can implement, explains the key differences between minification and compression, and shows how you can ensure long-term good results.
Forced reflows are a common website performance problem that can slow down rendering and cause slow interactions.
This article explain what forced reflows are, how to detect them, and what you can do fix them.
A fast website is important to get more customers for your WooCommerce store.
In this article we explain why website performance is important for e-commerce sites, explain common challenges when optimizing WooCommerce stores, and what you can do to speed up your WooCommerce site.
Properly size images is a Lighthouse performance audit that detects unnecessarily large images on a website and measures how much longer it will take for the page to load. If this additional wait time passes a certain threshold, the Properly size images audit will fail.
But, there's no reason to worry.
In this post, we'll see how to properly size images to pass the audit, make your website faster, and improve your Core Web Vitals.
Want custom styles in your HTML select box instead of just text? Traditionally you've needed a JavaScript library for this.
However, the latest version of Chrome now supports native customizable select boxes and dropdowns. Find out how it works and why it's useful.
Google is standardizing some of its performance advice between Lighthouse and Chrome DevTools. Find out how you can see these new performance insights in both tools.
In this article, we'll explore how Chrome determines the request priority for images. We will explain how prioritization works and what optimization techniques you can use to ensure important images load faster.
Many websites display cookie banners when visitors first arrive. As a result, website performance for the first visit is often impacted.
This article looks at different ways that cookie consent popups impact user experience and Core Web Vitals.
Encoding images at with an efficient image format at the right quality level can give a performance boost to your website.
In this article, we will explore image compression types and their effect on page speed, showing how optimized images can deliver high quality content sooner to the visitor.
The "Avoid serving legacy JavaScript to modern browsers" Lighthouse audit checks if your website is serving legacy JavaScript to modern browsers.
When visitors return to your website, you can make their experience lightning-fast by properly caching your static assets. This guide explains what the Serve static assets with an efficient cache policy Lighthouse audit checks for and how to fix it.
Have you ever loaded a page with tons of content and noticed how slow it feels? The browser has to process everything at once - even the content you can't see yet! That's where the content-visibility property comes in. It's a CSS feature that tells browsers to skip rendering off-screen content until it's needed.
While we can defer offscreen images using the loading HTML attribute, lazy loading background images takes a bit more work. Since they are added by CSS rather than HTML, we need to use JavaScript to detect when offscreen background images are about to enter the user's viewport.
It would be nice to have a native background-loading: lazy property in CSS as well, but unfortunately, it doesn't currently exist. Luckily, the IntersectionObserver API provides a performance-friendly solution to lazy load background images without having to manually add JavaScript event listeners and perform viewport calculations, or use a third-party library.
Eliminate render-blocking resources is an important Lighthouse (LH) performance audit that many WordPress sites fail to pass. Render-blocking resources hurt web performance because they congest the critical rendering path and prevent the page from starting the rendering process until they're fully loaded.
While it's not possible to fully eliminate render-blocking resources (e.g., you'll still need to load critical CSS and JavaScript early in the rendering process), you can reduce their number and size, which will help you pass the Lighthouse audit, too.
We covered how to eliminate render-blocking resources in general before — check it out to better understand how render-blocking resources work and how they impact web performance metrics such as Core Web Vitals.
This article is specifically about how to eliminate render-blocking resources on a WordPress site.
Maybe you’ve run into one (or all) of these as a developer:
The consequences of poor performance are well-documented: every extra second of load time increases bounce rates and lowers conversion.
With users accessing sites from all kinds of devices and network conditions, optimizing performance is no longer optional.
This article will tackle common web performance issues and how to address them in Next.js.
PageSpeed Insights is possibly the most widely-used website performance tool. Learn how you can use it to test your website, how to interpret the difference pieces of data, and what you can do to make your website fast.
In this article, we will explore what data URLs are and when they can be useful. We’ll examine how embedding images directly in HTML and CSS can impact website performance by increasing file size increasing page load time.
Most websites rely on third-party scripts in some way. While they are easy to add, third-party code often has a negative impact on page performance.
In this article we explain what third-party code is, how you can identify it on your website, and what you can do to fix performance issues caused by third parties.
Browser developer tools keep getting better every year, making it easier to build fast, responsive websites. Chrome's latest DevTools update brings some useful features that improve how you debug and optimize your web apps.
Let's explore the most exciting new Chrome DevTools features that will help you build better websites in 2025.
Text compression is a method that speeds up the download of resources like HTML, CSS, and JavaScript files on your website.
In some instances, compression lets you reduce file sizes by around 70%, resulting in faster page loads and a better user experience.
In this guide, we'll show you how to enable text compression for your own website and check your current compression status.
Prefetching is supposed to improve performance, but it can sometimes delay how quickly your website loads.
Learn what the advantage of resource prefetching is, how it can cause performance issues, and what you can do about it.
Today, we have opened DebugBear's five-star web performance kitchen to the public to show you how to speed up your WordPress site using our in-house recipe.
With WordPress, you can create fully functional and fast websites by mixing a handful of ingredients and following a few best practices.
By popular request, here's how to create our delicious and nutritious WordPress Performance Plate.
The network bandwidth that's available to a website visitor impacts how quickly the a web page loads for them.
In this article we'll look at how bandwidth impacts page performance and what you can do to use the available bandwidth more effectively.
The developer tools in Chrome let you inspect website content, view what files are loaded when visiting a page, generate detailed performance reports, and more.
This tutorial provides an introduction to Chrome DevTools and then takes a look at some more advanced features.
The Largest Contentful Paint metric consists of several different components. In this article we'll take a look at the Resource Load Duration subpart and explore different ways to reduce it.
In this article, we will explore how preloading fonts can improve Core Web Vitals. We’ll look at how font loading impacts performance metrics like Largest Contentful Paint (LCP) and Cumulative Layout Shift (CLS), and how preloading fonts correctly ensures that text appears faster.
Identifying the most critical resources and loading them early is one way to make your website load faster.
Understand the role of the critical rendering path in user experience, and how you can shorten this path to display the most important content early.
In this article, we will take a look at how font changes can impact Core Web Vitals. As well as looking at some techniques which can help ensure that text remains visible during the web font load.
Wondering what you need to do to optimize your website performance?
There's many lists of page speed tips online, but in this article I'll explain why an approach based on automated tooling and high-level page load analysis is often a more effective path to take.
The Core Web Vitals metrics are an important way to check that visitors coming to your website have a good experience.
In this guide we'll take you all the way from how to start your audit to producing a detailed report full of actionable advice. Whether you're working for a brand, work with clients in an agency, or work as a freelancer: this guide will help help you conduct a great Core Web Vitals audit.
The Cumulative Layout Shift metric is one of Google's three Core Web Vitals. The web vitals assess user experience on a website, and are also used as a ranking factor.
But how do you actually fix large layout shifts on your website? In this article we'll look at three real-world pages with poor CLS, investigate the cause of the shift, and identify a fix.
In this article, we'll explore the impact of unused CSS on website performance. Excess CSS increases file size and processing time. By identifying and reducing unused CSS, you can enhance your site's performance and provide a smoother browsing experience for your visitors.
Network connection latency has a big impact on how a users experiences browsing the web. High-latency is likely to result in a poor visitor experience.
Learn what latency is, how network round trip time impacts page speed, and how Content Delivery Networks can speed up your website.
How fast are typical website page load times in 2025? We took a look at data from Google's Chrome User Experience Report (CrUX).
In this article, we'll explore website redirects and their impact on performance. Redirects add steps that can delay page loading, affecting user experience and Core Web Vitals. Optimizing redirects ensures faster browsing for your visitors.
A fast website is important to make users happy and to improve Google rankings.
But if you're getting a poor Performance score on PageSpeed Insights, maybe that's just fine? Sometimes at least.
Lighthouse runs tests on a relatively slow throttled connection, so typically real user field data is worse than what's reported in lab tests.
However, sometimes it's the opposite and real user face performance problems on a superficially fast site. This article looks at a number of reasons why TTFB values differ between lab and field measurements.
In this article, we'll explore how preloading your Largest Contentful Paint (LCP) image can enhance your page's performance.
Preloading the LCP image ensures the browser prioritizes loading the image early. This reduces delays and delivers a faster experience for your visitors, as well as improving your Core Web Vitals score.
Reduce initial server response time is one of Lighthouse's performance audits. It evaluates the time it takes for the browser to receive the first byte of the root document (usually the main HTML file) from the server, excluding the connection setup time.
To pass the Reduce initial server response time audit, you'll mainly need to focus on your hosting environment, caching strategy, and backend performance optimization.
In this article, we'll look into what initial server response time is exactly, how it hurts web performance if it becomes too long, and how you can pass this Lighthouse audit.
Google CrUX data impacts search rankings, but it's not always clear how to read the data. Data is reported in different tools covering different time periods and website URLs.
This article takes a look at different CrUX data sources and how to interpret the data from them.
Vue DevTools is specifically designed to take the Vue development experience to the next level. It’s a powerful, versatile, and user-friendly tool that simplifies the process of building, debugging, and optimizing Vue applications. Whether you’re a seasoned developer or just getting started with Vue, this tool can significantly enhance your workflow and productivity.
In this article, we’ll explore why CPU throttling is a valuable tool for performance testing and examine the differences in how CPU throttling is applied across various tools.
The DOMContentLoaded event has been around for a long time and has often been used as a web performance metric. However today it has mostly been replaced by more modern user-focussed metrics like the Core Web Vitals.
In this article we take a look at the DOMContentLoaded event, when it fires, how to measure it, and whether you should still be relying on it today.
This has been a good year for web performance. We've seen some exciting new features and updates that have the potential to make a big impact on how we build and optimize websites.
Here are our favorite web performance features and updates from 2024:
Content Delivery Networks (CDNs) are a key part of modern web infrastructure, helping to speed up the delivery of content to users around the world.
This post looks at the basics of caching on a CDN, how it differs from browser caching, and how it can improve your website's performance.
In this article, we’ll explore how Resource Load Delay can impact a page’s Largest Contentful Paint (LCP) score. Improving Resource Load Delay allows the browser to identify the LCP image as early as possible, reducing unnecessary wait time for the visitor.
Lighthouse (LH) is a free, open-source website analysis tool from Google that allows you to generate a report, which includes a list of audits that evaluate how well a web page scores on various signals.
In this post, we'll look into what Lighthouse audits are, why you often get different results for the same performance audit, and how you can generate LH reports in different environments.
The Largest Contentful Paint (LCP) can caused by various elements such as text, videos, and images. Each content type presents unique optimization challenges.
Background images styled with CSS are eligible to be the LCP element. When not optimized, these images can delay rendering and impact your Core Web Vitals score.
This article explores how to detect LCP elements that are background images. As well as optimization strategies.
Caching is the process of storing copies of files in a cache, or temporary storage location, so that they can be accessed more quickly. When a browser caches a file, it stores a copy of that file on the user's device. This means that the next time the user visits the same page, the browser can load the file from the cache instead of downloading it again from the server.
Avoid enormous network payloads is a Lighthouse audit that refers to the total size of your frontend files transferred over the network. To pass the audit, you need to keep this number below a certain threshold.
On modern websites and web applications, network payloads tend to grow fast. As a huge payload can be caused by various things, you'll need to implement a comprehensive web performance optimization workflow, including identifying your unique issues, visualizing HTML and CSS files, compressing and minifying files, reducing font and image weight, and more.
In this article, we'll look into this workflow in detail — but first, let's see what network payloads are exactly and when they become "enormous".
When it comes to modern web development, delivering a fast and seamless user experience is no longer optional—it's a must. Nuxt, a powerful framework built on top of Vue.js, offers a rich ecosystem for developing performant and scalable web applications.
However, to truly unlock its potential, developers must focus on fine-tuning performance at every level, from server-side rendering to client-side optimization. This article dives into the key strategies and best practices for optimizing performance in Nuxt applications.
JavaScript execution time plays a crucial role in page load and page performance. The main thread being busy will result in slower rendering times. As well as this, user interactions can become unresponsive.
In this article we explore how monitoring JavaScript execution time helps identify opportunities for optimization.
JavaScript plays a key role in website performance, affecting load speed and user experience. Regular testing catches regressions early, preventing slowdowns or interaction issues.
This article covers how to use lab tests and Real User Monitoring (RUM) to monitor and improve JavaScript performance. Detailed performance data can help developers identify issues and fix regressions for a better user experience.
This post introduces View Transitions: A modern web platform feature to improve the user experience and perceived performance of a website.
Vue is built to handle most typical use cases efficiently without requiring a lot of manual tweaking. But sometimes, you’ll hit situations that need a bit more fine-tuning. In this article, we’ll go over the key things to keep an eye on for optimizing performance in a Vue app.
Recording a performance trace with Chrome DevTools provides you a lot of data about your website speed.
But the performance recordings can also be confusing and full of data. The new annotations feature helps you highlight interesting observations, raise questions, and provide explanations. That way you can easily share your thoughts with other team members.
A fast website provides the best user experience. What if website navigations could be instant?
In this article we'll take a look at what an instant navigation is and how to achieve it.
Google Chrome Canary DevTools now includes enhanced layout shift debugging tools that make it easier to identify the causes of layout shifts on your page. This feature is available in Chrome 132 and later.
A layout shift occurs when a visible element on the page changes position unexpectedly. Chrome DevTools has had varying sets of features for layout shift debugging over the years, but the new tools provide a more intuitive view of layout shifts on your page.
On October 1, 2024, ConvertKit launched its bold new brand identity and Kit.com website, marking the finale of its four-month-long Rebranding in Public journey. While the visual design is stunning, we were curious about how the renewed brand measures up for web performance, an essential yet frequently overlooked aspect of user experience.
In Kit's launch video, Senior Software Engineer Mark Miller described the rebranding process as an opportunity for spring cleaning their code base. So we've spent the past few weeks carefully testing their revamped web presence to see exactly what this cleanup achieved in terms of Web Vitals and other web performance signals.
Google’s Core Web Vitals are the standard for measuring a website’s performance. However, not all browsers support these metrics. In this article, we clarify which metrics are available across the most popular browsers.
Chaining critical requests can have a significant impact on your website's performance and impact page load metrics such as First Contentful Paint (FCP) and Largest Contentful Paint (LCP).
The browser having to wait for a resource to finish loading before being able to load the next request leads to content rendering slower. This can be a frustrating experience for the user and affect SEO rankings.
In this article, we'll explore strategies to optimize critical requests to improve page load times.
Vue.js was developed with performance in mind and each new feature added to the core framework is thoroughly checked for that particular aspect. However, our applications could become slower at times due to the continuous development and extending the initial project with more and more features.
There are many ways we can make our Vue apps faster and we will be releasing new articles about that but in this article we would like to focus on one particular approach - server side rendering (SSR).
But, to understand how server side rendering can help make our Vue app more performant, first it would be beneficial to understand how Vue and SSR work under the hood.
Testing your website with JavaScript disabled can help you provide a better user experience.
In this article we'll explain why testing your website without JavaScript is a good idea and explain different approaches you can take to test your website with JavaScript disabled.
Shared compression dictionaries introduce a new way to speed up your website by reducing the amount of data that needs to be transferred for repeated visits.
In this article, we'll take a look at how this technology works and how you can start using it on your website.
In this article, we'll explore how Element Render Delay might be affecting a page's Largest Contentful Paint score.
Google launched a new Core Web Vitals tool called CrUX Vis today!
While Google has provided historical CrUX data via an API for over a year, CrUX Vis provides an easy-to-access tool to access this historical Core Web Vitals data.
Cloudflare has introduced a new performance feature: Speed Brain. This reduces page load latency by anticipating user behavior and prefetching content before it's needed.
This post explores the technology behind Speed Brain, its impact on web performance, and how you can use it on your website.
Deferring offscreen images is a web performance optimization technique that can help you improve user experience and Core Web Vitals on your site. Also known as lazy loading, it downloads out-of-view images only when they're about to appear in the user's viewport. It's especially important to defer offscreen images on image-heavy websites.
In the past, lazy loading was a complicated process that involved either the manual setup of JavaScript event listeners along with viewport calculations or the integration of a third-party library. However, with the introduction of the loading HTML attribute, the situation has improved a lot, as it provides a performance-friendly way to defer offscreen background images.
JavaScript hydration is a web development technique that's often used when building single page applications.
This article explains what JavaScript hydration is, why it's necessary, and how it can impact website performance.
Data for the Largest Contentful Paint metric often varies significantly between lab-based synthetic tests and real user data.
In this article we'll take a look at what causes these discrepancies and how to interpret them.
Videos present a special challenge for achieving a good Largest Contentful Paint score, as they take longer to download compared to other types of content. In this article, we'll cover everything you need to know to optimize an LCP video element.
The protocol used to transfer data between a browser and a server plays a significant role in page speed. HTTP/1.1 was the standard for years, but HTTP/2 has improved data delivery.
In this article, we'll explore the differences between both protocols. We'll show practical examples of the advantages of HTTP/2, leading to faster and more efficient websites.
CrUX and RUM data are two types of page speed measurements that are both collected from real website visitors.
However, there are some important differences between them and you’ll often see that they show slightly different values for the same website.
We’ll take a deeper look at the differences between the two metrics, how each data type is collected, and what their respective advantages are.
Font performance optimization is a set of web development techniques that make fonts load faster and render more smoothly. They involve practices such as thoughtful font selection, the use of performant font formats, self-hosting, optimized @font-face declarations, font display strategies, and more.
Optimizing the fonts displayed on your website comes with many web performance advantages, including faster page load times, improved user experience, and better results for Core Web Vitals and other performance metrics.
On the other hand, improving font performance often comes at the expense of aesthetics and creativity (i.e. you’ll need to be careful about using custom typography), which can make it harder to establish a distinguishable brand identity.
Checking your Core Web Vitals as a one-off is not enough, you need to monitor them continuously to ensure your site is performing well for all users. This guide teaches you how to use the web-vitals.js library to monitor Core Web Vitals for your real users.
'Reduce unused JavaScript' is a warning you'll encounter in Lighthouse-based web performance auditing tools, such as the local Lighthouse tool in Chrome DevTools, PageSpeed Insights, and DebugBear.
Unused JavaScript harms web performance because it slows down your page without providing any tangible benefits. It's like taking a bunch of clothes you won't need for a trip but still having to carry them around and paying a higher baggage fee on the plane.
To optimize your site for web performance and improve Core Web Vitals, you need to find a way to reduce unused JavaScript on your site. In this tutorial, we'll look into some hands-on techniques you can use to achieve this goal.
This guide covers some modern web performance features of Chrome DevTools, with a focus on the new Performance Panel features which helps you optimize Core Web Vitals and improve your general web performance.
Code minification is a fundamental technique for improving website performance. In this article we'll explain how code minification works, how it's different from text compression, and how you can set it up for your website.
Web performance is important for user experience and SEO. While manually running a PageSpeed Insights test is useful, integrating performance data into your workflows can help your optimization efforts. Enter the PageSpeed Insights API.
In this guide, you'll learn how to use the PageSpeed Insights API to automate performance analysis of your websites or web pages.
Unnecessary content re-renders can negatively impact your Largest Contentful Paint (LCP) metric, even if the user experience is unaffected.
In this article, we’ll examine how LCP element re-rendering during the initial page load can impact your metrics, how to detect if that’s happening, and what you can do to avoid it.
Interaction to Next Paint (INP) is a Core Web Vital metric that impacts Google search rankings. As web developers and website owners work to optimize their sites, some misconceptions about INP emerge.
This post addresses such misconceptions, and provides clear guidance on how INP works.
Interaction to Next Paint (INP), a Core Web Vitals metric, is key for measuring how quickly websites respond to user interactions.
This post explores what interactions are considered for INP - it's not always what you might expect!
Google’s Chrome Web Store provides a distribution channel for software that extends browser functionality and adds new features to popular websites.
In this post we’ll take a look at how many Chrome extensions there are, which ones are the most and least popular, and how different extensions are rated.
Google’s Interaction to Next Paint (INP) metric became one of the three Core Web Vitals in March 2024.
To improve INP, developers need to know what scripts are running during the page interaction and causing a delay. The new Long Animation Frames (LoAF) API provides this information.
However, sometimes the source URL will simply be reported as an empty string. This article explains why that happens and what you can do about it.
In the context of web performance, understanding how your website performs is important for your users, and your business.
This post explores some differences between synthetic monitoring and real user monitoring (RUM), helping you make an informed decision about your web performance strategy.
Website performance and reliability help businesses to succeed. Continuous website monitoring lets you catch issues before they impact your users. This post explores different types of website monitoring and what they are used for.
An excessively large Document Object Model (DOM) can significantly impact website performance. This article explains the importance of DOM size optimization and suggests strategies to resolve issues related to large DOMs.
The Fetch Priority API is a web technology that lets developers indicate the importance of a particular resource on a webpage. This functionality can be used to optimize the loading speed of a website.
However, when used incorrectly, fetchpriority can also have undesired effects that slow down your website.
This article explains how overusing fetch priority among resources can cause problems and how to instead use fetch priority correctly.
This post introduces speculation rules, a new web platform feature that allows developers to deliver instant page navigations after the initial page load.
This post explores how web fonts can cause layout shifts, negatively impacting your Core Web Vitals scores and user experience.
A lot goes into web page performance. One key factor is the resources that a page loads, such as scripts and stylesheets. Having too many resources, or having resources that are slow to download, can make for a poor user experience.
This post explains the effects that render-blocking scripts have on your web page, and how to detect such render-blocking scripts using DevTools and DebugBear - a website performance monitoring tool.
Chrome extensions can add useful functionality to the browser, but they can also slow down your browsing experience. We’ve tested the page speed impact of 5,000 Chrome extensions as part of our 2024 report on Chrome extension performance.
Find out what popular extensions increase CPU processing, how some extensions delay page load times, and what difference ad blockers can make.
This post introduces the scheduler.yield API and explains how you can use it to optimise the performance of your web applications. There are also interactive code demos you can follow along with.
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.
Google's Interaction to Next Paint (INP) metric measures how quickly a website responds to user input. In this article we'll discuss at how INP can vary depending on the loading progress of the website.
"Why are my pages loading so slowly?" is a question many of us frequently ask. Slow loading websites are one of the biggest issues on the web that hurts user experience, bounce and conversion rates, and SEO.
Luckily, there are many techniques you can use to fix slow loading websites, including improving the hosting environment, implementing caching, optimizing images and code, and others.
In this article, we'll look into how to make slow loading websites faster by following some hands-on recommendations.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
The Largest Contentful Paint is the Core Web Vitals metric that websites most often fail.
To make optimizing LCP easier Google has started to recommend breaking the metric down into individual components called subparts. By breaking LCP down into separate load stages you can more easily identify suitable optimizations.
Web performance browser APIs help developers understand what causes slow experiences for real users on their website. The proposed Long Animation Frames (LoAF) API surfaces debug data about long CPU tasks and unresponsive page interactions.
LoAF would be especially useful to debug Google new Core Web Vitals metric, Interaction to Next Paint.
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.
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.
When you open your website it probably just takes a couple of seconds for all the content to appear. To fast to really understand what's going on and how to optimize it.
Find out how you can use Chrome DevTools to load your website step by step and pause loading to inspect the page at each stage.
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.
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 a look 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.
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.
CSS stylesheets are one of the core technologies powering the web. This article explains why optimizing is important for page speed and what you can do to reduce CSS size. We'll also introduce the free CSS Size Analyzer.
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.
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.
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.
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.
'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.
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.
When developing a website optimizing web accessibility ensures that you don't limit the number of people who can use your site. An accessible website not only helps users with a visual or hearing impairment but also means your website can be used with the keyboard and on a wide range of devices.
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 network resources are used to load the file and how quickly the resource is loaded.
This article looks at why resource priorities matter and how optimizing them can 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.
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 file type is an often overlooked, but key aspect of image optimization. The importance of using performant yet high-quality images is also reflected by Lighthouse's Serve images in next-gen formats audit, which is one of its web performance signals designed to help developers and website owners improve user experience and web performance.
While serving images in next-gen formats is a huge opportunity to improve web performance, these new image formats are not always the best option. Sometimes you can be better off using other image file types. For example, the lossless versions of the WebP and AVIF formats have questionable performance results while lossy WebP and AVIF perform great.
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 resources 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.
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.
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 Interaction to Next Paint (INP).
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.
When running page speed tests using different tools you'll often find that the metrics they report don't match up exactly, or may even show significant discrepancies.
This article explains why you might see score and metric differences between PageSpeed Insights (PSI), Lighthouse, and other tools.
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, 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.
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.
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.
