wordpress schneller machen

WordPress schneller machen:

eine Schritt für Schritt Anleitung zur optimierung von WordPress

In dieser Anleitung möchten wir Ihnen zeigen, wie Sie die Ladezeiten von WordPress schneller machen können und allgemein Ihre WordPress-Installation optimieren. Denn eine Webseite, welche einen Besucher zu lange warten lässt, sei es durch langsamen Seitenaufbau oder schlecht strukturierte Inhalte, verliert diesen – und dies wahrscheinlich für immer. Mit der Entwicklung der technischen Möglichkeiten im Internet wurden auch WordPress-Webseiten immer schneller, übersichtlich und somit attraktiv für ungeduldige Leser. Eine einfache Analyse und einfache Anpassungen nach unserer Anleitung, sorgen dafür, dass Ihre WordPress-Seite künftig schneller lädt und damit für potenzielle Besucher und Leser interessant bleibt.

WordPress schneller machen: Die Analyse

Analyse mit Goolge PageSpeed Insights

Google PageSpeed Insights ist ein sehr gutes Werkzeug, mit dem sich die aktuelle Website-Geschwindigkeit präzise messen lässt. Denn um Verbesserungsbedarf zu erkennen, muss feststehen, wie schnell die tatsächliche Ladezeit im derzeitigen Zustand ist. Erst mit diesem Wissen sind Veränderungen möglich und sinnvoll. Um Google PageSpeed Insights für eine Ist-Analyse zu nutzen, müssen Sie dort einfach Ihre Website-URL eintragen. Sofort erfolgt eine analytische Seitenauswertung. Auf dieser Basis bietet Goolge PageSpeed Insights wahrscheinlich mehrere Verbesserungsvorschläge an, mit denen die Seite schneller und somit nicht nur für Besucher, sondern auch für die Crawler von Goolge attraktiver wird. Ein wert von 100 Punkten wäre natürlich optimal – die meisten Seiten bewegen sich jedoch im unoptimierten Zustand in einem Punktebereich von 50-70 Punkten.

pagespeed insights

WordPress schneller machen: Los gehts!

Häufige Verbesserungsvorschläge von PageSpeed Insights

Die folgenden zwei Verbesserungsvorschläge kommen nicht nur bei WordPress-Installationen häufig vor. Bei vielen Websites sind JavaScript-Files nicht dort eingefügt, wo es für die Ladegeschwindigkeit optimal wäre – nämlich im Footer. Desweiteren sind Regeln bezüglich des Server- und Clientseitigen-Cachings für Website-Elemente meist nicht festgelegt.

  • Punkt 1: JavaScript- und CSS-Ressourcen, die das Rendering blockieren
  • Punkt 2: Browser Caching nutzen

Behebung von Punkt 1: JavaScript- und CSS-Ressourcen, die das Rendering blockieren

autoptmize
Da sie von Theme- und Plug-in Entwicklern oft im Header des Themes platziert werden, werden beim Aufbau der Website zuerst viele JavaScript-Dateien geladen, bevor die besuchte Website selbst dargestellt wird. Wer JavaScript verwendet, kann diese wichtigen Elemente allerdings simpel vom Header- in den Footer-Bereich verlagern.

Dies kann man manuel machen oder über ein Plug-in z.B. Autoptimize.

autoptimize einstellungen

So sollten Sie Autoptimize einstellen.

CSS- und JavaScript Optimierung mit Autoptimize

Optmierung mit Autoptimize:

  • Installieren und aktivieren Sie das Plugin „Autoptimize“.
  • Aktivieren Sie die Option „HTML Code optimieren“.
  • Aktivieren Sie die Option „JavaScript Code optimieren“.
  • Aktivieren Sie die Option „CSS Code optimieren“.

