Buch: High Performance Websites

Der Yahoo-Mitarbeiter Steve Souders beschreibt in seinem Buch „High Performance Websites“ 14 grundlegene Regeln für Performance-Verbesserungen von Websites. Dabei werden auch die größten US-Websites im Jahr 2008 verglichen.

Sehr kurze Zusammenfassung:

  • Nicht benötige Inhalte und Resourcen entfernen
  • Resourcen zusammen fassen und komprimieren
  • Elemente zur „richtigen Zeit“ laden (CSS im Header, Javascript im Footer)
  • Caching erlauben

Das Buch ist zwar relativ dünn, in dem Thema aber doch ausführlicher, als meine wenigen Punkte. Interessant fande ich, dass manche Punkte von den Website-Besuchern abhängen: Z.B. wie oft wird ein Auftritt von einem Benutzer aufgerufen und welche bzw. wie viele Seiten werden geladen?

Zu dem Buch gibt es auch eine Fortsetzung, „Even Faster Websites“.

3D-Carousel, CoverFlow

Mir gefallen viele CoverFlow-Elemente auf Websites. Ich habe ein paar Javascript-Scripte gesammelt. Oft ein Javascript-Framework, z.B. jQuery, mootools, eingesetzt. Folgende Scripte kamen in meine engere Auswahl:

Die Alternativen unterscheiden sich u.a. in der Darstellung und der Lizenzierung. Ich habe mich für Cloud Carousel entscheiden, einem jQuery-Plugin. Letzte Woche aber ich das Plugin für die Gemeindebriefe eingebaut. Screenshot:

Auf der Webseite kann man – mit aktivierten Javascript – die Animation begutachten. Interessant finde ich, dass viele Browser das HTML5-Canvas-Element (Spiegelung der Elemente) darstellen können. Im Vergleich zu ähnlichen Flash-Elementen ist die Animation noch nicht ganz so „rund“. Das Cloud Carousel ist in eine TYPO3-Extension integriert und lässt sich per Typoscript konfigurieren. So konnte ich bereits die Darstellung für das iPhone anpassen.

Performance-Optimierung einer TYPO3-Seite – ein Zwischenstand

Ich bin wieder einen Schritt weiter in der Performance-Optimierung einer TYPO3-Seite.

Am meisten genutzt hat dabei die Aktivierung von Expires-Header, die den Browser anleiten bestimmte Elemente (Bilder, Javascript, usw.) zu Cachen. Falls nicht bereits für den Webserver global aktiviert kann man die Einstellungen in der .htaccess-Datei vornehmen. Ein Beispiel gibt es auf snipplr.com.

Weiterhin gilt es unnötigen Code zu entfernen. Das gilt für CSS, Javascript, aber auch nicht benötigte TYPO3-Extension sollte man deaktivieren.

Die Website sollte möglichst aus Cache-baren Elementen bestehen, wenn möglich sollte man in TYPO3 auf USER_INT, COA_INT usw. verzichten.

Für Cache-bare Resourcen wie Bilder kann man eine „statische“ Subdomain einrichten, etwa static.meinedomain.com. Für diese Anfragen werden keine Cookie-Daten mitgesendet.

Durch diese Punkte hat sich das Ergebnis in YSlow, einer Firefox-Erweiterung, von Note D oder E auf B verbessert.

Nun habe ich die TYPO3-Extension scriptmerger aktiviert. Je nach Konfiguration muss vor der Aktivierung die .htaccess-Datei erneut erweitert werden (siehe Doku). scriptmerger kann jeweils alle Javascript und alle CSS-Dateien verkleinern, zusammenfassen und komprimieren. Unter Umständen muss man einige Funktionen deaktivieren, wenn diese nicht vom Server unterstützt werden oder den Code anpassen. Mehr zu scriptmerger gibt es z.B. auf typo3blogger.de.
Die Ergänzung verbessert die YSlow-Note auf A. Die Methode musste aber auf vereinzelten größeren Seiten abgeschwächt werden, da sonst die PHP-Speichergrenze erreicht wird (PHP-Fehler, Script-Abbruch).

Dies muss jedoch nicht das Ende der Performance-Verbesserung sein. Hier mal ein paar mögliche weitere Schritte:

  • Quelltext-Optimierung
  • Sprites einsetzen: mehrere Hintergrund-Grafiken zusammenfassen
  • Auslieferung von statischen Webseiten
  • CDN verwenden
  • MySQL-/Datenbank-Optimierung

Symbolische Links unter Windows Vista & 7

Viele Jahr(zehnt)e musste man darauf warten 😉 : Unter Windows ab Version Vista kann man nun über die Konsole (cmd.exe) einen symbolischen Link erzeugen mit dem Kommando mklink. Siehe dazu z.B. den Artikel auf windows7home.net.

Was sich bei den *nix-System schon lange bewährt hat geht nun auch mit einiger Verzögerung auf den aktuellen Windows-Versionen. Vorher konnte man mittels zusätzlicher Software-Tools die symbolischen Links nachbilden. So weit ich mich erinnern kann, hatte das aber nicht zufrieden stellend funktioniert.

Einfacher Webauftritt: CMS vs. PHP

Früher wurde die Benutzung eines (Web-)Content Management Systems empfohlen, wenn die Website umfangreich ist, viele verschiedene Leute an der Pflege beteiligt sind oder mit vielen Inhaltsänderungen zu rechnen ist.

Heute hatten wir im Büro eine kurze Diskussion, ob ein vglw. kleiner Webauftritt schneller mit mehreren PHP-Dateien oder mit Hilfe eines CMS realisiert werden kann. Die Website wird aus ca. 10 Seiten, einigen Formularen, Suche, Navigationsmenü bestehen. Wichtig war in diesem Fall allein, mit welcher Vorgehensweise man die Webseiten schneller umsetzen kann. In beiden Fällen ist die Entwicklung der HTML-Vorlage incl. CSS sowie einigen Javascript-Features nötig.

Vorteile für die Version allein basierend auf PHP-Dateien:

  • ohne Suche ist keine Datenbank nötig
  • abgesehen von der Suche, die dann per PHPDig realisiert würde, ist kein System spezifisches Wissen erforderlich (PHP ausgenommen)
  • keine Installation und vglw. wenig Konfiguration
  • tendenziell bessere Performance, weniger Server-Anforderungen, weil kein umfangreiches Software-System geladen werden muss.

Ich persönlich bin mittlerweile der Meinung, dass man mit entsprechender Erfahrung mit einem CMS auch für einen kleineren Webauftritt schneller am Ziel ist:

Viele Redaktionssysteme enthalten bereits viele nützliche Funktionen, einige Fehlerquellen können („automatisch“) vermieden werden, man hat Zugriff auf Erweiterungen und kann bewährte (Teil-)Lösungen einsetzen.

Ein CMS hat natürlich auch nach dem Going Live mehr Vorteile, wenn die ersten Änderungen und Erweiterungswünsche eintreffen. Dies war aber in diesem Fall – ausnahmsweise – zu vernachlässigen. Mit bestehenden, bewährten Framworks und Systemen kann man insgesamt die Qualität steigern und sich mehr auf die Entwicklung von individuellen Bestandteilen konzentrieren.

Für den erwähnten spezifischen Fall würde ich derzeit TYPO3 einsetzen. Wenn ich es richtig einschätze, gab es bei uns heute für beide Konzepte etwa gleich viel Anhänger. Mich würde mal ein konkreter „Wettkampf“ mit gleichzeitig begonnenen Arbeiten interessieren. Aber das möchte derzeit wohl niemand sponsern 😉