WordPress Ladezeit in 20 Sekunden optimieren: Leverage Browser Caching

Icon AnleitungenWenn man sein WordPress Blog in Tools wie PageSpeed, Pingdom oder ähnlichem prüft, dann meckern diese in ihren Berichten oft über lange Ladezeiten des Blogs, das man unter anderem mit „Browser Caching“ optimieren kann. Ich habe mich in die verlinkten Hilfedokumente eingelesen, aber ehrlich gesagt, hat mir da die konkrete Anleitung gefehlt. Nach ein bisschen Googlen bin ich dann auf solche Plugins wie „W3 Total Cache“ und Konsorten gestossen, die ich jedoch nicht nutzen wollte, da diese immer deutlich mehr Dinge im Hintergrund anstellen und ich nicht die komplette Seite wieder auf Funktionalität testen wollte.

Leverage Browser Caching ohne WordPress Plugin

Zum Glück gab es aber noch einen interessanten Artikel auf Englisch, der über „Leverage Browser Caching“ informiert hat, das man bei WordPress auch OHNE ein Plugin aktivieren kann. Und die ganze Aktion geht auch noch verdammt schnell, denn man muss nur einige Zeilen aus dieser Anleitung mit Copy&Paste in die htaccess-Datei von WordPress rein kopieren – das Ganze dauert wirklich nicht länger als 20 Sekunden. Dazu werden einfach folgende Zeilen in die vorhandene .htaccess Datei im Hauptverzeichnis von WordPress hinzugefügt:

## EXPIRES CACHING ##
<IfModule mod_expires.c>
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"
</IfModule>
## EXPIRES CACHING ##

Diese Zeilen fügt man in der .htaccess Datei unterhalb des kleinen WordPress-Blocks ein, der meistens so aussieht (diesen Code NICHT einfügen! Er sollte schon in der htaccess sein!):

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress

Wenn ihr das bei euch einrichten möchtet, macht doch mal den Test und prüft eure Seite VOR und NACH den Änderungen. Dann seht ihr, was es gebracht hat. Bei mir hat es für einen Sprung von 81 auf 89 von 100 Punkten gereicht. Damit ist mein Blog toller als 78% aller getesteten Seiten. Na da „freue mir sich“! 🙂

Update: Ich habe gerade noch einen „Befehl“ gefunden, der auch .js-Dateien ins Browser-Caching einbezieht. Das hat bei mir zu weiteren 2 Pluspunkten bei Pingdom geführt. Diese Zeilen werden dafür auch in der .htaccess Datei eingebaut:

<filesMatch "\\.(js|js.gz)$">
Header set Cache-Control "max-age=604800, private"
</filesMatch>

Wie würdest du diesen Beitrag bewerten?

 
517
Sir Apfelot
Sir Apfelot
Jens Kleinholz, den meisten Lesern des Blogs eher als "Sir Apfelot" bekannt, arbeitet seit über 20 Jahren mit Macs und hätte sich garantiert damals schon ein iPhone gekauft, wenn Steve Jobs es mal ein bisschen früher erfunden hätte. Neben seiner Tätigkeit als Blogger ist er selbständig und bringt mit seiner SEO-Agentur NET-TEC internet solutions die Homepages von Kunden auf die vordersten Plätze bei Google.

