WordPress schneller machen in 12 einfachen Schritten

WordPress schneller machen Anleitung
WordPress schneller machen und von besseren Rankings profitieren. Darum geht es in diesem Artikel. Dauert es eine "halbe Ewigkeit" bis deine WordPress-Seite geladen ist? Wenn möglich, sollte deine Seite unter drei Sekunden zum Laden brauchen. Unter zwei Sekunden ist gut, unter 1 Sekunde sehr gut! Wie du das Beste aus deiner Seite herausholst, erfährst du hier!

WordPress schneller zu machen, ist für Einsteiger keine einfache Aufgabe. Dennoch ist es sehr wichtig, sich mit diesem Thema auseinanderzusetzen. Der Besuch einer langsam ladenden Website macht keinen Spaß. Wie oft hast du selber schon einen Tab wieder geschlossen, weil du keine Geduld mehr hattest, weil die Seite einfach nicht laden wollte. 

Gehört deine Seite auch zu dieser Kategorie, dann solltest du dagegen unbedingt etwas tun. Auch wenn deine Seite bereits akzeptable Ladezeiten hat, solltest trotzdem alle folgenden Schritte durchführen, um das Beste aus deiner Seite herauszuholen, denn jede Millisekunde zählt.

Das werden dir nicht nur die Besucher deiner Seite danken, sondern auch Google, denn die Geschwindigkeit deiner Website ist für Google ein wichtiges Kriterium. Die Ladezeit deiner Seite wirkt sich daher direkt auf deine Position auf Google aus. 

Dauert es eine halbe Ewigkeit bis deine WordPress-Seite geladen ist? Dann solltest du definitiv diesen Artikel zu Ende lesen, denn hier erkläre ich dir, wie du deiner Website einen echten Turbo-Boost verpassen kannst.

Wenn möglich, sollte deine Seite unter drei Sekunden zum Laden brauchen. Unter zwei Sekunden ist gut, unter 1 Sekunde sehr gut!

Wie du das Beste aus deiner Seite herausholst, erfährst du jetzt! Aber lass uns zuerst einen Test machen, um genau herauszufinden, wie lange deine Seite eigentlich zum Laden braucht.

Pagespeed messen – so findest du die Ladezeit deiner Website heraus!

Um die Ladezeit deiner Seite zu messen, gibt es verschiedene Tools.  Eines davon ist Google PageSpeed Insights. Gib die URL deiner Startseite in das Formular und klicke auf analysieren.
Google startet nun den Test und du bekommst wenig später deine Ergebnisse.

Google Pagespeed Insights Resultat Website speed


Eine weitere Möglichkeit die Geschwindigkeit deiner Seite zu messen ist 
WebPageTest. Für genauere Ergebnisse würde ich dir empfehlen, zusätzlich mit diesem Tool zu messen. Auch hier gibst du wieder deine ULR in die Eingabemaske ein, wählst hier allerdings noch die Test-Location und deinen Browser aus, bevor du mit einem Klick auf „Start Test“ bestätigst. Als Test-Location solltest du einen Standort wählen, der möglichst nahe an dem deiner Webseitenbesucher ist.

Wie im amerikanischen Schulnotensystem erhältst du eine Bewertung von A bis F, wobei A der deutschen Note 1 und F der 6 entspricht.
Mit einem Klick auf „Waterfall“ bekommst du eine „Wasserfall-Ansicht“, in der du schnell erkennen kannst, was auf deiner Seite viel Zeit zum laden benötigt.

Im weiteren Verlauf erkläre ich dir, was deine Seite verlangsamt und wie du diese Probleme beseitigen kannst. Führe am besten nach jedem Schritt einen Test durch und schaue, inwieweit es sich verbessert hat.

Wichtig: Lege auf jeden Fall vor Beginn der Performance-Optimierung ein Backup deiner Seite an. Es kann immer was schiefgehen, also sichere dich vorher ab!

WordPress schneller machen – Schritt für Schritt

Hosting

Bevor wir ans eingemachte gehen, möchte ich noch kurz auf das Thema Hosting eingehen. Denn der Server auf dem deine Website liegt, hat ebenfalls Einfluss auf die Ladezeit eurer Seite.
Die „server response time“ gibt an, wie lange der Server braucht, um auf einen HTTP-Request (Serveranfrage) zu antworten. Ein guter Wert liegt unter 200 Millisekunden. Liegt sie deutlich höher, solltest du eventuell einen Wechsel deines Providers in betracht ziehen.
Aber kommen wir nun zu dem spannenden Teil: Die Performance-Optimierung deiner WordPress-Seite.

Anzahl der Plugins reduzieren

Ein Grund für WordPress’ große Beliebtheit ist die breite Vielfalt an Plugins, die es dir ermöglicht, deine Seite um nützliche Funktionen zu erweitern. Das zeigt sich aber leider oft darin, dass viele Webseiten viel zu viele Plugins installiert haben – was einer der Hauptgründe für schlechte Ergebnisse beim Pagespeed sind.
Daher schaue als Erstes darauf, auf welche Plugins du eventuell verzichten kannst, und trenne dich von denen, die du nicht unbedingt benötigst. Ist die Frage über Hosting und Plugins geklärt, können wir nun zum eigentlich Teil kommen: WordPress schneller machen! 

1. Caching aktivieren

Einer der wichtigsten Punkte beim Theme Performance-Optimierung ist das so genannte Caching.

Ohne Caching würde WordPress bei jedem Seitenaufruf dynamische Inhalte erzeugen, die viel Rechenleistung des Servers beanspruchen.

Durch Caching werden statische Dateien erzeugt und auf der Festplatte oder im RAM gespeichert. Diese sind schnell abrufbar, wodurch die Ladezeit extrem verkürzt werden kann.

Der einfachste Weg, um das Caching zu aktivieren, geht über ein Plugin. Durch solch ein Plugin werden die Seiten dann nicht mehr dynamisch generiert, sondern werden statisch in einem Cache-Ordner abgelegt, also als einfache HTML-Seite.

Die zwei gängigsten Plugins dafür sind das kostenpflichtige WP Rocket und die kostenlose  Alternative W3 Fastest Cache. Während WP Rocket auch viele weitere Möglichkeiten der WordPress-Performance-Optimierung bietet, ist WP Fastest Cache in seiner kostenlosen Version eher begrenzt. Dieses kann aber durch ein Upgrade auf die Premium-Version an Funktionen erweitert werden; oder man installiert sich ein weiteres Optimierungs-Plugin, zum Beispiel Autoptimize, welches wir auch in dieser Anleitung verwenden. Da für den Großteil der Leser wahrscheinlich die kostenfreie Variante vollkommen ausreichend ist, werde ich mich aber auf das Plugin WP Fastest Cache konzentrieren.

WP Fastest Cache

Wie auf dem Screenshot gut zu sehen, habe ich nur die Einstellung aktiviert, die für das Caching meiner Seite sorgen. Alle anderen Einstellungen lasse ich deaktiviert, da ich diese durch das Plugin Autoptimize vornehme, was mir mehr Funktionsumfang bietet. Wähle einfach alle Einstellungen wie auf dem Screenshot aus und folge der Anleitung weiter.

WP Fastest Cache Einstellungen

Unter dem Reiter „Cache löschen“ habe ich noch eingestellt, dass alle 10 Stunden der Cache erneuert wird. Dazu klickst du einfach auf „neue Regel“ und wählst aus, welcher Teil deiner Seite wann erneuert werden soll. Anschließend bestätigst du deine Einstellung mit einem Klick auf „save“.

Timeout Regel WP Fastest Cache

Nun hast du das Caching für deine WordPress-Seite aktiviert und solltest schon eine deutliche Verbesserung der Ladezeit feststellen können.

2. Bilder komprimieren

Die Datei-Größe deiner Bilder spielt eine große Rolle wenn es darum geht WordPress schneller zu machen. Denn um so größer die File-Size, die vom Server geladen werden muss, umso länger dauert der Seitenaufbau. Daher sollten deine Bilder nicht zu groß und gut komprimiert sein.

Achte daher schon beim Export von deinem Bildbearbeitungsprogramm darauf, deine Bilder für das Web optimiert zu exportieren.

Anschließend kannst du mit einem Tool wie tinypng noch einmal einige Kilobytes einsparen.
Alternativ kannst du das WordPress-Plugin Smush verwenden, um deine Bilder auch nachträglich zu komprimieren.

Damit hast du dann auch die Möglichkeit zum Nachladen deiner Bilder, was uns direkt zum nächsten Punkt bringt.

3. Lazy Load für deine Bilder

Lazy Load bezeichnet den Vorgang, wenn Bilder deiner Website erst dann geladen werden, wenn zu dem entsprechenden Bereich gescrollt wird, was wiederum die Ladezeit verkürzt und WordPress somit schneller macht.

Ich hatte vorher bereits das Plugin Autoptimize angesprochen, als es um das Thema Caching ging.
Dieses solltest du dir jetzt installieren, denn im folgenden Verlauf erkläre ich dir, wie du mit diesem Plugin deine Seite merklich schneller machen kannst.

Nachdem du Autoptimize installiert und aktiviert hast, findest du die Einstellung für „Lazy Load“ unter dem Reiter „Bilder“ -> „Bilder verzögert laden“. Setze dort einen Haken und klicke auf „Änderung speichern“.

Autoptimize Bilder Einstellungen

Code optimieren

Kommen wir nun zu dem Thema Code. Hier geht es im speziellen um die CSSJavaScript und HTML-Dateien. Unkomprimierte CSS- und JavaScript-Dateien sind voller Leerzeichen, Umbrüche und Kommentare. Auch das steht unserem Ziel einer schnell ladenden Homepage entgegen.

Autoptimize gibt uns einige gute Optionen an die Hand, dem entgegenzuwirken.

Gehen wir die Optionen einmal durch:

4. Javascript-Code optimieren

Autoptimize JavaScript Optionen


JavacScript-Code optimieren:

Diese Option verkleinert deine JavaScript-Datei und sollte auf jeden Fall aktiviert werden.

JS-Dateien zusammenfügen:

Eine Website besteht meist aus vielen verschieden Java-Script-Dateien, die bei einem Seitenaufruf geladen werden müssen, und für jede einzelne dieser Dateien muss ein HTTP-Request (Serveranfrage) gestartet werden. Um die Ladezeit zu verringern, ist es wichtig, die Anzahl der HTTP-Requests möglich gering zu halten.

Durch aktivieren der Option „JS-Dateien zusammenfügen“ werden all eure JavaScript-Dateien zu einer einzelnen Datei zusammengefasst und damit die Anzahl der Http-Requests reduziert.

Die restlichen Optionen lassen wir deaktiviert, da diese zum Teil Probleme verursachen können und es nur in bestimmten Fällen Sinn macht, diese zu aktivieren.

5. CSS-Code optimieren

Autoptimize CSS-Optionen

CSS-Code optimieren

Weiter geht es mit den CSS-Optionen. Wie auch bei JavaScript aktivieren wir zum Verkleinern der CSS-Datei die Option „CSS-Code optimieren“

CSS-Dateien zusammenfügen

Wie bereits erwähnt, wollen wir unsere HTTP-Requests so gering wie möglich halten, weshalb wir diese Option auch für unseren CSS-Code aktivieren.

Data: URIs für Bilder generieren (Inline Images)?

Ist diese Option aktiviert, kodiert Autoptimize kleine Hintergrundbilder zu base64 und bettet sie in dein CSS ein. Das reduziert die Anzahl der Serveranfragen. Die base64-Darstellungsdateien sind aber im Schnitt etwas größer, weshalb du es am besten selber ausprobierst, ob du einen Performance-Schub davon bekommst.

CSS-Code inline einfügen und verzögern?

Diese Option ermöglicht es dir, kritisches CSS, wie  Strukturelemente, globale Schriftfamilien und -größen sowie Navigationsstile, als Inline-CSS einzufügen und somit das vollständige CSS erst später zu laden.
Durch das vorherige Enfügen des kritischen CSS, werden alle wichtigen CSS-Eigenschaften vorab geladen und der Look deiner Seite bleibt unbeeinträchtigt.

Autoptimize CSS-Code inline einfügen und verzögern Einstellung

Um den kritischen CSS-Code inline einzufügen, gehe wie folgt vor:

  1.  Als erstes musst du das kritische CSS extrahieren. Dafür gibt es Generatoren, mit denen du die kritischen Styles automatisch extrahieren kannst. Das kannst du zum Beispiel unter https://www.sitelocity.com/critical-path-css-generator tun.

    Critical Path CSS Generator

  2. Als nächstes fügst den generierten Code in die dafür vorgesehene Maske von Autoptimize ein.

Die restlichen Optionen lassen wir deaktiviert, da diese zum Teil Probleme verursachen können und es nur in bestimmten Fällen Sinn macht, diese zu aktivieren.

6. HTML-Code optimieren

HTML-Code optimieren

Setze einen Haken bei „HTML-Code optimieren“. Durch die Entfernung von Leerzeichen kann Autoptimize die Größe der HTML-Datei reduzieren.

Weitere Optionen

Wenn es beim Laden von optimierten JS- und CSS-Dateien Probleme gibt, hast du hier die Möglichkeit, weitere Einstellungen vorzunehmen.

7. „Zusammengefügte CSS-/Skript-Dateien als statische Dateien speichern“ und „Ausgeschlossene CSS- und JS-Dateien minimieren“

Wenn alles passt und es keine Probleme gibt, solltest du diese beiden Optionen aktiviert lassen.

Auch für angemeldete Redakteure/Administratoren optimieren?

Diese Option habe ich ebenfalls aktiviert, um als angemeldeter Benutzer die Autoptimize-Einstellungen testen zu können.

Autoptimize Weitere Optionen

8. Google Fonts

