4,25:
"Es ist schon ein Jammer", sagte einer der Wichtel, "dass unsere Internet-Leitung so langsam ist! Da können wir die Geschenke gar nicht so schnell bestellen, wie wir eigentlich fertig werden müssten. Und heute ist schon der X.te Dezember!" Diese Situation ärgert nicht nur unseren Wichtel, sondern gelegentlich auch uns selbst. Das Zauberwort heißt: Performance-Optimierung. Was Performance-Optimierung bedeutet und was es vielleicht nicht ist möchte dieses Türchen beschreiben.
Wir beschäftigen uns dabei nicht mit der Optimierung der Infrastruktur auf der unsere Webseite betrieben wird und wir geben dabei auch keine 6-stelligen Beträge für SEO-Agenturen aus, denn die essentiellen Regeln lassen sich kostenlos nachlesen.
Dieses Türchen möchte sich vielmehr mit den Maßnahmen beschäftigen, die jeder von uns auch auf einem Shared-Hosting-Account ergreifen kann um seine Webseite performanter und damit nutzbarer zu gestalten.
1. Tools
Wie gehe ich nun vor, wenn ich meine Webseite optimieren möchte? Nun, hier gibt es bereits eine Reihe von Werkzeugen, die uns direkt bei der Entwicklung unterstützen. Es ist natürlich auch jederzeit eine nachgelagerte Optimierung möglich, es empfiehlt sich jedoch schon während der Entwicklung nach den Empfehlungen zu handeln.
Hier sind Websiteoptimization.com und die Firefox-AddOns YSlow und Page Speed zu nennen. Diese zeigen nach einer kurzen Analyse der Seite einen Report mit Empfehlungen und Hinweisen an, die gleichzeitig zum Wissensaufbau genutzt werden können. Das Tool auf Websiteoptimization.com gibt es bereits einige Jahre, lässt jedoch nur für über das Internet erreichbare Seiten nutzen. Die AddOns sind auch für Seiten auf einer lokalen Entwicklungsumgebung nutzbar.
2. YSlow + PageSpeed für die lokale Entwicklung
Da Internet-Verbindungen in aller Regel nicht mit lokalen Netzen hinsichtlich Netzwerk-Durchsatz konkrurrieren können, ist eine der Grundregeln der Optimierung auch heute noch gültig: kleinere Datenmengen lassen sich schneller übertragen. Sicher sind die ISP-Verbindungen heute um ein vielfaches schneller, doch mit der steigenden Popularität von mobilen Endgeräten erhält dieser Aspekt sein Revival.
Hierunter fallen die Zusammenfassung und Komprimierung von zusätzlich eingebundenen Dateien (z.B. JavaScript und CSS) sowie des ausgelieferten HTMLs selbst und die Nutzung des Browser-Caches.
Um Caching auf für dynamische Umgebungen wie einem CMS nutzen zu können, ist es möglich, die Erkenntnis auszunutzen, dass ein Browser die Cache-Schlüssel über die Domain bzw. die URL errechnet. Damit ist es möglich, eine URL
zu
umzuschreiben. Die Versionsnummer "12" kann dabei aus der Dokumenten-Version oder einem anderen eindeutigen Versions-Kenner errechnet werden. Die Link-Generierung muss dabei so angepasst werden, dass die vom Redakteur zuletzt eingefügte Version auch bei der Generierung der Bild-URL berücksichtigt wird.
Damit der im CMS genutzte Bild-Auslieferungs-Mechanismus auch weiter funktioniert, kann eine versionierte URL per
umgeschrieben werden. Da nun sichergestellt ist, dass eine eindeutige Version des Bildes auch mit einer eindeutigen Version in der URL versehen ist, kann das Bild christmas.jpg mit aggressiven Cache-Headern ausgeliefert werden:
3. mod_pagespeed
Seit einigen Wochen ist das Apache-Modul mod_pagespeed verfügbar, das diverse Onsite-Optimierungen bereits (nahezu) selbständig ausführen kann. Das Modul ist für die Distributionen Debian, Ubuntu, Fedora und CentOS erhältlich und lässt sich komplett oder teilweise deaktivieren.
Als Nachteil erweist sich, dass für die Installation root-Rechte benötigt werden. Damit wird es zunächst nur denjenigen vorbehalten sein, die selbst für die Server-Administration verantwortlich sind. Ob und wann das Modul Einzug bei Standard-Hostern hält ist offen.
Das Moduls nimmt dabei die erzeugte Seite entgegen, analysiert diese nach den konfigurierbaren Pattern und optimiert den HTML-Quellcode. Dazu stellt es zusätzliche HTTP-Resourcen zur Verfügung, die optimierte Inhalte wie ausgelagerte CSS- oder JavaScript-Dateien ausliefern. Zusätzlich dazu hält
das Modul einen internen Cache, damit bereits erzeugte Inhalte schneller ausgeliefert werden können.
Auf unserer Testseite wurden unkomprimierte CSS-Dateien ausgeliefert, Bilder wurden nicht mit Cache-Headern versehen und inline styles exzessive einsetzt. Nach aktivierung von mod_pagespeed wurden sowohl die CSS-Dateien komprimiert und mit einer eindeutigen, cachebaren URL versehen als auch die Bild-URL automatisch so manipuliert, dass eine sehr lange Cache-Zeit möglich ist:
mod_pagespeed erlaubt zudem Style-Blöcke ab einer gewissen Größe automatisch in eine eigene, virtuelle Datei auszulagern und die entsprechenden Stellen mit CSS-Klassen umzuschreiben. Dieser Mechanismus ist ebenfalls für JavaScript-Blöcke konfigurierbar. Leider funktionierte dies bei einem Test selbst mit minimalem Threshold für ModPageSpeedCssInlineMaxBytes nicht - schade.
Summa summarum hat das Modul großes Potential und wir verfolgen gespannt die Weiterentwicklung.
4. Resourcen
Das Thema Website-Optimierung ist in den letzten beiden Jahren sehr populär geworden. Dem entsprechend werden Entwickler und Webseiten-Betreiber mit guten und ausführlichen Resourcen versorgt. Diese umfassen nicht nur die reine Onsite-Optimierung sondern auch die Auslegung der Infrastruktur und die Optimierung einer Seite aus Sicht der Suchmaschine:
- Websiteoptimization.com
- Yahoo!-Blog
- Google-Webmaster-Central
- Matt Cutts' Blog
- Andrew B. King - Website Optimization
- Stackoverflow
- Duane Wessels - Web Caching
Wir beschäftigen uns dabei nicht mit der Optimierung der Infrastruktur auf der unsere Webseite betrieben wird und wir geben dabei auch keine 6-stelligen Beträge für SEO-Agenturen aus, denn die essentiellen Regeln lassen sich kostenlos nachlesen.
Dieses Türchen möchte sich vielmehr mit den Maßnahmen beschäftigen, die jeder von uns auch auf einem Shared-Hosting-Account ergreifen kann um seine Webseite performanter und damit nutzbarer zu gestalten.
1. Tools
Wie gehe ich nun vor, wenn ich meine Webseite optimieren möchte? Nun, hier gibt es bereits eine Reihe von Werkzeugen, die uns direkt bei der Entwicklung unterstützen. Es ist natürlich auch jederzeit eine nachgelagerte Optimierung möglich, es empfiehlt sich jedoch schon während der Entwicklung nach den Empfehlungen zu handeln.
Hier sind Websiteoptimization.com und die Firefox-AddOns YSlow und Page Speed zu nennen. Diese zeigen nach einer kurzen Analyse der Seite einen Report mit Empfehlungen und Hinweisen an, die gleichzeitig zum Wissensaufbau genutzt werden können. Das Tool auf Websiteoptimization.com gibt es bereits einige Jahre, lässt jedoch nur für über das Internet erreichbare Seiten nutzen. Die AddOns sind auch für Seiten auf einer lokalen Entwicklungsumgebung nutzbar.
2. YSlow + PageSpeed für die lokale Entwicklung
Da Internet-Verbindungen in aller Regel nicht mit lokalen Netzen hinsichtlich Netzwerk-Durchsatz konkrurrieren können, ist eine der Grundregeln der Optimierung auch heute noch gültig: kleinere Datenmengen lassen sich schneller übertragen. Sicher sind die ISP-Verbindungen heute um ein vielfaches schneller, doch mit der steigenden Popularität von mobilen Endgeräten erhält dieser Aspekt sein Revival.
Hierunter fallen die Zusammenfassung und Komprimierung von zusätzlich eingebundenen Dateien (z.B. JavaScript und CSS) sowie des ausgelieferten HTMLs selbst und die Nutzung des Browser-Caches.
Um Caching auf für dynamische Umgebungen wie einem CMS nutzen zu können, ist es möglich, die Erkenntnis auszunutzen, dass ein Browser die Cache-Schlüssel über die Domain bzw. die URL errechnet. Damit ist es möglich, eine URL
Code:
http://example.com/cms-images/christmas.jpg
zu
Code:
http://example.com/cms-images/version/12/christmas.jpg
umzuschreiben. Die Versionsnummer "12" kann dabei aus der Dokumenten-Version oder einem anderen eindeutigen Versions-Kenner errechnet werden. Die Link-Generierung muss dabei so angepasst werden, dass die vom Redakteur zuletzt eingefügte Version auch bei der Generierung der Bild-URL berücksichtigt wird.
Damit der im CMS genutzte Bild-Auslieferungs-Mechanismus auch weiter funktioniert, kann eine versionierte URL per
Code:
RewriteRule ^/cms-images/version/([0-9]+)/(.*) /cms-images/$2
umgeschrieben werden. Da nun sichergestellt ist, dass eine eindeutige Version des Bildes auch mit einer eindeutigen Version in der URL versehen ist, kann das Bild christmas.jpg mit aggressiven Cache-Headern ausgeliefert werden:
Code:
Last-Modified Mon, 25 Oct 2010 14:54:04 GMT Cache-Control public; max-age=31536000 Expires Sat, 10 Dec 2011 11:58:47 GMT Content-Type image/jpeg
3. mod_pagespeed
Seit einigen Wochen ist das Apache-Modul mod_pagespeed verfügbar, das diverse Onsite-Optimierungen bereits (nahezu) selbständig ausführen kann. Das Modul ist für die Distributionen Debian, Ubuntu, Fedora und CentOS erhältlich und lässt sich komplett oder teilweise deaktivieren.
Als Nachteil erweist sich, dass für die Installation root-Rechte benötigt werden. Damit wird es zunächst nur denjenigen vorbehalten sein, die selbst für die Server-Administration verantwortlich sind. Ob und wann das Modul Einzug bei Standard-Hostern hält ist offen.
Das Moduls nimmt dabei die erzeugte Seite entgegen, analysiert diese nach den konfigurierbaren Pattern und optimiert den HTML-Quellcode. Dazu stellt es zusätzliche HTTP-Resourcen zur Verfügung, die optimierte Inhalte wie ausgelagerte CSS- oder JavaScript-Dateien ausliefern. Zusätzlich dazu hält
das Modul einen internen Cache, damit bereits erzeugte Inhalte schneller ausgeliefert werden können.
Auf unserer Testseite wurden unkomprimierte CSS-Dateien ausgeliefert, Bilder wurden nicht mit Cache-Headern versehen und inline styles exzessive einsetzt. Nach aktivierung von mod_pagespeed wurden sowohl die CSS-Dateien komprimiert und mit einer eindeutigen, cachebaren URL versehen als auch die Bild-URL automatisch so manipuliert, dass eine sehr lange Cache-Zeit möglich ist:
mod_pagespeed erlaubt zudem Style-Blöcke ab einer gewissen Größe automatisch in eine eigene, virtuelle Datei auszulagern und die entsprechenden Stellen mit CSS-Klassen umzuschreiben. Dieser Mechanismus ist ebenfalls für JavaScript-Blöcke konfigurierbar. Leider funktionierte dies bei einem Test selbst mit minimalem Threshold für ModPageSpeedCssInlineMaxBytes nicht - schade.
Summa summarum hat das Modul großes Potential und wir verfolgen gespannt die Weiterentwicklung.
4. Resourcen
Das Thema Website-Optimierung ist in den letzten beiden Jahren sehr populär geworden. Dem entsprechend werden Entwickler und Webseiten-Betreiber mit guten und ausführlichen Resourcen versorgt. Diese umfassen nicht nur die reine Onsite-Optimierung sondern auch die Auslegung der Infrastruktur und die Optimierung einer Seite aus Sicht der Suchmaschine:
- Websiteoptimization.com
- Yahoo!-Blog
- Google-Webmaster-Central
- Matt Cutts' Blog
- Andrew B. King - Website Optimization
- Stackoverflow
- Duane Wessels - Web Caching