Was ist der Pagespeed?

Der Begriff Pagespeed oder Seitengeschwindigkeit bezieht sich im Wesentlichen auf die Zeitspanne, in der Webseiten oder Medieninhalte von Servern heruntergeladen und auf dem anfragenden Webbrowser angezeigt werden. Er ist also ein Maß dafür, wie schnell die Inhalte auf Ihrer Seite geladen werden.

Der Pagespeed kann entweder als "Seitenladezeit" (die Zeit, die benötigt wird, um den Inhalt einer bestimmten Seite vollständig anzuzeigen) oder als "Zeit bis zum ersten Byte" (wie lange es dauert, bis Ihr Browser das erste Byte an Informationen vom Webserver erhält) beschrieben werden.

Der Begriff Pagespeed wird seit Jahren durch das Tool Pagespeed Insights von Google geprägt. 

Google gibt nach Eingabe der zu überprüfenden URL eine Gesamtpunktzahl von 100 für die getestete Webseite an:

Der PageSpeed Insights Speed Score enthält Daten aus CrUX (Chrome User Experience Report) und berichtet über zwei wichtige Geschwindigkeitsmetriken:

• First Contentful Paint (FCP)
• DOMContentLoaded (DCL)

Grundsätzlich gibt es aber mehrere Aspekte, die notwendig sind, um die Seitengeschwindigkeit im Zusammenhang mit der Benutzerfreundlichkeit und der Leistung einer Website zu verstehen:

• Die Zeit, die benötigt wird, um das angeforderte Material zusammen mit dem begleitenden HTML-Inhalt an den Browser zu liefern.
• Die Reaktion des Browsers auf das Laden der Seite.
• Die Sicht der Endbenutzer, während die angeforderte Webseite im Browser gerendert wird - dies ist das ultimative empirische Maß für die Ladegeschwindigkeit einer Seite.

Das absolut entscheidende Prinzip bei der Maximierung der Website-Performance besteht darin, sich von Anfang an auf die Optimierung der Seitengeschwindigkeit zu konzentrieren. Plugins zur Leistungsoptimierung, serverseitige Skripte und letzte Optimierungen haben nur minimale - wenn auch spürbare - Auswirkungen auf die Seitengeschwindigkeit und Ladezeiten. Dennoch neigen Webentwickler und Inhaber von Online-Unternehmen dazu, die Seitenladezeiten bei ihren Strategien zur Entwicklung und Gestaltung von Websites zu übersehen.

Warum ist die Ladezeit meiner Website wichtig?

Die Ladezeit Ihrer Website ist wichtig, weil sie einen direkten Einfluss auf die User Experience (UX) hat. Je länger eine Seite zum Laden braucht, desto höher ist die Wahrscheinlichkeit, dass Nutzer abspringen und sich für eine andere Website entscheiden. Wenn Sie also daran interessiert sind, dass Ihre Website so reibungslos wie möglich läuft und Ihre Besucher bei Laune hält, sollten Sie den Fokus auf die Ladezeit legen.

Wie wird der PageSpeed gemessen?

Im Allgemeinen bezeichnet man mit der Ladezeit einer Webseite den in Sekunden gemessene Zeitraum zwischen dem Aufruf und der kompletten Darstellung der Webseite im Browser. In der Regel wird PageSpeed über ein spezielles Mess-Tool gemessen. Dabei wird die Ladezeit einer Webseite ermittelt und mit einem bestimmten Wert in Bezug gesetzt. Je schneller die Ladezeit, desto höher ist der Wert. Die gängisten Tools zum Messen der Seitenladegeschwindigkeit sind Google PageSpeed Insights, Pingdom und GTmetrix.
 

Wie lange eine Webseite für den Seitenaufbau braucht, lässt sich in verschiedene Phasen unterteilen:

• Time to First Byte (TTFB): Der Zeitraum zwischen dem Aufruf der Website und dem ersten vom Webserver geladenen Byte.
• First Contentful Paint (FCP): Der Zeitpunkt, an dem im Browser zum ersten Mal ein Darstellungselement angezeigt wird.
• First Meaningful Paint (FMP): Der Zeitpunkt, an dem der Nutzer das Gefühl hat, dass die Website geladen ist.
• Time to Interactive (TTI): Der Zeitpunkt, an dem die Website fertig gerendert und bereit zur Nutzung ist.

Grundlagen: Wie wird eine Webseite geladen?

Ein Benutzer ruft einen Browser auf, gibt Ihre Website ein, und es erfolgt eine DNS-Anfrage. Diese verweist auf Ihren Domänennamen-Anbieter, also vielleicht GoDaddy, und dieser verweist auf Ihren Server, auf dem sich Ihre Dateien befinden, und jetzt wird es interessant. Das DOM beginnt also, Ihr gesamtes HTML, Ihr CSS und Ihr JavaScript zu laden. In den seltensten Fällen werden jedoch alle erforderlichen Skripte oder der erforderliche Code zum Rendern oder Laden einer Webseite geladen.

Normalerweise muss das DOM zusätzliche Ressourcen von Ihrem Server anfordern, um alles zu ermöglichen, und das ist der Punkt, an dem Ihre Website wirklich langsam wird. Ich hoffe, dass diese Art von Hintergrundwissen uns dabei hilft, einige dieser Probleme zu lösen.
 

Welche Punkte können Ihre Website verlangsamen?

Pagespeed-Probleme haben vielfältige Ursachen. Die häufigsten Ursachen sind in den meisten Fällen:

1. An erster Stelle stehen Bilder. Große Bilder sind die Hauptursache für langsam ladende Webseiten.
2. Unperformantes Hosting.
3. Plugins, Anwendungen und Widgets, im Grunde jedes Skript eines Drittanbieters, können die Ladezeit ebenfalls verlangsamen.
   Ihr Thema und alle darüber hinausgehenden großen Dateien können die Ladezeit ebenfalls stark verlangsamen.
   Weiterleitungen, die Anzahl der Sprünge, die nötig sind, um zu einer Webseite zu gelangen, verlangsamen die Dinge.
4. Dann JavaScript, auf das wir gleich noch eingehen werden.
   Aber all diese Dinge können ein Grund dafür sein. Wir werden uns also einige Ressourcen ansehen, einige der Metriken und was sie bedeuten, und dann einige der Möglichkeiten, wie Sie Ihre Seitengeschwindigkeit heute verbessern können.

Checkliste für die Pagespeed-Optimierung

Eine schnelle Ladezeit ist entscheidend für den Erfolg Ihrer Webseite. Mit dieser Checkliste optimieren Sie die Performance Ihrer Seite und sorgen für ein besseres Nutzererlebnis.

Bilder optimieren

Einer der wichtigsten Aspekte zur Verbesserung der Ladegeschwindigkeit einer Website ist die Optimierung von Bildern. Bilder machen oft einen großen Teil der Dateigröße einer Website aus und können die Ladezeiten erheblich verlangsamen, wenn sie nicht richtig komprimiert oder in modernen Formaten bereitgestellt werden. 

Um die Performance einer Website zu steigern, sollten Bilder in zeitgemäßen Formaten wie WebP, AVIF oder JPEG 2000 eingebunden werden. Diese Formate bieten eine deutlich kleinere Dateigröße bei gleichbleibender oder sogar verbesserter Bildqualität im Vergleich zu herkömmlichen Formaten wie JPEG oder PNG.

Arbeiten mit Plugins, Modulen & Co.

Um den Arbeitsaufwand bei der Umwandlung zu moderneren Formaten zu minimieren, sollte man mit Plugins arbeiten, die die gängigsten Bildformate, darunter GIF, PNG und JPEG, automatisch in das effizienteste Format konvertiert wird. 

WebP als Standard nutzen

WebP hat sich als bevorzugtes Format herauskristallisiert, da es mit nahezu allen modernen Browsern kompatibel ist und in vielen Fällen eine deutlich kleinere Dateigröße als JPEG oder PNG aufweist. Es wird sogar von Safari ab Version 14 unterstützt, was seine Reichweite noch weiter erhöht. 

