Kategorie: Software- & Webentwicklung

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

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 😉

Versionsverwaltungen: SVN vs. Git

Meine ersten Erfahrungen mit Versionsverwaltungssystemen in der Softwareentwicklung habe ich mit CVS gemacht. Da man aber oft Änderungen an mehreren Dateien vornimmt und z.B. auch Revisionen von Binärdateien (z.B. Bilder oder Dokumentation) hilfreich sind, bin ich relativ bald auf den Quasi-Nachfolger SVN (Apache Subversion) umgestiegen.

Versionierung wird zwar wichtiger, wenn man mit mehreren Leuten an einem Projekt arbeitet und/oder die Entwicklung in verschiedene Zweige (“branch”) verläuft, aber auch im kleinen Team kann es nützlich sein, dass man vor geplanten Änderungen nicht jedesmal die kompletten Dateien sichern muss.

In letzter Zeit habe ich nun gleich von verschiedenen Seiten gehört oder gelesen, dass Git eingesetzt wird oder ein Umstieg auf Git geplant ist. Git wurde ursprünglich für die Verwaltung von Linux-Kernel entwickelt, muss also auch in umfangreichen Projekten benutzbar sein. Die Geschwindigkeit von SVN lässt ja manchmal genug Zeit für weitere Kreativität ;-). Git soll spürbar performanter sein. Ein weiterer Unterschied zu Subversion ist, dass Git keinen dezentralen Server benötigt, jeder arbeitet mit einer lokalen Kopie.

Ein englischer Wikipedia-Artikel vergleicht noch weitere Systeme. Antworten, warum Git besser besser sei als vergleichbare Software liefert eine Website. Ich selbst habe aktuell noch keine praktischen Erfahrung mit Git, werde das aber bestimmt bald nachholen. Als Client unter Windows könnte TortoiseGit interessant sein, da ich z.B. mit TortoiseSVN insgesamt gute Erfahrungen gemacht habe.