PageSpeed Optimierung

Wie du die Ladezeit deiner Webseite verbesserst

Alle sprechen immer von PageSpeed Optimierung (Ladezeit / Seiten-Geschwindigkeit verbessern) einer Webseite. Aber was macht denn nun eigentlich die Geschwindigkeit einer Webseite aus und warum ist es mehr denn je wichtig, diese Geschwindigkeit hoch zu halten? Das alles erfährst du in diesem Artikel rund um PageSpeed, Optimierung und technische SEO.

Wie ist der PageSpeed definiert und was bedeutet er im Detail?

Als Pagespeed bezeichnet man im Allgemeinen die Ladegeschwindigkeit einer Internetseite. Also kurz gesagt: wie schnell werden die Inhalte der Seite geladen, so dass der User die Inhalte einer Seite auch sehen und nutzen kann. Dabei hat meist jede einzelne Unterseite eines Internetauftrittes eine unterschiedliche Ladezeit. Denn die Ladezeit hängt vor allem vom Inhalt der jeweiligen (Unter-) Seite ab. Umfangreiche Inhalte brauchen nun mal länger beim Laden, bis sie vollständig dargestellt werden können.

Geht man etwas weiter ins Detail, stellt man fest, dass sich der PageSpeed in verschiedene Bereiche untergliedert. Es gibt mehrere Faktoren, welche die Beurteilung direkt und indirekt beeinflussen.

PageSpeed Insight (PSI) von Google

Am einfachsten lässt sich das Ganze mit dem „Pagespeed Insights“ Tool von Google selbst messen und darstellen. Unter https://developers.google.com/speed/pagespeed/insights/ kann man jede Seite, die online erreichbar ist, überprüfen.
Nach dem Eingeben der entsprechenden URL und Klick auf „ANALYSIEREN“ beginnen die Server von Google die URL zu scannen und zu messen. Dabei wird nach den zwei großen Kategorien „Desktop“ und „mobil“ unterschieden. Denn nach wie vor ist es so, dass die Übertragungsgeschwindigkeit bei Mobilgeräten geringer ist als am PC oder Mac. Dementsprechend werden diese beiden Darstellungsformen unterschiedlich bewertet.

Was sind Labdaten bei der PSI-API?

Labdaten werden in einer kontrollierten Umgebung erfasst und dienen der Ermittlung bei Leistungsproblemen einer Seite. Dabei sind Geräte- und Netzwerkeinstellungen genau definiert. Sie sind hilfreich beim debuggen (Fehler finden), sind reproduzierbar und dienen als einheitlicher Vergleich. Es kann aber sein, dass einige tatsächliche Engpässe in der realen Onlineweilt aufgrund vieler Faktoren hier nicht dargestellt werden.

Was sind Felddaten bei der PSI-API?

Felddaten sind echte Ergebnisse von Nutzererfahrungen im Chrome Browser die dann gesammelt, ausgewertet und dargestellt werden. Nachteil hierbei ist, dass nur eine begrenzte Anzahl von Daten verwendet werden können.

Du brauchst Hilfe bei der Optimierung?

Erzähl mir gerne von deinem Projekt.

Woraus setzt sich der PageSpeed einer Seite zusammen?

Google PageSpeed Insights misst die Ladezeit einer Homepage nach folgenden Gesichtspunkten:

  • First Contentful Paint (FCP)
    Der First Contentful Paint („erster Inhalt gezeichnet“) bezeichnet die Dauer vom Öffnen der Webseite bis zur Anzeige erster Elemente dieser.
    Laut Google PageSpeed Insights liegt der FCP bei schnellen Webseiten zwischen 0 und 1 Sekunde. Bei durchschnittlichen Homepages hingegen benötigt er zwischen 1 und 2,5 Sekunden bis zum Laden des ersten Elements. Alles über 2,5 Sekunden Ladezeit wird als zu langsam gewertet.
  • First Input Delay (FID)
    Der First Input Delay bedeutet so viel wie „Verzögerung der Ersteingabe“. Es ist die Zeit, die zwischen dem ersten Anklicken einer Schaltfläche, eines Links oder eines Steuerelements und der Reaktion der Webseite auf eben diese Aktion vergeht. Gerade damit der Besucher eine Seite schnell nutzen kann, ist der FID ein wichtiger Aspekt.Der FID liegt laut PageSpeed Insights bei schnellen Seiten bei 0 bis 50 Millisekunden. Bei durchschnittlichen Seiten schon zwischen 50 und 250 Millisekunden. Und langsame Webseiten brauchen für die Reaktion auf den ersten Befehl über 250 Millisekunden.
  • Speed Index (SI)
    Er misst die Zeit, die es braucht, bis sichtbare Elemente geladen werden.
  • Cumulative Layout Shift (CLS)
    Mit diesem werden Verschiebungen des Layouts gemessen, die während des Ladens einer Internetseite auftreten können. Z.B. sorgen Bilder, die ohne exakte Breiten- und Höhen Angaben (width & height) geladen werden oft für eine unruhige Darstellung der Inhalte. Ein niedriger Wert ist wichtig für eine gute User-Experience.
  • Largest Content Paint (LCP)
    Bezeichnet die benötigte Zeit, bis das größte Element einer Seite (Text oder Bild) geladen ist und angezeigt wird.
  • Time To Interactive (TTI)
    Damit misst PageSpeed Insights die Zeit, welche User warten müssen, bis sie die Website tatsächlich bedienen können.
  • Total Blocking Time (TBT)
    Misst die Gesamtzeit, die eine Seite daran gehindert ist, auf Benutzereingaben wie Mausklicks, Bildschirmtipps oder Tastaturdrücke zu reagieren. TBT ist die Summe aller Aufgaben zwischen FCP und TTI, die über 50ms lang sind.

