Ein CDN (Content Delivery Network) ist ein Netzwerk von Servern, die geografisch verteilt sind, um die Auslieferung von Inhalten an Nutzer zu beschleunigen. Diese Server speichern Kopien von Website-Inhalten und liefern sie von einem Server aus, der dem Nutzer am nächsten ist. Einfach gesagt: Ein CDN hilft, Websites schneller zu machen, indem es die Inhalte von einem nahegelegenen Server ausliefert, statt vom zentralen Standort des Webservers. 

Ein Content Delivery Network (CDN) für Bilder verteilt Bilddateien auf mehrere Server weltweit, damit sie schneller geladen werden können, unabhängig davon, wo sich der Benutzer befindet. Einfach gesagt: Ein CDN für Bilder sorgt dafür, dass Bilder von einem Server in der Nähe des Nutzers geladen werden, was die Ladezeit verkürzt.

Cache-Control-Header für Bilder steuern, wie lange und unter welchen Bedingungen Bilder im Browser-Cache des Nutzers gespeichert werden. Eine effektive Cache-Control-Einstellung kann die Ladezeiten beim wiederholten Besuch der Seite drastisch verkürzen und gleichzeitig die Serverbelastung reduzieren.

‍

Cache-Control für Bilder ist eine Technik, die in den HTTP-Headern von Webseiten definiert, wie lange ein Bild im Cache des Browsers oder eines CDN gespeichert werden soll. Dadurch kann bestimmt werden, wie oft der Browser oder das CDN das Bild erneut vom Server anfordern muss. Einfach gesagt: Cache-Control legt fest, wie lange Bilder zwischengespeichert werden, um die Ladezeiten zu optimieren und Bandbreite zu sparen.

Caching ist ein Mechanismus, der Daten temporär speichert, um den Zugriff auf diese Daten beim nächsten Abruf schneller zu machen. Beim Webhosting bedeutet Caching, dass Inhalte wie Bilder, HTML-Seiten oder Datenbankabfragen in einem Zwischenspeicher abgelegt werden, um die Ladezeiten für die Benutzer zu verkürzen. Einfach gesagt: Caching speichert häufig genutzte Daten, damit sie schneller bereitgestellt werden können, was die Website-Performance verbessert.

Cumulative Layout Shift (CLS) ist eine der wichtigsten Metriken von Google’s Core Web Vitals und misst, wie stark sich das Layout einer Webseite während des Ladevorgangs unerwartet verschiebt. Eine hohe CLS-Wertung deutet auf eine schlechte Nutzererfahrung hin, da visuelle Instabilität den Benutzer verwirren oder verärgern kann, insbesondere wenn diese während der Interaktion auftritt (z.B. beim Klicken auf einen Button, der plötzlich an eine andere Stelle verschoben wird).

Wie wird CLS berechnet?

Der Cumulative Layout Shift (CLS) ergibt sich aus der Summe aller unerwarteten Layoutverschiebungen auf einer Seite. Diese Verschiebungen treten auf, wenn Elemente wie Bilder, Text oder Schaltflächen während des Ladevorgangs ihre Position ändern. Google berechnet den CLS-Wert basierend auf zwei Hauptfaktoren:

1. Impact Fraction: Der Anteil des Viewports, der sich während der Layoutverschiebung verändert. Wenn beispielsweise ein Bild plötzlich nach unten springt und 50 % des sichtbaren Bereichs verändert, beträgt der Impact-Wert 0,5.

2. Distance Fraction: Der Anteil des Viewports, den das verschobene Element tatsächlich zurückgelegt hat. Wenn das Element um 25 % des Bildschirms nach unten verschoben wird, beträgt der Distance-Wert 0,25.

Der CLS-Wert wird als Produkt dieser beiden Werte berechnet:

CLS = Impact Fraction × Distance Fraction

‍

Beispiele für Layoutverschiebungen:‍

- Bilder ohne festgelegte Abmessungen: Wenn Bilder geladen werden, ohne dass ihre Breite und Höhe vorher definiert sind, kann es zu Layoutverschiebungen kommen, sobald das Bild vollständig geladen ist.

- Spätes Laden von Web-Schriftarten: Wenn eine Schriftart erst nachträglich geladen wird und die Größe des Textes ändert, kann dies das Layout verschieben.

- Werbeanzeigen und eingebettete Inhalte: Dynamische Inhalte, wie Banner-Anzeigen oder eingebettete Videos, die plötzlich im sichtbaren Bereich der Webseite auftauchen, können das Layout verschieben.

- Asynchrones Laden von Inhalten: Wenn Teile einer Seite zu unterschiedlichen Zeiten geladen werden, ohne das Layout zu stabilisieren, entstehen Verschiebungen.

