Skip to main content

Media and Assets

Most "design-driven" performance problems are asset problems: hero images are too large or discovered too late, videos autoplay above the fold, icons ship as large libraries, or CSS/JS is globally loaded even when it's only needed on one template.

Priority Order​

  1. Fix the LCP element (often the hero image).
  2. Prevent layout shift by reserving space for media.
  3. Reduce main-thread JS work (especially third-party scripts).
  4. Improve delivery (CDN, compression, caching).

Images​

Rules of thumb:

  • Use modern formats (WebP/AVIF).
  • Do not lazy-load the LCP image.
  • Provide dimensions so the browser can reserve space.
  • Use responsive images (srcset/sizes) so mobile does not download desktop assets.
responsive-hero-image.html
<img
  src="/images/hero-1200.webp"
  srcset="/images/hero-640.webp 640w, /images/hero-1200.webp 1200w"
  sizes="(max-width: 640px) 640px, 1200px"
  width="1200"
  height="630"
  alt="Hero image"
  fetchpriority="high"
  decoding="async"
  loading="eager"
/>

Video​

Avoid autoplay video backgrounds above the fold on performance-sensitive pages.

Better patterns:

  • Use a poster image and click-to-play.
  • Load video only after user intent (interaction) or when it scrolls into view.
  • Prefer a dedicated video host and embed with a lightweight player.

Icons and SVG​

  • Avoid shipping a full icon font/library sitewide.
  • Inline a small SVG for critical icons, or use per-page SVG assets.

CSS and JavaScript as "Assets"​

  • Keep render-blocking CSS small and stable (critical CSS helps on some stacks).
  • Defer/delay non-critical JS where it is safe.
  • Avoid loading "marketing" and "chat" scripts during initial render on every page.

If you use Perfmatters, start from the baseline and then move gradually to more aggressive settings.

What's Next​