Need more Pagespeed – 7 Tipps für Dein WordPress-Tuning

Pagespeed ist heute wichtiger denn je, immer mehr Nutzer surfen mobil und gerade bei schlechter Netzabdeckung können die Ladezeiten einer Seite immens sein, eine hohe Absprungrate ist damit vorprogrammiert.

Die Ladezeiten sind mittlerweile auch ein wichtiger Ranking Faktor, ein weiterer Grund die Performance der Seite im Auge zu behalten.

Erfahre hier, wie du die Pagespeed deiner Seite misst und an welchen Stellschrauben du drehen kannst, um die Ladezeiten zu verbessern.

Pagespeed Test – Ladezeiten messen

Bevor du Maßnahme ergreifst, welche die Performance deiner Seite. Es gibt unterschiedliche Tools um Ladezeiten zu messen. Die wohl bekanntesten sind:

• Pingdom 
• PageSpeed Insight von Google
• GTmetrix

Alternativ kannst du auch die lokale Performance-Messung mit dem Chrome DevTools durchführen.

Ein Test bei PageSpeed Insight kann so aussehen:

Das Tool testet sowohl mobil als für den Desktop. Bei obigem Beispiel fallen besonders die Bilder ins Gewicht, danach die Textkomprimierung, das Rendering blockierende Ressourcen und die Serverantwortzeiten.

Der Test bei GTmetrix:

GTmetrix unterscheidet zwar nicht zwischen Mobil und Desktop, gibt aber zusätzliche Hinweise:

• Ladezeit: Wie war das mit der Absprungrate nach ~ 2 Sekunden?
• Page Size: Interessant für Nutzer im mobilen Netz
• Anzahl Requests: Geladene Ressourcen (Bilder, CSS, Skripte, Fonts, …)

Bei unserer Beispiel-Seite sehen wir, dass die Page Size viel zu groß ist und die Seite damit lange braucht, um mobil geladen zu werden.

Wie kannst Du die Pagespeed steigern?

Wähle den richtigen Hoster

Hoster gibt es wie Sand am Meer. Viele locken Einsteiger mit Preisen für Hosting und Domain ab 1 € pro Monat.

Bei diesen Billiganbietern zahlst jedoch meistens drauf, nicht nur Service ist schlecht, auch die Ladezeiten können in der Regel nicht überzeugen.

Deshalb bin ich kein Fan von Strato, 1 & 1, DomainFactory, One.com, HostEurope und Co. Ein guter Hoster mit Serverstandort in Deutschland oder Europa sollte es schon sein.

Folgende Hoster kann ich uneingeschränkt empfehlen:

• webgo
• Raidboxes
• Mittwald (mein Hoster und besonders für Firmen empfehlenswert)

Nutze Browser Caching

Was ist denn Caching überhaupt?  Normalerweise werden bei jedem Seitenaufruf die einzelnen Inhalte der Datenbank neu zusammengesetzt, dass kostet Zeit. Beim Caching wird die die fertige HTML-Seite in einem Cache-Verzeichnis zwischengespeichert, so kann der Server bei einer Anfrage des Browsers direkt mit der fertigen Seite antworten, die Ladezeiten können so erheblich reduziert werden. Mehr Information zu diesem Thema findest Du bei FastWP.

Das Browser Caching wird bei WordPress über die Datei .htaccess gesteuert.

Um das Caching zu aktivieren, benötigst du ein zusätzliches Plugin. Hier kann ich folgende empfehlen:

• WP-Rocket, das Caching wird automatisch bei der Plugin Aktivierung eingeschaltet
• W3 Total Cache, hier ist das Caching in den allgemeinen Einstellungen zu aktivieren.

Mit dem Browser Caching wird die Pagespeed auf jeden Fall gesteigert, die Rendering blockierenden Ressourcen sind damit noch nicht beseitigt.

Rendering blockierende Ressourcen beseitigen

Ursache für dieses Problem sind das unnötiges direktes Laden von darstellungsunrelevanten Ressourcen.

Folgende Maßnahmen entfernen renderblockierende Elemente bzw. optimieren Quelltext-Ressourcen:

1) Minifizieren ( Entfernen von Leerstellen und Zeilenumbrüchen)

2) Zusammenführen ( das ist nicht mehr immer sinnvoll oder nötig wegen HTTP/2 )

Hier ist das Tool meiner Wahl wieder WP-Rocket. Es ist sehr einfach einzustellen und bringt wirklich was. Allerdings ist es kostenpflichtig.

Eine kostenfreie Alternative ist die Kombination aus Caching via W3 Total Cache und Dateioptimierung via Autoptimize.

Autooptimize Einstellungen:

Einstellungen für JavaScript:

Einstellungen für CSS:

Kritisches CSS läßt sich mit diesem Tool generieren.

Bilder optimieren

