Quelle: https://wordpresswebhosting.net/wordpress-schneller-machen/
Posted on 10. Mai 2016 by team
WordPress Websites schneller machen:
Eine Schritt für Schritt Anleitung zur WordPress-Optimierung
Inhaltsverzeichnis [Ausblenden]
- 1 WordPress Websites schneller machen:
- 2 WordPress beschleunigen: Analyse des Ist-Zustands
- 3 Die ersten Schritte um Worpress schneller zu machen
- 4 Weitere wichtige Optimierungsansätze
Kaum ein Kriterium ist für den Erfolg einer Webseite so wichtig wie die Ladezeit. Denn Internetnutzer mögen vor allem eins nicht: lange warten. Zwischen der Eingabe der URL oder dem Anklicken eines Links und der vollständig geladenen Webseite dürfen nur wenige Sekunden vergehen, ansonsten klickt der Besucher weiter und ist verloren.
Aber auch für die Suchmaschinenrankings spielt der Faktor Ladezeit eine zunehmend wichtige Rolle. Die Ursachen für lange Ladezeiten sind vielfältig und reichen von unoptimierten Bildern bis zu mit Skripten überfrachteten Templates. Durch seine Plugin-Fähigkeit und offene Struktur bietet WordPress von Haus aus die ideale Basis zur Speed-Optimierung.
Mit einer schnellen Analyse können Sie den Ist-Zustand Ihrer WordPress-Installation ermitteln und dann mithilfe unserer Schritt-für-Schritt-Anleitung Anpassungen vornehmen. Der positive Effekt wird nicht lange auf sich warten lassen.
WordPress beschleunigen: Analyse des Ist-Zustands
Webseiten-Geschwindigkeit mit Goolge PageSpeed Insights analysieren
Bevor Sie damit beginnen, an Ihrer WordPress-Installation an einzelnen Stellschrauben zu drehen, sollten Sie überprüfen, wie es aktuell um die Ladezeit Ihrer Webseite bestellt ist. Hier bietet Google mit den PageSpeed Insights ein kostenloses Tool an, das verschiedene, für die Geschwindigkeit Ihrer Webseite relevante Faktoren analysiert.
Zur Überprüfung geben Sie die URL Ihrer Webseite ein und starten per Knopfdruck den Analyseprozess. Wenige Augenblicke später präsentiert Ihnen Google PageSpeed Insights die Ergebnisse inklusive einer Punktebewertung in Verbindung mit Verbesserungsvorschlägen. Ohne jegliche Optimierung liegt die Wertung in der Regel bei 50 bis 70 von maximal 100 möglichen Punkten.
Das bedeutet, es besteht reichlich Potenzial, um die Webseite schneller zu machen. Dabei ist PageSpeed Insights auch bei der Optimierung Webseiten für Mobilgeräte hilfreich. Denn die Geschwindigkeit auf Smartphone und Tablets analysiert das Google Tool separat.
Die ersten Schritte um Worpress schneller zu machen
Die häufigsten Optimierungs-Tipps von PageSpeed Insights
Unter den Verbesserungsvorschlägen, die Ihnen Google PageSpeed Insights nach einer Analyse unterbreitet, finden sich immer wieder zwei Hinweise: Zum einen zeigt PageSpeed Insights ungenutztes Potenzial durch fehlendes oder nicht konsequent umgesetztes Caching auf. Zum anderen gibt das Tool bei vielen Templates den Hinweis, zur Beschleunigung des Seitenaufbaus JavaScript-Dateien im Footer statt im Header zu platzieren.
Verbesserungsvorschlag 1: JavaScript- und CSS-Ressourcen, die das Rendering blockieren
Verbesserungsvorschlag 2: Browser Caching nutzen
Punkt 1: So verhindern Sie, dass JavaScript- und CSS-Dateien das Rendering blockieren:
Unter WordPress-Theme- und Plugin-Entwicklern ist es gängige Praxis, JavaScript-Dateien und Bibliotheken wie jQuery und CSS- sowie Font-Dateien im Header des Templates zu platzieren. Da jedoch der Browser den HTML-Code von oben nach unten abarbeitet, werden diese Dateien zuerst geladen und verzögern so den Seitenaufbau. Durch einfaches Verschieben der CSS- und JavaScript-Aufrufe in den Footer wird hingegen zuerst die Webseite dargestellt und erst im Anschluss werden die CSS-Dateien und Scripte nachgeladen. Das sorgt für eine deutlich spürbare Beschleunigung des Seitenaufbaus.
Erfahrene Nutzer können die CSS- und JavaScript-Aufrufe mithilfe eines Editors vom Header in den Footer kopieren. Weniger aufwendig und auch für unerfahrene Nutzer geeignet ist die Verwendung eines Plugins wie Autoptimize.
Nutzung von Autoptimze
Diese Einstellungen sollten Sie vornehmen.Autoptimize nimmt die auf der Webseite verwendeten CSS- und JavaScript-Dateien, fasst sie zusammen und komprimiert sie, sodass die Dateigröße verringert und ein zusätzlicher Geschwindigkeitsvorteil erzielt wird. Zudem verlagert Autoptimize die Aufrufe automatisch in den Footer des Themes, wodurch sich die Ladezeit verkürzt.
Bei CSS- und JavaScript-Dateien gibt es aber noch mehr Optimierungspotenzial:
Für fortgeschrittene WordPress-Anwender: CSS- und JavaScript-Dateien manuell optimieren
Wie wir bereits wissen, führt die Praxis, JavaScript- und CSS-Dateien im Header eines Templates zu platzieren, zu erheblichen Einbußen bei den Ladezeiten einer Webseite. Wie Sie schnell und ohne viel Aufwand CSS- und JavaScript-Dateien optimieren können, haben wir Ihnen weiter oben erklärt. Einen noch größeren Vorteil haben Sie, wenn Sie über grundlegende Kenntnisse in der HTML- und CSS-Programmierung verfügen.
Mehrere CSS-Dateien zu einer Datei zusammenfügen
Jede eingebundene JavaScript- oder CSS-Datei verursacht beim Seitenaufruf eine Serveranfrage. Diese sind jedoch in Abhängigkeit von der Konfiguration des Servers auf eine gewisse Menge, die gleichzeitig verarbeitet werden können, begrenzt. Daher ist es für die Ladezeit der Webseite von Nachteil, im Header eines Templates verschiedene CSS-Dateien gleichzeitig einzubinden.
Stattdessen sollten Sie die CSS-Dateien zugunsten der Webseiten-Geschwindigkeit möglichst in einer Datei zusammenfassen. Dadurch wird die Anzahl der Serveranfragen reduziert. Durch Kommentieren können Sie in der neuen CSS-Datei für Ordnung sorgen, sodass Sie bei späteren Änderungen schnell die gewünschten Stellen finden. Für das Zusammenfügen der Dateien können Sie wahlweise einen Editor oder ein WordPress-Plugin nutzen.
Unnötige Abstände und Leerzeichen in CSS-Dateien entfernen
Auch Leerzeichen und Zeilenumbrüche stellen Informationen dar und lassen die Größe einer CSS-Datei – wenn auch in geringem Maße – anwachsen. Im Zuge der Optimierung sollte aber auch diese Möglichkeit zur Verbesserung der Ladezeit nicht ungenutzt bleiben. Im Idealfall finden sich in einer CSS-Datei keine Umbrüche, sondern nur eine einzeilige Codeabfolge. Die Auswirkung auf die Dateigröße ist bei einer großen CSS-Datei enorm. Diese Komprimierung können Sie manuell durchführen, ein spezielles Tool zur Entfernung von überflüssigen Zeichen erleichtert Ihnen die Arbeit aber enorm.
Ein leicht zu bedienendes Tool ist unter CSSMinifier.com zu finden.
Bei diesem Tool kopieren Sie den unoptimierten Inhalt auf Ihrer/Ihren CSS-Datei(en) in die linke Eingabebox und klicken auf den Button „Minify“. Der optimierte Code erscheint in der rechten Box. Kopieren Sie den komprimierten Code mit Strg+C in die Zwischenablage und fügen Sie ihn per Strg+V in die alte oder – bei mehreren CSS-Dateien – in eine neue CSS-Datei ein. Jetzt nur noch die Datei(en) speichern und auf den Server laden. CSSMinifier bieten Ihnen auch die Möglichkeit, den optimierten Code direkt als CSS-Datei runterzuladen. So sparen Sie sich das Kopieren und Einfügen des CSS-Codes.
Tipp: Mit dem Tool Javascript-Minifier.com können Sie auch JavaScript-Dateien auf einen Bruchteil ihrer ursprünglichen Größe komprimieren. Allerdings ist hierbei Vorsicht geboten, da es bei einigen JavaScript-Codes durch das Entfernen von Leerzeichen und Umbrüchen zu Problemen kommen kann.
Punkt 2: So nutzen Sie (Browser)-Caching und machen WordPress schneller
Caching ist ein Performance-Booster für WordPress-Webseiten und verkürzt die Ladezeiten drastisch. Denn beim Caching (Zwischenspeichern) werden statische HTML-Kopien der dynamischen Webseite erzeugt und auf dem Server abgelegt. Auf diese Weise entfallen bei einem Seitenaufbau die rechenintensiven Datenbankabfragen und die Auslieferung der Inhalte erfolgt blitzschnell. Erst wenn Sie etwas an den Inhalten ändern und zum Beispiel Artikel, Bilder oder Videos hinzufügen oder löschen, erneuert sich der Cache. So wird sichergestellt, dass die Besucher zu jedem Zeitpunkt die aktuellste Version Ihrer Webseite zu Gesicht bekommen.
Einfaches Caching mit WP SuperCache
Die Auswahl an Caching-Plugins für WordPress ist groß und der Funktionsumfang der einzelnen Tools kann besonders Einsteiger leicht überfordern. Ein empfehlenswertes Plugin, das nach dem oben genannten Prinzip funktioniert und mit dem Sie Ihre Webseite auch ohne große Vorkenntnisse beschleunigen können, ist WP SuperCache.
Nachdem Sie das Plugin installiert und aktiviert haben, führen Sie die folgenden Schritte durch, um das Potenzial des Cachings voll auszuschöpfen:
WP SuperCache aktivieren:
Diese Einstellungen sollten Sie vornehmen.
- Rufen Sie den Punkt „Einstellungen » WP Super Cache“ auf.
- Aktivieren Sie das Caching über den Button „Caching an“.
- Prüfen Sie seine Funktion durch Klick auf „Cache testen“.
Darüber hinaus sollten Sie unter dem Reiter „Erweitert“ die mit „Empfohlen“ markieren Funktionen aktivieren. Ein Beispiel hierfür ist, dass der Cache beim Aktualisieren oder Eintragen eines Artikels neu generiert wird oder dass der Cache für eingeloggte Nutzer wie den Admin nicht aktiviert ist.
Nicht vergessen: Gzip-Komprimierung!
Gzip komprimiert sämtliche Dateien, die zwischen dem Server und dem Browser des Nutzers ausgetauscht werden. Von PHP- und HTML- über CSS- und JavaScript-Dateien bis hin zu Bildern verringert Gzip die jeweilige Dateigröße um 40 bis 70 Prozent. In WP SuperCache können Sie die Gzip-Komprimierung durch Anhaken des Felds: „Komprimiere Seiten, sodass sie schneller an Besucher ausgeliefert werden.“ aktivieren.
Für WordPress-Experten: Browser Caching mittels .htaccess aktivieren
Wenn Ihnen .htaccess ein Begriff ist und Sie das Browser-Caching ganz ohne zusätzliches Plugin aktivieren möchten, können Sie einfach die folgenden Zeilen in eine .htaccess-Datei kopieren. Durch Hochladen in das Root-Verzeichnis Ihrer WordPress-Webseite wird das Caching aktiviert.
## 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
Alles erledigt?
Wenn Sie an dieser Stelle angekommen sind und alle Punkte abgearbeitet haben, sollte die Punktebewertung Ihrer Webseite bei PageSpeed Insights bereits deutlich gestiegen sein. Aber auch Sie selbst sollten schon eine deutliche Verbesserung in der Webseiten-Geschwindigkeit bemerkt haben. Möchten Sie noch mehr aus WordPress herausholen? Dann sollten Sie die folgenden Tipps berücksichtigen.
Weitere wichtige Optimierungsansätze
Bilder komprimieren
Der größte Teil der Ladezeit einer Webseite entfällt in der Regel auf Bilder und Grafiken. Immer bessere und schärfere Displays sorgen dafür, dass die Auflösung und damit die Dateigröße von Bildern stetig wächst. Durch Komprimierung lässt sich die Größe der Dateien deutlich reduzieren. Immer ausgereiftere Algorithmen sorgen dafür, dass es bei der Optimierung nicht zu großen Qualitätsverlusten kommt. Am besten ist jedoch, wenn Sie von vornherein auf die Dateigröße der auf Ihrer Webseite verwendeten Bilder achten. Wenn Sie Ihre Fotos selbst schießen, können Sie zum Beispiel direkt eine geringere Auflösung wählen.
Zusätzlich können Sie ein WordPress-Plugin wie „WP Smush“ einsetzen. Das Tool nimmt Ihnen die Arbeit ab und optimiert alle Bilder, die Sie über WordPress hochladen, ohne sichtbaren Qualitätsverlust. Auch Bilder, die schon vor der Installation des Plugins vorhanden waren, können so komprimiert werden.
Hosting
Bei der Auswahl des WordPress Webhosting-Anbieters sollten Sie ein Paket wählen, dass Ihren Anforderungen entspricht und die Installation von WordPress-Webseiten ohne Einschränkungen zulässt. Mit einem Vergleich verschiedener auf WordPress spezialisierter Anbieter können Sie das richtige Angebot für sich finden. Einen unabhängigen Vergleich finden Sie bei uns.
Plugins
Mit der Zeit sammeln sich im WordPress-Backend automatisch viele Plugins an, die nur selten oder gar nicht genutzt werden. Auch aus Sicherheitsgründen sollten Sie Plugins, die Sie seit Monaten nicht mehr einsetzen, deaktivieren und von Ihrem Webspace löschen. Sollten Sie die Plugins zu einem späteren Zeitpunkt doch wieder benötigen, können Sie sie einfach erneut downloaden und installieren.
Die besten Plugins um WordPress schneller zu machen
Zum Abschluss möchten wir Ihnen noch einmal eine Übersicht der besten Plugins geben, mit denen Sie Ihre WordPress-Seite optimieren und schneller machen können. Diese Tools sind ideal, wenn Sie nicht mit Copy&Paste arbeiten und Einstellungen von Hand vornehmen möchten.
Autoptimize
Mit Autoptimize lassen sich CSS- und JavaScript-Dateien automatisch optimieren und komprimieren. Das praktische Tool entfernt überflüssige Leerzeichen und Zeilenumbrüche aus den Dateien und verlagert sie aus dem Header in den Footer des Templates. Auf diese Weise werden die Dateien erst geladen, wenn die Seite bereits vollständig auf dem Bildschirm des Besuchers angezeigt wird. Das beschleunigt die Seitenaufrufe Ihrer WordPress-Webseite und sorgt für eine verringerte Absprungrate.
WP SuperCache
Unter Mitwirkung von WordPress-Entwickler Automattic ist das Caching-Plugin WP SuperCache entstanden. Durch Aktivieren dieses schlanken Tools beschleunigen Sie Ihre WordPress-Webseite unter anderem durch Nutzung von Browser Caching. Zudem generiert WP SuperCache statische Kopien Ihrer Webseite, die erheblich schneller laden, als dynamische Seiten mit Datenbankabfragen.
Alternativ können Sie auch zum All-In-One Tool greifen …
W3 TotalCache
Wenn Sie keine der Optimierungen von Hand vornehmen möchten und sich von einem komplexen WordPress-Plugin mit unzähligen Einstellungsmöglichkeiten nicht abschrecken lassen, ist W3 TotalCache zu empfehlen. Die All-In-One Lösung bietet umfangreiche Optionen um CSS- und JavaScript-Dateien zu komprimieren und verschiedene Formen des Cachings zu nutzen. Wenn Sie sich für die Nutzung von W3 TotalCache entscheiden, sind die Plugins Autoptimize und WP SuperCache überflüssig. Jedoch lässt W3 TotalCache ein Gebiet mit großem Optimierungspotenzial aus: Bilder!
Mit diesen Plugins schöpfen Sie das Optimierungspotenzial Ihrer Bilder aus:
WP Smush
Hochauflösende Fotos, Animationen und Grafiken sind heute allgegenwärtig. Häufig handelt es sich um wahre Datenbrocken, die besonders für Besucher mit langsameren Internetverbindungen die Ladezeiten verlängern. Das Plugin WP Smush ist die richtige Lösung für dieses Problem, indem es JPEG-, GIF- und PNG-Dateien schon beim Hochladen über das WordPress-Backend optimiert, ohne dabei die Bildqualität merklich zu verschlechtern. WP Smush erlaubt aber auch das Optimieren bereits vorhandener Bilder.
a3 Lazy Load
Mit dem Plugin a3 Lazy Load erweitern Sie Ihre Webseite um sogenanntes Lazy Loading. Dadurch werden in die Webseite eingebettete Bilder und Videos nicht schon beim ersten Seitenaufruf, sondern erst dann geladen, wenn der Besucher scrollt und diese in den sichtbaren Bereich kommen. Der positive Effekt von Lazy Loading auf die Ladezeit macht sich besonders bei Foto-Blogs und Webseiten, die sehr bildlastig gestaltet sind, bemerkbar.
Haben Sie noch mehr Tipps um WordPress schneller zu machen und zu optimieren? Hinterlassen Sie ihren Tipp in einem Kommentar! 🙂