Render-blocking resources

<section class="stage"><div class="heading">RENDER BLOCKING <span class="hint">paint waits for dependencies</span></div><div class="blocking-chart"><div class="chart-row"><b>CSS</b><span class="chart-bar css-bar"></span></div><div class="chart-row"><b>SYNC JS</b><span class="chart-bar js-bar"></span></div><div class="chart-row paint-row"><b>PAINT</b><span class="paint-dot"></span></div></div><div class="blocking-note" id="blocking-note">CSS and sync JS delay paint</div><div class="caption">Move nonessential scripts after paint</div></section>

.stage{width:min(94vw,780px);height:min(88vh,322px);padding:clamp(12px,3vmin,20px);border:1px solid var(--line);border-radius:16px;background:var(--surface);box-shadow:0 12px 36px #0001;display:flex;flex-direction:column;gap:clamp(7px,2vmin,14px);font:500 clamp(12px,3.5vmin,17px)/1.3 var(--font-sans,system-ui,sans-serif);overflow:hidden}.heading{display:flex;justify-content:space-between;align-items:center;gap:8px;font-weight:750;color:var(--accent)}.hint{color:var(--muted);font-size:clamp(12px,3.2vmin,14px);font-weight:500}.caption{margin-top:auto;color:var(--muted);font-size:clamp(12px,3.2vmin,14px)}.row{display:flex;gap:clamp(5px,1.5vmin,12px);align-items:center}.tile{padding:clamp(6px,1.8vmin,13px);border:1px solid var(--line);border-radius:9px;background:var(--bg);text-align:center;min-width:0}.arrow{color:var(--accent);font-weight:800}.stage [data-on]{transition:background .3s,border-color .3s,opacity .3s,transform .3s}.stage .on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,var(--surface));color:var(--accent)}.blocking-chart{flex:1;display:flex;flex-direction:column;justify-content:center;gap:4px;min-height:0}.chart-row{display:flex;align-items:center;gap:7px;min-height:17px}.chart-row b{width:63px;font-size:clamp(12px,3vmin,15px)}.chart-bar{display:block;height:9px;border-radius:6px;background:var(--accent-2);transition:width .4s}.css-bar{width:55%}.js-bar{width:72%;background:var(--accent-3)}.paint-dot{width:10px;height:10px;border-radius:50%;background:var(--accent);margin-left:72%;transition:margin-left .4s}.stage[data-step="1"] .js-bar{width:25%}.stage[data-step="1"] .paint-dot{margin-left:55%}.blocking-note{text-align:center;color:var(--accent-2);font-weight:700;font-size:clamp(12px,3vmin,15px)}.stage small,.stage button,.stage .cards b,.stage .phase b,.stage .pair b,.stage .tree-mini b{font-size:clamp(12px,3.2vmin,14px)!important}

const stage=document.querySelector(".stage"),note=document.getElementById("blocking-note");let step=0;function tick(){stage.dataset.step=String(step);note.textContent=step?"Deferred JS lets paint happen earlier":"CSS and sync JS delay paint";step=1-step}tick();const timer=setInterval(tick,1250);stage.addEventListener("pointerdown",()=>{clearInterval(timer);tick()})