11. Dezember 2014

How-To: Kürzere Ladezeiten in WordPress W3 Total Cache konfigurieren

   14 Kommentare

Ein Beitrag von Hans Jung

Für WordPress gibt es einige Plugins, mit denen ihr die Ladezeit eurer Seite verbessern könnt. Wir zeigen euch hier, wie ihr das umfangreiche Plugin W3 Total Cache für eure Seite konfiguriert. Denn kurze Ladezeiten wirken sich positiv auf die Absprungrate aus und können eure Sichtbarkeit in den Suchmaschinen verbessern.

w3 total cache

Das Plugin W3 Total Cache vereint Caching, Minify und Gzip in einem. Damit spart ihr euch andere Plugins, die weniger Funktionen abdecken. Vor diesen Änderungen solltet ihr aber unbedingt ein Backup eurer Daten und der Datenbank erstellen und lokal speichern, damit ihr im Fall der Fälle den Ursprungszustand widerherstellen könnt. Zudem benötigt das Plugin für manche Einstellungen Schreibrechte für die wp-config.php und die .htaccess – daher stellt vor der Aktivierung und Konfigurierung des Plugins sicher, dass beides gegeben ist.

Zu guter Letzt: Es sollten nie mehrere Caching Plugins auf einer WordPress-Seite laufen, da sie sich sonst in die Quere kommen können. Falls ihr bisher ein anderes Plugin nutzt und nun auf W3 Total Cache umsteigen wollt, deaktiviert und löscht das vorherige Plugin. Denn teilweise werden dieselben Ordner genutzt. Ergänzung: Alternativ findet ihr hier unsere Anleitung für das Plugin WP Super Cache.

W3 Total Cache konfigurieren

Nach der Aktivierung des Plugins wählt ihr die Unterseite „General Settings“ und hangelt euch durch die folgenden Punkte. Je nach Hosting-Paket, variieren die Einstellungsmöglichkeiten der Drop-Down-Listen. In diesem Beispiel läuft die Seite auf einem Shared-Server und wir verwenden als Cache-Methode Disk, also Festplatte, da wir keine Möglichkeit haben, die Daten in den Arbeitsspeicher zu legen.

1.      Page Cache aktivieren

1

2.      Minify aktivieren

2

Die Funktion Minify bringt viele Punkte in den Speed-Test-Tools, hat aber auch einige Tücken. Hier wollt ihr nur die Funktion aktivieren, die Feineinstellungen und das Testen kommen später.

3.      Object Cache oder Database Cache

3

Sofern der Object-Cache bei euch funktioniert, solltet ihr diese Funktion wählen. Andernfalls wählt ihr Database-Cache – aber nicht beides. Ob der Object-Cache bei euch funktioniert, seht ihr später bei den Tests.

4.      Browser-Cache aktivieren

4

Wichtige Funktion die eure regelmäßigen Leser schätzen werden: Beim wiederholten Besuch werden einige Elemente aus dem Cache eurer Leser geladen, nicht von eurem Server. Das ist um einiges schneller.

Minify Feineinstellungen

Das Konzept zu Minify ist einfach erklärt: Mit der Minify-Funktion könnt ihr Leerzeichen, Zeilenumbrüche und Kommentare aus den HTML, CSS und JScript Dateien entfernen. Mehr noch, mehrere CSS-Dateien lassen sich zu einer Datei zusammenfassen. Das spart nochmals Volumen und Bandbreite, da in dem Fall nur eine Datei übertragen werden muss. Allerdings ist das auch sehr fehleranfällig und schnell funktioniert die grafische Darstellung der Seite auf dem Desktop nicht mehr oder aber die Navigation auf Mobilgeräten ist fehlerhaft.

Ihr müsst diese Einstellungen unbedingt auf unterschiedlichen Geräten testen dabei darauf achten, dass die aktuelle Version geladen wird und nicht eine aus dem Cache.

5 6

Praktisch ist: Das JScript könnt ihr hier asynchron oder verzögert laden lassen. Das bringt nochmals Punkte im Benchmark.

7

Wenn die Darstellung nicht mehr passt oder die individuellen Schriften nicht geladen werden, kann die Funktion „Combine only“ helfen.

Browser-Caching Einstellungen

Durch den Haken unter Punkt 4 sollten die Einstellungen bei euch aussehen wie hier dargestellt. Wichtig sind das Ablaufdatum des Cache (expiry header), Cache Control Header und Tag und die Gzip-Komprimierung.

8

Diese Einstellungen sollten ebenfalls in den Feldern weiter unten für die „CSS & JS“, „HTML & XML“ und „Media & Other Files“ eingestellt sein.

Ladezeit messen

Mit diesen Tools messt ihr die Ladezeit eurer Seite und überprüft, ob statische Elemente gecached werden. In den Wasserfall-Diagrammen seht ihr zudem, ob das Kombinieren der CSS-Dateien funktioniert.

Die Ladezeit sollte sich jetzt im Vergleich zur nicht-gecachten Seite stark verbessert haben. Wenn euch Optimierungspotential bei den Bildern angezeigt wird, helfen euch diese Beiträge, wie ihr die Bilder komprimiert und das richtige Grafikformat auswählt.

Bei unserer kleinen Testseite kann sich das Ergebnis sehen lassen:

9

Wie sieht es bei euch aus, von welchen Werten konntet ihr euch verbessern? Schreibt es in die Kommentare 🙂

Hans Jung

Hans Jung

Hans ist Datenschutzbeauftragter und bekennender WordPress-Fan – und versucht beides unter einen Hut zu bekommen.
Hans Jung

Du willst up-to-date bleiben?

Trage dich jetzt in unseren kostenlosen Newsletter ein, um stets die aktuellsten Neuigkeiten rund um Wordpress zu erhalten.

Wir geben deine Daten nicht weiter! Wir hassen Spam genauso wie du!

14 Kommentare

Reaktionen auf diesen Beitrag

  • Hey Hans,

    Kennst du WP Rocket?
    Ist noch einfacher und schneller als W3 Total Cache, kostet dafür ein bisschen etwas 😉
    http://wp-rocket.me/

    Viele Grüße aus Wien,
    Roman

  • Also ich habe nur Probleme mit dem Plugin. Entweder zerschießt die Minify-Funktion das Layout oder der Object Cache …

    Aus meiner Sicht, sollten nur erfahrene Entwickler dieses Tool einsetzen.
    Der Beitrag ist gut und übersichtlich, ich habe jedoch noch nie ein solch optimales Ergebnis mit dem Plugin erzielen können. Liegt es vielleicht doch am Webserver? Am CDN? Der Datenbank? In welchem Zusammenhang, mit welchen Themes und welcher Umgebung wird das Plugin eingesetzt. Aus meiner Sicht alles wichtige Einzelheiten.

    Deshalb fehlen mir in dem Beitrag die vielen Fallstricke, die sich ergeben können. Und … die Alternativen.

    • Hans Jung

      Hi Mark,
      in unserem Beispiel verwenden wir kein CDN, aber die Ergebnisse sind natürlich sehr stark von dem jeweiligen Hoster abhängig. Aus meiner Erfahrung wird das Design meist duch die Minify-Funktion zerschossen, weshalb du hier stufenweise vorgehen kannst. So ist es vielleicht möglich das HTML um Kommentare usw. zu bereinigen, das CSS aber unangetatstet zu lassen.
      Als alternative habe ich unsere Anleitung zu WP Super Cache verlinkt.

  • Tom

    Hallo,

    habe mit Interesse diesen Artikel gelesen. Meine Frage ist was mit der Aussage niemals mehrere Cache Plugins zusammen zu nutzen exakt gemeint ist. Nutze gerade das Plugin Autoptimize und ein paar Codezeilen in der htaccess Datei…

    Das ich die Daten aus der htaccess Datei entfernen müsste ist mir bewusst, aber wäre es ratsam auch das aktuell benutze Plugin zu deaktivieren (eigentlich sorgt es ja nur dafür das css und java nicht auf einmal geladen wird) also nicht direkt ein Cache Tool ist.

    Zufällig Erfahrungen diesbezüglich gesammelt?

    Grüße Tom

  • Bestes Tutorial zum Plugin. Hat super geklappt & die Resultate sieht man sofort!

    Grüße an das ganze Team 😉

Schreibe einen Kommentar

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