Video Nicole Sullivan: Wie man schnelle Webseiten baut

Hier ist ein Video von Yahoo's Spezialistin Nicole Sullivan (nicht zu verwechseln mit der gleichnamigen Darstellerin von King of Queens), in dem sie darüber referiert, wie man schnelle Internetseiten anfertigt. Das möchte ich jedem, der es noch nicht kennt, ans Herz legen. Hier sind einige sehr wichtige Techniken beschrieben, die dem Besucher ein besseres "Erlebnis" der Seiten ermöglichen.

Nicole Sullivan: "Design Fast Websites" @ Yahoo! Video

Wer das alles nochmal in Ruhe nachlesen möchte, kann einen 7-stufigen Artikel zu diesem Thema im Yahoo Developer Network finden. » "Best Practices for Speeding Up Your Web Site" sollte man wenigstens mal überflogen haben, um sich einen Entwicklungsstil anzugewöhnen, der das schnelle Laden der Webseiten ermöglicht.

Die im Video und im Artikel genannten Regelsätze basieren auf Testergebnissen und sollten daher ernst genommen werden. Einiges lässt sich relativ unkompliziert und schnell (z.B. CSS in Head, Scripts at Bottom) umsetzen, anderes (z.B. "Nutze ein Content Delivery Network", CDN) ist für viele Websites entweder zu aufwändig oder zu teuer.

Um mittelgroße Websites nach Anwendung aller sonstigen Regeln noch weiter "auf die Sprünge" zu helfen, kann man in Betracht ziehen, ein CDN mit Bordmitteln nachzubilden. Hierzu nutzt man die Fähigkeit des Webbrowsers, von verschiedenen Quellen gleichzeitig laden zu können.

So könnte man z.B. die Content-Bilder von einer Subdomain bilder.meinedomain.de laden, CSS-Dateien und Layoutbilder von style.meinedomain.de und Scripte von scripts.meinedomain.de. Beim Aufruf der Seite lädt der Browser die Bestandteile des Contents von mehreren Subdomains gleichzeitig, was in vielen Fällen zu einer Beschleunigung der Anzeige der Seiten führt.

Für das Laden von Inhaltsbildern auf stark frequentierten Seiten kannst Du auch die Auslagerung auf einen externen Bilderdienst (nicht unbedingt Flickr, sondern eher photobucket.com) beschleunigen bzw. den eigenen Webserver entlasten.

Messlatte für alle Verbesserungen sollte das Tool YSlow, das sich als Plugin für Firebug in der Browserleiste verankert, herhalten. Dieses Tool von Yahoo prüft genau die Dinge ab, die im Video und im Artikel erwähnt werden und gibt einem hilfreiche Zusammenfassungen und eine Endnote.

Neben den Profile-Möglichkeiten durch Firebug selbst und z.B. auch Safari kann man hier den größten Verkehrssündern auf die Schliche kommen und beseitigen.

Hierbei gilt: kümmere Dich zuerst um die dicken Fische. Wenn z.B. das Laden der CSS-Dateien ein Verbesserungspotential von 5% hat, das Laden der Content-Bilder jedoch 25%, dann kümmere Dich zuerst um die Content-Bilder. Gehe also vom Groben ins Feine.

Wäge die Beschleunigungsmethoden aber mit Verstand ab. Wenn eine Methode Deine Seite in der Funktionalität stört, musst Du sie nicht unbedingt einsetzen. Wäge einzeln ab, was (Dir) wichtiger ist.

Yslow ist ein super-nützliches Tool, denn unter anderem erzählt es einem nicht nur, daß die Content-Bilder zu groß sind, sondern bietet konkret Hilfe an. Unter dem Tab "Tools" innerhalb von Yslow findet sich unter einigen anderen, sehr nützlichen Tools eines mit dem Namen "smush.it", welches auf Knopfdruck alle Bilder der Seite verlustfrei optimiert. Das Ergebnis von smush.it kann man als Tabelle anschauen und sich die optimierten Bilder einzeln oder als ZIP (wobei die Ordnerstruktur der Bildpfade des Servers erhalten bleibt) runterziehen.

Selbst bei Speicherung aller Bilder mit "für Web optimieren" sind hier teilweise bis zu 45% Verbesserungspotential verborgen. Dieselben Bilder in derselben Qualität aber mit weniger Dateigröße.

Yslow findest Du im Firefox-Addon Verzeichnis bei Mozilla. Denke daran, erst Firebug zu installieren, dann Yslow, da Yslow sich als Plugin von Firebug einklinkt.

Viel Erfolg beim Beschleunigen Deiner Webseiten!