Webgeschwindigkeit: 12 Neuheiten des Jahres 2022

In diesem Artikel werfen wir einen Blick auf einige der Merkmale, Techniken oder Werkzeuge, die uns im Jahr 2022 besonders beeindruckt haben.

1) WebP- und AVIF-Bilder in fast allen Browsern#

Die Unterstützung für neue Formate hat sich erneut verbessert. Moderne Bildformate wie WebP und AVIF können Webseiten erheblich beschleunigen, indem sie dieselben Informationen in kleinere Dateien kodieren.

Während WebP seit über zwei Jahren weitreichend unterstützt wird, erschien die Unterstützung für AVIF in Safari erst diesen September mit der Veröffentlichung von iOS 16 und macOS Ventura. Beachten Sie, dass nicht alle Safari-Nutzer bereits ein Upgrade durchgeführt haben und dass Edge AVIF immer noch nicht unterstützt. WebP können Sie jedoch recht bedenkenlos verwenden.

2) Änderung der Berechnung der CLS-Metrik#

Wie wir im Team von PageSpeed.ONE festgestellt haben, ist das richtige Verständnis der Metrikberechnung eine grundlegende Voraussetzung für eine erfolgreiche Optimierung.

Die Methodik zur Messung der Metrik Cumulative Layout Shift hat sich mehrfach geändert, zuletzt recht grundlegend. Wenn Sie also Begriffe wie Session Window, Session Gap verstehen und erfahren möchten, wie alles zusammenarbeitet, lesen Sie unseren Artikel über CLS.

3) Early Hints: Laden Sie Ressourcen noch vor dem Preload#

Eine interessante Neuerung hat 2022 ihren Weg in Chrome gefunden: Early Hints. Es handelt sich um einen HTTP-Statuscode (103 Early Hints), der es ermöglicht, dem Server „Hinweise“ auf kritische Teilressourcen zu senden.

Während der Server die Hauptressource generiert, werden dank Early Hints bereits kritische Dateien (CSS, JS) im Browser heruntergeladen, was die Geschwindigkeit von Webseiten verbessern kann.

4) Priority Hints in Chrome und Edge ab Version 101#

Chrome und Edge führen ab Version 101 eine Neuerung ein, die bei der Arbeit mit Prioritäten viel weitergeht. Priority Hints (Empfehlungen zur Priorisierung) arbeiten mit dem Attribut fetchpriority, das einem HTML-Element hinzugefügt werden kann, um die Priorität seines Downloads zu erhöhen oder zu verringern. Mehr darüber erfahren Sie auch auf web.dev.

5) Schrittweises Webgeschwindigkeits-Messen (und unser Tester 3.0)#

Martin Michálek hat für Sie eine aktuelle Anleitung zur Messung der Webgeschwindigkeit vorbereitet. Messen Sie richtig? Und messen Sie die Domain, spezifische URLs und auch Seitengruppen, wie es Google von uns verlangt? Der Text richtet sich vor allem an Nichttechniker und zeigt, wie Sie die Messung mit der dritten Version unseres Testers erleichtern können.

6) Einführung einer neuen Metrik: Interaction to Next Paint (INP)#

Interaction to Next Paint ist derzeit eine experimentelle Metrik, die die Reaktionszeit einer Webseite nach einer Benutzerinteraktion misst. Google behauptet, dass sie in den Core Web Vitals bald First Input Delay (FID) ersetzen könnte, da FID derzeit von 95 % der Webseiten erfüllt wird. FID misst außerdem nur die erste Interaktion und einen Teil des Interaktionszyklus. INP wird alle Interaktionen während des Seitenbrowsings messen, und ihre Grenze ist derzeit auf 200 ms festgelegt. Mehr dazu finden Sie in unserem Artikel über die INP-Metrik. Zudem geben wir einige Tipps, wie man die Metrik INP optimieren kann.

7) Performance Insights: Ein einfacherer und klarerer Blick auf die Geschwindigkeit#

