WebPageTest Homepage WebPageTest, by Catchpoint Documentation

Custom Metric Examples

Custom metrics are an incredibly powerful way to dig deep into the characterstics of the page you're testing to surface the specific data points you're interested in collecting. Below are some useful samples to get you started.

You can find even more examples of custom metrics in The HTTP Archive's public GitHub repository that collects all the WebPageTest custom metrics they use to power their reports.

Have a custom metric that you don't see here but find particularly useful? Let us know so we can add it here and share it with everyone.

Blocking External Scripts

Grab all of the external scripts referenced in the initial HTML response ($WPT_BODIES[0]) and count how many of them are blocking.

CSS Imports

Loop through all the stylesheets requested by the page and count any @import statements to return how many stylesheets were loaded via @import.

Images With No Alt Attribute

Return the count of all images in the document that do not have an alt attribute.

Inline CSS

Return the amount of inline CSS bytes included in the document.

Lazy Loaded Images in Viewport

Return an array containing the sources of all images that have loading=lazy applied, but are visible within the initial viewport.

NEXT_DATA Object Size

Return the size (in bytes) of the NEXT_DATA object that is used by Next.js for hydration.

Meta Viewport Value

Get the meta viewport element and return its contents.

Web App Manifest Contents

Contributed by Rick Viscomi

Retrieve the web app manifest for the page and output the manifest URL and contents in JSON format