diff --git a/.claude/skills/webperf-loading/scripts/Critical-CSS-Detection.js b/.claude/skills/webperf-loading/scripts/Critical-CSS-Detection.js index 64a1580..7850f5c 100644 --- a/.claude/skills/webperf-loading/scripts/Critical-CSS-Detection.js +++ b/.claude/skills/webperf-loading/scripts/Critical-CSS-Detection.js @@ -1,2 +1,2 @@ -// snippets/Loading/Critical-CSS-Detection.js | sha256:1a566b926278a181 | https://github.com/nucliweb/webperf-snippets/blob/main/snippets/Loading/Critical-CSS-Detection.js -(()=>{const e=e=>{if(0===e)return"0 B";const t=Math.floor(Math.log(e)/Math.log(1024));return(e/Math.pow(1024,t)).toFixed(2)+" "+["B","KB","MB"][t]},t=14336,r=Array.from(document.querySelectorAll('link[rel="stylesheet"]')),n=performance.getEntriesByType("resource"),s=r.map(e=>{const t=e.href,r=e.getAttribute("media")||"all",s="all"===r||""===r||"screen"===r||r.toLowerCase().includes("screen")&&!r.toLowerCase().includes("print"),i=n.find(e=>e.name===t),l=i?i.transferSize:0,o=i?i.decodedBodySize:0,a=document.querySelector(`link[rel="preload"][as="style"][href="${t}"]`);let d=0,c=!1;try{const e=Array.from(document.styleSheets).find(e=>e.href===t);e&&e.cssRules&&(d=e.cssRules.length)}catch(e){c=!0}return{filename:t.split("/").pop().split("?")[0]||t,href:t,media:r,isRenderBlocking:s,transferSize:l,decodedSize:o,ruleCount:d,corsBlocked:c,preloaded:null!==a}}),i=Array.from(document.querySelectorAll("style")).map((e,t)=>{const r=e.innerHTML;return{index:t+1,size:new Blob([r]).size,ruleCount:(r.match(/\{[^}]*\}/g)||[]).length,inHead:null!==e.closest("head")}}),l=s.filter(e=>e.isRenderBlocking),o=(s.filter(e=>!e.isRenderBlocking),i.reduce((e,t)=>e+t.size,0)),a=l.reduce((e,t)=>e+t.decodedSize,0);s.reduce((e,t)=>e+t.transferSize,0);if(l.length>0){const e=Math.min(a/t*100,200),r=Math.min(Math.round(e/10),20);"█".repeat(r),"░".repeat(20-r)}i.length>0&&(o/t*100).toFixed(0);const d=[];l.length>0&&0===i.length&&d.push({severity:"high",message:"No critical CSS inlined — all CSS loads via render-blocking requests",suggestion:"Extract above-the-fold styles into a