Nun werden von Autoptimize alle Dateien von JavaScript sowie CSS zusammengefasst und komprimiert. Sie sitzen ausserdem künftig im Footer der Website – an der optimalen Stelle – und behindern künftig die Lade-Geschwindigkeit der Website nicht mehr in früherem Maße.

vorher nacher autoptimize

Noch etwas mehr bei den CSS und JavaScript-Dateien raus holen? Dann schauen sie sich diese Tipps für Fortgeschrittene an:

Nur für Fortgeschrittene: CSS-Dateien manuel optimieren

Wie schon eingangs erwähnt, können JavaScript- und CSS-Dateien bei standard Einstellungen – unoptimiert – die Ladegeschwindigkeiten, nicht nur von WordPress Seiten, stark verlangsamen. Die einfachen Optimierungen für CSS- und JavaScript-Dateien haben wir bereits weiter oben beschrieben, jetzt gehen wir darauf noch mal genauer ein:

Nur für Fortgeschrittene: CSS-Dateien in einer Datei zusammenfassen

Da die Menge der gleichzeitig möglichen Anfragen an einen Server recht begrenzt sind, sollte man versuchen diese optimal zu nutzen um die Ladezeiten zu verkürzen. So ist es also sehr sinnvoll z.B. nicht 8 verschiedene CSS-Dateien in den Header (besser in den Footer) einzubinden, sondern wenn möglich so viele wie möglich von diesen CSS-Dateien in weniger Dateien zusammenzufassen. Dies kann ein Plugin übernehmen oder man kopiert diese manuell zusammen. So hat man statt bspw. 8 Serveranfragen für 8 CSS-Dateien, im Idealfall nur noch eine Serveranfrage für eine CSS-Datei.

compressor

Unnötige Zeichen aus CSS-Dateien entfernen mit dem Compressor von Sergej Müller.

Unnötige Abstände in CSS-Dateien entfernen

Jedes Zeichen in einer Datei trägt zur Dateigröße bei, so auch jeder Zeilenabstand. So sind in einer optimalen CSS-Datei keine unnötigen Zeichen und Zeichenabstände mehr zu finden. Der Optimalzustand ist also eine „einzeilige“ CSS-Datei. Dies kann man natürlich auch manuel machen oder aber man nutzt ein Tool zur Entfernung der unnötigen Zeichen. Die Auswirkungen sind teilweise deutlich ersichtlich.

Das Online-Tool von Sergej Müller „Code Compressor“ ist hier sehr praktisch und sehr einfach zu bedienen.

Die Bedienung ist sehr einfach. In das obere Feld wird der Inhalt der unoptimierten CSS-Dateien eingefügt und dann klicken Sie einfach auch „Basic-“ bzw. „Powerfull Compress“. Am Ende haben Sie im unteren Feld den optimierten Code, mit dem Sie dann einfach den alten CSS-Code in der alten CSS-Datei überschreiben (speichern nicht vergessen 😉 ).

Achtung: Das ganze funktioniert auch mit JavaScript-Dateien. Hier ist allerdings Vorsicht geboten, da einige Skripte nach der Optimierung unter Umständen nicht mehr funktionieren könnten.

Behebung von Punkt 2: (Browser)-Caching nutzen

Optimale Geschwindigkeitsergebnisse und Performance erreicht man nur durch Caching. Caching ist quasi einer der wichtigsten Punkte wenn man WordPress schneller machen möchte. Aber was passiert da? Beim sog. Caching werden Daten auf dem Server oder der Festplatte des Besuchers zwischengespeichert und beim nächsten Besuch der Seite abgerufen – sofern sich auf der Website (also an den Daten) nichts geändert hat. So muss beim Aufruf der Website natürlich nicht noch einmal alles neu vom Server geladen werden und die Daten stehen schneller zur Verfügung – somit wird die WordPress Website erheblich schneller gemacht.

Caching mit WP SuperCache

