Onpage-Optimierung

Onpage Optimierung – Pagespeed des eigenen WordPress Blogs erhöhen

Der Pagespeed bzw. die Ladezeit eines WordPress Blogs ist einer der wichtigsten Punkte in der Onpage-Optimierung der eigenen Webseite. Nichts ist frustrierender für einen Internetuser als zu warten und zu warten bis die gewünschte Webseite/Blog komplett geladen wurde. Mal ganz davon abgesehen, dass viele User bei langen Ladezeiten erst gar keine Inhalte der Webseite zu Gesicht bekommen, da Sie den Seitenaufbau vorzeitig abbrechen und sich die Informationen auf anderen Webseiten mit deutlich geringeren Ladezeiten holen. Auch Suchmaschinen wie bspw. Google bewerten den Pagespeed einer Webseite und lassen die Ergebnisse seit einigen Jahren ebenfalls mit in das Webseiten-Ranking einfliessen. 2 Punkte für die es sich in jedem Fall lohnen sollte, den eigenen WordPress Blog bzw. die eigene Webseite im Hinblick auf den Pagespeed zu optimieren. In dieser Artikelserie werden wir zunächst den IST-Zustand eines WordPress Blogs ermitteln & daraufhin alle nötigen Optimierungsmassnahmen anhand folgender 10 Punkte durchführen.

  • Bilder optimieren
  • Komprimierung aktivieren
  • Browser-Caching nutzen
  • JavaScript- und CSS-Ressourcen, die das Rendering blockieren, in Inhalten “above the fold” (ohne Scrollen sichtbar) beseitigen
  • Antwortzeit des Servers reduzieren
  • CSS reduzieren
  • JavaScript reduzieren
  • HTML reduzieren
  • Sichtbare Inhalte priorisieren
  • Zielseiten-Weiterleitungen vermeiden

Den IST-Zustand ermitteln

Der erste Schritt, um herauszufinden in welchen Bereichen die Webseite noch Optimierungsbedarf bzgl. der Ladezeit hat, ist die Eingabe der Webseiten-URL beim Developer-Tool Google PageSpeed Insights. Die dort eingetragene Webseite wird daraufhin auf die oben angesprochenen 10 Punkte analysiert und gibt im Anschluss einen Überblick des momentanen IST-Zustandes der Webseite aus. Dieser IST-Zustand der Webseite wird dabei zum einen mit einem Score-Wert (Skala von 0 – 100) definiert und ausserdem in 3 unterschiedliche Optimierungskategorien eingeteilt. Die Optimierungskategorien teilen sich dabei wie folgt auf:

  • Behebung erforderlich: Hier muss dringend etwas optimiert werden!
  • Behebung empfohlen: Hier kann noch etwas optimiert werden, ist aber kein MUSS!
  • Bestandene Regeln: Hier besteht keinerlei Optimierungsbedarf!

Screenshot IST-Zustand Webseite: http://was-koche-ich-heute-rezepte.de - developers.google.com/speed/pagespeed/insightsScreenshot IST-Zustand Webseite: http://was-koche-ich-heute-rezepte.de – developers.google.com/speed/pagespeed/insights

Der von mir soeben analysierte WordPress Blog hat einen momentanen Score-Wert von 51/100 und bietet erheblichen Optimierungsbedarf vor Allem in punkto Bildoptimierung, Webseiten-Komprimierung & Browser-Caching. Lediglich 2 Punkte sind bisher ausreichend umgesetzt, 5 weitere Punkte bedürfen eventuell weiterer Optimierungsmassnahmen. Ziel der Optimierungsmassnahmen in dieser Artikelserie sollte in jedem Fall die Beseitigung der 3 ersten Punkte sein, ausserdem werden wir einen Score Wert von mindestens 80/100 anstreben. Beginnen werden wir heute mit weiterführenden Informationen bzgl. der bereits bestandenen Regeln, da es bestimmt den ein oder anderen gibt, der diesbezüglich noch nach Optimierungsinformationen für die eigene Webseite bzw. den eigenen WordPress Blog sucht. Im Verlauf der Artikelserie arbeiten wir uns dann detaillierter durch die übrigen Punkte.