Die Verwendung von WebP kann die Dateigröße eines Bildes um bis zu 70 % reduzieren, ohne dass die Qualität für den Betrachter merklich beeinträchtigt wird. Dies führt nicht nur zu einer schnelleren Ladezeit der Website, sondern auch zu einer besseren Benutzererfahrung, insbesondere auf mobilen Geräten mit eingeschränktem Datenvolumen. Interessant: Studie über WebP vs JPEG

Inhalts- und geräteabhängige Kompression

Die PageSpeed-Module analysieren den Inhalt eines Bildes, um zu entscheiden, ob es verlustbehaftet oder verlustfrei komprimiert werden soll. Verlustfreie Formate wie PNG oder der verlustfreie Modus von WebP werden verwendet, wenn das Bild empfindlich auf Kompressionsartefakte reagiert. In anderen Fällen, z. B. bei Fotos, greift die verlustbehaftete Kompression, die größere Einsparungen bei der Dateigröße erzielt.

Ein zusätzlicher Vorteil der PageSpeed-Module ist, dass sie Bilder automatisch auf die tatsächlichen Darstellungsgrößen zuschneiden können, was weitere Einsparungen bei der Dateigröße ermöglicht. Diese Methode stellt sicher, dass nur die notwendige Anzahl an Pixeln geladen wird, was besonders bei hochauflösenden Bildern oder responsiven Designs von Vorteil ist.

Integrierte Bildoptimierung und HTML-Anpassung

Die Module bieten zwei Hauptansätze: In-Place-Optimierung und Tag-Neuschreibung. Bei der In-Place-Optimierung werden Bilder komprimiert, ohne dass der HTML- oder CSS-Code geändert wird. Mit der Tag-Neuschreibung hingegen können die Module noch mehr tun, wie z. B. Bilder direkt auf ihre gerenderten Dimensionen zu verkleinern oder kleine Bilder direkt in das HTML einzubetten, um zusätzliche Serveranfragen zu vermeiden.

Zum Beispiel kann eine GIF-Datei in das effizientere PNG-Format umgewandelt werden, oder eine große Bilddatei kann in kleinere Abmessungen und ein besser komprimiertes Format überführt werden. Die Kombination aus den verschiedenen Optimierungstechniken ermöglicht eine erhebliche Reduktion der Dateigröße, ohne die Bildqualität zu beeinträchtigen.

CSS und JavaScript optimieren

Die Komprimierung und Optimierung von CSS, JavaScript und HTML ist eine einfache, aber effektive Methode, um die Ladegeschwindigkeit einer Website zu verbessern. Durch das Reduzieren unnötiger Elemente und das Zusammenfassen von Dateien kann der Umfang der zu übertragenden Daten deutlich verringert werden. Dies führt zu schnelleren Ladezeiten und einem besseren Benutzererlebnis.

Minifizierung von CSS, JavaScript und HTML

Minifizierung bedeutet, dass unnötige Zeichen aus den Dateien entfernt werden, wie z. B. Leerzeichen, Zeilenumbrüche oder Kommentare, die der Lesbarkeit dienen, aber für den Code selbst nicht notwendig sind. Durch das Entfernen dieser Elemente wird die Dateigröße reduziert, was zu einer schnelleren Übertragung und Verarbeitung führt. Je nach Umfang des Codes kann die Dateigröße durch Minifizierung um 20 bis 40 % gesenkt werden.

Zusätzlich können Variablennamen und Funktionsbezeichner gekürzt werden. Zum Beispiel könnte die Variable numberOfItems durch n ersetzt werden, was den Code weiter verkleinert. Diese Maßnahmen beeinträchtigen die Funktionalität der Website nicht, da sie nur die Lesbarkeit des Codes für Entwickler betreffen.

Zusammenführen von CSS- und JavaScript-Dateien

