April 30, 2019November 25th, 2019

In fünf einfachen Schritten zum Pagespeed Erfolg für WordPress. Pagespeed Optimierung und das ganz einfach mit Plugins. Die Geschwindigkeit einer Webseite ist nicht nur ein wichtiger Suchmaschinenfaktor, sondern ist auch für die User Experience entscheidend. Häufig verschwindet die erste Euphorie, wenn man die Webseite das erste Mal einen Pagespeed Test durchlaufen lässt.

Auch wenn es Tools gibt, die bei der Pagespeed Optimierung helfen, ist das Optimieren einer Webseite unter dem Aspekt der Geschwindigkeit nicht immer mit ein paar Klicks schon erledigt. Deshalb erklärt dieser Artikel in fünf Schritten, wie eine Webseite einen guten Google PageSpeedScore erreichen kann.

 

1. 100/100

Nach der inhaltlichen Relevanz ist der Page Speed zukünftig einer der wichtigsten Rankingfaktoren. Vor allem auch weil der Page Speed einen großen Einfluß auf die User Experience hat. Google hat kürzlich ein Speed Update für 2018 angekündigt, im Zuge dessen vor allem mobile Seiten, die zu lange Ladezeiten aufweisen abgestraft werden sollen.  Das Ziel sollte jedoch nicht immer ein Google PageSpeedScore von 100/100 sein. Manchmal ist das mit vertretbarem Aufwand nicht einfach zu erreichen.

Das wohl bekannteste Tool ist Google Page Speed Insights. Darüber hinaus gibt es noch unzählige weitere Tools, die die Analyse und Verbesserung der Performance einer Webseite ermöglichen. Neben anderen Einblicken, bieten diese auch oft nochmal ergänzende nützliche Tipps zur Optimierung der Webseite.

 

GTMetrix Website Speed Test

Was auf den ersten Blick etwas durcheinander wirkt, bringt den Feinschliff. Gerne kann man Google Page Speed Insights für die Optimierung der Geschwindigkeit nutzen und dann mit GTMetrix das Sahnehäubchen aufgesetzen.

 

Pingdom Website Speed Test

Was ist an der Webseite zu groß? Was ist zu langsam und was schon schnell genug? Das alles beantwortet Pingdom mit Best Practises und gibt zu jedem Seitenelement Details wie Dateigröße, Geschwindigkeit und Ladezeit an.

 

Webpagetest Speed Tool

Wer würde nicht gerne wissen wie die Geschwindigkeit der eigenen Webseite von Standorten auf der ganzen Welt in echten Browsern und verschiedenen DSL-Geschwindigkeiten aussieht? Mit Hilfe von Webpagetest geht nicht nur das, sondern auch der Vergleich verschiedener Webseiten untereinander.

 

Varvy Page Speed Opzimization

Was ist an der Webseite zu groß? Was ist zu langsam und was schon genug optimiert? Das alles beantwortet Varvy Page Speed Optimization und gibt zu jedem Seitenelement Details wie Dateigröße, Bildoptimierung und Geschwindigkeit an.

 

2. Bilder optimieren

Ein ziemlich unkomplizierter Move ist die Optimierung der Bilder auf der Webseite. Dafür kann man das WordPress Plugin EWWW Image Optimizer installieren, welches eine verlustfreie Kompression aller Bilder ermöglicht. Das Plugin verkleinert demnach alle Bilder automatisch, ohne dabei etwas an der Qualität der Bilder zu verschlechtern.

 

Eine weiße Wand mit zwei Reihen von Bildern mit schwarzem Bilderrahmen.

Ohne die Optimierung der Bilder sieht es mit der Geschwindigkeit einer Seite schlecht aus

 

Netter Nebeneffekt: Das Plugin besitzt ein bulk-optimization Feature. Somit kann die Optimierung der gesamten Medienbibliothek mit einem einfachen Klick nach der Installation geschehen. Und in der Zukunft geschieht die Optimierung jedes neu hochgeladenen Bildes automatisch.

Eventuell sollte man das Plugin jedoch nach Gebrauch wieder deaktivieren, damit die Geschwindigkeit von WordPress selbst nicht unnötig abnimmt. Je nach Belieben, kann man das Plugin dann wieder für neue Bilder aktivieren.

 

3. Reduzieren + Cachen

Lautet die Zauberformel im Hinblick auf die Pagespeed Optimization. So soll die Reduzierung von Javascript, CSS und HTML funktionieren.

Dadurch, dass WordPress modular aufgebaut ist, kann es des Öfteren dazu kommen, dass Javascript- und CSS-Dateien die WordPress Installation nicht gerade beschleunigen. Teilweise kommen viele WordPress Plugins mit einer oder mehreren CSS-Dateien. Aber auch hier hat WordPress verschiedene Plugins.

