Verbessern Sie die anfängliche Ladezeit, indem Sie das Rendern von nicht sichtbaren Inhalten überspringen.
Die Property content-visibility, die in Chromium 85 eingeführt wird, ist möglicherweise eine der wirkungsvollsten neuen CSS-Eigenschaften zur Verbesserung der Seitenladeleistung. Mit content-visibility kann der User-Agent die Renderingaufgaben eines Elements, einschließlich Layout und Painting, überspringen, bis dies erforderlich ist. Wenn ein großer Teil des Inhalts nicht auf dem Bildschirm zu sehen ist, wird das Rendering übersprungen. Mit dem Attribut content-visibility wird der anfängliche Ladevorgang durch den Nutzer erheblich beschleunigt. Es ermöglicht zudem eine schnellere
Interaktion mit dem Bildschirminhalt. Ziemlich praktisch.
content-visibility: auto auf unterteilte Inhaltsbereiche eine 7-fache Rendering-Leistung beim anfänglichen Ladevorgang erzielen. Lesen Sie weiter, um mehr zu erfahren.Unterstützte Browser
content-visibility stützt sich auf Primitive innerhalb der CSS-Begrenzungsspezifikationen. content-visibility wird vorerst nur in Chromium 85 unterstützt (und gilt als „wertvolles Prototyping“ für Firefox), die Begrenzungsspezifikation wird jedoch in den meisten Browsern unterstützt.
CSS-Begrenzung
Das wichtigste und übergreifende Ziel der CSS-Begrenzung besteht darin, durch die vorhersehbare Isolierung einer DOM-Unterstruktur vom Rest der Seite eine Verbesserung der Rendering-Leistung von Webinhalten zu ermöglichen.
Grundsätzlich kann ein Entwickler einem Browser mitteilen, welche Teile der Seite als Inhalt gekapselt sind. So können Browser den Inhalt beurteilen, ohne den Status außerhalb der Unterstruktur berücksichtigen zu müssen. Wenn der Browser weiß, welche Inhaltselemente (Unterstrukturen) isolierte Inhalte enthalten, kann er Entscheidungen zur Optimierung des Seiten-Renderings treffen.
Es gibt vier Arten der CSS-Einschränkung, die jeweils einen potenziellen Wert für die CSS-Eigenschaft contain darstellen und in einer durch Leerzeichen getrennten Liste von Werten kombiniert werden können:
size: Durch die Größenbeschränkung eines Elements wird sichergestellt, dass der Rahmen des Elements eingeblendet werden kann, ohne die Nachfolgerelemente untersuchen zu müssen. Das bedeutet, dass wir das Layout der Nachfolgerelemente überspringen können, wenn wir nur die Größe des Elements benötigen.layout: Layout-Begrenzung bedeutet, dass die Nachfolgerelemente das externe Layout anderer Felder auf der Seite nicht beeinflussen. Damit können wir das Layout der Nachfolgerelemente überspringen, wenn wir nur noch andere Felder anlegen wollen.style: Durch die Stileindämmung wird sichergestellt, dass Eigenschaften, die sich nicht nur auf Nachfolgerelemente auswirken können, das Element (z.B. Zähler) nicht mit einem Escapezeichen versehen. Dadurch kann die Stilberechnung für die Nachfolgerelemente übersprungen werden, wenn nur Stile für andere Elemente berechnet werden sollen.paint: Die Farbeindämmung sorgt dafür, dass die Nachfolgerelemente der enthaltenen Box nicht außerhalb ihrer Grenzen angezeigt werden. Das Element kann nicht sichtbar überlaufen. Wenn ein Element außerhalb des Bildschirms oder aus anderen Gründen nicht sichtbar ist, sind auch seine Nachfolger nicht sichtbar. Dadurch können wir das Zeichnen der Nachfolger überspringen, wenn das Element nicht sichtbar ist.
Rendering wird mit content-visibility übersprungen
Es kann schwierig sein, die zu verwendenden Begrenzungswerte zu bestimmen, da Browseroptimierungen möglicherweise nur Erfolg haben, wenn ein entsprechender Satz angegeben ist. Sie können mit den Werten experimentieren, um zu sehen, was am besten funktioniert, oder eine andere CSS-Eigenschaft namens content-visibility verwenden, um die erforderliche Begrenzung automatisch anzuwenden. Mit content-visibility können Sie mit minimalem Aufwand für Sie als Entwickler die größtmögliche Leistungssteigerung mit dem Browser erzielen.
Für das Attribut „Inhaltssichtbarkeit“ sind mehrere Werte zulässig. auto ist jedoch der Wert, der sofortige Leistungsverbesserungen bietet. Ein Element mit content-visibility: auto erhält die Begrenzung layout, style und paint. Wenn das Element nicht auf dem Bildschirm zu sehen ist (und sonst nicht für den Nutzer relevant ist – relevante Elemente sind diejenigen, die einen Fokus oder eine Auswahl in ihrer Unterstruktur haben), wird auch die size-Eindämmung eingesetzt (und es werden das Malen und das Testen der Treffer beendet).
Was bedeutet das? Kurz gesagt: Wenn das Element außerhalb des Bildschirms sichtbar ist, werden seine Nachfolgerelemente nicht gerendert. Der Browser bestimmt die Größe des Elements, ohne seinen Inhalt zu berücksichtigen, und stoppt dort. Ein Großteil des Renderings, wie Stil und Layout der Unterstruktur des Elements, wird übersprungen.
Sobald sich das Element dem Darstellungsbereich nähert, fügt der Browser die size-Begrenzung nicht mehr hinzu. Der Inhalt des Elements wird gezeichnet und mit Treffern getestet. Dadurch kann das Rendering genau rechtzeitig für den Nutzer ausgeführt werden.
Hinweis zur Barrierefreiheit
Eine der Funktionen von content-visibility: auto besteht darin, dass die nicht auf dem Bildschirm sichtbaren Inhalte im Objektmodell des Dokuments und damit im Baum für Barrierefreiheit verfügbar bleiben (im Gegensatz zu visibility: hidden). Das bedeutet, dass Inhalte auf der Seite gesucht und dorthin navigiert werden können, ohne warten zu müssen, bis sie geladen wurden oder die Rendering-Leistung beeinträchtigt wird.
Umgekehrt sind landmark-Elemente mit Stilelementen wie display: none oder visibility: hidden auch außerhalb des Bildschirms im Baum für Barrierefreiheit zu sehen, da der Browser diese Stile erst rendert, wenn sie den Darstellungsbereich erreichen. Damit diese in der Baumstruktur für Bedienungshilfen nicht zu sehen sind und somit für Unordnung sorgen können, musst du auch aria-hidden="true" hinzufügen.
Beispiel: Reiseblog
content-visibility: auto auf unterteilte Bereiche auf der linken Seite an. Die Ergebnisse zeigen die Renderingzeiten von 232 ms bis 30 ms beim ersten Seitenaufbau.Ein Reiseblog enthält in der Regel eine Reihe von Geschichten mit wenigen Bildern und beschreibendem Text. In einem typischen Browser passiert Folgendes, wenn ein Reiseblog aufgerufen wird:
- Ein Teil der Seite wird zusammen mit allen erforderlichen Ressourcen aus dem Netzwerk heruntergeladen.
- Der Browser gestaltet den gesamten Inhalt der Seite, ohne zu berücksichtigen, ob er für den Nutzer sichtbar ist.
- Der Browser kehrt zu Schritt 1 zurück, bis alle Seite und alle Ressourcen heruntergeladen sind.
In Schritt 2 verarbeitet der Browser den gesamten Inhalt und sucht nach Elementen, die sich möglicherweise geändert haben. Er aktualisiert den Stil und das Layout aller neuen Elemente sowie die Elemente, die sich möglicherweise durch neue Aktualisierungen verschoben haben. Das ist Rendering-Arbeit. Das braucht Zeit.
Überlegen Sie nun, was passiert, wenn Sie für jede einzelne Story im Blog content-visibility: auto einfügen. Die allgemeine Schleife ist dieselbe: Der Browser lädt Teile der Seite herunter und rendert sie. Der Unterschied besteht jedoch in der Menge an Arbeit, die in Schritt 2 erledigt wird.
Mit der Option „Inhaltssichtbarkeit“ werden alle Inhalte gestaltet und angeordnet, die aktuell für den Nutzer sichtbar sind (sie sind auf dem Bildschirm). Bei der Verarbeitung der Story, die vollständig vom Bildschirm sichtbar ist, überspringt der Browser jedoch das Rendering und gestaltet nur das Elementfeld selbst.
Beim Laden dieser Seite würde die Leistung so aussehen, als würde sie vollständige Meldungen auf dem Bildschirm und leere Felder für jede der nicht angezeigten Meldungen enthalten. Die Leistung ist hier wesentlich besser und die Renderingkosten für das Laden werden voraussichtlich um mindestens 50% gesenkt. In unserem Beispiel zeigt sich eine Steigerung von 232 ms auf 30 ms. Das ist eine 7-fache Leistungssteigerung.
Welche Arbeit müssen Sie leisten, um von diesen Vorteilen zu profitieren? Zunächst unterteilen wir den Inhalt in Abschnitte:
story, um content-visibility: auto zu erhalten. Siehe Demo auf CodepenAnschließend wenden wir die folgende Stilregel auf die Abschnitte an:
.story {
content-visibility: auto;
contain-intrinsic-size: 1000px; /* Explained in the next section. */
}
Natürliche Größe eines Elements mit contain-intrinsic-size angeben
Um die potenziellen Vorteile von content-visibility nutzen zu können, muss der Browser eine Größenbeschränkung anwenden, damit die Renderingergebnisse der Inhalte die Größe des Elements in keiner Weise beeinflussen. Das heißt, das Element wird so
anliegen, als wäre es leer. Wenn für das Element keine Höhe in einem regulären Blocklayout angegeben wurde, ist die Höhe 0.
Dies ist möglicherweise nicht ideal, da sich die Größe der Bildlaufleiste ändert, da jede Story eine Höhe ungleich null hat.
Glücklicherweise bietet CSS eine weitere Eigenschaft, contain-intrinsic-size, die effektiv die natürliche Größe des Elements angibt, wenn das Element von der Größenbeschränkung betroffen ist. In unserem Beispiel legen wir dafür 1000px als Schätzung der Höhe und Breite der Abschnitte fest.
Das bedeutet, dass das Layout so aussieht, als hätte es ein einziges untergeordnetes Element mit Dimensionen "intrinsischer Größe", wodurch sichergestellt wird, dass Ihre unformatierten div-Elemente weiterhin Platz belegen.
contain-intrinsic-size fungiert als Platzhaltergröße anstelle von gerenderten Inhalten.
In Chromium 98 und höher gibt es ein neues auto-Keyword für contain-intrinsic-size. Wenn dies angegeben wird, speichert der Browser die zuletzt gerenderte Größe (falls vorhanden) und verwendet diese anstelle der vom Entwickler bereitgestellten Platzhaltergröße. Wenn Sie beispielsweise contain-intrinsic-size: auto 300px angegeben haben, beginnt das Element mit der intrinsischen Größe 300px in jeder Dimension. Sobald der Inhalt des Elements jedoch gerendert wurde, behält es die gerenderte intrinsische Größe bei.
Alle nachfolgenden Änderungen der Rendering-Größe werden ebenfalls gespeichert. In der Praxis bedeutet dies, dass, wenn Sie ein Element mit angewendetem content-visibility: auto scrollen und dann aus dem sichtbaren Bereich des Elements scrollen, automatisch seine ideale Breite und Höhe beibehalten wird und die Platzhaltergröße nicht wiederhergestellt wird. Diese Funktion ist besonders nützlich für unendliche Scroller, die jetzt automatisch die Größenschätzung mit der Zeit verbessern können, wenn der Nutzer die Seite erkundet.
Inhalte mit content-visibility: hidden werden ausgeblendet
Was ist, wenn die Inhalte unabhängig davon, ob sie auf dem Bildschirm zu sehen sind oder nicht, unverändert bleiben und gleichzeitig die Vorteile des im Cache gespeicherten Renderingstatus nutzen möchten? Geben Sie Folgendes ein:
content-visibility: hidden.
Das Attribut content-visibility: hidden bietet dieselben Vorteile von nicht gerenderten Inhalten und einem im Cache gespeicherten Renderingstatus wie content-visibility: auto außerhalb des Bildschirms. Im Gegensatz zu auto wird es jedoch nicht automatisch auf dem Bildschirm gerendert.
So haben Sie mehr Kontrolle und können den Inhalt eines Elements ausblenden und später schnell wieder einblenden.
Vergleichen Sie dies mit anderen gängigen Möglichkeiten zum Ausblenden des Inhalts eines Elements:
display: none: Blendet das Element aus und zerstört seinen Renderingstatus. Das bedeutet, dass das Einblenden des Elements genauso teuer ist wie das Rendern eines neuen Elements mit demselben Inhalt.visibility: hidden: Blendet das Element aus und behält seinen Renderingstatus bei. Dadurch wird das Element nicht wirklich aus dem Dokument entfernt, da es (und seine Unterstruktur) weiterhin geometrischen Raum auf der Seite einnimmt und weiterhin angeklickt werden kann. Außerdem wird der Renderingstatus bei Bedarf aktualisiert, selbst wenn er ausgeblendet ist.
content-visibility: hidden hingegen blendet das Element aus, behält aber seinen Renderingstatus bei. Erforderliche Änderungen werden also nur vorgenommen, wenn das Element noch einmal angezeigt wird, d. h. das Attribut content-visibility: hidden wird entfernt.
Einige gute Anwendungsfälle für content-visibility: hidden sind die Implementierung erweiterter virtueller Scroller und das Messen des Layouts. Sie eignen sich auch hervorragend für Single-Page-Anwendungen (SPA). Inaktive App-Ansichten können im DOM belassen werden, während content-visibility: hidden angewendet wird, um ihre Anzeige zu verhindern, aber ihren Cache-Status beizubehalten. Dadurch kann die Ansicht schnell gerendert werden, wenn sie wieder aktiv wird.
Effects on Interaction to Next Paint (INP)
INP ist ein Messwert, der bewertet, ob eine Seite zuverlässig auf Nutzereingaben reagieren kann. Die Reaktionsfähigkeit kann durch übermäßige Arbeit im Hauptthread beeinträchtigt werden, einschließlich Renderingarbeiten.
Wann immer Sie den Rendering-Aufwand auf einer bestimmten Seite reduzieren können, geben Sie dem Hauptthread die Möglichkeit, schneller auf Nutzereingaben zu reagieren. Dazu gehört auch das Rendering. Die Verwendung der CSS-Eigenschaft content-visiblity kann ggf. das Rendering reduzieren – insbesondere während des Startvorgangs, wenn der Großteil der Rendering- und Layoutarbeit erfolgt.
Das Reduzieren des Renderings wirkt sich direkt auf INP aus. Wenn Nutzer versuchen, mit einer Seite zu interagieren, die die Eigenschaft content-visibility korrekt verwendet, um das Layout und Rendering nicht sichtbarer Elemente zu verschieben, gibst du dem Hauptthread die Möglichkeit, auf wichtige für den Nutzer sichtbare Arbeit zu reagieren. Dadurch kann der INP-Wert deiner Seite in einigen Situationen verbessert werden.
Fazit
content-visibility und die CSS-Begrenzungsspezifikationen bedeuten, dass Ihre CSS-Datei einige interessante Leistungssteigerungen bietet. Weitere Informationen zu diesen
Eigenschaften finden Sie hier: