Personal Homepage, Tutorials & Blog

Javascript und CSS mit Gzip komprimieren

Javascript und CSS mit Gzip komprimieren

10. März '10

Ein großes Interesse fürs Web ist es, dass ihre Seiten schnell laden. Die kann unter anderem durch die Komprimierung von Javascripten und CSS-Code erreicht werden.

Javascriptdateien und auch Stylesheets sind oft sehr groß. Als Beispiel verwende ich die Javascript Bibliothek jQuery. Diese hat unkomprimiert ca. 167 kb. Komprimiert kommt man auf eine Größe von nur 44 kb. Dies sind nur noch 26% der ursprünglichen Größe. Durch dieses Verfahren laden die Homepages um ein vielfaches schneller als zuvor.

Was ist nun wenn ein Browser oder ein Gerät nicht mit der Komprimierung zurechtkommt?
Für diesen Fall liegen immernoch die unkomprimierten Dateien auf dem Server.

Dateien komprimieren

An der Einbindung der Dateien in Ihre Homepage ändert sich rein gar nichts. Sie erfolgt wie üblich mit

<link type="text/css" rel="stylesheet" href="css/styles.css" />
<script type="text/javascript" src="js/jquery-latest.js"></script>

Nun müssen Sie die Scripte komprimieren und auf den Server laden. Die Scipte müssen in diesem Fall styles.css.gz und jquery-latest.js.gz heißen und im gleichen Ordner liegen wie die unkomprimierte Version.

Wie komprimiere ich ein Script?
Das Freeware Tool 7zip (Download hier) beherrscht diesen Komprimierungsformat.

.htaccess bearbeiten

Als zweiten Schritt müssen Sie nun folgenden Code in die Datei .htaccess einfügen:

# BEGIN Gzip Compression
AddEncoding gzip .gz
<filesmatch "\.js\.gz$">
AddType "text/javascript" .gz
</filesmatch>
<filesmatch "\.css\.gz$">
AddType "text/css" .gz
</filesmatch>
<ifmodule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteCond %{HTTP:Accept-encoding} gzip
RewriteCond %{REQUEST_FILENAME} \.(js|css)$
RewriteCond %{REQUEST_FILENAME}.gz -f
RewriteRule ^(.*)$ $1.gz [QSA,L]
</ifmodule>
# END Gzip Compression

Damit wählt der Server aus, ob Gzip verwendet wird, oder nicht. Wenn ein Gerät die Komprimierung nicht unterstützt, wird die unkomprimierte Version genommen.

Leeren Sie nun Ihren Cache und laden Sie Ihre Seite neu. Die Ladezeiten sind nun erheblich geringer.

 

Wenn Ihnen dieser Artikel gefallen hat, oder Sie Anregungen/Kritik haben, würde ich mich freuen, wenn Sie einen Kommentar schreiben oder das RSS Feed abonnieren, um immer automatisch über die neuesten Artikel auf dieser Seite informiert zu werden. Sie dürfen diesen Artikel oder die gesamte Seite auch gerne verlinken.