‍

Warum ist CLS wichtig?

Eine hohe CLS-Wertung beeinträchtigt die Benutzerfreundlichkeit und kann den Benutzer frustrieren, wenn sich Elemente unerwartet bewegen oder verschieben, insbesondere wenn er versucht, mit der Seite zu interagieren. Zum Beispiel könnte ein Button plötzlich nach unten verschoben werden, gerade in dem Moment, in dem der Nutzer darauf klicken will. Dies führt nicht nur zu Verwirrung, sondern kann auch dazu führen, dass der Nutzer eine andere Schaltfläche oder ein falsches Element anklickt.

Außerdem berücksichtigt Google die CLS-Metrik in seinen Rankings für die Suchmaschinenoptimierung (SEO), was bedeutet, dass eine Seite mit einem hohen CLS-Wert schlechter in den Suchergebnissen platziert werden könnte.

Was gilt als guter CLS-Wert?

Google klassifiziert CLS-Werte in drei Kategorien:

Gut (CLS ≤ 0,1): Keine oder kaum wahrnehmbare Layoutverschiebungen. Dies wird als optimal für die Nutzererfahrung angesehen.

Verbesserungsbedarf (0,1 < CLS ≤ 0,25): Einige kleinere Layoutverschiebungen treten auf, was die Benutzerfreundlichkeit beeinträchtigen kann.

Schlecht (CLS > 0,25): Starke Layoutverschiebungen, die eine schlechte Nutzererfahrung signalisieren.

Wie verbessert man CLS?

Hier sind einige Techniken, um den CLS-Wert zu verbessern und Layoutverschiebungen zu minimieren:

Festlegen von Bild- und Videoabmessungen: Stellen Sie sicher, dass die Abmessungen (Breite und Höhe) für alle Bilder, Videos und eingebetteten Inhalte im HTML/CSS-Code vorgegeben sind. Dies reserviert den Platz im Layout und verhindert Verschiebungen, wenn die Inhalte geladen werden.

Verwenden von Platzhaltern: Verwenden Sie Platzhalter (z. B. graue Blöcke oder animierte Skelettbildschirme), während Inhalte wie Bilder oder Anzeigen geladen werden. Dies sorgt dafür, dass der Platz reserviert bleibt, bis der Inhalt vollständig geladen ist.

Optimieren von Schriftarten: Vermeiden Sie den sogenannten "Flash of Unstyled Text" (FOUT) oder "Flash of Invisible Text" (FOIT), indem Sie Web-Schriftarten korrekt laden. Google empfiehlt das Laden von Schriftarten mit font-display: swap, um das Layout während des Schriftwechsels stabil zu halten.

Vermeiden von nachträglich geladenen Anzeigen: Wenn Anzeigen dynamisch nach dem Seiteninhalt geladen werden, sollten Sie ihnen einen festen Platz im Layout zuweisen, um Layoutverschiebungen zu verhindern.

Vorhersehbares dynamisches Content-Laden: Wenn Inhalte wie Pop-ups oder Bannermeldungen geladen werden, stellen Sie sicher, dass diese den restlichen Inhalt nicht verschieben. Diese sollten in einem Overlay über dem aktuellen Inhalt erscheinen.

Asynchrones Laden von Inhalten optimieren: Stellen Sie sicher, dass beim Laden von Inhalten, die im sichtbaren Bereich erscheinen, das Layout vor dem Laden stabil bleibt.

‍

Tools zur Überprüfung von CLS:

Google PageSpeed Insights: Dieses Tool misst den CLS-Wert und gibt Empfehlungen zur Optimierung.

Lighthouse: Ein Analyse-Tool, das in Google Chrome integriert ist, um den CLS-Wert und andere Web-Vitals zu überwachen.

Chrome DevTools: Entwicklertools, die den CLS direkt auf einer Webseite anzeigen und Layoutverschiebungen sichtbar machen.

Web Vitals Extension: Eine Google Chrome-Erweiterung, die den CLS-Wert und andere Core Web Vitals direkt im Browser anzeigt.

‍

Fazit:

Cumulative Layout Shift (CLS) ist eine wichtige Kennzahl, um die visuelle Stabilität einer Website zu messen. Eine niedrige CLS-Wertung sorgt für eine bessere Benutzererfahrung und trägt zur Verbesserung des SEO-Rankings bei. Durch die richtigen Optimierungen wie das Festlegen von festen Abmessungen für Bilder, das Vermeiden dynamischer Layoutverschiebungen und das Optimieren von Schriftarten kann die CLS-Wertung erheblich verbessert werden.