Nelly Brekardin 23. Dezember 2009

Speed up: Optimierungstipps für ihre Seiten

Nelly Brekardin

Als Webworker muss man auf unzählige Dinge achten, um eine qualitativ als auch quantitativ hochwertige Internetpräsenz zu erstellen beziehungsweise zu betreiben. Besonderes Augenmerk ist auf die Performance zu legen. Mit den richtigen Techniken kann man erheblich (unnötigen) Traffic einsparen.

Request-Bomben minimieren

Die HTTP/1.1 Spezifikation (von 1999) schlägt vor, maximal 2 Objekte gleichzeitig pro Host zu laden, für heutige Verhältnisse viel zu wenig, da große Seiten wie Yahoo.com (45 Requests), de.wikipedia.org (55 Requests) und eBay.de (50 Request) meist sehr viele Requests benötigen. Eines der besten Lösungen um die HTTP-Requests zu reduzieren ist das kombinieren von CSS- und JavaScript-Dateien. Entsprechende PHP-Tools gibt es da bereits einige, empfehlenswert ist jedoch minify. Es reduziert die Requests jeweils pro Dateityp auf nur einen Einzigen, indem es jeweils CSS und Javascript-Dateien zusammenfügt, unnötige Leerzeichen/Tabs entfernt und gzip-kodiert mit optimalen HTTP-Cache-Headern sendet. So kann bis zu 70% CSS/JS-Brandbreite eingespart werden. Eine entsprechende Dokumentation & Downloadlink erhält man unter code.google.com/p/minify.

CSS-Sprites sind eine beliebte Möglichkeit die Zahl der Grafik-Requests zu reduzieren. Diese Technik kombiniert Hintergrundbilder zu einer Grafik die per background-position entsprechend angezeigt werden. Den entsprechenden Artikel zu diesem Thema findet man unter Dr. Web – CSS-Sprites Quellensammlung.

Eine weitere Möglichkeit sind so genannte „inline images“, das heißt Grafiken werden base64-kodiert direkt in Quellcode geschrieben. Leider überwiegen die Nachteile wie zum Beispiel:

  • Der Internet Explorer bis Version 7 bietet keine Unterstützung an
  • Internet Explorer 8 unterschützt nur Grafiken bis zu einer Größe von 32KB
  • Die Grafiken sind um ⅓ größer als die Originaldateien
  • Caching ist nicht möglich, um diese Möglichkeit ernsthaft zu nutzen.

Die richtigen HTTP-Header senden

Mit ein paar Bytes mehr können durchaus mehrere KiloByte mit Leichtigkeit eingespart werden, indem man die richtigen Cache-HTTP-Header an Client sendet. Für statische Elemente ist der „Expires“-Header wichtig, er signalisiert dem Client wann eine Seitenkomponente (zum Beispiel Grafik, CSS- oder JavaScript) ausläuft. Für dynamische Komponenten ist der „Cache-Control“-Header wichtig, er hilft dem Browser, nur dann Komponenten erneut abzufragen, wenn sich diese geändert haben. Außerdem ist es sinnvoll die meisten Komponenten per gzip zu komprimieren (außer Grafiken). Dazu müssen einfach folgende Zeilen in die .htaccess-Datei eingefügt werden (für Apache-Server), die das Auslaufdatum per HTTP mit senden und HTML, CSS und JavaScript mit gzip komprimieren:

<IfModule mod_expires.c>
# Eine Woche nach Abruf ablaufen
ExpiresActive On
ExpiresByType image/gif "access plus 1 week"
ExpiresByType image/png "access plus 1 week"
ExpiresByType text/css "access plus 1 week"
ExpiresByType text/javascript "access plus 1 week"
ExpiresByType application/javascript "access plus 1 week"
ExpiresByType application/x-javascript "access plus 1 week"
</IfModule>
<FilesMatch "\.(png|gif|jpeg|jpg|ico|js|css|pdf|swf|flv)$">
# Eine Woche gültig
Header set Cache-Control "max-age=604800, public"
</FilesMatch>
<FilesMatch "\.(html|htm)$">
# Eine Stunde gültig
Header set Cache-Control "max-age=3600, must-revalidate"
</FilesMatch>
<IfModule mod_deflate.c>
# GZIP komprimieren
AddOutputFilterByType DEFLATE text/html text/css application/xhtml+xml application/javascript application/x-javascript
# Ausnahme: Grafiken
SetEnvIfNoCase REQUEST_URI \.(?:gif|jpg|jpeg|png|svg)$ no-gzip dont_vary
# Ältere Internet Explorer ausschließen (da keine Unterstützung vorhanden ist)
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
</IfModule>