wp supercache
Mitlerweile gibt es div. Plugins die teilweise sehr fortgeschrittene Caching-Methoden verwenden. Im folgenden möchten wir beispielhaft das Plugin WP SuperCache genauer beleuchten und die Einstellungen erklären.

wp supercache einstellung

Nehmen Sie diese Einstellungen im WP SuperCache vor.


Caching mit dem Plug-In WP SuperCache:

  • Installieren und aktivieren Sie das Plugin.
  • Gehen Sie auf „Einstellungen » WP Super Cache“.
  • Aktivieren Sie den Button „Caching an“.
  • Überprüfen Sie dann ob alles funktioniert mit „Cache testen“.

Aktivieren Sie ausserdem im Tab „Erweitert“:

  • Cache Treffer auf diese Webseite für schnellen Zugriff.
  • Nutze mod_rewrite um Cache-Dateien auszuliefern.
  • Komprimiere Seiten, so das sie schneller an Besucher ausgeliefert werden.
  • Cache neu erstellen. Liefert eine Supercache-Datei an anonyme Besucher aus, während eine neue Datei erstellt wird.
  • Mobile device support.
  • Clear all cache files when a post or page is published or updated.
  • Extra Startseiten-Checks.

Ganz wichtig ausserdem: Seiten mit Gzip komprimieren

Auch die Gzip-Komprimierung ist ein sehr wichtiger Punkt um WordPress schneller zu machen – und das zum Teil erheblich. Durch die Komprimierung der Daten mit Gzip, kann sich die Ladezeit noch mal um bis zu 70% verkürzen. Aktivieren Sie in WP SuperCache die Einstellung: „Komprimiere Seiten, so das sie schneller an Besucher ausgeliefert werden. (Empfohlen)“.

Nur für Fortgeschrittene: Browser Caching via .htaccess aktivieren …

Wenn Sie etwas mit dem Begriff .htaccess anfangen können, können Sie das Browsercaching auch manuel über das Einfügen der folgenden Codezeilen in die .htaccess-Datei aktivieren.

## EXPIRES CACHING ##
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"
## EXPIRES CACHING ##

Nur für Fortgeschrittene: Gzip via .htaccess aktivieren

# Deflate Compression by FileType

AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/atom_xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-shockwave-flash

wordpress optimieren fertig

Fertig?

Haben Sie die oben genannten Punkte abgearbeitet, sollten die zwei häufigsten Kritikpunkte von PageSpeed Insights behoben sein und Ihre WordPress Website schon spürbar und messbar schneller sein. Noch mehr können Sie dann mit den folgenden Punkten raus holen.

WordPress schneller machen: Bilder komprimieren

Ein ebenfalls sehr wichtiger Schritt, ist die Komprimierung und Optimierung von verwendeten Bildern und Grafiken. Bilder und Grafiken machen immer den größten Teil der Datenmenge einer Website aus – hier besteht demzufolge also ein sehr sehr großes Optimierungspotential. Wichtig ist dabei immer eine gute Balance zwischen Qualitätsverlust und Einsparung zu finden. Schon bei der Erstellung und Bearbeitung der Bilder für das Web sollten Sie auf die Dateigröße und eine gute Komprimierung achten.

Zusätzlich bietet sich das wirklich gute Plugin „WP Smushit“ an. Das Plugin optimiert, im aktiven Zustand, alle über die WordPress Mediathek hochgeladenen Dateien und deren Dateigröße ohne sichtbare Qualitätsverluste.

WordPress schneller machen: Hosting

Achten Sie natürlich auch auf ein ausreichend dimensioniertes Webhosting Paket, auf dem auch eine umfangreiche WordPress Installation ohne Performace-Probleme laufen kann. Einen übersichtlichen Vergleich verschiedener WordPress Hosting Angebote finden Sie natürlich bei uns. 😉

WordPress schneller machen: Plugins

