Webgeschwindigkeit: 12 Neuerungen im Jahr 2022

In diesem Artikel werfen wir einen Blick auf einige Eigenschaften, Techniken oder Tools, die uns im Jahr 2022 besonders aufgefallen sind.

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

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

Während WebP bereits seit über zwei Jahren weit verbreitet ist, erschien die Unterstützung für AVIF in Safari erst im September dieses Jahres mit der Veröffentlichung von iOS 16 und macOS Ventura. Bedenken Sie, dass nicht alle Safari-Nutzer bereits ein Upgrade durchgeführt haben und dass Edge AVIF noch nicht unterstützt. WebP können Sie jedoch mit einiger Sicherheit verwenden.

2) Änderung der Berechnung der CLS-Metrik#

Wie wir im PageSpeed.ONE-Beratungsteam selbst festgestellt haben, ist das korrekte Verständnis der Metrikberechnung eine grundlegende Voraussetzung für eine erfolgreiche Optimierung.

Die Methodik zur Messung der Cumulative Layout Shift-Metrik hat sich mehrmals geändert, zuletzt recht drastisch. Wenn Sie also Begriffe wie Session Window, Session Gap verstehen und wissen möchten, wie das alles zusammen funktioniert, lesen Sie unseren Artikel über CLS.

3) Early Hints: Laden Sie Ressourcen noch früher als mit Preload#

Im Jahr 2022 hat Chrome eine interessante Neuerung namens Early Hints eingeführt. Es handelt sich um einen HTTP-Statuscode (103 Early Hints), der es ermöglicht, dem Server einen „Hinweis“ auf kritische Teileressourcen zu geben.

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 ab Version 101 bringen eine Neuerung, die in der Prioritätenarbeit viel weiter geht. Priority Hints arbeiten mit dem Attribut fetchpriority, welches einem HTML-Element hinzugefügt werden kann, um die Priorität seines Downloads zu erhöhen oder zu verringern. Mehr erfahren Sie auch auf web.dev.

5) Schritt-für-Schritt-Anleitung zur Messung der Webgeschwindigkeit (und unser Tester 3.0)#

Martin Michálek hat für Sie eine aktuelle Anleitung zur Messung der Webgeschwindigkeit erstellt. Messen Sie richtig? Und messen Sie die Domain, die spezifische URL und auch Gruppen von Seiten gemäß den Anforderungen von Google? Der Text richtet sich vor allem an nicht-technische Personen 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 den First Input Delay (FID) ersetzen soll, da derzeit 95 % der Webseiten den FID bestehen. FID misst zudem nur die erste Interaktion und einen Teil des Interaktionszyklus. INP wird alle Interaktionen während des Seitenaufrufs messen, und ihr Grenzwert ist vorläufig auf 200 ms festgelegt. Weitere Informationen finden Sie in unserem Artikel über die INP-Metrik. Wir fügen auch einige Tipps hinzu, wie Sie die Metrik INP optimieren können.

7) Performance Insights: Einfache und übersichtliche Ansicht der Geschwindigkeit#

Wenn Sie die Geschwindigkeit optimieren möchten, aber der Performance-Tab in Chrome DevTools Ihnen zu komplex erscheint, probieren Sie Performance Insights aus. Dieses Tool zeigt nur die relevantesten Informationen, insbesondere im Hinblick auf Web Vitals. Eine detaillierte Anleitung, wie Sie das Tool verwenden, finden Sie auf der Website der Chrome-Entwickler.

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

Wir haben begonnen, die CSS-Regel size-adjust häufig zu nutzen, die bereits 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 solche Situationen gibt es die neue CSS-Eigenschaft size-adjust und ascent-override sowie dieses 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 mit Bildern zu erreichen. Eine davon ist die CSS-Eigenschaft aspect-ratio, die andere die altbewährten Attribute width und height in HTML. Der Autor fügt viele interessante Details hinzu. Wussten Sie zum Beispiel, dass der Ausdruck aspect-ratio: auto 16/9 sicherstellt, dass einem Element das Seitenverhältnis 16

zugewiesen wird, aber wenn das Bild ein anderes Verhältnis hat, wird dieses nach dem Laden angewendet?

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

Seit Safari-Version 15.4, die im März dieses Jahres 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 stellt sicher, dass Bilder nur geladen werden, wenn sie im Viewport erscheinen sollen, was das Netzwerk schont und wichtigeren Seiteninhalt priorisiert.

11) Back/Forward Cache in Chrome#

Bfcache ist ein Cache im Browser-Speicher, der einen vollständigen Schnappschuss der Seite speichert (einschließlich vieler JavaScript-Dateien), 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 beschließt, zurückzukehren.

Seit Chrome-Version 96 ist Bfcache für alle Nutzer des Chrome-Browsers verfügbar, sowohl auf Desktops als auch auf mobilen Geräten. Dies könnte interessante Auswirkungen auf die Geschwindigkeit bei echten Nutzern haben, ebenso wie Daten aus dem Chrome UX Report.

12) Vorausladendes Rendering der gesamten Seite im Chrome-Browser#

Manchmal ist es sehr wahrscheinlich, dass ein Nutzer bald zu einer neuen 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 zu dieser Seite erfolgt, wird die im Hintergrund geladene Seite „vorab geladen“ oder sofort gerendert.

Damit endet unser Überblick über das Jahr 2022. Was erwarten wir für 2023? Sicherlich wird die Unterstützung der bereits eingeführten Funktionen in allen Browsern verbessert.

Wir sind auch gespannt, wie und wann genau Google die INP-Metrik nutzen wird. Wir werden die Entwicklungen im Bereich der Web-Performance genau verfolgen und Ihnen aktuelle Informationen darüber liefern. Folgen Sie uns auf Twitter, LinkedIn oder Facebook.

Tags:Web PerformanceINP