Alle Zeitangaben sind in Sekunden angegeben.

Stylesheets nach oben, JavaScript nach unten und beides extern

CSS-Stylesheets sollten generell in <head>-Bereich eingebunden werden, da der Browser die Seite dadurch schneller rendern kann. JavaScripts sollten – wenn möglich – vor den schließenden </body> eingebunden werden, dadurch können zuerst das (X)HTML-Markup und die Grafiken geladen werden. Stylesheets und JavaScripts sollten zudem in externe Dateien ausgelagert werden, um besser gecached zu werden.

Grafiken/Bilder komprimieren ohne Verlust

Für Grafiken/Bilder existieren einige Komprimierer, die meisten davon verringern die Dateigröße, ohne die Grafik dabei zu beeinträchtigen. Der effizienteste unter ihnen ist punypng, ein Vergleich zeigt die Unterschiede:

Gracepointafterfive.com)

Grafik-Komprimierer im Vergleich (Quelle: Gracepointafterfive.com)

Yahoo! stellt unter „Best Practices for Speeding Up Your Web Site“ einen detaillierten, englischen Text zur Verfügung, in dem noch einige andere, nicht ganz so wichtige Regeln/Techniken vorgestellt werden, um Ihre Seite zu beschleunigen. Ein empfehlenswertes Firefox-Addon wäre YSlow von Yahoo!, es analysiert die Seite vollautomatisch und gibt Verbesserungsvorschläge aus (Firebug wird für YSlow benötigt). Einige weitere Beiträge zu diesem Thema findet man unter der Rubrik: Geschwindigkeit.

Fazit

Selbst, wenn man nur einige der oben genannten Techniken einsetzt, kann man erheblich (unnötigen) Traffic einsparen. Ein Beispiel anhand von de.wikipedia.org mit zusammengefassten CSS- und JavaScript-Dateien zeigt, wie viel man durchaus einsparen kann:

(tm), (sl), (rs)

Nelly Brekardin

Nelly Brekardin

18 Kommentare

  1. sehr interessanter artikel und schön zusammengefasst. yslow gibt eine menge werte aus an denen man sich orientieren kann. und gerade onlineshops haben doch sehr oft mit den dateigrößen und bilder zu kämpfen. visibility vs. performance.. und ja, für google ist es wichtig, da der nutze ja nen fixen seitenaufbau haben soll. gruß thomas

  2. @piloly: Hast du irgendwo eine Quelle für diese Behauptung?
    Ich würde gern mehr zu dem Thema lesen.
    Mir ist zwar bekannt das Google in seinen Webmastertools seit geraumer Zeit unter Google-Labs ein Tool Website-Leistung zu Verfügung stellt – aber mir ist nicht bekannt dass die Ladegeschwindigkeit sich auf den Pagerank auswirkt.

  3. Sehr schöner Artikel. Danke!

    Die Vorschläge für die .htaccess-Datei werde ich mal mit meiner vorhandenen Einträgen abgleichen. Sieht ähnlich aus, aber es gibt kleinere Abweichungen.

  4. Oh sorry, ich hätte ich auch den letzten Absatz nicht nur überfliegen sollen, bevor ich das mit dem Link poste.

    Das mit Punny ist wirklich interessant, ich habe selber mehrere Testläufe gemacht.

    Ich war verwundert über die Einsparungsmöglichkeiten. Der Tipp ist echt gut und ich bedanke mich!

    Es scheint so zu sein das PNGs mit Transparenz nicht ganz so hohe Einsparungen ergeben. Aber es ist schon gut, wenn man ohne Qualitätsverlust 129,267 bytes anstelle von 146,228 bytes (12%) verwenden kann.

  5. Das max-age muss man nicht nochmal angeben, das wird schon von mod_expires gesetzt. Für das Cache-Control: public reicht dann
    Header merge Cache-Control public

  6. Nochmal, weils so schön war 🙁


    <IfModule mod_headers.c>
    <FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|swf)$">
    Header set Cache-Control "max-age=290304000, public"
    </FilesMatch>
    </IfModule>

    Vielleicht kann das der Admin gleich direkt korrigieren.

Schreibe einen Kommentar

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