Geschwindigkeit deiner Website optimieren

Wir alle kennen die Tools zum Messen der Geschwindigkeit einer Website: Pagespeed, YSlow, Pingdom, Webpagetest oder das Kombitool aus Pagespeed und YSlow GTMetrix. Aber wie wird zum Beispiel Browser Caching aktiviert? Wer sich damit nicht auskennt, der findet viele, viele Artikel dazu, die viel Code in sich haben und nichts erklären. Hier ist noch einer davon. 😉

Über die vergangenen Jahre habe ich dieses Gist immer wieder ergänzt, verbessert und korrigiert. Entstanden ist eine sehr praktische Sammlung von Einstellungen, die fail safe die jeweiligen Möglichkeiten des Hosters ausnutzen. Die entsprechenden Anweisungen sind in If-Abfragen gekapselt, so dass es bei guten Hostern keine Probleme mit nicht unterstützen Modulen geben sollte.

Die Einstellungen teilen sich in drei Bereiche: Komprimierung (Deflate/GZip), Browser Caching (Ablaufdatum für statische Caching-Inhalte definieren) und dem Setzen von sinnvollen Headern (Keep Alive, Accept Encoding, etc.).

Die Quellen sind oben im Dokument angegeben. Wer möchte kann also dort die Details nachlesen. Wer noch Ideen zur Ergänzung hat oder einen Fehler findet, der möge ihn hier oder bei Github in die Kommentare werfen. Vielen Dank schon mal dafür!

15 Antworten auf Geschwindigkeit deiner Website optimieren

  1. Hallo Thorsten,
    vorsichtshalber könnte m.E. ergänzt werden, dass die obigen Snippets für den Apache sind und man sie dort (meist) in eine .htaccess Datei in das Einstiegsverzeichnis (document root) packt.

    PS: Habe mich nämlich schon über so manche .htaccess auf einem nginx gewundert… 😉

    • Guter Hinweis! Ich hatte ja dazu geschrieben, dass es keine genaueren Erklärungen gibt. Aber der Hinweis zur .htaccess ist vielleicht doch ganz praktisch. Auf der anderen Seite: Wer solche Änderungen macht, sollte das eigentlich ohnehin wissen …

  2. Da ich technisch völlig unterbelichtet bin, habe ich einfach mal auf den Namen Torsten Landsiedel vertraut und das 1:1 in meine .htaccess reingehauen…

    … und siehe da, die Werte in den Tests bessern sich wahrnehmbar!

    Danke 🙂

  3. Kann ich als Code-Depp annehmen, dass ich dann natürlich kein Caching-Plugin parallel nutzen sollte, wie zum Beispiel WP Super Cache?

    • Das sind zwei verschieden Caching-Arten. Browser-Caching (wie hier im Gist aktiviert) versieht statische Inhalte (Bilder, Skripte, CSS-Dateien, …) mit einem Ablaufdatum. Ist dieses Datum noch nicht abgelaufen werden Inhalte aus dem Browser-Cache, also von deiner Festplatte genommen, was deutlich schneller ist, als wenn die Inhalte neu heruntergeladen werden müssten.

      WP Super Cache und Co. machen aus dem PHP-Template inkl. Datenbankabfragen eine statische HTML-Seite und liefern diese HTML-Seite aus solange der Cache gültig ist (z.B. 24 Stunden). So muss kein PHP-Interpreter arbeiten und keine Datenbank mehr abgefragt werden. Wenn das der Flaschenhals ist, dann wird so Geschwindigkeit dazugewonnen.

      Fazit: Browser-Caching hilft somit nicht beim ersten Aufruf oder wenn man nur alle zwei Jahre eine Seite besucht. Servercaching hilft vor allem bei vielen Anfragen/Besuchern in kurzer Zeit, aber nicht bei zu vielen Skripten/Stylesheets.

  4. Danke für die ausführliche Antwort, Torsten. Das heißt,dass ich beides laufen lassen kann, ohne dass sich die Methoden in die Quere kommen?

    • Wenn WP Super Cache nicht zusätzlich eine Option für Browser-Caching, Komprimierung, etc. hat, dann ja! Die beiden Techniken ergänzen sich dann sogar ganz gut.

  5. Hab’s jetzt mal einfach in die htaccess geoackt und werde es beobachten. Scheint aber ohne weitere Komplikationen zu kaufen. Nochmal Danke für den Code 👍

  6. Sorry für die Autokorrektur-Bugs 😑

  7. Pingback: WordPress schneller machen › Blogger-Base.net - Die Ressource für Blog Betreiber

  8. Habe es einfach mal, mehr oder weniger ohne es zu lesen, unter den bereits bestehenden Code in meine .htaccess gepackt.

    Davor: Pagespeed: 70; YSLOW: 68
    Danach: Pagespeed 86; YSLOW 72

    Eine deutliche Veränderung beim Pagespeed also, auch wenn ich praktisch auf der Seite fast keine Veränderung mitkriege.

    Danke für den Code auf jeden Fall. 🙂

    Viele Grüße
    Benjamin

  9. Hallöchen,

    die Zeile:
    Header append Vary User-Agent env=!dont-vary

    Aus dem Part für deflate sollte ebenfalls mit einer Bedingung versehen werden:

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

    Auf meinem Testsystem fehlt scheinbar das Apache Modul für den Header, so dass ich anfangs in einen HTTP 500 Fehler gelaufen bin.

  10. Sollte man Zugriff via SSH auf die Apache Konfig haben, wäre es ratsam Veränderungen dort direkt in den Hostfiles oder .conf Files anzupassen, anstatt über die .htaccess Datei, denn das lesen dieser Datei dauert nämlich auch seine Zeit.

    Auch könnte die Liste erweitert werden. Z.B.

    AddType x-font/woff .woff
    AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
    AddOutputFilterByType DEFLATE font/ttf font/eot font/otf

    Header set Cache-Control „max-age=2678400, public“

    Header set Cache-Control „max-age=7200, private, must-revalidate“

    Header set Cache-Control „max-age=86400, public“

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

    Hier gibt es noch unzählig weitere Veränderungen, die man vornehmen könnte z.B. die Leerzeilen entfernen, alles einrücken etc., denn all das braucht Zeit bei lesen.

    Sehr guter Artikel.

    • Ich glaube da sind ein paar Elemente nicht korrekt gespeichert worden. Vielleicht packst du das in ein Gist und verlinkst es? Oder maskierst deine Eingabe … ohne die einleitenden Angaben macht das ja aktuell keinen Sinn.

Schreibe einen Kommentar

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