CSS, images & fonts

The static assets that decide first paint, LCP and layout stability: render-blocking CSS, images, video, embeds and web fonts. Image markup is covered in depth on Media & embeds; this sheet is the performance view across all asset types.

Critical & render-blocking CSS

All CSS in <head> blocks rendering until it's downloaded and parsed (see Render-blocking vs parser-blocking).

Inlined CSS isn't cached separately; inline only a few KB (roughly what fits in the first 14 KB of HTML with the head), and keep the full stylesheet cached.

What CSS costs at runtime

Images

<img
  src="/img/hero-1200.jpg"
  srcset="/img/hero-600.avif 600w,
          /img/hero-1200.avif 1200w,
          /img/hero-2000.avif 2000w"
  sizes="100vw"
  width="1200" height="675"
  alt="Harbor at dawn"
  fetchpriority="high">

(AVIF in srcset with a JPEG src works only where every browser you target decodes AVIF; otherwise use <picture> with <source type="image/avif">.)

Video & embeds

Web fonts

Fonts block text rendering while they load, then can reflow text when they swap in (CLS).

The periods are the CSS Fonts spec's recommendations ("extremely small" ≤ 100 ms, "short" ≈ 3 s); each browser picks its exact values.

SVG & icons

• Inline SVG for a few icons used once; an SVG sprite (<use href="/icons.svg#x">) for many icons across pages (cached once).
• Icon fonts are worse: extra font request, block text, accessibility issues.
• Optimize with SVGO (bunx svgo): editors leave metadata that doubles file size.
• Huge inline SVGs (maps, charts with thousands of paths) bloat HTML and the DOM; use <img src="x.svg"> when you don't need to style the inside.

Common mistakes

Recipes

Self-hosted variable font, preloaded

One file, all weights, in a font face that swaps.

<link rel="preload" href="/fonts/inter-var.woff2"
      as="font" type="font/woff2" crossorigin>
<style>
  @font-face {
    font-family: "Inter";
    src: url("/fonts/inter-var.woff2") format("woff2");
    font-weight: 100 900;
    font-display: swap;
  }
  body {
    font-family: "Inter", "Inter Fallback", sans-serif;
  }
</style>

A metric-matched fallback font

Resize a local font to take up the same space as the web font, so the swap doesn't move text. Tools like Fontaine or next/font compute these numbers.

@font-face {
  font-family: "Inter Fallback";
  src: local("Arial");
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

Load non-critical CSS without blocking

Critical rules inline, the rest after first render (with a no-JS fallback).

<style>/* critical, above-the-fold rules */</style>
<link rel="preload" href="/css/site.css" as="style"
      onload="this.onload=null;this.rel='stylesheet'">
<noscript>
  <link rel="stylesheet" href="/css/site.css">
</noscript>

Under a strict nonce-based CSP, inline onload= attributes are blocked. Load the stylesheet from a nonced script instead, or allow the handler's hash with 'unsafe-hashes'.

GIF → video

Same look, a fraction of the bytes.

ffmpeg -i anim.gif -movflags +faststart -pix_fmt yuv420p \
  -vf "scale=trunc(iw/2)*2:trunc(ih/2)*2" anim.mp4

<video autoplay muted loop playsinline
       width="480" height="270" poster="/anim.jpg">
  <source src="/anim.mp4" type="video/mp4">
</video>

YouTube facade

A self-hosted thumbnail that becomes the player on click: nothing from YouTube (or Google's i.ytimg.com image host) loads until then.

<button class="yt" data-id="dQw4w9WgXcQ"
        style="aspect-ratio: 16/9; width: 100%">
  <img src="/img/video-thumb.jpg"
       alt="Play: video title" loading="lazy">
</button>
<script type="module">
  document.querySelector(".yt").addEventListener("click",
    (e) => {
      const btn = e.currentTarget;
      const f = document.createElement("iframe");
      f.src = `https://www.youtube-nocookie.com/embed/${
        btn.dataset.id}?autoplay=1`;
      f.allow = "autoplay; encrypted-media";
      f.allowFullscreen = true;
      f.title = "Video title";
      f.style.cssText =
        "width:100%;aspect-ratio:16/9;border:0";
      btn.replaceWith(f);
    }, { once: true });
</script>

References

• MDN: Optimizing startup performance (opens in a new tab), CSS performance optimization (opens in a new tab), Multimedia: images (opens in a new tab), Web performance best practices (opens in a new tab)
• MDN: Responsive images (opens in a new tab), Image file type and format guide (opens in a new tab), Lazy loading (opens in a new tab)
• MDN: font-display (opens in a new tab), size-adjust (opens in a new tab), ascent-override (opens in a new tab), unicode-range (opens in a new tab)
• web.dev: Extract critical CSS (opens in a new tab), Defer non-critical CSS (opens in a new tab), Best practices for fonts (opens in a new tab), CSS size-adjust for @font-face (opens in a new tab), Replace animated GIFs with video (opens in a new tab)
• Chrome for Developers: Lazy load third-party resources with facades (opens in a new tab)
• Tools: Squoosh (opens in a new tab), SVGO (opens in a new tab), Fontaine (opens in a new tab), glyphhanger (opens in a new tab)