Loading
Inline CSS Info and Size

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();