content-visibility – lange Seiten rendern, ohne dass der Browser alles auf einmal baut

Eine Archivseite mit 300 Karten, ein langer Blogartikel mit vielen Bildern, ein Dashboard mit zwanzig Panels: Der Browser baut beim ersten Rendern alles – auch das, was niemand sieht, weil es weit unterhalb des Bildschirms liegt. Genau dafür gibt es content-visibility.

Der Abschnitt, der sich selbst überspringt

.abschnitt {
  content-visibility: auto;
  contain-intrinsic-size: auto 600px;   /* geschätzte Höhe, solange nicht gerendert */
}

content-visibility: auto sagt dem Browser: Solange dieser Abschnitt nicht in der Nähe des sichtbaren Bereichs ist, überspring sein Layout und sein Malen. Scrollt er heran, wird er ganz normal gerendert.

Warum contain-intrinsic-size Pflicht ist

Ein übersprungener Abschnitt ist für das Layout zunächst 0 Pixel hoch. Ohne Größenangabe schrumpft die Seite, der Scrollbalken springt, und beim Heranscrollen wächst alles wieder auseinander.

contain-intrinsic-size gibt dem Browser einen Platzhalterwert. Mit dem Schlüsselwort auto davor merkt er sich außerdem die zuletzt tatsächlich gemessene Höhe und benutzt beim nächsten Überspringen diese statt der Schätzung:

.karte {
  content-visibility: auto;
  contain-intrinsic-size: auto 320px;
}

Faustregel: Schätz eher etwas zu groß als zu klein und nimm die typische Höhe eines Elements, nicht den Ausreißer.

Wo es sich lohnt – und wo nicht

Sinnvoll: lange, gleichförmige Listen und Abschnitte weit unten. Nicht sinnvoll: der sichtbare Bereich beim Laden (dort gibt es nichts zu sparen) und kleine Elemente – der Verwaltungsaufwand frisst den Gewinn.

/* Nur die Abschnitte unterhalb des ersten Bildschirms */
main > section:nth-of-type(n + 3) {
  content-visibility: auto;
  contain-intrinsic-size: auto 800px;
}

Fallstrick

Übersprungene Inhalte sind für die Suche im Browser (Strg+F) und für Sprungmarken trotzdem auffindbar – der Browser rendert sie bei Bedarf nach. Aber: content-visibility: auto erzeugt einen eigenen Containment-Kontext. Elemente, die aus ihrem Abschnitt herausragen sollen (ein Tooltip, ein aufklappendes Menü, ein position: sticky innerhalb), werden dadurch beschnitten. Setz die Eigenschaft deshalb auf ruhige Inhaltsblöcke, nicht auf Container mit überstehender Gestaltung – und miss den Effekt in den Entwicklerwerkzeugen nach, statt ihn zu vermuten.

Ladezeiten messe und verbessere ich in jedem Projekt – wenn deine Seite zäh wirkt: bymw.de.

Quellen

• content-visibility – MDN Web Docs
• contain-intrinsic-size – MDN Web Docs
• content-visibility: the new CSS property that boosts your rendering performance (web.dev)