Bilder sind häufig ein Bremsfaktor bei der Pagespeed. Auch wenn sie komprimiert hochgeladen werden, können sie trotzdem die Ladezeiten beeinflussen.

Das liegt daran, dass

• Bilder in modernen Formaten bereitgestellt werden
• Bilder beim Skalieren nur im dargestellten Format bereitgestellt werden sollten, also in der Größe, die der Browser darstellt.

Moderene Bildformate:

Das gängige Beispiel für moderne Formate ist WebP. In WordPress ist der EWWW Image Optimizer ein Tool für automatische WebP-Option.

Ich konnte mit der Optimierung regulärer JPG ähnliche Resultate erzielen und habe auf das Plugin verzichtet.

Bilder auf die richtige Größe skalieren

Direkt in WordPress:

1. Bild in der Mediathek öffnen
2. Button „Bild bearbeiten“
3. Bild skalieren und zuschneiden.

Bildgröße in deinem Theme festlegen:

Im Theme kannst du Bildgrößen direkt auf ein Pixelmaß definieren:

• Auf diese Bildformate kann beim Einbinden (im Editor oder Theme) später zugegriffen werden.
• Nach der Definition eines neuem Bildformates müssen diese neu generiert werden. Das Plugin Regenerate Thumbnails hilft dabei.
• In den Medieneinstellungen (Einstellungen => Medien) können bereits Thumbnail, Medium, Large Definitionen gesetzt werden.

Bilder mit Tools komprimieren:

Die Bilder müssen nicht nur korrekt skaliert sein, sondern auch das korrektes Format (PNG, JPG oder WebP)

Automatische Komprimierung via Plugin:

• Imagify
• EWWW Image Optimizer

Manuelle Komprimierung:

• Mit TinyPng
• Mit Sqoosh
• In Photoshop „Für Web Speichern“

Lazy Loading

Beim Lazy Loading werden Bilder, die nicht initial zu sehen sind, erst bei Sichtbarkeit geladen.

Das reduziert die gesamte Ladezeit, auch wenn die Bilder nicht renderblocking sind.

Auch eingebettete YouTube-Videos bringen große Skripte mit, daher gilt für sie das Gleiche.

Wenn du WP Rocket verwendest, findest du hier die Möglichkeit Lazy Load zu aktivieren:

Kostenlose Alternativen für Lazy Load sind:

• Lazy Load by WP Rocket
• A3 Lazy Load

Weitere Maßnahmen für mehr Pagespeed:

Entferne überflüssige Plugins

Je weniger Plugins, desto besser!

Plugins laden oft unnötig viele CSS- oder JS-Dateien oder verlangsamen WordPress durch zu viele Datenbankabfragen.

Deshalb gehe ich regelmäßig meine Plugin durch und frag mich, ob ich sie weiterhin brauche. Falls nicht, werden sie gelöscht.

Wenn du bestimmt Plugins nur sporadisch nutzt, empfehle ich dir, es nur dann zu aktivieren, wenn du es nutzt und danach direkt wieder zu deaktivieren.

Diese Plugins sind die größten Performance Bremser:

• Social-Media-Plugins
• Pagebuilder
• Google Maps
• Woocommerce und andere E-Commerce-Plugins

Auch Kontaktformular, Foren-Plugins und der Broken-Link Checker reduzieren deine Pagespeed.

Ein schnelles WordPress Theme

Das richtige WordPress Theme zu finden ist echt schwierig. Gerade Anfänger neigen dazu eines der beliebtesten WordPress-Themes, wie z. B. Avada, X Theme, Enfold oder Bridge zu kaufen. Sie bieten viele Einstellungsmöglichkeiten, Integrationen, vorgefertigte Demos und einen Pagebuilder, was die Gestaltung einer Website erheblich vereinfachen kann.

Das ist verführerisch, hat aber auch Nachteile: Viele Funktionen und Gestaltungselemente werden geladen, auch wenn du diese gar nicht verwendest. Unnötig viele oder unnötig große CSS- und JavaScript-Dateien ziehen deine Ladezeit in den Keller.

Auch bringen diese MultiPurpose-Themes oft bei der Installation vieler weiterer Plugins mit sich (z. B. Slider, Kontaktformulare, WooCommerce, Slider, Widgets).

Hier gilt zu prüfen, ob du diese auch wirklich brauchst, denn in den meisten Fällen, kommt man auch ohne sie aus.

Es ist für die Ladezeiten auf jeden Fall besser ein schlankes Theme zu wählen und dieses um ein Plugin zu erweitern.

Fazit:

Es gibt eine Reihe von einfachen Maßnahmen um die Pagespeed anzukurbeln. Viel kannst du schon durch ein gutes Caching Plugin und die Optimierung deiner Bilder erreichen. Auch der Wechsel des Hoster kann deine Seite beschleunigen.

Links:

• Datenbank optimieren
• Caching Plugins 
• Bilder optimieren