43 Comments

  1. […] in Optimierungslaune, was die Ladezeit von meinem Blog angeht. Nach der eben durchgeführten Optimierung des Browser Cachings mit der htaccess-Datei, habe ich jetzt schon den zweiten tollen Tipp gefunden, der meine Pingdom Punktzahl um weitere 6 […]

  2. Mathias sagt:

    Lass mal ein Danke da

  3. Mathias sagt:

    Jetzt ist bei mir nur das Fav Icon aus der Browser Adresszeile verschwunden. Es wird nur ein weißes Blatt angezeigt.

    Ich sehe gerade das das bei Dir auch der Fall ist. Nur im Tab wird das Fav Icon angezeigt.

    Hast du eine Idee das zu beheben?

    • Sir Apfelot sagt:

      Hi Mathias! Ehrlich gesagt scheint das im Browser bei allen Seiten so zu sein. Ich habe eben mal die grossen Tageszeitungsseiten angeschaut und die haben auch kein Favicon mehr in der Browserzeile sondern im Tab des Browsers. Ich denke, das ist einfach eine Darstellungssache des Browsers. Wenn du es anders siehst, dann mail mir doch mal eine Beispielseite, die noch anders aussieht. Vielleicht findet man es im Quelltext. LG! Sir Apfelot.

  4. Steven sagt:

    Feine Sache, Fein beschrieben.

    Ich lasse dir ebenfalls ein dickes Dankeschön und einen lieben Gruß da.

    Steven

  5. Dirk sagt:

    Auch von mir ein riesen Dankeschön, war genau auf der Suche nach diesem Post!

    PS: Bei mir gabs 4 Punkte dazu über diesen kleinen Kniff.

  6. David sagt:

    vielen Danke für diesen nützlichen Tipp.
    Die Tipps haben sich sehr gut ausgewirkt.

    Vorher: Mobile 57 / Desktop 71
    Nach Bild Caching: Mobile 67 / Desktop 82
    Nach .js Caching: Mobile 70 / Desktop 85

  7. Auch von mir ein dickes Danke, die Erklärung hat mir geholfen!
    Von 78 auf 88 Punkte… 😉
    Gruß
    Benjamin

  8. David sagt:

    Hi, die 90er Marke zu knacken wäre schon toll.
    Hast Du noch weitere Tipps, die mir dazu helfen könnten?
    Ich lade die JS bereits im Footer statt im Header und Cache mittels Cachify.
    W3 Total Cache hat sich bei meiner Nischenseite als zu mächtig erwiesen.
    Gruß, David

    • Sir Apfelot sagt:

      Hi David!
      Ich habs mir bei pingdom mal angeschaut, aber ich wüßte jetzt auch keinen pauschalen Rat, was man an deiner Seite noch verbessern kann. Es sind einfach viele kleine Grafiken, die die Zeit schlucken. Die ließen sich nur mit sogenannten „Sprites“ kombinieren. Das sieht man manchmal bei Seiten wie Facebook oder so. Da sind alle kleinen Icons in einer Grafik vereint und bei der Anzeige wird quasi immer die gleiche Grafik mit einem anderen Ausschnitt sichtbar. Aber das dürfte viel Fummelarbeit sein.

  9. Dominik sagt:

    Wo wäre das für die .js-Dateien einzufügen, einfach zu der .htaccess-Datei dazu ?

    Danke schon mal für die Antwort und eine für mich verständliche Anleitung 😀

  10. Jochen sagt:

    Klasse, vielen Dank für den sehr hilfreichen Tipp.
    Von 85 auf 93% bei Pingdom.
    Jetzt dürfte die Seite hoffentlich schnell genug sein 🙂
    Grüße
    Jochen

  11. Hermann sagt:

    Chapeau!

    Ich bin ein Newbie bei WordPress.
    Deine Anleitung a
    hat mich bei Pingdom auf 95 gebracht
    nachdem alle anderenTips, die ich in der htacces ausprobiert habe,
    mir immer nur ein „acces denied“ eingebracht haben.
    DANKE
    Gruß
    Hermann

  12. Mooseport sagt:

    Vielen Dank für die Tips.

    Zusammen mit gzip/deflate hat das meine Seite von 42 auf 81 in Google pagespeed gebeamt.

    Danke

  13. Björn sagt:

    Wow,
    hat echt was gebracht. Danke für diese Anleitung!!

  14. Alex sagt:

    BÄÄÄÄM!!! Von 68 auf 97 Punkte beim Pingdom-Performance grade und von 4sek auf 768ms Ladezeit. Danke! 🙂

    Was bei mir allerdings nicht funktionier ist .js-Dateien ins Browser-Caching einzubeziehen. Füge ich die genannten drei Zeilen Code in die .htaccess ein, funktioniert gar nichts mehr … aber ich will ja jetzt nicht nörgeln 😉 Bin wirklich begeistert!

    • Sir Apfelot sagt:

      Tja, das mit der htaccess Datei funktioniert bei manchen Providern und bei manchen nicht. Da kann ich leider keine Garantie für geben. Aber bei All-Inkl klappts genau mit dem Code.

  15. Cool, danke! Genau dannach habe ich gesucht. Werds auf meiner Seite genau so einbauen!

  16. Dani sagt:

    Ich habe noch nie in meinem Leben einen Kommentar hinterlassen, aber:

    D A N K E !!!

    In 20 Sekunden von 81 / 100 auf 100 / 100 bei Google Page Speed!
    Kracher!

  17. Tina sagt:

    Hallo Sirapfelot,

    ich sage auch gerne Danke, denn ein wenig wurde meine Seite schneller gemacht:
    Mobil von 58 auf 61 und Desktop von 79 auf 83. Nutzererfahrung habe ich 98/100 stehen, was auch immer das bedeutet.
    Insgesamt hätte ich mir zwar schneller gewünscht, aber dennoch eine Verbesserung. Wenn man bedenkt, dass ich wirklich Null Ahnung von so etwas habe … ;).

    Ich hatte vor dem erneuten Messen auch extra alle meine Fotos verkleinert, weil auch deswegen gemeckert wurde, aber dennoch bekomme ich ständig die Nachricht, ich sollte die Bilder optimieren und komprimieren. Sie sind alle unter 60 kb und immer noch zu groß? Bei wie viel % sollte ich denn komprimieren (ich nahm 80%)?

    Kannst du mir vielleicht auch sagen, wie ich Javascript reduzieren kann? Ich weiß gar nicht, wo ich so etwas finden kann. Auch das wird angemeckert.

    Danke für deine Zeit und Aufmerksamkeit
    LG
    Tina

    • Sir Apfelot sagt:

      Hallo Tina! Das Javascript läßt sich in der Regel auslagern, so dass im Quellcode nur ein Verweis auf das Javascript zu finden ist. Hilfreich ist auch das Plugin Cachify, dass Javascript auch verkleinern kann, indem es Kommentare und ähnliches aus dem Code rauswirft…

  18. Tina sagt:

    Vielen Dank für den Tipp, Sir Apfelot!

  19. Harald sagt:

    Wenn eurer Provider die Komprimierung unterstützt, empfehle ich noch Folgende zwei Zeilen:

    SetOutputFilter DEFLATE
    AddOutputFilterByType DEFLATE text/php text/html text/plain text/xml text/css text/javascript application/javascript

    Siehe auch http://httpd.apache.org/docs/2.2/mod/mod_deflate.html

    • Sir Apfelot sagt:

      Hallo Harald! Danke, das klingt gut! 🙂

      Ich habe es eben in meine htaccess-Datei eingefügt und es sieht aus, als würde mein Hoster All-Inkl das unterstützen. Es kommt jedenfalls keine Fehlermeldung.

  20. Tina sagt:

    Also ich muss hier noch einmal ganz explizit DANKE sagen, denn mit deinen Tipps und der einiger anderen IT-lern habe ich (Frau, die NULL (!) Ahnung von Programmierung habe = total Anfängerin) meine Seite auf 99/100 gebracht im Google Speed Test. Ich laufe die ganze Zeit mit einem 360°-Grinsen durch die Gegend. Nur bei MOBIL stehe ich noch bei 79/100 … aber leider gibt es da ein paar unveränderbare Gründe. Naja, mein Unternehmen wird sicher nicht so oft mobil gesucht.

    Also meine Damen und auch Herren, nicht aufgeben, irgendwann fluppt es auch bei Euch, sonst helfe ich Euch gerne ;).

    Viele Grüße aus Bonn,
    Tina

  21. Uwe sagt:

    Hallo,
    ich baue aktuell meinen Blog wieder auf und bin gerade dabei die Antwortzeiten zu optimieren.
    Vielen Dank für deinen Artikel

    Ein Snippet hätte ich noch. Brachte mir 3 Punkte bei Pagespeed insight unter Windows ein

    # Caching

    ExpiresActive on
    ExpiresDefault „access plus 2 weeks“
    SetOutputFilter DEFLATE

    mod_gzip_on Yes
    mod_gzip_dechunk Yes
    mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
    mod_gzip_item_include handler ^cgi-script$
    mod_gzip_item_include mime ^text/.*
    mod_gzip_item_include mime ^application/x-javascript.*
    mod_gzip_item_exclude mime ^image/.*
    mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*

    # Caching

    hiermit geht auch noch einiges mobile +3 und desktop +4:

    Header append Vary User-Agent env=!dont-vary

    AddOutputFilterByType DEFLATE text/css text/x-component application/x-javascript application/javascript text/javascript text/x-js text/html text/richtext image/svg+xml text/plain text/xsd text/xsl text/xml image/x-icon application/json

    # DEFLATE by extension
    AddOutputFilter DEFLATE js css htm html xml

    • Sir Apfelot sagt:

      Lieber Uwe, liebe Leser!
      Ich nehme den Code mal ungeprüft hier mit auf. Ein Teil davon ist auch schon oben berücksichtigt, aber vielleicht hilft es dem einen oder anderen noch, um etwas mehr zu pimpen. 🙂 Aber immer im Hinterkopf haben: Ich habe es nur oben im Artikel den Code getestet. Wer Sachen blind in seine .htaccess Datei kopiert, sollte vorher ein Backup machen!

  22. Ursula sagt:

    Danke für den tollen Bericht.
    Hat mir super etwas gebracht. Hatte dann noch versucht den Code von Uwe einzubauen. Testergebnis war traumhaft doch die Seite war dann nicht mehr erreichbar.
    Habe es jetzt so umgesetzt:
    AddHandler php53-cgi .php
    php_value memory_limit 256M
    php_value max_input_vars 10000

    ## 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 ##

    Header set Cache-Control „max-age=604800, private“

    # BEGIN WordPress

    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.php$ – [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.php [L]

    # END WordPress

    Bekomme noch diese Meldung:
    Behebung erforderlich:
    JavaScript- und CSS-Ressourcen, die das Rendering blockieren, in Inhalten „above the fold“ (ohne Scrollen sichtbar) beseitigen

    Wie könnte ich das noch lösen?
    Danke Ursula

    • Sir Apfelot sagt:

      Hallo Ursula!

      Das Problem mit „above the fold“ läßt sich nicht so einfach lösen, da man dazu die Scripte im Code nach unten verschieben muss. Und dazu muss man in die Theme-Programmierung eingreifen, was meistens keine gute Idee ist, wenn man nicht fit in PHP/HTML ist. Ich würde es mir nicht zutrauen… 🙂

  23. Bernhard sagt:

    Hallo Sir Apfelot,
    Dein Artikel ist ein guter und einfacher Anfang.
    Ich habe eine etwas weiterführende Anleitung geschrieben, die dann auch das Thema Bildoptimierung & Caching umfasst. Ich würde mich freuen, wenn Du meinen Artikel mit einem kurzen Absatz am Ende empfehlen könnest.
    http://wp-config.tips/2015/03/wordpress-pagespeed-optimierung-all-inkl-com/

    Gruß Bernhard

  24. Vielen Dank für den Tipp, damit konnte ich auf ein Plugin verzichten. Um so weniger Plugins, um so besser.

    Also ich lass es dann auch gut sein, mit der Optimierung.

    http://tools.pingdom.com/fpt/#!/dQ0MyL/https://fotografen-shopsystem.de

    Vom Server in Amsterdam aus ist meine Seite in Page size 2.4MB Load time 1.04s
    Requests 39 und Perf. grade 98/100.

    Your website is faster than 89% of all tested websites.

    So iss die schon rattenschnell. Das Auslagern von Above CSS und den ganzen Sachen lasse ich bei Themes grundsätzlich. Beim nächsten Update ist das wieder ein Problem. Vielen Dank für den Artikel. Der sehr hilfreich war.

    Sebastian

  25. Alex sagt:

    Hat bei mir 7 Punkte gebracht. Dankeschön! Aber leider muss ich den Code alle 2 Tage nochmal einfügen, er wird immer automatisch entfernt.

  26. melly sagt:

    Oh besten Dank für die Beschreibung.
    Ich hatte auch keine Lust, ein weiteres Plugin hinzuzufügen und habe den Code verwendet. Gleich mal 8 Punkte schneller und nicht mehr rot sondern nur noch orange.

  27. Hallo,
    wenn ich den Code in meine htaccess einbaue, habe ich zwar ein Super Ergebnis, doch es zerschießt mein Design (sistina von Theme Forest)

    • Sir Apfelot sagt:

      Man kann den Code auch in kleinen Häppchen (sinnvoll ausgewählt!) hinzufügen. Dann sieht man, welcher Teil Probleme bereitet und kann diesen unter Umständen weglassen.

  28. bernd sagt:

    Beeinträchtigt das neue Posts die Aktualität? Werden neue Beiträge trotzdem angezeigt oder erst nachdem der Cache geleert wurde (oder bezieht sich das Caching nur auf Dateien, die dann für die jeweilige Zeit an der bestimmten Position angezeigt werden?)
    Vielen Dank für die Anleitung!

    • Sir Apfelot sagt:

      Hallo Bernd!

      Das ist nicht die Art Caching, wie es die Plugins wie Supercache oder Fastcache machen. Diese speichern wirklich die Seite ab und reichen dann die abgespeicherte Version weiter. Aber diese haben immer eine Option, dass sie den Cache erneuern, wenn ein neuer Post geschrieben oder ein alter geändert wurde. Dann hat man keine Probleme mit neuen Beiträgen. 🙂

      Mit dem Code oben sowieso nicht. Der speichert nur Grafiken und Javascript-Dateien. Da könnte es sein, dass du einige Stunden eine alte Version einer JS-Datei ausgeliefert bekommst, wenn du daran etwas änderst.

      Liebe Grüße!

      Jens

  29. Hallo zusammen,

    auch ich möchte mich bedanken. Mein Ranking hat sich durch deine Hilfe verbessert.

    Vielen Danke.

    Gruß Christian

Schreibe einen Kommentar

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