Sep 29, 2011

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

Kategorie: web-development

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>

Über den Autor

Ich, Viktor Dite bin Shopadmin, Webdeveloper und ein Geek, der das Auge fürs Alltagstaugliche nicht verlieren möchte. Hier im Blog versuche ich beide Welten unter einen Hut zu bringen, so dass auch nicht “Digital Residents” die Möglichkeit bekommen, das Meiste aus der digitalen Welt herauszuholen.

Gefällt Dir der Beitrag?

Wenn Dir der Beitrag gefällt, freue ich mich über jedes Share oder ein Kommentar!

Das könnte Dich auch interessieren:

• Fotolia Abmahnung vorbeugen
• rel=author Author Profil mit der Webseite verknüpfen
• Wordpress Breadcrumb Navigation ohne Plugins
• Warum Du jedes Wordpress Theme vor der Nutzung überprüfen solltest
• Open Graph Meta Informationen in Wordpress Beiträge einfügen

18 Blog Kommentare

1. azella:
   Kommentar geschrieben am 30.11.2011

   Danke Dir, ich kämpf zwar noch mit Gzip aber soweit funktioniert das erstmal.

2. Viktor Dite:
   Kommentar geschrieben am 30.11.2011

   gzip ist nicht unbedingt auf jeden Server installiert…

3. Sven:
   Kommentar geschrieben am 27.04.2012

   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 ;-)

4. Viktor Dite:
   Kommentar geschrieben am 27.04.2012

   Ja, Du hast Recht! Ich muss mal die Liste hier anpassen……
   Gleich aufs ToDo setzen!

5. Ulrich:
   Kommentar geschrieben am 12.06.2012

   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?

6. Viktor Dite:
   Kommentar geschrieben am 12.06.2012

   Wegen den ETags weiß ich leider noch nicht weiter. Hab sie deswegen erstmal rausgenommen.

7. David:
   Kommentar geschrieben am 05.11.2012

   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

8. Viktor Dite:
   Kommentar geschrieben am 06.11.2012

   ist denn gzip auch aktiviert? Was sagt phpinfo() ?

9. David:
   Kommentar geschrieben am 06.11.2012

   Hi,

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

   Grüße,

   David

10. Viktor:
    Kommentar geschrieben am 06.11.2012

    hmm, gute Frage.
    Schon mit

    
    # mod_deflate (gzip) aktivieren
    

    probiert?

11. David:
    Kommentar geschrieben am 06.11.2012

    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

12. Viktor:
    Kommentar geschrieben am 06.11.2012

    bin überfragt

13. Viktor:
    Kommentar geschrieben am 06.11.2012

    Vielleicht erfährst Du mehr bei Frank Bueltge, dem Autor der Quelle

14. Makro:
    Kommentar geschrieben am 06.01.2013

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

15. Viktor Dite:
    Kommentar geschrieben am 06.01.2013

    Das sollte man generell immer tun, ja!

16. Andrés:
    Kommentar geschrieben am 19.02.2013

    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.

17. Viktor Dite:
    Kommentar geschrieben am 19.02.2013

    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.

18. Viktor Dite:
    Kommentar geschrieben am 19.02.2013

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