Skip to content

Instantly share code, notes, and snippets.

@machal
Forked from tkadlec/perf-diagnostics.css
Last active June 8, 2021 13:12
Show Gist options
  • Save machal/e29dbfb5a794a023b2db446ae164418a to your computer and use it in GitHub Desktop.
Save machal/e29dbfb5a794a023b2db446ae164418a to your computer and use it in GitHub Desktop.
CSS used to highlight potential performance issues
:root {
--violation-color: red; /* used for clear issues */
--warning-color: orange; /* used for potential issues we should look into */
}
/* IMAGES */
/*
* Lazy-Loaded Images Check
* ====
* Highlight any lazy loaded images so we can see if any are inside the viewport
*
* Uses an outline so it can pair with Unsized Images and Legacy Format checks
* Credit: https://twitter.com/csswizardry/status/1346477682544951296
*/
img[loading=lazy] {
outline: 10px solid var(--warning-color) !important;
}
/*
* Unsized Images Check
* ====
* Highlight images that don't have a height or width attribute set
*
* Uses a border so it can pair with Lazy-Loaded and Legacy Format checks
*/
img:not([height]), img:not([width]) {
border: 10px solid var(--violation-color) !important;
}
/*
* Legacy Format Check
* ====
* Highlight tiff's and bmp's because we can do better
* Also JPG's because maybe we can use something like webp or avif instead
*
* Use opacity so we don't conflict with Lazy-Loaded and Unsized Images checks
*/
img[src*='.jpg'],
img[src*='.tiff'],
img[src*='.bmp']{
opacity: .5 !important;
}
/* SCRIPTS */
/* Synchronous Scripts Check
* ====
* Display any blocking synchronous scripts
*
* Credit: https://twitter.com/csswizardry/status/1336007323337285633
*/
head,
script[src] {
display: block;
border: 10px solid var(--violation-color);;
}
/*
* Display the URL/filepath of external scripts
*/
script[src]::before {
content: attr(src);
font-size: 1rem;
}
/**
* Hide other head content and non-blocking scripts
*/
head *,
script[src][async], script[src][defer], script[src][type=module] {
display: none;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment