GizDevCraft Editor - Image Optimization (AVIF, WebP, lazy)

HTML

CSS

<main class="lesson-shell performance-playground">
  <section class="demo-card">
    <span class="eyebrow">Image Optimization (AVIF, WebP, lazy)</span>
    <h1>Performance practice area</h1>
    <p>Measure, change one thing, run again, and compare the result instead of guessing.</p>

    <section class="perf-hero" aria-labelledby="perfHeroTitle">
      <div class="perf-visual" role="img" aria-label="Responsive performance dashboard preview">Preview image space</div>
      <div>
        <h2 id="perfHeroTitle">Fast first impression</h2>
        <p>This card reserves image space, keeps layout stable, and gives the browser predictable work.</p>
        <button id="measureButton" type="button">Measure interaction</button>
      </div>
    </section>

    <section class="perf-metrics" aria-label="Performance metrics">
      <article><strong id="metricLoad">0 ms</strong><span>Measured interaction</span></article>
      <article><strong id="metricTasks">0</strong><span>Long task demos</span></article>
      <article><strong id="metricCards">3</strong><span>Reserved cards</span></article>
    </section>

    <section class="perf-actions" aria-label="Performance actions">
      <button id="longTaskButton" type="button">Simulate long task</button>
      <button id="renderCardsButton" type="button">Render lazy cards</button>
      <button id="clearMetricsButton" type="button">Clear marks</button>
    </section>

    <div id="lazyCards" class="lazy-cards" aria-live="polite">
      <article class="skeleton-card"></article>
      <article class="skeleton-card"></article>
      <article class="skeleton-card"></article>
    </div>

    <pre id="perfLog" class="perf-log">Performance log appears here.</pre>

    <details class="code-reference">
      <summary>Lesson code reference</summary>
      <pre class="code-sample"><code>&lt;picture&gt;
  &lt;source srcset=&quot;/hero.avif&quot; type=&quot;image/avif&quot;&gt;
  &lt;source srcset=&quot;/hero.webp&quot; type=&quot;image/webp&quot;&gt;
  &lt;img src=&quot;/hero.jpg&quot; width=&quot;1200&quot; height=&quot;675&quot;
       alt=&quot;Product dashboard&quot;
       loading=&quot;lazy&quot; decoding=&quot;async&quot;&gt;
&lt;/picture&gt;</code></pre>
    </details>
  </section>
</main>

body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #f8fafc;
  color: #111827;
}

.lesson-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem;
}

.demo-card {
  width: min(760px, 100%);
  background: #ffffff;
  border: 1px solid #dbe3ef;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 18px 45px rgb(15 23 42 / .10);
  text-align: center;
}

.eyebrow {
  display: inline-block;
  margin-bottom: .75rem;
  color: #4f46e5;
  font-weight: 800;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

h1 {
  margin: 0 0 .75rem;
  font-size: clamp(1.8rem, 4vw, 3rem);
}

p {
  color: #536471;
  line-height: 1.7;
}

button {
  border: 0;
  border-radius: 8px;
  padding: .75rem 1rem;
  background: #4f46e5;
  color: white;
  font-weight: 800;
  cursor: pointer;
}

.demo-target {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.box {
  border: 1px solid #dbe3ef;
  border-radius: 8px;
  padding: 1.25rem;
  background: #f8fafc;
  font-weight: 800;
}

.featured {
  background: #eef2ff;
  color: #3730a3;
}
.performance-playground .demo-card { max-width: 980px; text-align: left; }
.perf-hero { display: grid; grid-template-columns: minmax(14rem, 1fr) 1.2fr; gap: 1rem; align-items: center; margin-block: 1.25rem; }
.perf-visual { aspect-ratio: 16 / 9; display: grid; place-items: center; border-radius: 8px; background: linear-gradient(135deg, #dbeafe, #dcfce7); color: #1e3a8a; font-weight: 800; }
.perf-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin-block: 1rem; }
.perf-metrics article { display: grid; gap: .25rem; border: 1px solid #d7dde8; border-radius: 8px; padding: 1rem; background: #ffffff; }
.perf-metrics strong { font-size: 1.35rem; color: #1d4ed8; }
.perf-metrics span { color: #475569; }
.perf-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-block: 1rem; }
.perf-actions button, #measureButton { border: 0; border-radius: 8px; background: #111827; color: #ffffff; padding: .7rem 1rem; font-weight: 800; }
.perf-actions button:focus-visible, #measureButton:focus-visible, summary:focus-visible { outline: 3px solid #f59e0b; outline-offset: 3px; }
.lazy-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .75rem; margin-block: 1rem; }
.skeleton-card { min-height: 7rem; border-radius: 8px; background: linear-gradient(90deg, #e2e8f0, #f8fafc, #e2e8f0); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; }
.lazy-card { min-height: 7rem; display: grid; place-items: center; border: 1px solid #bbf7d0; border-radius: 8px; background: #ecfdf5; color: #14532d; font-weight: 800; }
.perf-log, .code-sample { text-align: left; background: #111827; color: #e5e7eb; padding: 1rem; border-radius: 8px; overflow: auto; white-space: pre-wrap; }
@keyframes shimmer { to { background-position: -200% 0; } }
@media (max-width: 720px) { .perf-hero, .perf-metrics { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } .skeleton-card { animation: none; } }

const lessonTitle = "Image Optimization (AVIF, WebP, lazy)";
const log = document.querySelector('#perfLog');
const metricLoad = document.querySelector('#metricLoad');
const metricTasks = document.querySelector('#metricTasks');
const metricCards = document.querySelector('#metricCards');
const lazyCards = document.querySelector('#lazyCards');
let longTaskCount = 0;

function writeLog(message) {
  log.textContent = message;
}

document.querySelector('#measureButton')?.addEventListener('click', () => {
  performance.mark('interaction-start');
  requestAnimationFrame(() => {
    performance.mark('interaction-painted');
    performance.measure('button interaction', 'interaction-start', 'interaction-painted');
    const measure = performance.getEntriesByName('button interaction').at(-1);
    metricLoad.textContent = measure.duration.toFixed(2) + ' ms';
    writeLog('Measured ' + lessonTitle + ': ' + measure.duration.toFixed(2) + ' ms from click to next paint.');
  });
});

document.querySelector('#longTaskButton')?.addEventListener('click', () => {
  const start = performance.now();
  while (performance.now() - start < 90) {}
  longTaskCount += 1;
  metricTasks.textContent = String(longTaskCount);
  writeLog('Created a demo long task of about 90 ms. Remove heavy work from real input handlers.');
});

document.querySelector('#renderCardsButton')?.addEventListener('click', () => {
  lazyCards.innerHTML = ['Images', 'Scripts', 'Fonts'].map(label => `<article class="lazy-card">${label} ready</article>`).join('');
  metricCards.textContent = '3';
  writeLog('Lazy cards rendered after user action. Noncritical UI can wait until it is needed.');
});

document.querySelector('#clearMetricsButton')?.addEventListener('click', () => {
  performance.clearMarks();
  performance.clearMeasures();
  metricLoad.textContent = '0 ms';
  writeLog('Performance marks and measures cleared. Run a fresh measurement.');
});