Sichtbare Inhalte priorisieren

Hier geht es darum Inhalte “above the fold”, das heisst Inhalte die ohne zu Scrollen für den User sichtbar sind, ordnungsgemäß zu optimieren. Es geht dabei in erster Linie darum die Datenmenge, die zum Laden des Hauptinhalts Ihrer Webseite gesendet werden, zu reduzieren. Verfügt Ihre Webseite bspw. über ein mehrspaltiges Designlayout, muss sichergestellt werden, dass zunächst der Hauptcontent geladen wird & erst danach die Seitenelemente bzw. Sidebar inklusive der dort integrierten Scripte und Inhalte. Das sollte bei nahezu jedem aktuellen WordPress Theme schon von Haus aus realisiert worden sein, ist das nicht der Fall sollte man eventuell einen Themewechsel in Betracht ziehen, oder aber mal versuchen die Webseite ohne Sidebar, also einspaltig, zu implementieren.

Genauso sollte mit HTML-Code und Scripten diverser Drittanbieter verfahren werden. Sollte bspw. HTML-Code eines Drittanbieters vor dem Hauptcontent geladen werden, ist es ratsam eine Umkehrung dieser Reihenfolge herzustellen. Hierzu zählt auch die Einbindung von Werbebannern. Internetnutzer suchen auf Webseiten vorwiegend nach Informationen und nicht nach Werbung. Sollte Ihr Seiteninhalt “above the fold” zum Grossteil aus Werbebannern bestehen, muss hier unbedingt eine Änderung vorgenommen werden. Das soll nicht heissen direkt alle Werbebanner von der eigenen Webseite zu entfernen, sondern lediglich das Verhältnis im sichtbaren Bereich zu optimieren bzw. anzupassen.

Zielseiten-Weiterleitungen vermeiden

Unter dem Punkt Zielseiten-Weiterleitung versteht man eine Weiterleitung von der aufgerufenen Webseiten-URL zur endgültigen Zielseite. Hierbei geht es hauptsächlich um die Darstellung der Webseite abhängig vom verwendeten Endgerät des Internetusers. Wird dem User beim Aufruf einer Webseite mit dem Tablet und einem Desktop-PC der gleiche HTML-Code bereitgestellt oder wird je nach Endgerät eine Zielseitenweiterleitung nach dem Schema…

http://domain.de —> http://domain.de/mobil oder http://m.domain.de

…durchgeführt? Um solche Weiterleitungen zu vermeiden und unabhängig vom Endgerät denselben HTML-Code zur Verfügung zu stellen hat sich das Konzept des “Responsive Webdesigns” durchgesetzt. Hier wird für Tablets, Smartphones und Desktop-PCs immer der gleiche Code bereitgestellt, der Webseitencontent & das -layout allerdings an die jeweilige Endgerätbildschirmgröße angepasst. So lässt sich die Wartezeit der User beim Laden der Webseite deutlich verringern. Sollten Sie also nach einem neuen Design/Theme für Ihre Webseite Ausschau halten, achten Sie dabei auf die Unterstützung des “Responsive Webdesigns”.

Ein weiterer Referenzwert

Um neben dem 10 Punkte-Optimierungsplan & Score-Wert über Google Pagespeed Insights noch einen reinen Geschwindigkeitswert als Anhaltspunkt für die zukünftige Optimierung zu haben, kann man seine Webseite zusätzlich noch bei pagespeed.de testen und bekommt dort wie unten im Screenshot zu sehen einen Sekundenwert inkl. kurzer Datenübersicht präsentiert. 3,915 Sekunden & ein Gesamtdatenvolumen von 1,111 Megabyte sind definitiv zu lang bzw. zu gross, diese Werte werden wir im Zuge der Optimierung deutlich senken.

Alle Artikel der Serie

1 Comment

Leave a Comment