Empfehlungen für die Optimierung

Die Google PageSpeed Insights sprechen nach der Messung auch direkte Empfehlungen zur Optimierung aus. Dabei wird auch die zu erwartende Verbesserung als Zeiteinheit mit angegeben. Weiterhin gibt es eine Diagnose über den Zustand und die Abläufe beim Seitenaufbau.

Neuer Rankingfaktor: Die Core Web Vitals

Ganz neu in der Betrachtung von Webseiten setzt Google jetzt massiv auf die Core Web Vitals. Diese ergeben sich aus drei der oben genannten Punkte der PageSpeed Insights. Nämlich:

  • LCP (Largest Contentful Paint)
  • FID (First Input Delay)
  • CLS (Cumulative Layout Shift)

Dabei geht es um Ladezeit, Interaktivität und visuelle Stabilität. Diese Dinge beeinflussen das Nutzererlebnis und führen zu einem angenehmen oder weniger angenehmen Verhalten der Seite beim Aufruf.

Lagest Contentful Paint - Google Core Web Vitals

© Grafik: Google

First Input Delay - Google Core Web Vitals

© Grafik: Google

Cumulative Layout Shift - Google Core Web Vitals

© Grafik: Google

5 Tools für einen PageSpeed Test

Neben den Google PageSpeed Insights gibt es noch weitere Speed Tools zur Messung von Ladezeiten und Auswertung.

Pagespeed Insights Core Web Vitals 100 von 100 Domain helmutplarre.com

Besseres Ranking & mehr Umsatz: Warum schnelle Performance wichtig ist

Wenn Nutzer auf eine Internetseite kommen, wollen sie die gewünschten Informationen schnell finden oder das gesuchte Produkt zügig bestellen. Seiten, die zu lange brauchen um dargestellt zu werden, werden vom Nutzer oft sehr schnell wieder verlassen. Und dann ist der potenzielle Kunde weg!

„Bereits vor einigen Jahren wurde ein Zusammenhang von Ladezeit und Umsatz festgestellt. Dabei wurde belegt, dass Amazon bei 100 Millisekunden längerer Ladezeit, einen Umsatz von 1 % einbüßt.“ Quelle

Außerdem hat Google den Page Speed explizit zum Rankingfaktor erklärt. Das bedeutet, dass langsamere Webseite schlechter in der Platzierung abschneiden als schnell ladende.

Wichtig: Mobile First Indexing 2021

Google hat im März 2021 alle Seiten auf „mobile first indexing“ umgestellt. Das bedeutet, dass die Suchmaschine die mobilen Seiten und Inhalte als Grundlage für seinen Index verwendet und auf deren Basis auch die Rankings „vergibt“. Mehr Informationen dazu hier.

Hintergrund ist vor allem, dass der größte Teil der Internetnutzer über mobile Geräte im Web unterwegs ist und somit den Anspruch an schnelle mobile Seiten vergrößert.

Damit ist es noch wichtiger geworden, seine Seiten zu optimieren. Denn die größte Herausforderung beim schnellen Laden stellt nach wie vor der mobile Bereich dar.

Gründe für langsames Laden deiner WordPress Seite

Es kann viele Gründe haben, warum eine Seite langsam lädt. Es fängt beim Hosting (Server) an und endet bei der Struktur der HTML Dokumente.
Die größte Bremse stellen nicht selten Bilddateien dar, die einfach zu große oder nicht komprimiert und optimiert veröffentlicht werden. Nach Videos sind Bilder immer noch die größten „Speicherplatzfresser“ und „Ladezeitenbremser“. Wenn große Datenmengen übertragen werden müssen dauert es einfach länger – logisch!

