Loading
Inline Script Info and Size Including Next Data

Inline Script Info and Size Including __NEXT_DATA__

Find all inline scripts and their total size separately from __NEXT_DATA__ serialized JSON inline Script

Snippet

function findInlineScriptsWithNextData() {
  const inlineScripts = document.querySelectorAll([
    "script:not([async]):not([defer]):not([src])",
  ]);
  console.log(inlineScripts);
  console.log(`COUNT: ${inlineScripts.length}`);
 
  const byteSize = {
    NEXT_DATA_SIZE: 0,
    OTHER_SIZE: 0,
  };
 
  function getSize(script) {
    const html = script.innerHTML;
    return new Blob([html]).size;
  }
 
  function convertToKb(bytes) {
    return bytes / 1000;
  }
 
  for (const script of [...inlineScripts]) {
    if (script.id == "__NEXT_DATA__") {
      byteSize.NEXT_DATA_SIZE += getSize(script);
    } else {
      byteSize.OTHER_SIZE += getSize(script);
    }
  }
 
  return {
    NEXT_DATA_SIZE: convertToKb(byteSize.NEXT_DATA_SIZE) + " kb",
    OTHER_SIZE: convertToKb(byteSize.OTHER_SIZE) + " kb",
    totalByteSize:
      convertToKb(byteSize.NEXT_DATA_SIZE) +
      convertToKb(byteSize.OTHER_SIZE) +
      " kb",
  };
}
 
console.log(findInlineScriptsWithNextData());