Turbo für die Webseite – htaccess tunen, gzip injizieren und Ballast abwerfen

htaccess gzip compress
Mit Gzip und Deflate Compression übergewichtige Pfunde der Webseite schrumpfen sowie Müsli, ähm Cache und Expires gegen das Vergessen via htaccess optimal servieren – so gehts:

Ich habe schon lange nach einer optimalen htaccess gesucht, die möglichst alle (viele) Empfehlungen von PageSpeed sauber umsetzt. Wo wenn nicht bei google wurde ich heute endlich fündig!

Ich habe von der originalen htaccess Datei eine wichtige Teilmenge für mich abgezwackt, die all meinen Seiten ein paar Flügel verliehen hat!

Vielleicht kann der ein oder andere damit ja auch was gescheites anfangen:

1. Komprimieren der Inhalte mit Deflate nach Dateityp

# Deflate Compression by FileType
<IfModule mod_deflate.c>
 AddOutputFilterByType DEFLATE text/plain
 AddOutputFilterByType DEFLATE text/html
 AddOutputFilterByType DEFLATE text/xml
 AddOutputFilterByType DEFLATE text/css
 AddOutputFilterByType DEFLATE text/javascript
 AddOutputFilterByType DEFLATE application/xml
 AddOutputFilterByType DEFLATE application/xhtml+xml
 AddOutputFilterByType DEFLATE application/rss+xml
 AddOutputFilterByType DEFLATE application/atom_xml
 AddOutputFilterByType DEFLATE application/javascript
 AddOutputFilterByType DEFLATE application/x-javascript
 AddOutputFilterByType DEFLATE application/x-shockwave-flash
</IfModule>

2. Cache Ablauf auf einen Monat setzen

# turns cache on for 1 month
<IfModule mod_expires.c>
 ExpiresActive On
 ExpiresByType text/css "access plus 1 month"
 ExpiresByType text/javascript "access plus 1 month"
 ExpiresByType text/html "access plus 1 month"
 ExpiresByType application/javascript "access plus 1 month"
 ExpiresByType application/x-javascript "access plus 1 month"
 ExpiresByType application/xhtml-xml "access plus 600 seconds"
 ExpiresByType image/gif "access plus 1 month"
 ExpiresByType image/jpeg "access plus 1 month"
 ExpiresByType image/png "access plus 1 month"
 ExpiresByType image/x-icon "access plus 1 month"
</IfModule>
<ifmodule mod_headers.c>
 <filesmatch "\\.(ico|jpe?g|png|gif|swf)$">
  Header set Cache-Control "max-age=2592000, public"
 </filesmatch>
 <filesmatch "\\.(css)$">
  Header set Cache-Control "max-age=604800, public"
 </filesmatch>
 <filesmatch "\\.(js)$">
  Header set Cache-Control "max-age=216000, private"
 </filesmatch>
 <filesmatch "\\.(x?html?|php)$">
  Header set Cache-Control "max-age=600, private, must-revalidate"
 </filesmatch>
</ifmodule>

3. Komprimieren der Inhalte mit Deflate nach Dateiendungen.

Zudem wir der Default Ablaufdatum (1 Monat) für das Caching der betroffenen Dateien gesetzt
Diese Variante ist alternativ für 1. und 2. anzusehen sofern keine granulare Trennung zwischen den Dateitypen stattfinden soll

# Deflate Compression by MimeType
<IfModule mod_deflate.c>
 <FilesMatch "\.(js|jpg|jpeg|gif|png|css|txt|html)$">
  ExpiresActive on
  ExpiresDefault "access plus 1 month"
  SetOutputFilter DEFLATE
 </FilesMatch>
</IfModule>

3. Komprimieren der Inhalte mit gzip

gzip Compression ist nicht auf jedem Server verfügbar. Wahrscheinlich wirst Du mit DEFLATE auskommen müssen.

# gzip Compression if availiable
<IfModule mod_gzip.c>
 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.*
</IfModule>

Kommentare:

Kommentare zum Beitrag lesen »
Schreibe selbst einen Kommentar »


Weitere Beiträge in dieser Kategorie:

Wer Slideshare nutzt muss jetzt sofort handeln!

Wer Slideshare auf einer deutschen Seite eingebettet hat, muss jetzt dringend handeln! Sonst besteht eine hohe Abmahnungsgefahr! Es hat sich nämlich herausgestellt, dass eine Einbindung von Slideshare-Präsentationen nach deutschem Recht datenschutzwidrig ist. Die Embedds enthalten Tracking-Codes, die Drittanbietern IP-Adresse der … Weiterlesen →

26 Kommentare » Schreibe einen Kommentar

  1. Hallo,

    Also danke für die Mühe aber: Unter 5. schreibst du: ETags deaktivieren und Last-Modified ebenfalls.

    Bei Google developpers heist es jedoch ausdrücklich: specify both Last-Modified and ETag. Das deaktivierst du aber hier ;-)

  2. Lustig…

    Der 1&1 – Support hat sich gerade während des Gesprächs auf Deiner Seite über gzip-Komprimierung belesen. Haha. ;-P

    Kann nur hoffen, dass er etwas gelernt hat! Ich hätte es, wenn ich die Seite nicht schon vor fast anderthalb Jahren gelesen und gebookmarkt hätte.

    Vielleicht muss der nächste Kunde dann nicht 20 Minuten warten, bis er gesagt bekommt, dass das Modul nicht aktiviert werden kann.

    Unfair will ich nicht sein…auf meiner Liste sind zwei Striche (es hat also schon mal funktioniert). Nun. Diesmal ist wieder ein Kunde von 1&1 weg.

    Danke für die Zusammenfassung (1,5 Jahre zu spät ;-)) ).

    Gruß. Ulrich

    PS: Wie war das jetzt mit den ETags?

  3. Hey Viktor,

    bin gerade auch wenig am Kämpfen und Verzweifeln. Mein Blog ist bei Strato gehostet und gzip ist im Paket mit drin. Jetzt habe ich in die .htaccess folgendes eingetragen:

    # gzip Compression if availiable

    mod_gzip_on 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.*

    Leider zeigt mir der Google Page Speed Test und der GZIP-Test von gidnetwork immer noch an, dass keine Komprimierung aktiviert ist. Muss ich in der .htaccess Datei noch etwas einfügen? Oder woanders?

    Der Strato-Support kann mir leider auch nicht weiterhelfen, sondern hat mich bisher nur dazu gebracht, den Blog über eine 500er Fehlermeldung zu deaktivieren. :|

    Liebe Grüße,

    David

  4. Hi,

    hm welche Aussage brauche ich denn aus der phpinfo()?
    Zip – enabled steht drin.

    Grüße,

    David

  5. hmm, gute Frage.
    Schon mit

    
    # mod_deflate (gzip) aktivieren
    

    probiert?

  6. Hi,

    habe ich eingefügt, jetzt sieht die WordPress .htaccess Datei so aus:
    # BEGIN WordPress

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

    # END WordPress

    # mod_deflate (gzip) aktivieren
    # gzip Compression if availiable

    mod_gzip_on 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.*

    aber gzip scheint immer noch nicht aktiviert zu sein. :|

    Aktuell ist die WordPress-Installation in einem Unterverzeichnis. Das Übergeordnete Verzeichnis hat auch noch eine .htaccess Datei, wenn ich dort den o.g. Code reinpacke funktioniert das auch nicht.

    Grüße,

    David

  7. Habe beim ersten Anlauf direkt meine komplette Website damit abgeschossen.
    Unbedingt vorher den alten Inhalt irgendwo sicher ablegen ;)

  8. Hallo, super zusammenfassung!

    Was mir aber als Laie auf dem Gebiet der .htaccess aber nicht ganz klar ist: Handelt es sich bei 1. bis 4. im weitestens Sinne um Alternativen oder sollten alle gleichzeitig eingesetzt werden?

    Habe ich richtig verstanden, dass es sich hierbei um verschiedene Ansätze handelt?

    Zudem wüsste ich gerne, an welcher Stelle das Caching greift. Geschieht dies schon beim Proxy oder erst an letzter Stelle beim Client (User) und ist daher auch von der Browser-Config abhängig.

  9. Ich muss mal aufräumen! 2. ist die “Verbindung” von 1. und 4. die halt für alle Dateien den gleichen Access Limit setzt. Brauchst Du eine granulare Steuerung musst Du 1. & 4. verwenden, sonst 2.
    3. steht für sich selbst
    EDIT: Ich hab aufgeräumt, deswegen stimmen die Zahlen nicht mehr.

  10. Habs mal etwas aufgeräumt. Ist immernoch nicht exklusiv. Werde demnächst das noch etwas mehr aufräumen und umschreiben..

  11. Hallo Viktor,

    wenn ich das hier so lese, vor allem die Kommentare, klingt es für mich als hättest Du Dir die Infos irgendwoher besorgt und würdest Dich nciht wirklich auskennen.

    Sowas wie “da bin ich überfragt”, “gute Frage”, sieht für mich danach aus. Ist dem so und gehe ich ein Risiko ein wenn ich hier Deine angesprochenen Änderungen an meinen htaccess Dateien vornehme?

    Danke und Gruss

    Stefan

  12. Hallo Stefan,

    wenn Du genauer hinschaust, dann wirst Du erkennen, dass Deine Anmerkungen wie “da bin ich überfragt” und “gute Frage” sich auf ein Problem beziehen, dass nicht Teil dieses Beitrags ist und nur am Rande etwas mit der im Beitrag beschriebenen Funktionalität gemeinsam hat.

    Und ja, ich habe die hier zusammengefassten Zeilen aus einer Quelle im Internet. Sie ist im Beitrag angegeben. Im Vergleich zu der Originalquelle habe ich jedoch immer wieder in so fern optimiert, dass ich unnötige Zeilen weggelassen habe.

  13. Habe heute folgende Änderungen in die htaccess bei http://www.kfz-steuer-info.de eingebaut – mit beiden Kompressionsmethoden, da mir nicht klar ist, welche der Server unterstützt. Pagespeed Insights hat gleich mal eine Verbesserung um 10 Punkte angezeigt! Many Thx.

    ## Begin - Compression / Cache

    # gzip Compression if availiable

    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.*

    # Deflate Compression by MimeType

    ExpiresActive on
    ExpiresDefault "access plus 1 month"
    SetOutputFilter DEFLATE

    # turns cache on for 1 month

    ExpiresActive On
    ExpiresByType text/css "access plus 1 month"
    ExpiresByType text/javascript "access plus 1 month"
    ExpiresByType text/html "access plus 1 month"
    ExpiresByType application/javascript "access plus 1 month"
    ExpiresByType application/x-javascript "access plus 1 month"
    ExpiresByType application/xhtml-xml "access plus 600 seconds"
    ExpiresByType image/gif "access plus 1 month"
    ExpiresByType image/jpeg "access plus 1 month"
    ExpiresByType image/png "access plus 1 month"
    ExpiresByType image/x-icon "access plus 1 month"

    Header set Cache-Control "max-age=2592000, public"

    Header set Cache-Control "max-age=604800, public"

    Header set Cache-Control "max-age=216000, private"

    Header set Cache-Control "max-age=600, private, must-revalidate"

    ## End - Compression / Cache

  14. weiss jemand von euch warum bei strato.de nur mit mod_gzip_on Yes klappt?
    Jede weitere Zeile Code wie z.B. siehe unten : verursacht einen 500er Fehler.
    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.*

  15. Hi Viktor,
    warum hast Du unter Punkt 3 die Grafiken mit in den FilesMatch für das Deflate genommen? Es macht keinen Sinn komprimierte Grafiken noch mal zu komprimieren.
    Statt: js|jpg|jpeg|gif|png|css|txt|html
    Würde ich nur diese mit aufnehmen: js|css|txt|html
    Ciao,
    Mike

  16. Ich dachte daran, dass nicht alle komprimierten Bilder optimal komprimiert sein könnten…

  17. 3. Komprimieren der Inhalte mit gzip
    - Sofern gzip verfügbar ist auf eurem Webspace und Ihr noch Probleme habt, das laut Speedtests keine gzip Komprimierung vorhanden zu sein scheint. Bedenkt das Bei CSS wie auch JS Dateien eine Gezippte Version der Datei im gleichen Ordner Vorhanden sein muss.

    Beispiel:
    pfad/css/style.css
    pfad/js/app.js

    gzip Dateien
    pfad/css/style.css.gz
    pfad/js/app.js.gz

    Achtet auf die Dateinamen. Original.( css | js )( .gz )

    Im Bereich eurer Seite verlinkt ihr ganz normal auf die .css bzw .js Datei
    Durch die Angaben in der .htaccess werden nun aber nicht die .css / .js ausgeliefert sondern die jeweilige .gz Version der Datei.

    PS: Zum Erstellen der .gz Dateien Verwende ich 7zip

Hinterlasse eine Antwort

Pflichtfelder sind mit * markiert.


Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>