Außerdem wird WordPress dynamisch aus der Datenbank generiert. Das bedeutet viel Arbeit für den Server und das wiederum unter Umständen eine extrem langsame Webseite. Sind die Inhalte der Webseite nur mit Posts und statischen Pages, also nicht wirklich dynamischer Natur, gearbeitet, dann ist die Umwandlung dieser Seiten in statische HTML Pages empfehlenswert. Das bedeutet, dass so nicht mehr für jeden Besucher der Webseite eine dynamische Page aus der Datenbank bereitgestellt werden muss. Hier kommt das Caching zum Einsatz. So entsteht aus der dynamischen Version einfach eine statische Webseite. Resultat: Der Server ist entlastet und der Besucher kommt schneller zum gewünschten Inhalt.

Das kostenlose Plugin  W3 Total Cache hilft dabei, Javascript, CSS und HTML zu reduzieren und das dynamische PHP(Hypertext Preprocessor)in statisches HTML umzuwandeln.

 

4. Above the Fold Optimierung

Was bedeutet Above the Fold? Der Begriff kommt aus dem Druckereiwesen und beschreibt das Falten in der Mitte einer Zeitung. Der Leser bekommt somit erstmal nur den oberen Bereich des Titelblattes zu sehen. Diese Klicklinie wird als foldoder auf Deutsch als Falzbezeichnet. Das gleiche Prinzip gibt es auch bei einer Webseite. Above the Fold ist das, was der Nutzer ohne Scrollen als erstes auf dem Bildschirm von der jeweiligen Seite sieht.

Damit eine Webseite vollständig angezeigt werden kann, müssen Javascript und CSS-Dateien geladen werden. Diese Dinge spielen jedoch für die Above the Fold Ansicht keine Rolle. Solange nicht gescrollt wird, sind Dinge wie Footer und Animationen nicht von Nöten. Für die Above the Fold Optimierung muss der Browser demnach nur das bekommen, was er für diese erste Ansicht auch wirklich benötigt. Und auch hier hält WordPress wieder einige praktische Plugins parat.

 

Ein heller und steriler Schreibtisch mit Monitor und anderen Utensilien.

Above the Fold: Das sieht der Nutzer ohne Scrollen als erstes auf dem Bildschirm

 

Doch halt! Bevor diese Optimierung durchgeführt wird, sollte gründlichst überlegt werden, ob dieser Schritt den gewünschten Effekt bringt. Nicht selten ist es nämlich so, dass eine Above the Fold Optimierung keine sehr gravierende Verbesserung hinsichtlich der Geschwindigkeit bietet. Diese Optimierung hat außerdem zur Folge, dass die Webseite bis zum vollständigen Laden einen komischen ersten Eindruck vermittelt. Slider können so zum Beispiel noch viel schlimmer aussehen. Hier hilft es nur noch direkt an den CSS Code ranzugehen. Und das kann ohne gute Programmierkenntnisse bei falscher Bearbeitung fatale Folgen für die gesamte Webseite haben. Bevor die ganze Webseite auseinanderbricht und nur wenige Speed Punkte erreicht sind, sollte die Optimierung anderer Bereichen davor stehen.

Für die Above the Fold Optimierung ist das Above the Fold Optimization Plugin hilfreich.

 

5. Browser Caching aktivieren

Browser Caching ist ein wesentlicher Bestandteil für die Beschleunigung einer Webseite. Der Gedanke dahinter ist, dass statische Ressourcen, die nie oder selten geändert werden, direkt aus dem Browser Cache geladen werden. Somit werden Bilder oder CSS- Dateien unter der Voraussetzung, dass sie zuvor schon einmal von der Webseite geladen wurden, direkt von der Festplatte geladen.

Folge: Der Server ist entlastet, weil Grafiken nicht neu laden müssen. Dadurch resultiert dann natürlich wiederum eine Verbesserung der Ladezeit der Webseite, die teilweise sogar um bis zu 80% optimiert ist. Browser Caching ist somit ein bedeutsames Werkzeug bei der Pagespeed Optimierung einer Webseite.

 

Einfach und simpel

Mit diesen wenigen Schritten ist es schon möglich, einen guten PageSpeed Score zu erreichen und einiges an Performance zu gewinnen. Mehr geht immer, aber das ist dann auch mit Programmieraufwand verbunden.

Zu beachten ist, dass der PageSpeed Score vom geladenen Inhalt der Seite abhängig ist. Hat die Webseite also viele Bilder und Videos, fällt der Score ganz automatisch schlechter aus. Es liegt also darin, ein gutes Gleichgewicht zwischen Ladezeit und User Experience zu finden.

Wird mit der Pagespeed Optimierung das Ziel verfolgt, höher zu ranken, sollte man jedoch auch immer an den Nutzer denken. Enthält die Seite keinen sorgfältigen Inhalt und somit keinen Mehrwert für den Nutzer, wird die Seite auch nicht ranken. Ziel verfehlt.

Es gilt nicht auf Biegen und Brechen zu optimieren. Wie immer geht es darum, Fingerspitzengefühl zu beweisen und aus Liebe zum Nutzer zu agieren. Deshalb können Sie uns jetzt gerne hier kontaktieren.