Inline CSS Info and Size
Find all inline style tags and list them in a table with individual and total byte size. Customize the table below.
Snippet
// Wait for the page to fully load
function findAllInlineCSS() {
const convertToKb = (bytes) => bytes / 1000;
const inlineCSS = document.querySelectorAll("style");
let totalByteSize = 0;
for (const css of [...inlineCSS]) {
const html = css.innerHTML;
const size = new Blob([html]).size;
css.byteSizeInKb = convertToKb(size);
totalByteSize += size;
}
// customize table here, can right click on header in console to sort table
console.table(inlineCSS, [
"baseURI",
"parentElement",
"byteSizeInKb",
"innerHTML",
]);
console.log(`Total size: ${convertToKb(totalByteSize)} kB`);
}
findAllInlineCSS();