Video-Hero und LCPWenn Autoplay die Performance der Unternehmensseite killt (2026)

TL;DR

Video im Hero wirkt premium in Figma — im mobile Lighthouse springt LCP oft über 4 s, weil <video autoplay> mit Poster, Fonts und Analytics um First Paint konkurriert. Das LCP-Element kann Videoframe, Poster oder Überschrift sein — messen, nicht raten. Produktion: WebP/AVIF-Poster als LCP, Video mit preload="none" oder nach requestIdleCallback, auf Mobile statischer Hero. DevStudioIT Cloud CDN repariert keine 8 MB MP4 — Asset-Optimierung und bedingtes Rendering in Next.js schon.

Für wen

• B2B-Unternehmensseiten mit Brief „Video-Hintergrund wie Apple"
• Teams mit LCP > 2,5 s nach Hero-Video im letzten Sprint
• Marketing mit Google-Ads-Konversionen
• Next.js-Entwickler mit Kompromiss statt Video-Verbot

Keyword

video hero lcp, unternehmensseite video performance, poster video nextjs, lazy load hero video, largest contentful paint video, autoplay background performance 2026

Warum Video-Hero LCP dominiert

5 MB MP4 übersteigt oft das gesamte JS-Budget der Landingpage.

Poster first — LCP-sicher

'use client';

import Image from 'next/image';
import { useEffect, useState } from 'react';

export function HeroVideo({ poster, src }: { poster: string; src: string }) {
  const [showVideo, setShowVideo] = useState(false);

  useEffect(() => {
    const mq = window.matchMedia('(prefers-reduced-motion: reduce)');
    if (mq.matches) return;
    const idle = 'requestIdleCallback' in window
      ? (cb: () => void) => requestIdleCallback(cb, { timeout: 2000 })
      : (cb: () => void) => setTimeout(cb, 1500);
    idle(() => setShowVideo(true));
  }, []);

  return (
    <div className="relative aspect-[16/9] min-h-[50vh] w-full overflow-hidden">
      <Image src={poster} alt="" fill priority sizes="100vw" className="object-cover" />
      {showVideo && (
        <video className="absolute inset-0 h-full w-full object-cover"
          autoPlay muted loop playsInline preload="none" poster={poster}>
          <source src={src} type="video/mp4" />
        </video>
      )}
    </div>
  );
}

Mobile vs Desktop

const ua = (await headers()).get('user-agent') ?? '';
const isMobile = /Mobile|Android/i.test(ua);
if (isMobile) return <HeroPosterOnly poster="/hero-poster.webp" />;
return <HeroVideo poster="/hero-poster.webp" src="/hero-loop.mp4" />;

Datei-Optimierung

ffmpeg -i raw-hero.mp4 -vf scale=1280:-2 -an -c:v libx264 -crf 28 -movflags +faststart hero-loop.mp4

MP4 über DevStudioIT Cloud CDN mit langem Cache.

Alternativen

„Video muss sein" → Modal on click.

Messung

Lighthouse LCP-Element, DevTools Performance, web-vitals auf Staging. Zeigt LCP <video> → Poster-first fixen.

Performance Budget

Lighthouse CI: LCP ≤ 2500 ms. PR mit Autoplay ohne Poster-first soll failen.

FAQ

YouTube/Vimeo im Hero?

Schlecht für LCP — iframe lädt Player SDK. Unterhalb des Folds OK.

WebM?

Kleiner, Safari braucht MP4-Fallback.

fetchpriority="high" auf Video?

Nein — nur Poster priority.

SEO?

Indirekt über CWV und Bounce, nicht Video an sich.

Video-Hero ohne LCP-Strafe?

• Kontakt — Poster-first Hero und CI-Schwellen
• Performance Budget
• Bildoptimierung