Um eine optimale Ladezeit für eure Webseite zu erzielen, empfehlen wir das Plugin WP Rocket. Es ist zwar kostenpflichtig, erzielte aber im Test die besten Ergebnisse.
Installation WP Rocket
Nach dem Kauf erhaltet ihr eine ZIP-Datei, welche ihr wie gewohnt im Backend von WordPress über Plugins › Installieren hochladen könnt.
Das Plugin aktiviert sich automatisch, die Lizenz ist im Paket bereits enthalten.
Prüfen der Schreibrechte
Sollte WordPress keine Schreibrechte z.B. für die htaccess oder im Uploads-Verzeichnis haben, müsst ihr diese entsprechend anpassen. Hierzu liefert das Plugin einen Hinweis, der diesen Vorgang genau erklärt.
Grundlegende Einstellungen
Nach der Installation und Konfiguration setzt ihr die notwendigsten Einstellungen in WP Rocket. Öffnet hierzu bitte die Einstellungen von WP-Rocket (Einstellungen › WP Rocket).
Folgende Einstellung könnt ihr ohne Gefahr setzen:
Layzyload:
- Bilder
- Iframes & Videos
Datei Optimierung:
- HTML
- Google Fonts
Mobiles Caching
- Aktiviert Cache für mobile Geräte
img class=“alignnone size-medium wp-image-2643″ src=“/wp-content/uploads/affiliatetheme/WP_Rocket_‹_affiliatetheme_io_—_WordPress-750×390.png“ alt=“WP_Rocket_‹_affiliatetheme_io_—_WordPress“ width=“750″ height=“390″
Speichert diese Einstellungen und testet eure Webseite mit einem Tool. Eine Liste findest ihr hier.
Ihr solltet bereits jetzt eine deutliche Verbesserung erkennen können. In unserem Test hatten wir mit diesen Einstellungen in unserer Demo01 einen PageSpeed von 93/100 am Desktop (getestet mit Google PageSpeed Insights.
Natürlich kann es sein, dass ihr diesen Wert entweder unter- oder überschreitet. Es hängt z.B. stark von eurem Server ab, wie schnell eure Seite lädt.
Erweiterte Einstellungen
Euch lädt die Seite immer noch nicht schnell genug? Wir haben noch weitere Möglichkeiten die Webseite zu optimieren. Spürbar sollte das minimieren von JS- und CSS-Dateien sein.
CSS Optimierung
Hier gibt es nicht viel zu beachten, setzt einfach die folgenden Haken in eurer WP Rocket-Konfiguration:
Datei Optimierung
- Inline CSS
- CSS
Anschließend solltet ihr wieder den Cache löschen und die Seite erneut besuchen – am besten eignet sich zum Testen ein Browser den ihr im „Inkognito-Modus“ (Privates Surfen) starten könnt, das wären z.B: Firefox oder Chrome.
Sollte das Layout eurer Webseite „zerschossen“ sein, unterstützt euer Server die minimierung nicht.
JS Optimierung
Das Affiliate Theme lädt einige JavaScript Dateien, diese sind zwar größtenteils schon optinmiert – dennoch ist eine JS Optimierung mit WP Rocket ratsam.
Setzt bitte folgende Haken:
Datei Optimierung
- Inline JS
- JS
Anschließend müsst ihr noch die Reihenfolge der JS-Dateien optimieren, solltet ihr diesen Schritt überspringen, kann es sein, dass die Minimierung Fehler verursacht. Beispiel:
Ihr verwendet ein Script für eine Bilder-Lightbox, welches jQuery benötigt. Sollte WP Rocket nun beides minimieren, legt es ggf. eine eigene Reihenfolge fest. Sollte das Lightbox-Script jetzt vor jQuery geladen werden, kann dieses nicht korrekt ausgeführt werden.
Reihenfolge der JS-Dateien optimieren
Zunächst benötigt ihr eine Liste mit allen JS-Dateien, die eure Seite lädt. Öffnet hierzu bitte diese URL und gebt eure Webseite ein:
http://wp-rocket.me/tools/wp-rocket/debug/minify/
Anschließend erhälst du eine Liste, mit allen Dateien, das sieht in etwa so aus:
Um die Liste in WP Rocket zu übertragen, müsst ihr erneut die Einstellungen aufrufen und den Tab Erweiterte Optionen: öffnen.
Dort findet ihr folgende Einstellung: JS-Dateien die während des Minimierungsprozesses in der Fußzeile enthalten sein sollen..
In dieser Liste fügt ihr jetzt nach und nach die Script, in der gleichen Reihenfolge wie auf der Debug-Seite von WP Rocket, ein und speichert deine Änderungen.
Löscht euren Cache und testet erneut den PageSpeed eurer Seite. Wichtig ist auch, dass ihr die Webseite uneingeloggt auf Fehler überprüft. Es ist sehr wichtig, dass alle Funktionen fehlerfrei laufen.
Fazit
Mit WP Rocket hebt eure Seite sprichwörtlich ab. Achtet aber immer darauf, dass eure Seite korrekt arbeitet. Die Nutzung der Webseite steht immer im Vordergrund auch wenn der PageSpeed vielleicht nicht immer bei 100/100 liegt.
In unserer Demo haben wir ein Ergebnis erzielt mit dem wir sehr zufrieden sind:
Die Kunst ist es ein gesundes Mittelmaß zu finden.
Viel Erfolg.
Dieser Artikel basiert auf einem Forumthread. Wer Zugang zum Forum hat kann diesen hier (/forum/thema/pagespeed-optimierung-mit-wp-rocket/) finden.
rene
Bei der Aktuellen Version von WP Rocket gibt es die Einstellung "JS-Dateien die während des Minimierungsprozesses in der Fußzeile enthalten sein sollen.." nicht mehr.
Ich kann die JavaScript-Dateien entweder verzögert laden oder nach dem Minifizieren in den Footer verschieben.
Könntet Ihr die Anleitung anpassen?
Eine andere frage zu der Meldung bei Google Pagespeed: "JavaScript- und CSS-Ressourcen, die das Rendering blockieren, in Inhalten "above the fold" (ohne Scrollen sichtbar) beseitigen"
Was muss hier gemacht werden?
Christian
Danke für den Tipp. Wir aktualisieren demnächst die Anleitung für die neuste WP Rocket Version.
Den Punkt "JavaScript- und CSS-Ressourcen, die das Rendering blockieren, in Inhalten "above the fold" (ohne Scrollen sichtbar) beseitigen" wirst du nur sehr schwer bis garnicht beheben können. Ist auch nicht zwingend erforderlich. Prüfe deine Seite auf Ladezeit und Größe, wenn das alles passt, ist alles im grünen Bereich! 😉