Unter dem Menüpunkt „Google Fonts“ hast du die Möglichkeit, Optimierungen bzgl. der Google-Schriften vorzunehmen.

Je nachdem wie deine Website Google-Fonts verwendet, kannst du hier das für dich Passende auswählen. Da ich auf meiner Seite keine Google Fonts einsetze, habe ich für mich die Option „Google-Schriftarten entfernen“ gewählt.

Wähle hier die Option aus, die für dich und deine Seite am meisten Sinn macht.

9. Seitengröße verringern, durch entfernen von Emojis 

emojis entfernen

Diese Option solltest du aktivieren, da sie helfen kann, die Größe deiner Seite zu verringern; und zwar indem sie über 100 Zeilen zusätzlichen Code entfernt, die seit WordPress 4.2 über wp-emoji-release.min.js automatisch in den Header eingebunden wird. 

10. Caching verbessern durch Entfernung der Abfragezeichenfolgen von statischen Ressourcen

Abfragezeichenfolgen von statischen Ressourcen entfernen

Im Normalfall haben deine CSS- und JavaScript-Dateien die Dateiversion am Ende Ihrer URL.

Beispiel: deine-domain.de/file.min.css?ver=4.7

Durch Entfernen dieser Endung kann evtl. das Caching verbessert werden, da einige Server und Proxyserver diese Abfragezeichenfolgen nicht zwischenspeichern können (auch nicht bei vorhandenem cache-control:public). Auch kann sich dadurch dein Score bei GTMetrix verbessern und die Warnung “Remove query strings from static resources“ verschwindet.
Deshalb habe ich diese Option bei mir aktiviert.

11. Preconnect-Anweisung einrichten

zu dritt-Domains vorverbinden

Bei dieser Einstellung handelt es sich um eine sogenannte „Preconnect-Anweisung“. Hierbei wird ein TCP- sowie TLS-Handshake durchgeführt. Damit kann sich der Browser noch vor dem eigentlichen HTTP-Request mit anderen Domains verbinden. Um diese Funktion zu nutzen, musst du die externen Domains herausfinden, zu denen dein Browser eine Vorabverbindung herstellen kann.
Dies geht über die Entwickler-Tools vom Chrome-Browser.

  1. Gehe auf deine Homepage und mache irgendwo in deinem Browser-Fenster einen Rechtsklick. Klicke dann auf „Untersuchen“.
  2. Es öffnen sich nun die Entwickler-Tools. Unter dem Reiter „Sources“ findest du auf der linken Seite die externen Domains.

Preconnect-Anweisungen

  1. Diese Domains trägst du nun, durch ein Komma getrennt, in das Formularfeld in deinen Autoptimize-Einstellungen ein.

dritt domains verbindung

Mehr als sechs Domains solltest du hier nicht eintragen, da es dadurch zu Leistungseinbrüchen führen kann.

Du findest nun in deiner Seite die externen Links mit dem Attribut rel=„preconnect“.

Dadurch wurden diese externen Links nun mit dem Attribut rel=“preconnect“ versehen.

preconnect Attribut

Keine Sorge, gleich hast du es geschafft! 

12. Vorabladen wichtiger Assets

Spezifische Anfragen im Voraus laden

Damit rücken wir der Warnung „Wichtige Anforderungen vorab laden“ von Google PageSpeed Insights an den Kragen.

Wichtige Anforderungen vorab laden

 

Ähnlich wie bei vorheriger Option, wo wir die Vorabverbindungen einstellen, tun wir hier das gleiche mit Requests, die an den eigenen Server gerichtet sind.

Hast du Assets auf deiner Seite, bei denen es Sinn macht, diese vorab zu laden, kannst du diese mit einem Komma getrennt, hier eintragen.
PageSpeed Insights gibt dir einen Hinweis darauf, welche Assets das sein könnten.
Auch hier ist Vorsicht geboten, da dass Vorab-Laden zu vieler Assets deine Seite auch verlangsamen könnte.

Fazit

Deine WordPress-Seite sollte nun deutlich schneller sein als vorher. Mache einen letzten Speed-Test und freue dich über die hinzugewonnene Geschwindigkeit! Das Tolle ist, dass du dank Autoptimize keinen Cent dafür bezahlen musst. Von HTML- und CSS-Optimierungen bis hin zur Möglichkeit, Preconnect- und Prolad-Direktive anzugeben und vieles mehr, hast du alles in der kostenlosen Version von Autopimize. Ich hoffe, der Artikel konnte dir weiterhelfen und du hast nun eine blitzschnelle WordPress-Seite.

Share on facebook
Facebook
Share on google
Google+
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on pinterest
Pinterest

Kommentar verfassen

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