Chrome Local Overrides: Run Core Web Vitals Experiments

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.

This article explains local overrides work and how they can be used to test Core Web Vitals optimizations.

What are local overrides in Chrome DevTools?

Local overrides let you override server responses with file content saved locally on your computer. Instead of making a network request for a resource Chrome will serve it from a folder on your hard drive.

This lets you do a range of things:

• Experiment with content changes on any website
• Try out new CSS styles on any website
• See how fast your website renders with certain render blocking files removed (to optimize Largest Contentful Paint)
• Check if layout shift fixes are working correctly (to optimize Cumulative Layout Shift)

How to enable local overrides in DevTools

It takes a few steps to run your first experiment, but it’s easier after the initial setup:

1. Open Chrome DevTools (by right-clicking the page and clicking Inspect)
2. Switch to the Sources tab
3. In the sidebar, select Overrides

4. In the sidebar Overrides tab, click Select folder for overrides (this is a folder on your computer where any custom HTML/CSS/... will be stored.)
5. When you get the DevTools requests full access to the folder click Allow

6. Switch to the Page tab in the sidebar
7. Right-click the file you want to override and click Save for overrides

8. The file now has a purple icon indicating that it’s served locally
9. Click the file to edit it – in this example we just added a new style tag to the HTML
10. Use Cmd+S (Mac) or Ctrl+S (Windows) to save your changes
11. Reload the page to see the impact of the local overrides

Testing a Largest Contentful Paint optimization

Changing the text color is fun, but we want to optimize Core Web Vitals.

You can collect a performance profile using DevTools. If I go to the GitHub homepage with Slow 3G throttling enabled it takes about 4.8 seconds before the Largest Contentful Paint milestone is reached.

GitHub loads a number of JavaScript files that aren’t important for the initial render. Let’s try commenting them out.

Now the page renders in just 3.0 seconds.

Of course if we wanted to do this in production we’d need to think more about whether we still need to load those scripts and when they should be loaded. But at least we have a rough idea of how big the performance impact of removing the scripts would be.

You can try out a range of LCP optimizations with local overrides, for example:

• Adding a preload tag
• Making scripts async
• Lazy loading images

Testing a Cumulative Layout Shift optimization

Similarly, we can use local overrides to see if CLS fixes are working.

Let’s look at this layout shift on the Iceland homepage. Once the slider appears all other content shifts down on the page.

We can fix that by adding a CSS min-height to the slider.

<style>
.carousel {
  min-height: 288px
}
</style>

The carousel now shows an empty area until the slider content loads. When it does load no page elements are pushed down the page and the layout remains stable.

Overriding Response Headers

Response header overrides are an experimental DevTools feature that allows you to substitute response headers in addition to the response body.

To enable this feature, first enter the DevTools settings.

Then select the Experiments tab and check the Local overrides for response headers box.

In the DevTools Network tab you can now right click a request and select Create response header override.

Then you can click Add header override to create your custom header. In this example we add a link preload header to load a specific JavaScript file early.

After reloading the page we can see that this header is returned with the document response and the file is preloaded.

Limitations of local overrides

Local overrides allow you to change server responses locally, but testing in DevTools doesn’t always produce reliable data.

This is because DevTools throttling doesn’t accurately model network connections and resource priorities. So the results you see in DevTools may not always translate directly to the impact of your change on real users.

Running experiments on DebugBear

If you want to run site speed experiments in a reliable lab environment you can use the DebugBear Experiments feature.

This allows you to make changes to the page HTML while using high-quality throttling and realistic network connections.

You can also easily view before and after test results side by side.