Wenn 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.
Kapitel in diesem Beitrag:
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>
Ähnliche Beiträge
WordPress Plugin: Upload Media By URL – mein Pick der Woche- WP-Cron deaktivieren – so geht es!
- Was ist ein Zählpixel oder Tracking-Pixel?
- Wie wird man Blogger/in und verdient Geld damit?
- chatGPT den Zugriff auf die Inhalte der eigenen Webseite verbieten
- Backlink-Indexer – was ist das beste Tool?
- Keyword Shitter im Test - Kostenlos Longtail-Keywords finden
- Passende Farbe für eine Webseite finden – mit diesen Tools kein Problem
Jens betreibt das Blog seit 2012. Er tritt für seine Leser als Sir Apfelot auf und hilft ihnen bei Problemen technischer Natur. Er fährt in seiner Freizeit elektrische Einräder, fotografiert (natürlich am liebsten mit dem iPhone), klettert in den hessischen Bergen rum oder wandert mit der Familie. Seine Artikel beschäftigen sich mit Apple Produkten, Neuigkeiten aus der Welt der Drohnen oder mit Lösungen für aktuelle Bugs.
Pingback: Wordpress Ladezeit verkürzen: Remove query strings from static ressources » Sir Apfelot
Lass mal ein Danke da
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?
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.
Feine Sache, Fein beschrieben.
Ich lasse dir ebenfalls ein dickes Dankeschön und einen lieben Gruß da.
Steven
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.
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
Hi David! Na, das ist ja schön. Die 90er Marke willst du nicht knacken? ;)
Auch von mir ein dickes Danke, die Erklärung hat mir geholfen!
Von 78 auf 88 Punkte… ;-)
Gruß
Benjamin
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
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.
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 :D
@Dominik: Ja, genau! Die Zeilen kommen auch in die htaccess-Datei. Ich habe es nun oben in der Anleitung ergänzt… :)
Danke werd ich probieren ob das klappt :)
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
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
Vielen Dank für die Tips.
Zusammen mit gzip/deflate hat das meine Seite von 42 auf 81 in Google pagespeed gebeamt.
Danke
Na, das freut mich! Wenig Arbeit und viel Effekt. So könnte es immer sein. ;-)
Wow,
hat echt was gebracht. Danke für diese Anleitung!!
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!
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.
Cool, danke! Genau dannach habe ich gesucht. Werds auf meiner Seite genau so einbauen!
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!
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
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…
Vielen Dank für den Tipp, Sir Apfelot!
Der Tipp mit einem Caching PlugIn hat geholfen! Dazu noch WP Smuth.it und es ging heftig aufwärts. Super Hilfe!
Von 55 auf 67 !!!!
Is ja echt Irre.
Ich habe einiges vorher getestet, was mich nie zufrieden gestellt hatte.
Plugins etc. und immer gabs was zu bemängeln.
Aber das es dann doch so einfach geht…und dauerte nur 10 sek. :-)
Toller Tipp. Vielen Dank dafür und ich werds weitergeben.
Grüsse Heiko
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
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.
Für alle Versuchsfreudigen Kommentarleser: Easyname unterstützt diesen Code leider nicht, meine Seite war sofort down.
Die Textzeile hat bei mir leider eine minimal Verschlechterung bei Google Pagespeed gebracht, mein Blog ist bei [entfernt] gehostet.
Ok, kann klappen oder auch nicht. Aber es kostet ja nicht viel Zeit, es zu versuchen.
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
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
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!
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
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… :)
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
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
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.
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.
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)
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.
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!
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
Hallo zusammen,
auch ich möchte mich bedanken. Mein Ranking hat sich durch deine Hilfe verbessert.
Vielen Danke.
Gruß Christian
Hallo zusammen,
auch ich möchte mich bedanken. Mein Ranking hat sich durch deine Hilfe verbessert.
Vielen Dank
Hallo!
Ich habe wie oben beschrieben den Code in die htaccess Datei eingefügt. Bei Pingdom hat sich jedoch nichts verändert. Es schlägt immer noch Leverage Browser Caching vor (aufgelistet sind alles Bild-Dateien) . Wenn ich mit dem Network Monitor (F12) in Firefox teste, ist es mit und ohne den Caching Code bei einem 2. Mal aufrufen (nach Browser-Cache leeren) viel schneller, da es für Bilder und viele CSS Datien (aber nicht JS?) 304 statt 200 bekommt und sehr geringe connecting und wait time hat.
Nach Browser-Cache leeren (also ungefähr für neue Aufrufer) beträgt die Ladezeit aber immer noch ca. 6 Sekunden. Ideal wären 200ms laut Google.
Wie kann ich die Ladezeit weiter verkürzen?
Hallo Tim! Wenn du bereit bist, ein Plugin zu installieren und vielleicht auch Geld in die Hand zu nehmen, dann würde ich dir WP Rocket empfehlen. Das Caching-Plugin holt nochmal einiges raus und kümmert sich auch um das Verkleinern und Zusammenfassen von CSS und JS Dateien. Warum der Code oben für die .htaccess Datei nicht funktioniert, kann ich schwer sagen. Vielleicht hat dein Hoster die Funktionen nicht freigegeben, so dass deine Einträge keine Auswirkung haben?
Hallo und danke, dass Du dich dieses Themas so ausführlich angenommen hast.
Ich hatte mir heute Mittag in meiner Sucht nach Speed meine Site zerschossen und durch ein Plugin, das Browser-Caching etc installieren sollte, einen 500 Internal Server Error eingehandelt.
Danke Deiner und einer anderen Site den Mut gefasst, die .htaccess manuell zu modifizieren.
Leider sind die von Dir aufgelisteten Einträge bei meinem Hoster (UDAG) wohl nicht zugelassen, da ich in pingdom immer noch den Fehler “Leverage browser caching” bekomme. Schade. Muss da mal nachfragen was eigentlich geht.
Immerhin: viele Optimierungen des Wochenendes haben mich zumindest schon auf 53/60 bei Pagespeed und 85 bei pingodm gebracht.
Knackpunkt schient auch die lange Server-Reaktionszeit zu sein (2,62 Sekunden)
Noch einen schönen Sonntag und guten Start in die Woche
Tom
Hi und vielen Dank für deinen tollen Beitrag! Bei meiner Webseite habe ich es eingebaut, die Performance hat sich auch verbessert. Trotzdem steht in den Test-Tools immer noch “Leverage browser caching” wenn ich meine Seite teste. Ist das bei euch auch so, oder verschwindet das komplett? Danke im Voraus! LG Christoph
Genial!!! Besten Dank!
Hi, der helle Wahnsinn!!!
Meine Seite ist mobil von 64 auf 76 und Desktop von 75 auf 84 geschossen, super.
Besten Dank!! LG Susanne
Hu Susanne! Freut mich! Manchmal kann man auch mit Kleinigkeiten was erreichen. :D
Ich bin fassungslos!!! Desktop von 68 auf unglaubliche 91. Das nenne ich optimiert. Ganz herzlichen Dank, Sir Apfelot. Nur Mobil bleibt es bei 71 und needs work. Da muss ich noch mal genauer hinschauen was geht.
Hallo Claudi! Bei der Mobilen Version ist es immer schwerer eine gute Punktzahl zu erreichen. Ich glaube, hier setzt Google die Messlatte ziemlich hoch. Misst man mit anderen Tools, kommt man schnell auf eine Top-Bewertung bei der Geschwindigkeit und hat bei Google trotzdem nur eine Punktzahl zwischen 70 und 80. Aber viel Glück beim Pimpen! Jens
Ich bin begeistert! Deine Tipps haben meine Seite auch rasant in den grünen Bereich beschleunigt, so dass ich nun an das Feintuning gehen kann. Ich hatte mich lange Zeit nicht getraut an der htaccess rumzuwerkeln, aber es lohnt sich!
Danke und viele Grüße von den MoKoWo’s
Wau danke, auch jetzt helfen diese paar Zeilen Code, um die Wordpress-Seiten zu beschleunigen.
Nur mal eine Verständnisfrage.
Warum werden anscheinend diese Tipps nicht bei dir auf diesen Seiten verwendet? Wenn ich deine Seiten über Pingdom verwende komme ich D67, und bei Google auf 69 mobil/621 Desktop. Ist doch sehr sehr gering. Oder gibt es da einen Grund?
Hallo Alex!
Ja, eine berichtigte Frage. :) Ich habe das Caching Plugin WP-Rocket in Verwendung und das macht diese Einträge eigentlich auch. Wegen der Fehlersuche hatte ich es ausgeschaltet. Darum auch die schlechten Werte bei Pingdom und Google. Bei Pingdom wird es besser, wenn man WP-Rocket verwendet, aber bei Google kommt man irgendwann an die Grenzen des Möglichen, wenn man – wie bei Sir Apfelot – etliche Wordpress Plugins laufen hat. Ich habe schon ausgemistet, aber alles kann man nicht weglassen. :D LG! Jens
Ich habe bereits alles erdenkliche probiert (auch obigen Code) und natürlich mehrfach Tante Google befragt, aber die Methode scheint bei vielen Wordpress-Installationen nicht zu greifen. Das Google Pagespeed Tool wirft mir immer noch aus, ich möge das Browser Caching für div. Ressourcen aktivieren. Bei den angemeckerten Scripten handelt es sich ausnahmslos um Adressen mit Paramter. Z.b. “https://meinedomain.de/…kit/js/components/slideshow.js?ver=4.8.2 (2,5 Tage)” und mein Ergebnis bessert sich nicht. Gibt es da Abhilfe via .htaccess oder muss ein zusätzliches Plugin her? (Das wäre doof.)
Hallo Nils! Ja, das ist leider das Problem. Viele Plugins, wie in deinem Fall wohl ein Slideshow-Plugin, binden ihre Scripte und ihren CSS-Kram einzeln ein und dann hat mal irgendwann 20x Javascript, die einzeln geladen werden und 20 CSS-Dateien… ich glaube Plugins wie WP-Rocket helfen da ein bisschen, aber auch nur ansatzweise. Was ich noch nicht getestet habe, ist CloudFlare. Das ist ein Dienst, der quasi das Caching der Seite übernimmt und auch den Quellcode optimiert und erst dann ausliefert. Was mich davon abhält: Man muss die DNS Einstellungen der Domain auf CloudFlare umstellen und ich mag es irgendwie nicht so richtig, wenn ein anderer Dienst sich zwischen meine Webseite und mich klemmt. Aber vielleicht teste ich es einfach mal mit einer weniger wichtigen Domain, bevor ich es auf Sir Apfelot einsetze. :D
Vielen Dank für den tollen Beitrag! :) Auf Pingdom bin ich nun beim browser caching von 30 auf 83 gekommen! Das hat meine Ladezeit um einiges verbessert.
Hey Jens,
erst einmal vielen Dank für den Artikel, sehr hilfreich !
Nach meinem Speedtest der noch wirklich nicht so gut abscheidet mit 38 suche ich weitere Optimierungsmöglichkeiten.
Unter anderem wird mir bei dem Test angezeigt das ich moderne Bildformate nutzen soll :-0 ..was sind den moderne Bildformate ?
Hier die 3 Bereiche die rot gekennzeichnet sind :
Serverantwortzeiten reduzieren (TTFB)
2,88 s
2
Bilder in modernen Formaten bereitstellen
2,66 s
3
Textkomprimierung aktivieren
1,83 s
4
Bilder richtig dimensionieren
vielleicht gibt es da ja auch schon ältere Vorschläge zur Optimierung von dir ? Ich freue mich von dir zu lesen.
lg Sven
Hallo Sven!
Ja, gute Frage, was “moderne Bildformate” sind. :D Ich denke JPG dürfte bei Fotografien schon ne gute Wahl sein.
Allerdings: Serverantwortzeit: 2,88 sec -> das ist schon mega-langsam. Wo hostest du deine Webseite??? Klingt fast nach Strato. ;-) In 2,88 sec haben die meisten Server schon die komplette Webseite an den Besucher verschickt und nicht erst das erste Byte… da solltest du was machen.
Die zweite Sache: “Bilder richtig dimensionieren” -> das passiert, wenn du Bilder in viel höherer Auflösung hochlädst, als du sie eigentlich auf der Webseite darstellst. Also wenn du sie auf der Webseite nur 1000 Pixel breit darstellst, dann am besten nicht im Format 4000 x 6000 Pixel hochladen. Das spart auch extrem viel Daten. Zum komprimieren von Bildern kann ich das Wordpress Plugin TinyPNG bzw. TinyJPG empfehlen. Die haben auch ein Photoshop-Plugin und eine Webseite, über deren Service du auch Bilder kleinrechnen kannst. Die holen extrem viel raus…
Ich hoffe, das hilft dir… LG! Jens
Google schreibt bei Pagespeed zu “moderne Bildformate”:
“Bildformate wie JPEG 2000, JPEG XR und WebP bieten oft eine bessere Komprimierung als PNG oder JPEG, was schnellere Downloads und einen geringeren Datenverbrauch ermöglicht.”
Aber ehrlich, ich kenne keinen oder habe noch nicht erlebt, dass JPEG 2000 oder was anderes verwendet wird. Selbst Photoshop hat bei “Speichern für Web” JPEG und PNG. Es sei denn, dass die ganzen neuen Online-Abomodell etwas in der Richtung geändert haben …
Ja, ich denke mir auch so “JPEG 2000” und “modern”??? Naja, egal… ich glaube, mann kann ganz gut ohne den Quatsch leben. “Für Web speichen” bei Photoshop macht schon halbwegs kleine Bilder. Aber wenn du viel mit Photoshop arbeitest, kann ich dir noch “TinyJPG” empfehlen. Die haben ein Plugin für Photoshop, mit dem man richtig gut komprimierte JPG/PNG Dateien speichert. Du kannst ein bisschen darüber in meinem Artikel über “Optimage” lesen. Aber ich werde TinyJPG noch einen eigenen Artikel gönnen…
Vielen Dank für den tollen Artikel. Schade, dass ich ihn erst heute durch eine Verlinkung gefunden habe. Gleich umgesetzt, es fühlt sich wesentlich besser an als vorher. Und im Pagespeed haben deine beiden Codes gleich ein paar Punkte gebracht. Besser als das W3 Total Cache Plug-In. Dieses hatte meinen Blog zerschossen.
Hallo Karsten! Schön, dass es bei dir besser klappt als W3 Total Cache. Ich bin mit dem Plugin auch nicht warm geworden. Ein Tipp noch für deine Webseite: Wenn man auf “Über mich” klickt, kommt man auf einen 404 Fehler… das mag Google auch nicht. Ich schätze Besucher sind dann auch enttäuscht. ;-) LG und frohes Fest!
Der Tipp ist ja mal hilfreich, danke! Ich muss ja gestehen, dass ich bisher immer auf Plugins wie Autooptimize und CO. gesetzt habe, da Plugins zu installieren eben wirklich einfach ist.
Aber nachdem dieser Kniff so schnell umzusetzen ist, ist es auf jeden Fall einen Versuch wert.