Rendering von umfangreichen Inhalten zurückstellen

Webseiten mit umfangreichen Inhalten, z. B. unendliches Scrollen, komplexe Dashboards oder dichte Artikel, können unter langsamem anfänglichem Rendering und trägen Interaktionen leiden. Mit modernen Webtechnologien können Sie die Rendering-Arbeitslast für Inhalte, die nicht sofort sichtbar sind, aufschieben. Dadurch wird die Leistung erheblich gesteigert, ohne dass die Barrierefreiheit oder die Erwartungen der Nutzer beeinträchtigt werden.

Um das Rendering zu optimieren, können Sie die CSS-Property content-visibility und das HTML-Attribut hidden="until-found" verwenden. Beide tragen zur Leistungssteigerung bei, dienen aber unterschiedlichen Anwendungsfällen.

Welches Tool verwende ich wann?

content-visibility: auto implementieren

Inhalte außerhalb des Bildschirms auswählen

OBLIGATORISCH: Du MUSST genau angeben, welche Elemente content-visibility: auto erhalten.

• DO target large, self-contained layout blocks that are strictly below the initial fold (e.g., card items in an infinite feed, trailing comments, or bottom-heavy layout sections).
• Wenden Sie dieses Attribut NICHT auf Elemente im anfänglichen Darstellungsbereich „above the fold“ an. Dadurch wird der Browser gezwungen, die Sichtbarkeitsgrenzen vor dem Rendern zu bewerten, was paradoxerweise die Leistung beim Seitenaufbau verzögert.
• DO target elements with deep or complex internal DOM structures to maximize rendering cost savings.

Implementierungsschritte

1. OBLIGATORISCH: Identifizieren Sie schwere Abschnitte, die beim ersten Laden nachweislich nicht auf dem Bildschirm zu sehen sind.
2. OBLIGATORISCH: Wenden Sie content-visibility: auto auf jedes dieser Elemente außerhalb des Bildschirms an.
3. ERFORDERLICH: Geben Sie für jedes Element mit contain-intrinsic-size eine geschätzte Größe der Layoutstruktur an.

contain-intrinsic-size verwenden

OBLIGATORISCH: Du MUSST content-visibility: auto mit contain-intrinsic-size koppeln. Andernfalls wird der Browser gezwungen, das Element auf eine Höhe von 0 Pixel zu reduzieren, wenn es sich außerhalb des Bildschirms befindet. Das führt zu starken Layoutverschiebungen und Sprüngen der Bildlaufleiste, wenn der Nutzer scrollt.

Die CSS-Kurzschreibweise contain-intrinsic-size dient als Platzhalterdimension. Mit dem Schlüsselwort auto kann sich der Browser die genaue Größe merken, sobald das Element gerendert wurde. Diese berechnete Größe wird dann anstelle des Platzhalters verwendet, wenn das Element wieder aus dem Bildschirmbereich verschwindet.

Beispielcode

/* DO ONLY apply this class to items OUTSIDE the initial layout viewport */
.heavy-section-deferred {
  /* MANDATORY: Skips rendering calculations when off-screen */
  content-visibility: auto;
  
  /* Mandatory: Provide an estimated size to prevent layouts shifts.
    - 'auto' is optional and enables the browser to remember the actual size
      once rendered. It must be paired with a <length> value to be used for
      the first render.
    - 'none' tells the browser not to apply any intrinsic width to this element.
      It can be used for either the height or the width value.
    - '150px' is the estimated height of this element. This can be any valid
      CSS <length> value.
   */
  contain-intrinsic-size: auto none auto 150px; 
}

content-visibility: hidden implementieren

1. Schwere Abschnitte identifizieren: Suchen Sie nach Layoutblöcken, die anfangs ausgeblendet sind (z.B. zusätzliche Zeilen in einer großen Datentabelle).
2. CSS anwenden: Fügen Sie dem Element content-visibility: hidden hinzu.
3. Element einblenden: Wenn das Element eingeblendet werden soll, ändern Sie die Property content-visibility in visible oder auto.

Beispielcode

.cached-view {
  /* Hides content but caches rendering state */
  content-visibility: hidden;
}

.cached-view.is-active {
  content-visibility: visible;
}

Da content-visibility: hidden das Element und seine untergeordneten Elemente aus der Baumstruktur für Barrierefreiheit und der Suche auf der Seite ausschließt, sollten Sie es NICHT verwenden, wenn der Inhalt im ausgeblendeten Zustand auffindbar bleiben muss. Wenn versteckte Inhalte über die native Funktion „In-Page suchen“ durchsuchbar bleiben sollen, verwende hidden="until-found" wie unter Versteckte Inhalte suchen beschrieben.

Best Practices

• VERWENDEN Sie contain-intrinsic-size mit content-visibility: auto. Andernfalls muss die Höhe beim Scrollen neu berechnet werden, was zu Sprüngen im Darstellungsbereich oder zu Darstellungsfehlern führt.
• Wenden Sie content-visibility: auto NICHT auf Elemente im Darstellungsbereich „above the fold“ an, da dies das Rendering wichtiger Seiten verzögert.
• OBLIGATORISCHE Überprüfung der Barrierefreiheit: Wenn Sie content-visibility: auto anwenden, MÜSSEN Sie die sequenzielle Erreichbarkeit über die Tastatur überprüfen. In bestimmten Konfigurationen von Hilfstechnologien werden Offscreen-Knoten, die content-visibility: auto verwenden, möglicherweise aus der Baumstruktur für Bedienungshilfen oder sequenziellen Navigationsrouten ausgeschlossen, bis der Fokus explizit auf sie verschoben wird. Testen Sie die lineare Navigation über die Bildschirmgrenzen hinaus nur mit der Tastatur.

Fallback-Strategien

content-visibility Fallback

Wenn content-visibility nicht unterstützt wird, wird es vom Browser ignoriert. In den meisten Fällen benötigt content-visibility: auto keinen Fallback, ohne ihn gehen jedoch Leistungssteigerungen verloren. In einem nicht unterstützten Browser bleiben content-visibility: hidden-Elemente vollständig sichtbar. Verwenden Sie die Featureerkennung, um ein Fallback zu implementieren.

/* Default for everyone */
.inactive {
  display: none;
}

/* Modern Browsers only */
@supports (content-visibility: hidden) {
 .inactive {
    display: block; /* Turn the layout box back on */
    content-visibility: hidden;
  }
}