Wenn Sie die Geschwindigkeit optimieren möchten, aber der Performance-Tab in den Chrome DevTools Ihnen zu kompliziert erscheint, versuchen Sie es mit Performance Insights. Dieser zeigt nur die relevantesten Informationen an, insbesondere in Bezug auf Web Vitals. Eine detaillierte Anleitung zur Nutzung des Tools wurde auf der Website von Chrome Developers verfasst.

8) CSS size-adjust: System- und Web-Schriften in Harmonie#

Wir begannen, das CSS-Regel size-adjust häufig zu nutzen, das bereits eine hohe Unterstützung in Browsern hat. Der Unterschied zwischen dem Webfont aus dem Design Ihrer Webseite und der Systemschrift kann unerwünschte Layoutverschiebungen (CLS) verursachen. Für diese Situationen gibt es die neue CSS-Eigenschaft size-adjust und ascent-override und ein Tool, das Ihnen die Implementierung erleichtert.

9) CLS: Wie man das Seitenverhältnis von Bildern sicherstellt und unerwünschte Layoutverschiebungen vermeidet#

Jake Archibald beschreibt in seinem Artikel zwei Techniken, um ein stabiles Layout zu erreichen, in dem Bilder enthalten sind. Eine davon ist die CSS-Eigenschaft aspect-ratio, die andere die altbekannten HTML-Attribute width und height. Dazu liefert der Autor viele interessante Details. Wussten Sie zum Beispiel, dass aspect-ratio: auto 16/9 den Elementen zwar das Verhältnis 16

zuweist, aber wenn das Bild ein anderes Verhältnis hat, dieses beim Laden angewendet wird?

10) Volle Unterstützung für natives Lazyloading jetzt auch in Safari#

Seit Safari Version 15.4, die diesen März veröffentlicht wurde, unterstützen alle Browser das Attribut loading="lazy" bei Bildern. Für die Unterstützung des Lazy Loadings bei <iframe> muss die Funktion in einigen Browsern noch aktiviert werden. Natives Lazy Loading von Bildern sorgt dafür, dass Bilder nur dann geladen werden, wenn sie kurz davor sind, im Viewport zu erscheinen, was das Netzwerk entlastet und wichtigeren Seiteninhalt priorisiert.

11) Back/Forward Cache in Chrome#

Bfcache ist ein Browser-Cache, der einen vollständigen Schnappschuss der Seite speichert (einschließlich vieler JavaScripts), während der Benutzer die Seite verlässt. Wenn die gesamte Seite im Speicher ist, kann der Browser sie schnell und einfach wiederherstellen, wenn der Benutzer zurückkehrt.

Seit Chrome Version 96 ist Bfcache für alle Chrome-Nutzer sowohl am Desktop als auch auf mobilen Geräten verfügbar. Dies könnte interessante Auswirkungen auf die Geschwindigkeit für reale Benutzer haben, einschließlich Daten aus dem Chrome UX Report.

12) Prerendering ganzer Seiten in Chrome#

Manchmal ist es sehr wahrscheinlich, dass ein Benutzer bald auf eine neue Seite wechselt, und seit der Veröffentlichung von Chrome Version 108 beginnt der Browser, die Seite bereits vor dem Wechsel zu laden.

Wenn der Wechsel auf diese Seite erfolgt, wird die im Hintergrund geladene Seite „vorgeladen“ oder sofort angezeigt.

Damit endet unser Rückblick auf das Jahr 2022. Was erwarten wir für 2023? Sicherlich wird sich die Unterstützung der bereits eingeführten Funktionen in allen Browsern verbessern.

Wir sind auch gespannt, wie und wann genau Google die INP-Metrik nutzen wird. Wir werden die Neuigkeiten rund um Web Performance auf jeden Fall im Blick behalten und Ihnen frische Informationen darüber liefern. Folgen Sie uns auf Twitter, LinkedIn oder Facebook.

Tags:Web PerformanceINP