Nicht komprimierte CSS- und JavaScript-Dateien, die falsche Reihenfolge oder das Laden von nicht benötigten Inhalten machen die Geschwindigkeit ebenfalls langsam.

Die genauen Gründe warum deine Webseite langsam ist, verrät dir ein Test mit den Google PageSpeed Insights.

PageSpeed Optimierung: Ladezeit verbessern bei WordPress

Da WordPress das meist genutzte CMS (Content Management System) weltweit ist, gehe ich hier speziell auf die Performance-Optimierung mit diesem CMS ein. Neben einer sauberen Erstellung von Struktur und Layout kann man bereits beim Vorbereiten von Inhalten auf die spätere Geschwindigkeit der Onlinepräsenz achten.

Zusätzlich kann man diverse Tools und Plugins sinnvoll und effektiv einsetzen. Wichtig ist zu beachten, dass zu viele Plugins in WordPress genau das Gegenteil, nämliche eine schlechte Performance bewirken können!

Außerdem ist es wichtig, sich für ein gut programmiertes WordPress Theme zu entscheiden, wenn man nicht selbst programmieren will.
Wer einen PageBuilder in WordPress nutzt sollte darauf achten, dass dieser sauberen Quellcode liefert und nicht unnötig viele Elemente veröffentlicht.

Grafiken und Bilder optimieren

Während viel Text die Ladezeit ebenfalls erhöhen kann, sind Bilder und Grafiken der häufigste Grund für eine schlechte Geschwindigkeit.

Auch wenn man denkt, das CMS nimmt mir die Optimierungsarbeit ab, weil Bilder kleiner gerechnet und komprimiert werden, sollte man sich darauf allein nicht verlassen.

Konkrete Tipps für die Bildoptimierung in WordPress:

  • Speichere Bilder nur so groß ab, wie du sie später auf der Webseite darstellen muss.
  • Optimiere die Dateigröße mit z.B. Photoshop („für Web speichern“), tinypng.com oder einem anderen Grafikprogramm.
  • Benenne die Dateinamen sinnvoll (das ist nicht für die Ladezeit relevant aber für die SEO deiner Homepage).
  • Integriere die Bilder immer mit den Attributen „width“ und „height“ um CLS zu vermeiden (s.o.).
  • Gib deinen Bildern immer einen „alt“ und einen „title“ Tag (das ist nicht für die Ladezeit relevant aber für die SEO deiner Homepage)
  • Sorge dafür, dass Bilder, die nicht sofort auf der Seite sichtbar sind, verzögert geladen werden (geht meist über das Theme oder ein Caching-Plugin (s.u.) zu steuern).
  • Verwende für Fotos und klassische Bilder die Formate JPG oder WEBP (hierzu gibt es auch Plugins die Bilder automatisch umwandeln, s.u.).
  • Verwende für Logos, Grafiken oder einfache schematische Darstellungen PNG oder SVG Dateien.
  • Verwende keine großen Hintergrundbilder und wenn du sie unbedingt brauchst, softe sie ab und reduziere massiv die Qualität beim speichern (spielt bei Hintergrundbildern oft keine große Rolle, da man sie nicht voll sieht und sie nur der Atmosphäre dienen).
  • Nutze bei der mobilen Version deiner Seite Farben oder Verläufe anstelle von Hintergrundbildern, das spart massiv Zeit beim Seitenaufruf.

Plugins & Tools zur Bildoptimierung

  • TINYPNG, Online-Tool zum schnellen optimieren von Bildern und Grafiken
  • Photoshop / Photoshop Elements, Programm zur Bildbearbeitung und Weboptimierten Speicherung von Bildern
  • Imagify, WP-Plugin zur direkten Optimierung in deiner WordPress-Seite
  • Shortpixel, WP-Plugin zur direkten Optimierung in deiner WordPress-Seite

Verwende auf deiner WordPress Seite nur so viele Bildelemente wie du wirklich brauchst, um den Inhalt sinnvoll darzustellen. Bilder dienen der Visualisierung und besseren Darstellung des Inhaltes. Schließlich möchtest du ja sicherlich kein „Bilderbuch“ im Internet haben.

SEO: Bildoptimierung für bessere Ladezeiten - Größenvergleich der Bilddateien

Responsive Gestaltung ist wichtig

Achte beim Erstellen deiner Seiten darauf, dass diese responsive sind. Sprich, dass sie sowohl am Desktop als auch am Handy und Tablet gut dargestellt werden. Die meiste Themes bei WordPress bringen diese Einstellungen mittlerweile grundlegend mit. Allerdings sollte man sich nicht immer zu 100% darauf verlassen. Manuelle Überprüfung und Anpassungen sind oft notwendig und bringen noch bessere Ergebnisse in Darstellung und Performance.

