Google aktualisiert seinen Algorithmus erneut – und er ist groß. Das Core Web Vitals-Update wird im Mai eingeführt und dreht sich alles um Geschwindigkeit und Benutzerfreundlichkeit. Genauer gesagt wird Google beginnen, alle folgenden Punkte zu messen: Größte Contentful Pain (LCP), erste Eingabeverzögerung (FID) und kumulative Layoutverschiebung (CLS).
In diesem Blogbeitrag konzentrieren wir uns nur auf eines der folgenden Elemente: Kumulative Layoutverschiebung und was Sie als Frontend-Entwickler tun können, um dies zu beheben.
Woher wissen Sie, ob Sie kumulative Layoutverschiebungen haben
Verwenden Sie Page Speed Insights, um die Veränderung der Inhalte Ihrer Website quantitativ zu sehen (zusammen mit anderen Kennzahlen wie LCP und FID).
Da es bei Core Web Vitals um die Benutzererfahrung geht, könnte es hilfreich sein, ein Tool wie die Leistungsüberwachung der Druckluftbremse zu verwenden. Mit einem für Entwickler entwickelten Tool zur Leistungsüberwachung erhalten Sie sofortige Einblicke in die UX Ihrer Anwendung mit Funktionen, die Apdex-Score, Latenz, Abfrage- und Routeninformationen und vieles mehr messen.
In Kombination mit Moovweb, das die Geschwindigkeit Ihrer Website vollständig optimiert, sind Sie an einem hervorragenden Ort, um nicht nur die UX Ihrer Anwendung zu messen, sondern auch fünf Schritte voraus zu sein.
Sobald Sie wissen, wo Ihre Website bis hin zu UX und CLS steht, ist es an der Zeit, diese zu beheben.
Wie Frontend-Entwickler kumulative Layoutverschiebungen beheben können
Haben Sie schon einmal versucht, auf einen artikel auf einer Website zu klicken, nur um ihn plötzlich zu verschieben und am Ende auf etwas anderes zu klicken? Oder vielleicht liest man gerade einen artikel und alles bewegt sich nach unten. Ja, das sind Beispiele für kumulative Layoutverschiebungen. Eine kumulative Layoutverschiebung tritt auf, wenn ein Element auf Ihrer Website geladen wird, nachdem alles andere geladen wurde. Das kann für Benutzer sehr nervig sein. Google wird Sie nicht nur darauf aufmerksam machen, sondern Sie verlieren auch potenzielle Nutzer, die lieber auf eine andere Website gehen, als darauf zu warten, dass Ihre geladen wird. Vermeiden Sie dies, indem Sie sich die Zeit nehmen, CLS-Probleme zu beheben, bevor sie sich auf Ihre Benutzer auswirken.
Als Frontend-Entwickler können Sie die folgenden vier Maßnahmen ergreifen, um die kumulierte Layoutverschiebung auf Ihrer Website zu reduzieren:
Schriftarten aktualisieren
Schriftarten fügen einer Website Charakter und Persönlichkeit hinzu, aber diese speziellen Schriftarten sind kostenpflichtig. Aufgrund der großen Größe von Schriftartdateien neigen Browser dazu, diese durch die Verwendung von FOIT zu kompensieren, auch bekannt als Flash von unsichtbarem Text. FOIT kann die Ladezeiten von Webseiten erheblich verlangsamen.
Anstatt sich auf das FOIT zu verlassen, sollten Sie die Methode „Flash of Unstyled Text“ (FOUT) verwenden. Die einfachste Möglichkeit, den Text der Website in FOUT zu ändern, ist mit der folgenden Methode:
Traditionell wird die Schriftart als @font-face { font-family: Georgia; } codiert
Stattdessen sollten Sie folgendes Code-Bit verwenden: @Font-face { font-family: Georgia; font-Display: Swap; }
Die „Font-Display“ teilt der API t0-Anzeigefarbe sofort mit einer Systemschriftart mit. Sobald die Schriftartdatei geladen wurde, wird sie mit der Schriftart ausgetauscht, die Sie auf Ihrer Website wünschen.
Leider funktioniert die FOUT-Methode möglicherweise nicht mit allen Browsern. Wenn dies nicht der Fall ist, kehrt der Browser zu seinem Standardverhalten zum Laden von Schriftarten zurück. Mit diesem Tool können Sie eine detaillierte Aufschlüsselung dieser Verhaltensweisen anzeigen.
Die zweite Methode, mit der Sie lange Ladezeiten für Schriftartdateien vermeiden können, funktioniert mit allen Browsern, ist aber nicht so einfach wie das Aktualisieren einer Codezeile.
Wie bei der vorherigen Methode warten Sie, bis die Standardschriftart vollständig geladen ist, und schalten sie dann für eine benutzerdefinierte Schriftart aus. Der Unterschied besteht darin, dass Sie sowohl in den CSS- als auch in den JavaScript-Code Ihrer Website eintauchen müssen.
Zunächst sollten Sie die Verwendung benutzerdefinierter Schriftarten beim ersten Laden der Seite vermeiden, indem Sie Ihr CSS aktualisieren. Verwenden Sie eine Systemschriftart, um den Text auf Ihrer Seite so schnell wie möglich herunterzuladen.
Mithilfe von JavaScript-Code können Sie dann den Font Face Observer implementieren. Dieser Code überwacht und benachrichtigt Sie, wenn eine Webschriftart geladen wird. Mithilfe von Scrollereignissen kann der Font Face Observer Schriftarten schnell laden. Die vollständige Anleitung finden Sie auf der Seite fontfaceobserver GitHub.
Als Frontend-Entwickler sind dies einige einfache Änderungen, die Sie vornehmen können, um die Ladezeiten Ihrer Schriftarten zu verbessern.
Korrigieren Sie Bilder auf Ihrer Website
Die Art und Weise, wie Bilder auf Ihrer Website geladen werden, wirkt sich erheblich auf die kumulierten Layoutverschiebungen aus und reduziert diese. Bilder, die ohne Attribute hochgeladen werden, führen tendenziell zu massiven Verschiebungen. Deshalb sollten Sie beim Hinzufügen von Bildern zu Ihrer Website die folgenden Vorgehensweisen anwenden:
Verwenden Sie Größenattribute für Bilder und Videoelemente
Vor dieser Aktualisierung hatte das Hinzufügen von Attributen „Breite“ und „Höhe“ zu Ihren Bildern kaum bis gar keinen Einfluss auf die Platzierung Ihrer Website bei Google. Mit der Aktualisierung der Kernwerte wird es einen entscheidenden Unterschied machen. Sie sollten sich die zusätzliche Zeit nehmen, um Ihre Bilder ab jetzt mit Attributen zu versehen.
Wenn Sie ein Bild als solches hochladen:
Beispiel: <h1->Fehlerüberwachung ist fantastisch</h1>
<p> fehlerhafte Codes schnell finden und beheben< /p>
<Img src=”Erron_image.jpg” alt=””>
<p>mit der richtigen Fehlerüberwachungssoftware können Sie Ihren Code fehlerfrei halten.</P>
Es geschieht Folgendes: Der Browser des Benutzers liest die HTML-Datei und lädt sie zuerst herunter. Danach wird das Bild heruntergeladen. Was am Ende passiert, ist eine Verschiebung des Inhalts auf der Webseite, während der Browser Platz für das Bild schafft.
Dieses CLS-Problem kann ganz einfach behoben werden: Sie müssen lediglich die Attribut-Tags für Höhe und Breite zu Ihrem Bild hinzufügen.
Beispiel: <h1->Fehlerüberwachung ist fantastisch</h1>
<p> fehlerhafte Codes schnell finden und beheben< /p>
Breite=”450” Höhe=”450”>
<p>mit der richtigen Fehlerüberwachungssoftware können Sie Ihren Code fehlerfrei halten.</P>
Wenn Sie dem Bild Breite und Höhe hinzufügen, weisen Sie den Browser an, auf der Webseite Platz für das Bild zu lassen, während der Rest des HTML-Dokuments heruntergeladen wird.
Für einen weniger strengen Ansatz können Sie auch CSS-Felder für das Seitenverhältnis verwenden.
Keiner der beiden Ansätze ist falsch, aber es ist zwingend erforderlich, dass Sie den einen oder anderen Ansatz verwenden, um kumulative Layoutverschiebungen auf Ihrer Website zu verhindern.
Platzieren Sie sorgfältig dynamische Werbung
Werbeanzeigen sind schrecklich, wenn es um die Verschiebung des Inhalts geht. Wenn Sie nicht vorsichtig mit ihnen sind, werden Ihre Inhalte überall angezeigt.
Verwenden Sie beim Platzieren von Anzeigen auf Ihrer Website die folgenden Tipps, um Verschiebungen in Ihren Inhalten zu vermeiden:
-
Genau wie bei Bildern müssen Sie sicherstellen, dass die Werbeanzeigen ausreichend Platz auf Ihrer Website haben.
-
Platzieren Sie keine Werbung ganz oben auf Ihrer Webseite. Es besteht die Möglichkeit, dass dies zu einer inhaltlichen Verschiebung für alle darunter liegenden Inhalte führt.
-
Platzieren Sie Anzeigen in der Mitte oder am Ende einer Webseite.
Dies sind die Best Practices, wenn es um dynamische Werbung geht. Sie verbessern nicht nur die Benutzererfahrung drastisch, sondern auch kumulative Layoutverschiebungen.
Seien Sie vorsichtig bei eingebetteten Widgets
Eingebettete Widgets sind ein entscheidender Faktor für Websites. Sie ermöglichen es Ihnen, interessante und tragbare Inhalte für Ihre Website zu erstellen, aber sie haben erhebliche Nachteile. Im Gegensatz zu Bildern und Anzeigen kann es schwierig sein, Platz auf Ihrer Website für ein Widget zu reservieren.
Angenommen, Sie haben ein Widget für Twitter. Manchmal kann ein Tweet nur wenige Zeichen lang sein, manchmal kann er Bilder und Links enthalten. Woher wissen Sie also, wie viel Speicherplatz Sie reservieren müssen, wenn sich der benötigte Speicherplatz ständig ändert?
Sie können dies beheben, indem Sie einen Platzhalter für Ihre Einbettungen hochladen, indem Sie Speicherplatz auf Ihrer Website reservieren. Aber wie geht das?
Sie müssen einen „GlobalKey“ erstellen und ihn Ihrem Widget zuweisen. Sobald Sie einen Schlüssel haben, können Sie die Größe Ihres Widgets ermitteln und den entsprechenden Speicherplatz auf Ihrer Website für Ihre Widgets reservieren.
Schlussfolgerung
Es gibt nur wenige Methoden, mit denen Sie kumulative Layoutverschiebungen auf Ihrer Website reduzieren können. Viele Probleme im Zusammenhang mit CLS beinhalten Platz und die Reservierung von genügend Speicherplatz auf Ihrer Website für Bilder, Anzeigen und Widgets. Wie Sie Schriftarten hochladen, wirkt sich auch erheblich auf die Geschwindigkeit Ihrer Website aus.
Denken Sie daran, dass Sie mit der Einführung von Core Web Vitals im Mai diese Änderungen jetzt vornehmen sollten, um nicht in die Rangliste von Google zu fallen.
