Eager Loading

Load resources immediately.

html

<div class="eag" data-count="9" role="img" aria-label="9 images, all loaded immediately, 120KB each">
  <p class="eag__title">All 9 images requested at page load</p>
  <div class="eag__grid">
    <span class="eag__img" style="background:#F5C2E0;"></span><span class="eag__img" style="background:#F5C2E0;"></span><span class="eag__img" style="background:#F5C2E0;"></span>
    <span class="eag__img" style="background:#F5C2E0;"></span><span class="eag__img" style="background:#F5C2E0;"></span><span class="eag__img" style="background:#F5C2E0;"></span>
    <span class="eag__img" style="background:#F5C2E0;"></span><span class="eag__img" style="background:#F5C2E0;"></span><span class="eag__img" style="background:#F5C2E0;"></span>
  </div>
  <p class="eag__note">Even images far below the fold download now, adding up to a heavier first load.</p>
</div>
<style>
.eag { font: 12px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 16px; border-radius: 12px; width: 300px; box-sizing: border-box; }
.eag__title { margin: 0 0 12px; font-weight: 700; font-size: 12px; }
.eag__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 10px; }
.eag__img { display: block; height: 34px; border-radius: 6px; }
.eag[data-count="3"] .eag__img:nth-child(n+4) { display: none; }
.eag[data-count="6"] .eag__img:nth-child(n+7) { display: none; }
.eag__note { margin: 0; font-size: 10px; color: #24143099; }
</style>

tailwind

<div class="eagtw eagtw--9 font-sans text-[#241430] bg-[#FAF7F2] p-4 rounded-xl w-[300px] box-border" role="img" aria-label="9 images, all loaded immediately, 120KB each">
  <p class="m-0 mb-3 font-bold text-xs">All 9 images requested at page load</p>
  <div class="grid grid-cols-3 gap-1.5 mb-2.5">
    <span class="eagtw__img block h-[34px] rounded-md" style="background:#F5C2E0;"></span><span class="eagtw__img block h-[34px] rounded-md" style="background:#F5C2E0;"></span><span class="eagtw__img block h-[34px] rounded-md" style="background:#F5C2E0;"></span>
    <span class="eagtw__img block h-[34px] rounded-md" style="background:#F5C2E0;"></span><span class="eagtw__img block h-[34px] rounded-md" style="background:#F5C2E0;"></span><span class="eagtw__img block h-[34px] rounded-md" style="background:#F5C2E0;"></span>
    <span class="eagtw__img block h-[34px] rounded-md" style="background:#F5C2E0;"></span><span class="eagtw__img block h-[34px] rounded-md" style="background:#F5C2E0;"></span><span class="eagtw__img block h-[34px] rounded-md" style="background:#F5C2E0;"></span>
  </div>
  <p class="m-0 text-[10px] text-[#24143099]">Even images far below the fold download now, adding up to a heavier first load.</p>
</div>
<style>
.eagtw--3 .eagtw__img:nth-child(n+4) { display: none; }
.eagtw--6 .eagtw__img:nth-child(n+7) { display: none; }
</style>

react

export function EagerLoading({
  resourceCount = "9",
  accent = "#F5C2E0",
  showWarning = true,
  bytesEach = 120,
}) {
  const n = Number(resourceCount);
  const items = Array.from({ length: 9 }, (_, i) => i).filter((i) => i < n);
  return (
    <div role="img" aria-label={`${resourceCount} images, all loaded immediately, ${bytesEach}KB each`} style={{ font: "12px/1.5 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", padding: 16, borderRadius: 12, width: 300, boxSizing: "border-box" }}>
      <p style={{ margin: "0 0 12px", fontWeight: 700, fontSize: 12 }}>All {resourceCount} images requested at page load</p>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 6, marginBottom: 10 }}>
        {items.map((i) => <span key={i} style={{ display: "block", height: 34, borderRadius: 6, background: accent }} />)}
      </div>
      {showWarning && <p style={{ margin: 0, fontSize: 10, color: "#24143099" }}>Even images far below the fold download now, adding up to a heavier first load.</p>}
    </div>
  );
}