Ein weiterer wichtiger Schritt zur Optimierung besteht darin, CSS- und JavaScript-Dateien zusammenzuführen. Anstatt mehrere kleine Dateien separat zu laden, werden sie in eine größere Datei zusammengefasst. Das reduziert die Anzahl der HTTP-Requests, die vom Browser an den Server gesendet werden müssen, was die Ladezeiten erheblich beschleunigen kann.

Weniger Anfragen an den Server bedeuten weniger Wartezeit für die Nutzer. Dies ist vergleichbar mit dem Einkaufen: Wenn du alles in einem Gang findest, sparst du dir die Wege durch den gesamten Supermarkt. In ähnlicher Weise spart das Zusammenführen von Dateien Zeit, indem der Browser weniger "Wege" zurücklegen muss, um die notwendigen Ressourcen zu laden.

Gzip- und Brotli-Komprimierung

Neben der Minifizierung können CSS, JavaScript und HTML auch serverseitig komprimiert werden. Die gebräuchlichste Methode hierfür ist Gzip, das die Dateigröße weiter reduziert, indem wiederholte Zeichenfolgen erkannt und effizient durch kürzere Pointern ersetzt werden. Eine weitere, noch effizientere Methode ist Brotli, das von vielen modernen Servern unterstützt wird und im Vergleich zu Gzip noch höhere Komprimierungsraten bietet.

Mit diesen Komprimierungsmethoden lassen sich Dateien oft auf bis zu 20 % ihrer ursprünglichen Größe reduzieren, was einen erheblichen Einfluss auf die Ladezeiten einer Website haben kann.

Automatisierte Tools zur Optimierung

Es gibt zahlreiche Tools, die diese Optimierungen automatisch vornehmen können. Durch den Einsatz von Build-Tools oder serverseitigen Optimierungsdiensten kann der gesamte Prozess der Minifizierung und Komprimierung automatisiert werden, ohne dass Entwickler jedes Mal manuell eingreifen müssen. Diese Tools identifizieren auch unnötigen Code, der entfernt oder neu organisiert werden kann, um die Effizienz zu maximieren.

Die Komprimierung von CSS, JavaScript und HTML ist eine der einfachsten und wirkungsvollsten Maßnahmen zur Optimierung der Ladezeit einer Website.

Caching aktivieren

Caching speichert häufig genutzte Dateien im Browser, was bei wiederholten Besuchen der Website die Ladezeit erheblich verkürzt.

Hosting und Server-Leistung optimieren

Die Wahl des richtigen Hosting-Anbieters und eine gut optimierte Serverinfrastruktur sind entscheidend für eine schnelle Webseite.

HTTP-Anfragen reduzieren

Jede Datei, die geladen werden muss, erzeugt eine zusätzliche HTTP-Anfrage. Reduziere die Anzahl der Anfragen, um die Ladezeit zu verkürzen.

Datenbank optimieren

Eine überladene oder schlecht optimierte Datenbank kann die Ladezeit beeinflussen. Regelmäßige Pflege und Optimierung der Datenbank sorgen für schnellere Ladezeiten.

Weiterleitungen minimieren

Jede Weiterleitung verlangsamt den Seitenaufbau. Minimale und gezielte Weiterleitungen können die Performance steigern.

Lazy Loading von Medieninhalten

Nicht alle Inhalte müssen sofort geladen werden. Lazy Loading sorgt dafür, dass nur sichtbare Inhalte sofort erscheinen und der Rest erst nachgeladen wird, wenn der Nutzer scrollt.

Fazit

Die Optimierung der Ladezeit einer Webseite ist kein einmaliger Prozess, sondern erfordert kontinuierliche Pflege und Anpassungen. Ein schneller Pagespeed trägt nicht nur zu einem besseren Nutzererlebnis bei, sondern beeinflusst auch direkt das Ranking in den Suchmaschinen. Wer regelmäßig Bilder, Code und Serverleistung optimiert, wird langfristig nicht nur die Absprungrate senken, sondern auch die Konversionsrate und den Erfolg der Webseite steigern. Setzen Sie die in dieser Checkliste beschriebenen Maßnahmen konsequent um, um Ihre Webseite fit für die Zukunft zu machen.