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