PageSpeed Optimierung

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.

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

• Google PageSpeed Insight (developers.google.com/speed/pagespeed/insights/?hl=de)
• GTMetrix (gtmetrix.com)
• Pingdom (pingdom.com)
• Site Speed Test (tools.keycdn.com/speed)
• WebPageTest (webpagetest.org)

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.