Prüfen Sie, welche installierten und aktivierten Plugins Sie regelmäßig verwenden. Deaktivieren Sie alle anderen, und löschen Sie alle, welche Sie in den letzten 3 – 6 Monaten nicht verwendet haben. Ein späteres Herunterladen ist im Bedarfsfall nützlicher, als durch den vorhandenen, passiven „Ballast“ wertvolle Ladezeit für Ihre WordPress-Seite zu verlieren.

Übersicht: nützliche Plugins um WordPress zu Optmieren

Abschließend geben wir ihnen noch mal eine Liste mit Plugins an die Hand mit deren Hilfe sich eine WordPress Seite schneller machen lässt – und das auf dem einfachsten Weg, ohne das Einfügen von Codes oder Veränderung von Dateien.

Für Caching, HTML-, CSS- und JavaScript-Datei Optimierung/Komprimierung:

Autoptimize

Autoptimize ist speziell auf die Optimierung und Komprimierung von CSS- und JavaScript-Dateien ausgerichtet. Durch das Plugin werden die Dateien optimiert, zusammengefügt und vom WordPress Header in den WordPress Footer verlagert. So das diese großen Dateien erst am Ende des Seitenaufrufs geladen werden – dies macht den Seitenaufruf und damit den Aufruf einer WordPress seite deutlich schneller.

WP SuperCache

WP SuperCache ist ein kleineres Caching Plugin mit dem sich das Browser Caching aktivieren lässt. Des weiteren erstellt das Plugin statische HTML abbilder der einzellnen WordPress Seiten, welche sehr viel schneller geladen werden können.

… oder die all-in-one Lösung:

W3 TotalCache

W3 TotalCache ist eine komplexe All-In-One Lösung. Hier werden eigentlich alle Funktionen rund um Caching und Komprimierung abgedeckt (außer Optimierung von Bildern). Möchte man garkeine Optimierungen manuell vornehmen, empfehlen wir die Installation dieses Plugins. Mit der Installtion von W3 TotalCache können Sie sich Autoptimize und WP SuperCache sparen.

Zur Optimierung von Bildern:

WP Smush.it

WP Smush.it ist ein sehr nützliches Plugin welches die alle Bilder, welche über die Mediathek in WordPress geladen werden automatisch Optimiert – ohne die Bildqualität zu verschlechtern.

Crazy Lazy

Durch das Crazy Lazy Plugin wird WordPress um eine sog. Lazy Load funktion erweitert. Das heißt, Bilder einer Webseite werden erst dann geladen, wenn der Benutzer in den Bild-Bereich scrollt. Gerade bei Bildlastigen-Blogs und Websites kann man hierdurch den Seitenaufbau deutlich beschleunigen.

Nützliche Tools zur Optimierung von Daten

„Code Compressor“ von Sergej Müller

Noch mehr Tipps?

Haben Sie noch mehr Tipps um WordPress schneller zu machen und zu optimieren? Hinterlassen Sie ihren Tipp in einem Kommentar! 🙂

3 Kommentare zu “WordPress schneller machen & Ladezeiten optimieren

  1. Super Anleitung, vielen Dank dafür.

    Ein paar Ergänzungen:

    – Man kann mod_pagespeed verwenden, wenn man den Server selbst verwaltet
    – Gleiches gilt für HTTP/2 (Multiplexing erhöht die Performance)
    – WordFence Plugin verwenden
    – Redis Server und Redis Plugin für Object Cache

  2. Super Anleitung! Meine Pages haben direkt ein paar Punkte gut gemacht. Obwohl ich immer noch ziemlich unzufrieden bin. Ich bin da nicht technisch versiert genug, um alle Vorschläge der PageSpeed Insights umzusetzen…

  3. Hi,
    zwar ist meine Seite im mobilen Bereich nur um fünf Zähler gestiegen, aber die Desktop-Version hat einen Sprung von 20 Zählern erreicht. Gute und kompakte Anleitung die man schnell in die Praxis umsetzen kann. Danke.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *