Video performance — Lazy loading, formater og indlæsningsstrategi

Video er den tyngste ressource-type på nettet målt på bandwidth og parsing-tid, og dårlig video-håndtering er en direkte årsag til dårlige Core Web Vitals — særligt LCP og INP. For SEO er video-performance relevant fordi Google bruger CrUX field-data som rankinggrundlag, og sider med video er særligt udsatte for performance-problemer på mobile enheder og langsomme forbindelser. Strategierne er velkendte: preload=‘none’, facade patterns til YouTube-embeds og moderne videoformater reducerer videoens performance-impact markant.

preload-attributten

preload styrer browserens forhåndsindlæsningsadfærd:

<!-- Download ingen videodata ved sideload -->
<video preload="none" poster="/video-thumbnail.jpg">
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
</video>

<!-- Download kun metadata (varighed, dimensioner) -->
<video preload="metadata">
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
</video>

<!-- Download hele videofilen — kun til hero-video over fold -->
<video preload="auto">
  <source src="video.webm" type="video/webm">
</video>

Brug preload="none" som default. Tilføj preload="auto" kun til hero-videoer der er over fold og central for siden.

Poster-billede

poster viser et statisk billede mens videoen ikke afspilles. Det er kritisk for LCP hvis videoen er det primære over-fold-element:

<video
  preload="none"
  poster="/hero-poster.webp"
  width="1280"
  height="720"
>
  <source src="hero.webm" type="video/webm">
  <source src="hero.mp4" type="video/mp4">
</video>

Poster-billedet skal optimeres som et normalt billede (WebP, korrekt størrelse). Hvis det er LCP-elementet: fetchpriority="high" på <link rel="preload"> for posterbildedet.

Lazy loading af video

loading="lazy" fungerer ikke på <video> (kun <img> og <iframe>). Brug Intersection Observer til at indlæse video-src on-demand:

const videos = document.querySelectorAll('video[data-src]');

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      const video = entry.target;
      video.src = video.dataset.src;
      video.load();
      observer.unobserve(video);
    }
  });
}, { rootMargin: '200px' });

videos.forEach(video => observer.observe(video));

<video data-src="video.mp4" preload="none" poster="/thumb.webp">
</video>

YouTube og Vimeo facade patterns

En standard YouTube-embed indlæser 400-500 KB JavaScript, etablerer 20+ netværksforbindelser og tilføjer typisk 300-500ms til TBT. Facade patterns eliminerer dette:

Lite YouTube Embed (lite-youtube-embed):

<lite-youtube videoid="dQw4w9WgXcQ" playlabel="Afspil video"></lite-youtube>
<script src="/lite-youtube-embed.js" defer></script>

Viser kun et thumbnail med play-knap. Selve YouTube-spilleren indlæses ved klik. Sparer typisk 400+ KB og eliminerer YouTube’s tracking-scripts ved sideload.

Custom facade:

<div class="video-facade" data-videoid="dQw4w9WgXcQ">
  <img
    src="/thumbnails/dQw4w9WgXcQ.webp"
    alt="Video titel"
    width="1280"
    height="720"
    loading="lazy"
  >
  <button aria-label="Afspil video">▶</button>
</div>

<script>
document.querySelectorAll('.video-facade').forEach(facade => {
  facade.querySelector('button').addEventListener('click', () => {
    const id = facade.dataset.videoid;
    facade.innerHTML = `
      <iframe
        src="https://www.youtube-nocookie.com/embed/${id}?autoplay=1"
        width="1280" height="720"
        allow="autoplay; encrypted-media"
        loading="lazy"
      ></iframe>
    `;
  });
});
</script>

youtube-nocookie.com er Googles privacy-enhanced mode — reducerer tracking og færre cookies.

Moderne videoformater

Format	Codec	Komprimering	Browser-support
MP4	H.264	Baseline	Alle browsere
WebM	VP9	~30% bedre end H.264	Chrome, Firefox, Edge
WebM	AV1	~50% bedre end H.264	Chrome 70+, Firefox 67+

Serv WebM/AV1 som primær kilde med MP4/H.264 fallback:

<video preload="none">
  <source src="video.av1.webm" type="video/webm; codecs=av01">
  <source src="video.vp9.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
</video>

Autoplay og performance

Autoplay med lyd blokeres af alle moderne browsere (undtagen i iOS med playsinline muted). Lydløs autoplay er tilladt og bruges til baggrundsvideo-loops:

<video autoplay muted loop playsinline preload="auto"
  poster="/poster.webp" width="1280" height="720">
  <source src="background.webm" type="video/webm">
  <source src="background.mp4" type="video/mp4">
</video>

Baggrundsvideo er performance-intensiv: overvej at erstatte med en animeret GIF eller CSS-animation for simple bevægelser. → Denne artikel er en del af Web Performance — Core Web Vitals og teknisk hastighed.