PageSpeed
Kommentare 28

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


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 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>
</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)$">
  ExpiresActive on
  ExpiresDefault "access plus 1 month"
  SetOutputFilter DEFLATE
 </FilesMatch>
</IfModule>

Alternative Komprimierung der Inhalte mit gzip

gzip Compression ist nicht (mehr) auf jedem Server verfügbar. Solltest Du Dich dennoch dafür interessieren gzip statt DEFLATE zu verwenden, findest Du die Anweisungen nach dem Klick.

28 Kommentare

  1. Hallo Victor,
    du schreibst bei Punkt 3.:
    gzip Compression ist nicht auf jedem Server verfügbar. Wahrscheinlich wirst Du mit DEFLATE auskommen müssen.

    Ich bin dabei mich in die Thematik einzuarbeiten. Bisher hab zu mod_deflate und mod_gzip rausgefunden, das deflate für Apache ab 2.0 und gzip bis 1.3 empfohlen wurde. Mod-gzip hab ich in der Doku für Apache auch nicht mehr gefunden. Warum empfiehlst du eher gzip?

    Gruß
    Gerd

  2. Viktor sagt

    Nach Deiner Ausführung habe ich keine Argumente für GZIP. Werde es rausnehmen.
    2012 (der originale Beitrag ist so alt) war gzip noch schneller als zlib. Zudem hatten damals noch nicht alle Browser Deflate unterstützt.

    VG, Viktor

  3. Danke für den Tipp. Bei zwei kleineren Blogs konnte ich die pagespeedinsight-Werte ein wenig erhöhen, v.a. für die Desktop-Ansicht (um 12 bzw. 7 Punkte).

  4. Rene sagt

    Welche Einstellungen bei der htaccess sind bei Seiten sinnvoll, die täglich neue Inhalte publizieren? Werden diese ohne manuelles aktualisieren des Browser angezeit, wenn der Cache-Ablauf auf 1 Monat steht?

  5. Viktor sagt

    Neue Beiträge können sich noch gar nicht im Cache eines Browsers befinden, der diese noch nie aufgerufen hat. Von daher ist die Dauer des Caching für neue Beiträge völlig irrelevant.

  6. Sandra sagt

    Hallo Viktor,
    ich habe da noch ein paar Fragen an Dich:
    Sollte das alles in die htaccess-datei?
    und zwar wie und womit kann ich die htaccess-datei erstellen? Ich meine was für eine Datei-endung hat sie?
    Oder gibt es so ein Tool was diese Datei erstellen kann?
    Viele Grüsse,
    Sandra

  7. Viktor sagt

    Wenn ich ehrlich sein darf. Wenn Du diese Fragen nicht beantworten kannst, dann solltest Du die Finger von der .htaccess lassen! Es ist eine sensible Datei, die die gesamte Konfiguration Deiner Webseite zerschießen kann, sofern Du nicht weißt, was Du darin genau änderst.

  8. Vielen Dank für den Tipp. Hat mir ein paar Punkte mehr im Pagespeed Toll für mein Forum gebracht. Hat einfach geklappt.

  9. Hallo Viktor,
    in Deiner Liste fehlt der Eintrag zum Komprimiern von PHP-Dateien:
    AddOutputFilterByType DEFLATE application/x-httpd-php
    Habe ich nun bei mir eingetragen und trotzdem komprimiert mein Apache keine PHP-Dateien (alle anderen angegebenen Dateitypen komprimiert er aber).
    Gibt es für PHP einen speziellen Trick oder lassen sich PHP-Dateien grundsätzlich nicht komprimieren (genauer gesagt, deren HTML-Ausgaben) ?
    Freundliche Grüße
    Ralf

  10. Viktor sagt

    Generell lassen sich php Inhalte per deflate komprimieren – so wie von Dir beschrieben. Allerdings kommt es dabei häufig mal zu Caching Fehlern. Zumindest hatte ich Fehler dabei. Deswegen nutze ich es nicht und empfehle es auch keinem. Wenn ich das jetzt mal richtig zusammenreime erwarten die Browser dann den gleichen Inhalt und liefern die gecachte Version aus. Auf jeden Fall hatte ich sehr oft falsche Werte, die nur durch nochmaliges Laden korrigiert wurden.

    Mir schwebt da noch ein Beitrag auf Stackexchange vor, den ich leider nicht mehr finde, der mir aber eingebrannt ist, der besagte: do not deflate x-httpd

    Vielleicht ist Dein Server ja so konfiguriert, dass er per default keine Komprimierung von x-httpd erlaubt? Vielleicht aus genannten Gründen? Das übersteigt auf jeden Fall mein Wissen über deflate.

  11. Hallo Viktor,
    danke für Deine Antwort 🙂
    Habe jetzt gerade entsetzt festgestellt, dass bei meinem Server anscheinend gar kein mod_deflate aktiviert ist. Jedenfalls wird eine große txt-Datei unkomprimiert ausgeliefert und auch in phpinfo() finde ich keinerlei Hinweise auf deflate. Muss ich dann morgen erst mal aktivieren.
    Noch mal herzlichen Dank.

  12. Hi Viktor! Ich habe deine Zusätze für die .htaccess Datei eben mal in einer kleinen WordPress Installation ausprobiert und siehe da: Auch hier greifen sie und bringen sowohl die mobile als auch die Desktop-Bewertung von Pagespeed Insights voran. Bei mir waren es 7 oder 8 Punkte, was aber ganz gut war, da ich schon im Bereich 70 bzw. 80 war. Da ist sowas schon ordentlich. Vor allem OHNE Plugins und anderen Schnickschnack. 🙂
    Ich denke, ich werde daraus meine Default htaccess für Kundenprojekte machen!
    Viele Grüße!

    Jens

  13. Viktor sagt

    Gern, ABER immer schön testen, ob es auch funktioniert. Manchmal muss man halt auch mal die php.ini oder die Apache Settings erst anpassen.

  14. Einfach super. Hab jetzt länger was gesucht, um das in der .htaccess richtig zu machen und hier fündig geworden. Bei Google Pagespeed Insights um ganze 55(!) Punkte gestiegen. Perfekt. Super Artikel. Danke dafür

  15. Viktor sagt

    Aber nicht vergessen! Pagespeed ist nicht alles! Es ist nur das i-Tüpfelchen!

  16. Klasse Artikel! Genau was ich gesucht habe. Hatte schon immer Probleme meine Seiten in Sachen Performance richtig zu optimieren aber hab jetzt mal Resourcen über CDN ausgelagert, JS und CSS Dateien minimiert und dann eben noch als Sahne Häubchen deinen Code zu meiner .htaccess hinzugefügt.
    Ich hatte Tränen in den Augen als ich den Pageload getestet habe. Bei mir war der Unterschied nicht mehr im Prozent Bereich sondern dreifach schneller. Danke!

  17. Viktor sagt

    Gerne! Beim CDN musst Du aber aufpassen! CDNs sind eigentlich nicht zur Beschleunigung da, weil hier auf eine Ressource zugegriffen wird, die Du nicht unter Kontrolle hast. CDNs helfen aber, wenn der eigene Server langsam ist und das CDN schnell. Nicht alle CDNs sind in DE schnell! Viele Server stehen in den USA, was die Connection-Zeit drastisch erhöht!

  18. Hi, vielen Dank, das ist genau was ich gesucht habe. Hatte zuvor gzip laufen, aber hiermit läuft es nochmals schneller, außerdem sind gleich die Ablaufzeiträume für die Dateien enthalten. Super.

  19. HERZLICHEN DANK!!!
    Seit Wochen hab ich alles mögliche an meiner htaccess probiert und bekam immer internal error oder …denied.
    Dein Tipp funktioniert bei mir

    Ein RIESEN DANKESCHÖN von mir! Du hast mir den Tag gerettet ;o)

  20. Max sagt

    Hi,

    eine Frage: In deinem Beispiel unter 3. verwendest du eine Komprimierung für jpg und png. Ist das denn korrekt? Sind das denn nicht schon komprimierte Formate. Ich habe davon gehört, dass diese beiden Bilder in manchen Fällen mit Komprimierung sogar noch größer als davor werden.

    Grüße
    Max

  21. Viktor sagt

    Kommt halt drauf an. Wenn ein jpg und png optimal komprimiert wurden, dann hast Du völlig recht. Aus eigener Erfahrung weiß ich aber, dass wenn mehrere Leute an Bildern arbeiten, dann hast Du fast nie optimal komprimierte jpgs und pngs. Hier holt eine erneute Komprimierung oft noch viele kB raus!
    Da ich mich hier vorwiegend an nicht Profis wende habe ich das mal unkommentiert stehen lassen.

  22. Viktor sagt

    Aber in einem Punkt hast Du total Recht: Ich sollte durch alle Optionen konsequent bleiben und jpgs + pngs entweder raus oder reinnehmen!

  23. Hi Viktor!
    Ich habe die Zusätze für die .htaccess ausprobiert.
    Pagespeed Analyse Desktop vorher 85/100 jetzt 90/100
    Pagespeed Analyse Mobile vorher 79/100 jetzt 85/100 (Super Tip Danke)
    SEO Check zeigt mir noch, Komprimierung aktivieren „gzip“ oder „deflate“
    und ich solle das Browser Caching nutzen.
    Gibt es da noch etwas zu tun, oder ist jetzt schon alles optimal ?
    Danke und Gruß aus Berlin
    Andreas

  24. mike Lager sagt

    Moin Moin….
    Hätte da auch noch eine Frage zum Thema!
    Habe ein ganz normale WordPress Installation….
    Den o.g. Code in die .htaccess kopiert … (unter den Code von WordPress selber)

    Punkte gingen auch direkt sowohl Mobil als auch Desktop ein paar rauf.
    Aber PageSpeed sagt mir immer noch:
    8 Seiten an welche wohl noch nicht mit gzip oder deflate arbeiten… Es sind allesamt .js dateien.
    Muss man hierfür extra code haben ?
    Danke im Voraus
    Mike

  25. Viktor sagt

    @Andreas Berger
    Es hört sich fast so an, als wäre bei deimen Server mod_deflate und mod_expire nicht aktiviert (sofern SEO_Check keinen Fehler macht).

    @Mike Lager
    Pagespeed meckert über viele Dinge. Da muss man schon genau wissen, was es anprangert. Ich nehmen an, dass es sagt, dass Deine js Dateien noch weiter komprimiert werden können. Hier hilft leider weder gzip noch deflate, da Pagespeed hier wirklich die unnötigen Whitespaces in den js Dateien meint. Stichwort „Minify“.

  26. Ja habe gerade mit 1und1 gesprochen, da meine Homepage seit 15 Jahren auf dem Server liegt, ist auf der alten Kiste keine Serverseitige Komprimierung aktiviert.
    Innerhalb von 48 Stunden bekomme ich ein neues zu Hause.
    Bin voller Vorfreude…….

  27. @Viktor
    Von 1und1 ist die Serverseitige GZIP Komprimierung aktiviert worden.
    Page Speed Analyse (Desktop) hat sich von Score: 90 / 100 auf Score: 95 / 100 verbessert.
    Andreas

Schreibe einen Kommentar

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