Speed up: Optimierungstipps für ihre Seiten

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)

Sortiert nach:   neueste | älteste | beste Bewertung
Mathias Bank
Gast
6 Jahre 5 Monate her

die direktive „Header set…“ geht nur, wenn das Modul Headers installiert und aktiviert ist. Deshalb sollte der Code so aussehen:

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

Mathias Bank
Gast
6 Jahre 5 Monate her

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.

dikna
Gast
dikna
6 Jahre 5 Monate her

Danke für diesen informativen Artikel! Selten soviel neues in so kurzer Zeit gelesen.

Martin
Gast
Martin
6 Jahre 5 Monate her

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

deweso
Gast
6 Jahre 5 Monate her

hmmm kommt mir doch in vielen Punkten bekannt vor:
http://developer.yahoo.com/performance/rules.html

das Buch kann man auch empfehlen, muss aber nicht sein.

Das mit den PNGs werde ich mir mal näher ansehen, mal sehen wie viel mehr das bringt.

Frohe Weihnachten an alle. :-)

deweso
Gast
6 Jahre 5 Monate her

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.

Dieter
Gast
6 Jahre 5 Monate her

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.

NetNexus
Gast
6 Jahre 4 Monate her

Sehr schöner Artikel. Wer sich mit der Optimierung von Ladezeiten für Webseiten beschäftigt, sollte sich unbedingt folgende Addons für Firefox (bzw. das Firebug-Addon) ansehen:

Pagespeed von Google: http://code.google.com/intl/de/speed/page-speed/

YSlow von Yahoo: https://developer.yahoo.com/yslow/

piloly
Gast
6 Jahre 4 Monate her

Erwähnenswert wäre auch, dass Google Ladegeschwindigkeit von Websiten als Rankingfaktor sieht. Somit sollte man sich wirklich um die Performance seiner Seiten kümmern.

trackback

[…] Speed up: Optimierungstipps für ihre Seiten | Geschwindigkeit, Server, Webmaster | Dr. Web Magazin Hochinteressanter Artikel, dessen Inhalt ich gleich in meinem Blog ausprobiert habe. Klappt prima. Noch einen Tick schneller… (tags: Optimierung htaccess websites bloggen technik) Artikel verteilen: Twitter, de.licio.us, Google, Wikio Antwort abbrechen […]

trackback

[…] Speed up: Optimierungstipps für ihre Seiten – gesammelt von Nelly Brekardin. […]

trackback

[…] habe mich auf die Webmediziner von Dr.Web eingelassen und es heute mal ausprobiert. Super Cache, Widget Cache und WP-Minify abgeschaltet und dafür nur die […]

trackback

[…] dem Artikel “Speed Up: Optimierungstipps für Ihre Seiten” fasst Nelly Brekardin bei Dr. Web einge Tipps für die Optimierung von Websites zusammen. […]

gedit
Gast
6 Jahre 4 Monate her

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

Daniel
Gast
6 Jahre 2 Monate her

Hi,

ich habe den Code einfach einmal so in meine .htaccess-Datei eingefügt, aber dann bekomme ich auf dem kompletten Server eine 500er Meldung. Was mache ich falsch?

Thomas
Gast
6 Jahre 2 Monate her

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

trackback

[…] dem Artikel “Speed Up: Optimierungstipps für Ihre Seiten” fasst Nelly Brekardin bei Dr. Web einge Tipps für die Optimierung von Websites […]

trackback

[…] habe mich auf die Webmediziner von Dr.Web eingelassen und es heute mal ausprobiert. Super Cache, Widget Cache und WP-Minify abgeschaltet und dafür nur die […]

wpDiscuz

Mit der Nutzung unseres Angebots erklärst du dich damit einverstanden, dass wir Cookies verwenden. Weitere Informationen

Wir verwenden Cookies, um Inhalte und Anzeigen zu personalisieren, Funktionen für soziale Medien anzubieten und die Zugriffe auf unsere Website zu analysieren. Dadurch geben wir nicht personenbezogene Informationen zur Nutzung unserer Website an unsere Partner für soziale Medien, Werbung und Analysen weiter. Nähere Informationen findest du in unserer Datenschutzerklärung. Durch die Weiternutzung unserer Website (oder das ausdrückliche Klicken auf "Einverstanden") gehen wir davon aus, dass du mit der Verwendung von Cookies einverstanden bist.

Schließen