DebugBear Web Performance Blog

Blowing up HTML size with responsive images 8 Sep 2021

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…

Why does Lighthouse lab data not match field data? 16 August 2021

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…

CSP error noise caused by Chrome extensions 30 July 2021

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…

How do Chrome extensions impact browser performance? 6 July 2021

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

What's new in Lighthouse 8.0? 5 Jun 2021

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 …

Optimizing page performance by lazy loading images 29 Apr 2021

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…

Profiling site speed with the Chrome DevTools Performance tab 23 Apr 2021

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…

Web Vitals FAQ 22 Mar 2021

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…

Common problems with rel="preload" 16 Mar 2021

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…

Optimizing React performance by preventing unnecessary re-renders 12 Feb 2021

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…

Debugging site speed with the Chrome DevTools Network tab 4 Jan 2021

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…

Why is the Google Cloud UI so slow? 9 Dec 2020

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…

Website builder performance review 19 Nov 2020

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 10 Nov 2020

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…

Reducing variability in web performance metrics 5 Nov 2020

Web performance metrics always vary somewhat between tests. This variability will be lower for simple static sites, and higher for complex dynamic content that…

Building custom Lighthouse audits 2 Nov 2020

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…

Debugging JavaScript memory leaks 15 Sep 2020

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…

Front-end JavaScript performance 9 Sep 2020

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…

Is the web getting slower? 24 Aug 2020

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…

GPT-3 on web performance 31 Jul 2020

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 to improve server response time (TTFB)? 8 Jul 2020

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…

Counting Chrome Extensions – Chrome Web Store Statistics 30 Jun 2020

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 …

2020 Chrome Extension Performance Report 15 Jun 2020

**Update: read the 2021 Chrome Extension Performance Report** I tested how the 1000 most popular Chrome extensions affect browser performance. The main metr…

How many websites support the Save-Data header? 9 Mar 2020

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…

Performant front-end architecture 10 Feb 2020

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…

What's causing intermittent gzip compression? 26 Jan 2020

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…

How does browser support impact JavaScript bundle size? 13 Nov 2019

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

Web performance metrics: lab data vs field data 11 Sep 2019

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

Lazy loading Angular components without a router 3 Sep 2019

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…

Why is my Lighthouse score different from PageSpeed Insights? 21 Aug 2019

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…

How do different chat widgets impact site performance? 15 Jul 2019

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…

Measuring React app performance 26 Jun 2019

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…

Browser Resource Hints: preload, prefetch, and preconnect 13 May 2019

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…

Measuring when images are displayed with the Element Timing API 29 Apr 2019

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 …

Custom front-end performance metrics with the User Timing API 1 Apr 2019

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: DevTools vs. Lighthouse vs. Netem 13 Mar 2019

Network throttling lets you simulate how a user on a slower connection would experience loading a website. I experimented with three different methods: - Netw…

Bundle splitting components with Webpack and React 15 Jan 2019

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 …

Measuring the performance impact of Chrome extensions 5 Dec 2018

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…

Optimizing JavaScript bundle size 23 Oct 2018

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

Website builder performance comparison 4 Apr 2019

I created a similar website in 11 different website builders and tested each site with Lighthouse.

DebugBear is a website monitoring tool built for front-end teams. Track performance metrics and Lighthouse scores in CI and production. Learn more.

Get new articles on web performance by email.