29 Kommentare

  1. jbuechler /

    Hallo

    Wo genau kommt den der Code hin beim .htaccess. Vor WordPress beginn oder danach. Ich habe da aber auch schon ein Caching Eintrag.

    Gruss
    J.

  2. Einfach, aber effizient. Fleiß zahlt sich auch hier aus. Auf jeden Fall vor dem Komprimieren beim Hoster abklären, ob gzip unterstützt wird.

  3. Ist zwar schon etwas älter der Beitrag. Für Einsteiger aber gut zu gebrauchen.

  4. Genau das habe ich gesucht, vielen Dank!

    • Danke für die Infos – Genau das was ich gesucht habe. Werde das umstellen damit meine Seite bei pagespeed noch einen höheren Wert erhält (Derzeit nur 40/100)

  5. Also bei mir hat er prima gekappt, bin sehr zufrieden mit der gzip-Komprimierung. Danke für den tollen Beitrag.

  6. Ich hätte nicht gedacht, dass es so einfach ist. Interessant wäre zu wissen, es die Komplimierung von Bildern (png,jpg…) genauso einfach ist und wie genau das geht.

  7. Super erklärt… kann mich da nur anschließen. Werde das in Kürze mal ausprobieren und bin gespannt, was die Ladezeit danach sagt!

  8. Hallo zusammen

    Ich hätte da eine Frage. Wie ist es bei einer statischer Website? Wann ich die oben angegebene .htaccess genau so auf dem Server hochlade, zeigt es zwar die Website an, aber der PageSpeed Test von Google funktioniert dann nicht. Wird die Datei wieder gelöscht, dann zeigt es wieder die Werte bei Google an.

    Was kann man machen?

    Vielen Dank!
    Gruss

  9. Also bei mir funktioniert es super! Endlich habe ich einen vernünfigen Beitrag dazu gefunden. Danke.

  10. Super Sache. Hat mir wirklich sehr geholfen! Danke für die Anleitung. :)

    • Diese Beschreibung hat mir ungemein geholfen. Damit habe ich die Bewertung mittels PageSpeed von 70 auf 91 von 100 Punkten erhöhen können. Die Ladezeit der Seite hat sich damit sogar fast halbiert.

  11. Buenas noches,

    na, das ist doch mal ein guter Lösungsweg! Und wenn man das einaml gemacht hat, dann kommt einem das so simpel vor ^^
    Die Files habe ich via BashShell komprimiert. Falls es jemanden interessiert, hier: tar -zcvf style.css.gz style.css
    Der Firebug-PageSpeed ist von 95% > 99% gestiegen, Firebug-YSlow alles grün. Was will man mehr … perfecto 😉

    Danke für diesen super Tipp
    Share-Honey

  12. Leider ist bei Share-Hostern das Komprimierungstool in der Regel deaktiviert, so dass ich schon seit geraumer Zeit nach Alternativen suche.
    Aus diesem Grund habe das oben beschriebene Verfahren mal ausprobiert und die style.css sowie ein paar Javascripte komprimiert. Die Ladezeit der Seite verkürzte sich tatsächlich., aber leider hat es mir auch das Layout zerschossen. Diese Erfahrung habe ich bisher mit allen Komprimierungsverfahren gemacht. Auch mit Online-Tools waren die Ergebnisse immer unbefriedigend. Woran könnte das liegen?
    Beste Grüße, Tom

  13. Danke danach habe ich gesucht. Kurz und knapp auf den Punkt erklärt. Werde es mal am wochen versuchen es Umzusetzen. Werde dann auch noch gleich versuchen mein Script zuende zu bringen was den Wihtespace aus den css und js dateinen entfernt und dann als gz speichert.

    • function compress($buffer) {
      /* remove comments */
          $buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer);
      /* remove tabs, spaces, new lines, etc. */        
          $buffer = str_replace(array("\r\n", "\r", "\n", "\t", '  ', '    ', '    '), '', $buffer);
      /* remove unnecessary spaces */        
          $buffer = str_replace('{ ', '{', $buffer);
          $buffer = str_replace(' }', '}', $buffer);
          $buffer = str_replace('; ', ';', $buffer);
          $buffer = str_replace(', ', ',', $buffer);
          $buffer = str_replace(' {', '{', $buffer);
          $buffer = str_replace('} ', '}', $buffer);
          $buffer = str_replace(': ', ':', $buffer);
          $buffer = str_replace(' ,', ',', $buffer);
          $buffer = str_replace(' ;', ';', $buffer);
         
      return $buffer;
      }


      if(isset($_POST['template'])){
      $dateiname = $template_dir.$selectTemplate."css/stylesheet.css"; // Name der Datei
      $dateisize = filesize($dateiname);
      // Datei öffnen,
      // wenn nicht vorhanden dann wird die Datei erstellt.
      $datei = fopen($dateiname, "r");

      $dateiinhalt = fread($datei, $dateisize);
      $text = compress($dateiinhalt);
      $string = $text;

      $gz = gzopen($template_dir.$selectTemplate.'css/stylesheet.css.gz','w');
      gzwrite($gz, $string);
      gzclose($gz);

      fclose($datei); // Datei schließen

      Hier kann man natürlich auch noch hübscher machen aber zur inspiration sind sollche code schnipsel ja immer mal gut.

      Erst wird die CSS Datei eingelesen und die Kommentare und wihtespace entfernt und dann wird ein Kompremiert css.gz Datei erstellt.

      So habe ich statt 79Kb nur noch 11Kb.

      CSS bei bedarf über ein Script zu kompremieren ist in meinen augen sinvoller als es ständig zur laufzeit durch den Server tun zu lassen. Zumal ich es noch um .js erwitern möchte und mit einem Multishop System hat der Server sinvoller dinge zu erledigen.

  14. Carsten Schmitt /

    Hallo,
    Erst mal danke für den Beitrag :-)
    Ich versuche gerade meine Javascript zu komprimieren.
    Wenn ich auf in der Einstellung jedoch „RewriteBase /“ eingebe so wie es oben beschrieben wurde, startet mein Server nicht mehr.
    Lasse ich diese Einstellung weg, startet der Server, aber PageSpeed merkt an, dass meine *js nicht komprimiert sind.

    Ich benutze das Programm „wamp“ mit „Apache 2.2“

    jemand eine Idee?
    Danke schonmal im vorraus

  15. Man sollte eine solche Komprimierung so oft aktivieren, wie möglich. Immerhin spart man damit eine Menge Bandbreite und Platz.

  16. Das nenne ich doch mal eine super Info. Ich dachte die GZip-Komprimierung geschieht auf einem halbwegs ordentlich konfigurierten Server automatisch, aber konnte nun insgesamt über 100kb einsparen! Vielen Dank für den tollen Tip.

  17. Monika /

    ja das war sie vorher schon— irgendwie werd ich mit page speed vermutlich nicht klar 😉

    also warten was das webmastertool sagt und ob die zufriedener sind 😉
    danke dir für die simple Erklärung – die gebe ich weiter 😉

  18. Monika /

    sorry für den Doppelkommentar,
    aber page speed meldet immer noch ich solle meine .css als gzip ausliefern-daher meine Frage

  19. Monika /

    ich habe eine Frage: die Style.css liegt bei mir nicht im Rootordner sondern in einem tief unten liegenden…
    muss ich da den Serverpfad angeben oder die Url wo die Datei liegt…?

    lg

    • Die .htaccess muss nicht verändert werden, eingebunden werden muss die Datei natürlich mit dem korrekten Pfad:

      <link  type="text/css" rel="stylesheet" href="pfad/zum/verzeichnis/der/styles.css"  />

      Dann sollte es gehen.

      Viele Grüße

  20. G. M. /

    Hallo und vielen Dank für diesen Beitrag und die ausführliche gute Beschreibung!

    Mir ist allerdings noch nicht klar, auf welchen Webservern bzw. bei welchen Hostern und in welchen Browsern das Verfahren funktioniert. Ach, da kommt mir eine Idee: Vielleicht sollte ich es mal testen, indem ich die unkomprimierten .css und .js vorübergehend entferne.

    Für entsprechende Tips bin ich aber dennoch sehr dankbar! :)

    Gruß,
    G.

    • Tobias Fonfara /

      Das Verfahren funktioniert bei allen Webhostern, die das Modul mod_rewrite.c installiert haben. Alle aktuellen Browser sollten das Verfahren inzwischen unterstützen.

      • DerKomprimierer /

        Wie muss man das dann bei php machen?
        So?

        # BEGIN Gzip Compression
        AddEncoding gzip .gz

        AddType „text/javascript“ .gz

        AddType „text/css“ .gz

        AddType „text/php“ .gz

        RewriteEngine On
        RewriteBase /
        RewriteCond %{HTTP:Accept-encoding} gzip
        RewriteCond %{REQUEST_FILENAME} \.(js|css|php)$
        RewriteCond %{REQUEST_FILENAME}.gz -f
        RewriteRule ^(.*)$ $1.gz [QSA,L]

        # END Gzip Compression

        benutze xtc shop veyton

Trackbacks/Pingbacks

  1. Website Performance: Die Geschwindigkeit von WordPress Seiten verbessern › WebundSEO - […] Dateien komprimieren: Beide Dateien mit gzip komprimieren, hochladen und in der .htaccess Datei den Browser anweisen, vorzugsweise die komprimierte…
  2. CSS und JavaScript Gzipen » Timo Heinrich - Google-Panda-Update-Opfer - [...] http://www.tfonfara.de/javascript-und-css-mit-gzip-komprimieren.xhtml [...]

Einen Kommentar schreiben