DebugBear Web Performance Blog
Lighthouse tests usually perform a non-interactive cold load. However, real users interact with the page, and load pages again with some resources already cach…
Chrome is adding a new Recorder tab to the DevTools, letting users record and replay user journeys. This feature will be included in Chrome 97, due for stable…
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 created …
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 loo…
Lab-based performance tests often give different results from data that's collected from real users. This article explains the differences between these two wa…
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…
This report investigates how 1000 of the most popular Chrome extensions impact browser performance and end-user experience. Key findings of the 2021 report: …
Google released Lighthouse version 8 this week. This article looks at how the Performance score and Lighthouse report have changed compared to version 7. The …
I recently made some performance improvements to the DebugBear homepage. This article explains how to use the `loading="lazy"` HTML attribute to make your webs…
The Chrome DevTools Performance tab is packed full of features that let you audit page performance in depth. This article explains how to use it to profile you…
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 affec…
Preload `<link>` tags are a type of browser resource hint, telling the browser to start downloading a file with a high priority. You can use preload tags to m…
Re-rendering React components unnecessarily can slow down your app and make the UI feel unresponsive. This article explains how to update components only when…
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…
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 in…
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…
Creating a web performance team is essential for many online businesses. Improving web performance for the long term requires a culture that understands the va…
Web performance metrics always vary somewhat between tests. This variability will be lower for simple static sites, and higher for complex dynamic content that…
Lighthouse automatically evaluates the performance, accessibility, and technical SEO of your website. But did you know that you can add your own custom tests a…
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 JavaS…
Nearly every website uses JavaScript, so JavaScript performance is a growing topic in modern front-end development. In this post we'll introduce common perform…
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 c…
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, a…
How quickly your server responds to requests has a significant effect on user experience. This article will look at how to identify the cause of slow responses…
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 …
**Update: read the 2021 Chrome Extension Performance Report** I tested how the 1000 most popular Chrome extensions affect browser performance. The main metr…
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 respo…
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…
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? I'll try an…
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.…
This article compares two approaches to monitoring website performance: lab-based monitoring and collecting field data from real users. Lab-based monitoring i…
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…
This article explains why you might see score and metric differences between PageSpeed Insights and other tools. You can run Lighthouse in many different envi…
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 d…
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 performan…
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 b…
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 …
Browsers collect a bunch of general-purpose performance metrics when loading a page. For example, you can check when the Load event fired or use the Performanc…
Network throttling can simulate how users on a slow connection would experience loading a website. There are different ways to simulate a slower connection, an…
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 …
I tested 26 Chrome extensions to measure their impact on CPU consumption, page download size, and user experience. Key findings: - Grammarly and Honey are su…
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 …
More
I created a similar website in 11 different website builders and tested each site with Lighthouse.