{"id":31624,"date":"2024-11-12T12:40:18","date_gmt":"2024-11-12T12:40:18","guid":{"rendered":"https:\/\/www.seobility.net\/?post_type=wiki&p=31624"},"modified":"2026-01-15T14:43:51","modified_gmt":"2026-01-15T14:43:51","slug":"Pagespeed","status":"publish","type":"wiki","link":"https:\/\/www.seobility.net\/de\/wiki\/Pagespeed","title":{"rendered":"Pagespeed"},"content":{"rendered":"

Definition<\/span><\/h2>\n

Unter dem englischen Begriff Page Speed versteht man die Ladezeit einer Seite im Internet. Die gesamte Ladedauer setzt sich hierbei aus unterschiedlichen Teilen zusammen. Sie enth\u00e4lt zum einen die Antwortzeit des Servers (= Wait Time To First Byte bzw. Time To First Byte (TTFB)) sowie die Zeit, die der Download der HTML Seite an sich in Anspruch nimmt (= Transfer Time). Weiterhin z\u00e4hlt auch die Dauer des Renderings der Seite im Browser zur gesamten Ladedauer. Somit umfasst der Begriff Page Speed die komplette Zeitspanne vom Absenden des HTTP Requests an den Server bis zur vollst\u00e4ndigen Anzeige der Website im Browser.\n<\/p>\n

\n
\n

Pagespeed SEO Check<\/h3>\n

Pr\u00fcfe den Pagespeed Deiner Seite<\/p>\n<\/div>\n

\n
\n<\/form>\n<\/div>\n

Bedeutung f\u00fcr User Experience und Suchmaschinenoptimierung (SEO)<\/span><\/h2>\n

Lange Ladezeiten einer Website f\u00fchren zu einer schlechten User Experience und bewirken, dass eine Seite schnell wieder verlassen wird. Insbesondere beim Surfen \u00fcber mobile Endger\u00e4te ist es f\u00fcr den User essentiell, dass er die gew\u00fcnschten Inhalte ohne gro\u00dfe Zeitverz\u00f6gerungen abrufen kann. Die Problematik des Page Speeds wird hierbei durch die oftmals geringen \u00dcbertragungsgeschwindigkeiten auf mobilen Ger\u00e4ten verst\u00e4rkt. L\u00e4dt eine Website, egal ob am Desktop oder am Smartphone, zu lange, f\u00fchrt das bei den meisten Usern zu Frustration und sie verlassen die Seite schnell wieder, was zu einer h\u00f6heren Absprungrate<\/a> f\u00fchrt.\n<\/p>\n

Der Page Speed beeinflusst die Suchmaschinenoptimierung aber nicht nur indirekt, sondern ist auch ein wichtiger direkter Rankingfaktor f\u00fcr Google. Zudem wird die Relevanz des Page Speeds f\u00fcr die Suchmaschinenoptimierung durch die Tatsache verst\u00e4rkt, dass Google Seiten mit einer hohen Ladedauer seltener crawlt als schnelle Seiten. Dies h\u00e4ngt damit zusammen, dass langsame Seiten mehr Crawling-Budget beanspruchen, welches Google jedoch so effizient wie m\u00f6glich ausnutzen m\u00f6chte. Wenn der Google Bot eine Seite seltener besucht, kann sich das allerdings negativ auf die Indexierung<\/a> dieser Seite bei Google auswirken.\n<\/p>\n

Somit stellt der Page Speed einen wichtigen Ansatzpunkt f\u00fcr die Verbesserung der User Experience und f\u00fcr die Suchmaschinenoptimierung f\u00fcr Google dar. Wie die Ladedauer einer Seite konkret verbessert werden kann, wird daher im n\u00e4chsten Abschnitt erl\u00e4utert.\n<\/p>\n

Ma\u00dfnahmen zur Verbesserung des Page Speeds<\/span><\/h2>\n
\n
\"Struktur<\/a> <\/p>\n
Abb.:<\/b> Page Speed Optimierung – Autor: Seobility – Lizenz: CC BY-SA 4.0<\/a><\/div>\n<\/div>\n<\/div>\n

Komprimierung von HTML-, CSS- und JavaScript-Dateien<\/span><\/h3>\n

Je kleiner die Dateien sind, die zum Laden einer Webseite ben\u00f6tigt werden, desto schneller kann die vollst\u00e4ndige Seite geladen werden. Die Komprimierung von HTML-, CSS- und JavaScript-Dateien erweist sich daher als sinnvolle Ma\u00dfnahme zur Verbesserung des Page Speeds. Eine Komprimierung solcher Dateien ist m\u00f6glich, indem deren Code verk\u00fcrzt wird, beispielsweise durch das Entfernen von Kommentaren, Zeilenumbr\u00fcchen, unn\u00f6tigen Zeichen und Leerzeichen.\n<\/p>\n

Au\u00dferdem k\u00f6nnen die Dateigr\u00f6\u00dfen serverseitig mit Gzip<\/a> f\u00fcr die \u00dcbertragung komprimiert werden. Dies ist beim Apache und beim Nginx Webserver Standard.\n<\/p>\n

Minimierung von HTTP-Requests<\/span><\/h3>\n

Beim Aufruf einer Webseite muss f\u00fcr jede HTML-, CSS-, JavaScript oder Bilddatei ein eigener HTTP-Request an den Server gestellt werden. Ein Browser kann allerdings nur eine bestimmte Anzahl an Anfragen pro Domain gleichzeitig senden. Wenn jedoch sehr viele Anfragen f\u00fcr eine Webseite ben\u00f6tigt werden, kann der Browser nicht alle Anfragen gleichzeitig senden, wodurch sich die Ladezeit verl\u00e4ngert.\n<\/p>\n

Die Anzahl an HTTP-Requests kann minimiert werden, indem mehrere Dateien eines Dateityps zu einer Gesamtdatei zusammengefasst werden, also beispielsweise mehrere CSS-Dateien in einer Datei geb\u00fcndelt werden.\n<\/p>\n

Verwendung von Subdomains<\/span><\/h3>\n

Die oben genannte Beschr\u00e4nkung der Anzahl an HTTP-Requests, die der Browser gleichzeitig bearbeiten, bezieht sich immer auf eine Domain. Durch die Verwendung von zus\u00e4tzlichen Subdomains erh\u00f6ht sich somit die Anzahl der verf\u00fcgbaren Anfragen, was sich bei Websites mit sehr vielen Einzeldateien positiv auf die Ladedauer auswirkt.\n<\/p>\n

Reduktion von Weiterleitungen<\/span><\/h3>\n

Jeder Redirect erfordert einen neuen HTTP-Request und -Response und beansprucht damit zus\u00e4tzliche Ladezeit. Mehrere verkettete Weiterleitungen k\u00f6nnen somit die Ladezeit unn\u00f6tig verl\u00e4ngern. Aus diesem Grund sollten mehrfache Weiterleitungen, wenn m\u00f6glich, reduziert werden.\n<\/p>\n

Server-Caching<\/span><\/h3>\n

Beim Server Caching<\/a> wird das Ergebnis der Abfrage einer Seite im Server-Cache gespeichert. Wird diese Seite erneut aufgerufen, kann der Browser auf diesen Cache zur\u00fcckgreifen und muss die Seite nicht erneut abfragen. Zudem muss der Server weniger Daten aus der Datenbank abrufen, wodurch wertvolle Ressourcen geschont werden. Wichtig ist in diesem Zusammenhang jedoch, dass der Cache gel\u00f6scht werden muss, wenn eine Website bearbeitet wurde.\n<\/p>\n

Browser-Caching<\/span><\/h3>\n

Im Rahmen des Browser-Cachings werden unver\u00e4nderliche Elemente einer Website, wie z.B. Bilder, JavaScript- und CSS-Dateien, im Browser auf dem Ger\u00e4t des Users gespeichert. Somit m\u00fcssen diese Dateien bei einem erneuten Aufruf der Seite nicht mehr neu geladen werden.\n<\/p>\n

Bei dieser Vorgehensweise muss jedoch unbedingt auf korrekte Expires Header geachtet werden. Hierbei handelt es sich um Angaben, die dem Browser mitteilen, wann der Cache der jeweiligen Datei ausl\u00e4uft und diese neu vom Server geladen werden muss. Damit wird sichergestellt, dass einem User immer die aktuellste Version einer Website im Browser angezeigt wird.\n<\/p>\n

Content-Delivery-Networks (CDNs)<\/span><\/h3>\n

Ein Content Delivery Network (CDN)<\/a> ist ein Netzwerk von Servern, das zur Verteilung des Contents einer Website genutzt wird. Hierbei werden Kopien der Website auf den geografisch verteilten Servern gespeichert. Wenn ein User die Website aufrufen m\u00f6chte, wird diese von dem Server ausgeliefert, der am n\u00e4hesten am User gelegen ist. CDNs verringern somit die Belastung des eigenen Servers, da weniger HTTP-Requests bearbeitet werden m\u00fcssen. Zudem sind CDNs h\u00e4ufig regional, wodurch die Ladezeit aufgrund von k\u00fcrzeren \u00dcbertragungswegen nochmals reduziert wird.\n<\/p>\n

Nachladen per AJAX<\/span><\/h3>\n

Bei dieser Methode wird der komplette Inhalt einer Website nicht auf einmal geladen, sondern beim Herunterscrollen des Users nachgeladen. Dies ist insbesondere f\u00fcr die Anzeige der Website auf mobilen Endger\u00e4ten empfehlenswert, da hier in der Regel geringere \u00dcbertragungsgeschwindigkeiten zur Verf\u00fcgung stehen und eine Website, die am Desktop in Sekundenschnelle geladen wird, am Smartphone m\u00f6glicherweise Probleme verursachen kann.\n<\/p>\n

Allerdings ist bei dieser Herangehensweise im Hinblick auf die Suchmaschinenoptimierung Vorsicht geboten. Es ist nicht klar, ob Google AJAX-Seiten korrekt indexiert und Nutzer die jeweiligen Inhalte \u00fcber Suchmaschinen finden k\u00f6nnen. Aus diesem Grund sollte bei AJAX-Seiten mit Content, der auch f\u00fcr Suchmaschinen wie Google relevant ist, sichergestellt werden, dass Suchmaschinen Crawler<\/a> diese Inhalte aufrufen k\u00f6nnen.\n<\/p>\n

Asynchrones Laden<\/span><\/h3>\n

Beim synchronen Laden von Webseiten werden Dateien und Elemente der Seite in der Reihenfolge geladen, in der sie in der HTML-Datei vorkommen, wobei eine Datei erst geladen werden kann, wenn der Ladevorgang der vorherigen Datei abgeschlossen ist. Wenn das Laden einer bestimmten Datei sehr viel Zeit in Anspruch nimmt, kann das deshalb den Ladevorgang der gesamten Webseite aufhalten.\n<\/p>\n

Eine L\u00f6sung f\u00fcr dieses Problem bietet asynchrones Laden. Hierbei werden Dateien wie eingebundene JavaScript- oder CSS-Dateien im Hintergrund weiter geladen, w\u00e4hrend bereits der Ladevorgang der n\u00e4chsten Datei gestartet wird.\n<\/p>\n

Optimierung der Antwortzeit (TTFB) des Servers<\/span><\/h3>\n

Je schneller ein Server auf eine eingehende Anfrage antwortet, d.h. je k\u00fcrzer die Time To First Byte (TTFB), desto schneller kann eine Website geladen werden. Die Antwortzeit des Servers ist abh\u00e4ngig vom Traffic<\/a>, den Ressourcen, die f\u00fcr eine Seite ben\u00f6tigt werden, der Server Software sowie dem Hosting Anbieter. Sie sollte eine Dauer von 200 ms nicht \u00fcberschreiten, da der Google Bot die URL sonst nicht mehr regelm\u00e4\u00dfig crawlt, was sich negativ auf die Indexierung bei Google auswirken kann. Eine Verk\u00fcrzung der Antwortzeit ist m\u00f6glich, indem Schwachstellen des Servers, wie z.B. langsame Datenbankabfragen, identifiziert und beseitigt werden.\n<\/p>\n

Bilder<\/span><\/h3>\n

Der korrekte Umgang mit den Bildern auf einer Website kann einen wichtigen Hebel f\u00fcr die Verbesserung des Page Speeds darstellen.\n<\/p>\n

Hierbei ist es beispielsweise empfehlenswert, Grafiken wie Buttons, Icons oder Hintergr\u00fcnde nicht als Bilddatei hochzuladen, sondern in CSS zu erstellen. Dies ben\u00f6tigt nicht nur weniger Code und HTTP-Requests, sondern bringt au\u00dferdem den Vorteil mit sich, dass die entsprechenden Grafiken auf allen Displaygr\u00f6\u00dfen scharf dargestellt werden.\n<\/p>\n

Ein weiterer wichtiger Aspekt ist in diesem Zusammenhang die Gr\u00f6\u00dfe der Bilddateien. Diese sollte auf ein n\u00f6tiges Minimum beschr\u00e4nkt werden, um die Ladezeit der Bilder zu verk\u00fcrzen. Au\u00dferdem kann das HTML5<\/a> Element <picture> verwendet werden, um verschiedene Versionen eines Bildes f\u00fcr unterschiedliche Display-Gr\u00f6\u00dfen bereitstellen zu k\u00f6nnen. Damit wird vermieden, dass Bilder mit einer sehr gro\u00dfen Dateigr\u00f6\u00dfe auf mobilen Endger\u00e4ten geladen werden und somit die Ladedauer unn\u00f6tig verl\u00e4ngern.\n<\/p>\n

Zudem k\u00f6nnen Bilder mithilfe von zahlreichen Online-Diensten wie beispielsweise kraken.io<\/a> komprimiert werden. Das Tool erm\u00f6glicht eine Reduktion der Dateigr\u00f6\u00dfe ohne Qualit\u00e4tsverlust.\n<\/p>\n

Weiterhin sollte darauf geachtet werden, dass f\u00fcr Bilder stets das richtige Dateiformat verwendet wird. JPG eignet sich f\u00fcr Fotos, w\u00e4hrend PNG f\u00fcr Grafiken mit weniger Schattierungen von Farben, wie beispielsweise Screenshots, gew\u00e4hlt werden sollte, um die Dateigr\u00f6\u00dfe zu reduzieren.\n<\/p>\n

\u00dcberpr\u00fcfung des Page Speeds<\/span><\/h2>\n

Die Ladegeschwindigkeit der eigenen Website kann auf einfache Weise mithilfe von Google PageSpeed Insights<\/a> analysiert werden. Das Tool von Google ruft die Website sowohl mit dem mobilen als auch mit dem Desktop User-Agent ab und liefert anschlie\u00dfend einen Gesamtscore f\u00fcr die Ladegeschwindigkeit der Seite. Zus\u00e4tzlich werden dem User konkrete Optimierungspotenziale zur Verbesserung des PageSpeed Scores aufgezeigt.\n<\/p>\n

\"Testergebnis\n<\/p>\n

Screenshot mit Analyseergebnis von Google PageSpeed Insights<\/a>\n<\/p>\n

Weiterf\u00fchrende Links<\/span><\/h2>\n