Pagespeed Optimierung durch Caching und Plugins

Ein Cache bezeichnet einen zusätzlichen Pufferspeicher, der helfen kann, die Ladezeiten deiner Website zu verringern. Dabei werden Daten, die zur Darstellung deiner Seite benötigt werden von entsprechenden Plugins (s.u.) so vorgehalten, dass sich die Darstellung beim Abruf durch den Nutzer schneller aufbaut.

Caching gibt es in zwei Varianten: Während beim Server-Caching die Daten auf dem Webserver gespeichert und vorgehalten werden, befinden sich diese beim Browser-Caching im Browserspeicher des jeweiligen Users.

Als Server-Caching Plugin eignen sich beispielsweise WP Rocket, WP Fastest Cache, Autoptimize oder W3 Total Cache sehr gut.

Neben dem Caching sorgen diese Plugins auch dafür, dass CSS und JS-Dateien verkleinert werden (minify), JS und CSS-Dateien verzögert geladen oder ausgeführt werden. Das sind nämlich oft genau die bemängelten Punkte beim Messen mit den Google PageSpeed Insights.

Daten komprimieren mit Gzip

Zusätzlich solltest du überprüfen, ob das Programm Gzip auf deinem Webserver aktiviert ist. Durch Gzip werden Daten gepackt und verkleinert übertragen, was zu einer wesentlich schnelleren Ladezeit führt.

Unnötige Weiterleitungen vermeiden

Vielleicht hast du dein Geschäftskonzept schon öfters überarbeitet oder den Namen deines Unternehmens geändert. Das führt oft auch dazu, dass man die Adresse seiner Website ändert oder Unterseiten umbenennt. Wer dann den alten Namen einer Homepage angibt, wird an die neue Adresse weitergeleitet.
Das Problem dabei: Wenn mehrere solche Änderungen geschehen, springt der Server von Link zu Link weiter, bis er beim Endziel angelangt. Das wiederum kostet Zeit und ist schlecht für die Webseiten Ladezeit.

Für weltweit guten Speed-Score: Content Delivery Networks (CDN)

Die Anfragen eines Browsers an den Server dauern immer eine bestimmte Zeit, z. B. 100 Millisekunden von Deutschland nach Kalifornien. Sogenannte CDNs  (Content Delivery Networks) können helfen, diese Zeit zu verringern.

Content Delivery Networks sind Netze aus regional verteilten Servern. Dank ihrer geographischen Nähe zum Webseiten-Besucher werden Anfragen schneller an den Server gesendet und von diesem schneller beantwortet. So lässt sich die Ladezeit deiner Webseite zusätzlich reduzieren und trägt zu deren SEO Optimierung und besserer User-Experience bei.

Allerdings sei angemerkt, dass ein CDN nur dann Sinn macht, wenn die Zielgruppe deiner Seite überall auf der Welt zu finden ist. Ansonsten reicht ein schneller Server mit Standort in Deutschland völlig aus.

Antwortzeit des Servers verkürzen

Letzten Endes ist es jedoch irrelevant, welche Tools oder Plugins du verwendest oder welche Maßnahmen du setzt, um dein Ranking zu verbessern. Braucht dein Server zu lange für eine Rückmeldung, wird Google PageSpeed Insights dir kein gutes Zeugnis ausstellen.

Durch eine ordentliche Administration deines Servers kann dessen Reaktionszeit ordentlich verbessert werden. Dafür ist es wichtig, einen guten Hoster zu beauftragen der die entsprechenden Einstellungen vornimmt und überwacht.

Fazit zur Page Speed Optimierung

Für eine Pagespeed Optimierung gilt es, verschiedene Faktoren zu berücksichtigen. Neben einer guten Struktur, einem schnellen Server und dem sinnvollen Einsatz von Plugins ist eine saubere Erstellung deiner Webseite das A und O für eine Optimierung. Grundlagen, die vor 20 Jahren gegolten haben sind heute immer noch aktuell, teilweise wurden sie sogar noch wichtiger.

Wer sich an die Grundregeln einer guten Internetseite hält und mit ein bisschen technischer Unterstützung seine Seiten optimiert, wird für seine Mühen auch belohnt werden.

Wer heutzutage eine eigene Webseite aufbauen möchte, muss auf viele Dinge achten. Von gutem Content über schnelle Ladezeiten bis hin zur SEO muss an Vieles gedacht werden. Guter, informativer Content, der schnell geladen wird, überzeugt sowohl deine Besucher als auch die Suchmaschinen.