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.
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.
Grab all of the external scripts referenced in the initial HTML response (
$WPT_BODIES) and count how many of them are blocking.
Loop through all the stylesheets requested by the page and count any
@import statements to return how many stylesheets were loaded via
Return the count of all images in the document that do not have an
Return the amount of inline CSS bytes included in the document.
Return an object containing the sources of all images that have
loading=lazy applied, but are within the initial viewport.
Return the size (in bytes) of the NEXT_DATA object that is used by Next.js for hydration.
Get the meta viewport element and return its contents.