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. 

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.

FastCGI ist ein Kommunikationsprotokoll, das die Verarbeitung von Skripten effizienter macht, indem es den Server von wiederholten Prozessstarts entlastet. Es ermöglicht persistente PHP-Prozesse und ist somit schneller und ressourcenschonender als traditionelle CGI-Methoden.

Lazy Loading ist eine Technik, bei der Bilder und andere Ressourcen erst dann geladen werden, wenn sie für den Benutzer sichtbar sind. Dies reduziert die initiale Ladezeit einer Website und spart Bandbreite. Einfach gesagt: Lazy Loading lädt Bilder erst dann, wenn der Nutzer zu ihnen scrollt, was die Ladezeit der Seite verbessert und unnötigen Datenverkehr vermeidet.

NVMe ist eine Hochleistungs-Speichertechnologie, die Flash-Speicher mit geringster Latenz und maximaler Geschwindigkeit anbindet. Im Hosting-Bereich ermöglicht NVMe schnelle Ladezeiten und eine bessere Performance, insbesondere für datenintensive Anwendungen.

PHP-FPM ist eine Alternative zum traditionellen mod_php für die Ausführung von PHP-Skripten. Es ermöglicht die Nutzung von FastCGI, um PHP-Prozesse effizient zu verwalten und sorgt so für eine höhere Leistung und geringere Serverlast. Besonders geeignet für hoch frequentierte Websites, da es Prozesse gezielt steuert und Caching optimiert.

Rsync ist ein beliebtes Tool zur Datei-Synchronisation und -Übertragung. Es arbeitet inkrementell, was bedeutet, dass nur geänderte Teile einer Datei übertragen werden. Ideal für Backups oder das Spiegeln von Server-Inhalten.

Time to First Byte (TTFB) ist ein Messwert, der die Zeit angibt, die der Browser benötigt, um das erste Datenbyte vom Webserver zu erhalten, nachdem eine Anfrage gestellt wurde. Es ist eine der wichtigsten Metriken, die die Ladegeschwindigkeit und die Performance einer Website beeinflussen.

TTFB im Detail:

TTFB wird in drei Schritten gemessen:

Anfragezeit: Die Zeit, die der Browser benötigt, um die Anfrage an den Server zu senden. Dies hängt von der Netzwerklatenz und der Entfernung zwischen dem Benutzer und dem Server ab.
Serververarbeitungszeit: Die Zeit, die der Server benötigt, um die Anfrage zu verarbeiten und eine Antwort zu generieren. Dies wird durch die Serverleistung, die Effizienz der Serverkonfiguration und die Datenbank- oder Anwendungslast beeinflusst.
Antwortzeit: Die Zeit, die der Server benötigt, um das erste Byte der Antwort zurück an den Browser zu senden.

‍
Warum ist TTFB wichtig?
Ein niedriger TTFB-Wert ist entscheidend für eine schnelle Ladezeit einer Website. Je kürzer die TTFB, desto schneller wird die Seite geladen und desto besser ist die Benutzererfahrung. Eine lange TTFB kann auf Probleme hinweisen, wie:

- Langsame Serverleistung oder Überlastung
- Ineffiziente Datenbankabfragen
- Unoptimierte Back-End-Prozesse
- Große geografische Entfernung zwischen Server und Benutzer

‍
Typische TTFB-Werte:
Unter 200 ms: Hervorragend, die Website reagiert sehr schnell.
200 - 500 ms: Gut, aber es gibt noch Raum für Optimierungen.
500 - 1.000 ms: Akzeptabel, aber eine Verbesserung wäre vorteilhaft.
Über 1.000 ms: Langsam, es sollten Maßnahmen zur Reduzierung der Serverantwortzeit ergriffen werden.
‍

Tools zur Messung von TTFB:
Es gibt verschiedene Tools, um den TTFB zu messen:

- Commerce Score: Misst neben TTFB auch noch andere Kennzahlen https://commerce-score.io/de

- Google PageSpeed Insights: Bewertet die Leistung einer Website und gibt Empfehlungen zur Verbesserung.
- WebPageTest: Detaillierte Analyse des TTFB und anderer Performance-Metriken.
- GTMetrix: Bietet Einblicke in die Ladezeiten und den TTFB-Wert.
- Chrome DevTools: Mit den Entwickler-Tools von Chrome kann TTFB in Echtzeit überprüft werden.
‍

Zusammengefasst: TTFB ist eine wichtige Kennzahl für die Performance einer Website und kann durch Maßnahmen wie die Verwendung eines CDN, Serveroptimierungen und Caching erheblich verbessert werden. Eine schnelle TTFB führt zu besseren Benutzererfahrungen und kann sich positiv auf das SEO-Ranking einer Website auswirken.

X-Keys sind spezielle Header-Felder, die von Caching-Systemen verwendet werden, um Cache-Inhalte gezielt zu steuern. Sie erlauben es, spezifische Inhalte zu invalidieren oder zu aktualisieren, ohne den gesamten Cache zu leeren – ideal für dynamische Webseiten mit häufig wechselnden Inhalten.

Mod_php ist ein Apache-Modul, das PHP direkt im Webserver ausführt. Es bietet eine einfache Integration, ist jedoch weniger flexibel und performancestark als neuere Alternativen wie PHP-FPM. Es wird oft in kleineren oder älteren Hosting-Setups verwendet.