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