Running web performance experiments
DebugBear experiments allow you to run a site speed test with modified page HTML.
For example, you can:
- Remove render-blocking scripts (or make them async)
- Add or remove preload hints
- Add or remove priority hints
- Add a
styletag setting a
max-widthto reduce layout shift
- Change the URL of an image
How to run an experiment
- Open the results of the page you want to test
- Select the Experiments tab
- Provide a name for your experiment, for example "Remove Google Tag Manager"
- Edit the HTML document and click Run Experiment
- Wait for the test to complete
You can then see the impact of then change. In this example, where Google Tag Manager was removed, for fewer requests were made on the page.
Blocking network requests
In addition to modifying the page HTML you can also block network requests that match a certain pattern, for example a file extension or a domain name.
Use commas to apply multiple URL patterns.
The relevant requests will then show up as blocked in the results and the page weight will be lower.
Examples of site speed experiments you can run
Adding priority hints
You can use the request waterfall to identify the URL of the LCP image, and then modify the image tag to add a
Removing render-blocking resources
Render-blocking resources have a big impact on website performance as no content will show up until they are loaded.
Modify the page HTML to remove these resources or add
async attributes to
script tags to make them no longer render-blocking.
Adding or removing resource hints
Resource hints like
preconnect can tell the browser about resources that it wouldn't otherwise discover until later.
For example, let's say you load a Google Fonts CSS file that references a font file. Normally the browser wouldn't discover the font file until after the CSS has loaded.
Adding a preconnect hint to the
<head> of the page HTML could establish a server connection to
fonts.gstatic.com as soon as the page starts loading, so the connection can be used immediately when the font file is discovered.
<link rel="preconnect" href="https://fonts.gstatic.com">
Resource hints can slow down your website if used incorrectly, so you can also try removing them to see how that impacts performance.
Adding CSS styles
Cumulative Layout Shift issues can often be addressed by adding a min-height to elements that change size when content is loaded, for example images.
Simply insert a style tag into the HTML to try out your optimization.
Interpreting the results of experiments
When an experiment is run you will not see a breakdown of the document request. Instead of showing a server connection only a single long HTTP request will be shown.
Your website likely experiences a significant amount of background performance variation. If the performance impact of a change is small, it may not be noticeable.
If you wish to continue experimenting with a page, you can make changes to the HTML and test again.
On the results page, open up the experiment details.
Scroll down and click Re-run experiment.
This will open up the experiments page where you can customize your HTML and click Run experiment to re-run the experiment again.