Webseite optimieren – Geschwindigkeit

1 Eigene Internetanbindung

Du brauchst Dich natürlich nicht zu wundern, dass eine Webseite bzgl. Geschwindigkeit krankt, wenn ihr mit einem langsamen Internet-Zugang auf eine moderne Seite, die schnell mal > 300 kb / Webseite groß sein kann, zugreift. Oder aber Du greift per Wlan mit schlechter Verbindung (Stichwort: hohe Latenzzeiten) oder per UMTS (Stichwort: Latenzzeiten und Netznutzung durch Dritte) darauf zu.

Ich soll nicht solche NOOB-Lösungen posten? Du glaubst gar nicht was man manchmal aus den Augen verliert. Eigentlich müsste ich hier auch noch auf Browser und Browsercache eingehen… bevor wir zur Webseite selbst kommen, aber mein Tipp: Unabhänigen Service nutzen um die Webseite zu testen. Ich nehme augenblicklich gerne Site24 gerne. Das Ganze sieht dann so aus, aber ist halt aus den USA und damit etwas anfällig (noch keine perfekte Lösung gefunden:

2 Webspace und DNS- bzw. Domainanbieter

2.1 Ist Webhoster und Domain Name Registrar das selbe Unternehmen?

Die erste Anfrage beim Aufruf einer Webseite ist die Auflösung der Domain in eine IP-Adresse. In Deutschland ist es üblich, dass Webhoster und Domain-Registrar ein und das selbe Unternehmen sind, so dass hier nur bei großen Problemen des Webhosters Engpässe bzgl. Geschwindigkeit entstehen.

Ich und viele andere Blogger haben jedoch Domain und Webspace getrennt, so das hier ein erstes Problemfeld entstehen kann bzw. die erste Möglichkeit gegeben ist, die Webseite optimieren zu können.

• Die flexible Lösung ist beim DNS-Record den DNS-Server des Webhosters anzugeben, so dass ein Wechsel des Servers bzw. eine wechselnde IP nicht stört.
• Die schnellste bzw. bzgl. Geschwindigkeit optimierte Möglichkeit ist die Angabe der IP des Webservers, so dass es keine “Nachfragen” gibt.

2.2 Was für einen Webspace nutzt Du?

Jetzt kommen wir zu einen Schlüsselfaktor in Sachen Performance der Webseite. Kein Rechenzentrum ist wie das andere und kein Server wie der andere. Noch dazu kommt, dass ein Webserver schnell arbeitet und der nächste langsam, obwohl sie völlig identisch sind. Wieso? Weil auf dem einen Webserver Kunden liegen, die richtig Last verursachen!

Wer kostenlosen Websapce nutzt oder beim “Bauern” hostet, der braucht sich über Webseite optimieren zu machen (ne Thomas ;-), d.h. besorg Dir einen Webspace Deinen Ansprüchen und Zielen entsprechend. Es muss nicht ein eigener Root-Server sein, aber auch nicht das kleine Hosting-Paket beim Anbieter Deiner Mutter! Faktoren, die zu bedenken sind:

• … wie viele weitere Kunden liegen auf dem LAMP
• … was für Kunden (kleine private Seiten, Blogs, Firmenseiten, Foren, Webshops, illegaler Warez-Scheiß vielleicht…) liegen auf dem Webserver. Und merke Dir: Hast Du Caschy auf dem Server siehst Du alt aus ;-)
• Größe des Webspace und Datenbanken? Hast Du ein WordPress Blog, dann brauchst Du (eine) Datenbank(en) und diese belasten bei Root-Servern vor allem den Arbeitsspeicher und danach die CPU. Größe des Webspace ist nachrangig.

Am besten sind Angebote, die man testen kann. Ich wäre längst bei Host Europe, wenn ich deren Angebote testen könnte. Aber ohne Test…

3 Die Webseite optimieren

Ja, ich komme jetzt zum Kern des Artikels ;-)… Wenn man vom Webseite optimieren spricht, dann geht es in der Hauptsache darum Fehler zu finden. Die Themenfelder sind

• Datenbank
• WordPress Theme / Webseiten Design
• WordPress Plugins / zusätzliche Skripte

3.1 Datenbank aufräumen und Datenbank optimieren

Leider kümmern sich die meisten Plugin-Autoren kaum darum, dass bei der Deaktivierung auch die Datenbank von den Altlasten des Plugins bereinigt wird. Auf diese Art und Weise wird die WordPress-Datenbank mit jedem Plugin weiter “voll gemüllt”.

Tipp von Frank Bültge per Email: Die beste Möglichkeit sich von den Plugin-Resten zu trennen, ist das Öffnen der aktuellen und einer frisch installierten WordPress-Datenbank mittels PhpMyAdmin und die Einträge Tabelle für Tabelle zu vergleichen und ggf. zu löschen. VORSICHT: Ein Backup der Datenbank machen und die installierten Plugins im Hinterkopf behalten!

Ist die Datenbank (wieder) schlank, dann sollte man die Datenbank “optimieren” und dann “überprüfen” (auch mittels PhpMyAdmin).  Man glaubt gar nicht was eine solche Optimierung für unser Anliegen die Webseite optimieren zu wollen bringen kann, vor allem wenn oft Daten gelöscht werden.

Die Anzahl der Anfragen an die Datenbank (Queries) kann man sich unter WordPress einfach anzeigen lassen:

<?php printf(__(‚%d queries. %s seconds.‘, ‚kubrick‘), get_num_queries(), timer_stop(0, 3)); ?>

Die Anzahl der Anfragen variiert stark mit der Anzahl der installierten Plugins und davon welche Seite (Single, Home, Archiv etc.) man gerade sieht. Dazu mehr beim Thema WordPress Plugins.

3.2 Tipps für schnelle WordPress Themes

Reduzierung ist beim Webseiten optimieren das Stichwort. Grafiken, CSS-Dateien und Skripte sind hier im Fokus.

3.2.1 Das Aufteilen von CSS-Dateien ist für den Webdesigner eine gute Sache, aber für den Webserver sind mehr als zwei CSS-Dateien eine zusätzliche Aufgabe. Auch Plugins sind sehr fleißig beim einbinden weiterer CSS-Dateien, so dass man sich ggf. besser von dem ein oder anderen Plugin trennt.

Tipp: Die CSS-Dateien sollten im <Head> an erster Stelle kommen, so dass der Browser beim Rendern der Weseite, diese sofort zur Verfügung hat.

3.2.2 JavaScripte sind ein Alptraum! Vor allem unter WordPress, weil WordPress u.a. die Thickbox selbst einbindet, obwohl sie nur im Backend gebraucht wird. D.h. WordPress lädt standmäßig Skripte aus den wp-include, die ich kaum brauche, weil ich den Live Writer zum Schreiben nutze, und die meine Leser überhaupt nicht brauchen!

Diese Vorgehen hat seine Vorteile und Nachteile. Zum Thema JavaScript-Bibliotheken hat Frank aktuell etwas geschrieben.

Die Thickbox und JQuery habe bei meinem Anliegen die Webseite optimieren zu wollen nicht los bekommen :-( darüber hinaus bin ich bis auf Google Analytics und zwei kleine JS-Scripte aber nun frei von dem Unsinn. Wie ich das gemacht habe?

Tipp: YSlow von Yahoo, welches selbst ein Addon, des SEHR empfehlenswerten Firefox Extension Firebug ist, zeigt übersichtlich, welche Skripte geladen werden und gibt darüber hinaus Tipps, was man tun sollte um die Webseite zu optimieren.

Tipp bzgl. JavaScript: Alle JS-Skripte sollten in den Footer gepackt werden, so dass sie zu letzt geladen werden, so wird die Webseite schneller angezeigt.

3.2.3 Große und / oder viele Grafiken sind auch ein Hemmnis auf dem Weg zur schnellen Webseite. Wer übersichtlich sehen will, was geladen wird, kann den Firebug nehmen oder sich meinen neusten Fund ansehen Pingdom. URL der Webseite / Unterseite eingeben und ab dafür:

Das Interessante ist der Zeitverlauf, d.h wie schnell WordPress die Seite aus gibt (u.a. Stichwort Datenbank) und welche Elemente wie schnell und parallel geladen werden.

Fazit bzg. Webseite optimieren: Ich habe auf diese Art und Weise 12 Background-Images (!) gefunden, die völlig umsonst seit Monaten mit geladen wurden. Diese waren in der CSS definiert und nicht sichtbar :-( Drei davon waren noch nicht mal mehr im Ordner “Images”, also gab es jeweils Timeouts. Bye the way, auch die Wirkung von JS-Scrips kann man Pingdom gut sehen.

Allgemein sollte man beim Erstellen / Bearbeiten und Einbinden von Grafiken bzgl. Optimierung auf ein paar Dinge achten, so dass man sich oftmals das Webseite optimieren sparen kann!!

Erstellen von Grafiken

• JPG nutzen bei vielen Farben, wie Bilder, Videos und Karten
• GIF oder besser noch PNG nutzen bei Flächen mit wenigen Farben, wie Texte, Webseiten, Splashscreens und GUIs

Bearbeiten von Grafiken

• Größe des Bildes sollte möglichst dem späten angezeigten Format im Artikel entsprechen.
• Grafikprogramme nutzen, die Webprofile / Webfarbschemata unterstützen, so dass man Bilder für die Darstellung in Webseiten optimiert vorbereitet (Stichwort: Anzahl der Farben)

Einbinden von Grafiken in Artikel

• Es ist immer wieder schön “Klicken” zu können, aber es muss nicht jedes Bild verlinkt sein und auch nicht jedes Bild per Lightbox und Freunden geöffnet werden können. Ich habe mich von dieser Spielerei vorerst verabschiedet.

WordPress Hack

Eine Webseite optimieren zu dürfen ist oftmals grässlich, aber wer die bis hier vorgeschlagenen Maßnahmen bedacht und teils umgesetzt hat, ist schon ein ganzes Stück weiter. Es gibt aber noch mehr!

Seit WordPress 2.5 kann man WP nicht mehr sagen, dass es alle Daten komprimiert verschicken soll (Stichwort: Gzip). Mittels dieses kleinen WP-Hacks man das System doch überreden möglichst alle Dateien “gzip” zu versenden:

In der index.php (im Root-Verzeichnis und nicht im Theme!) muss dieser Teil:

define(’WP_USE_THEMES’, true);

Durch dieses ausgetauscht werden:

ini_set(’session.use_trans_sid’, false);
if (substr_count($_SERVER[‚HTTP_ACCEPT_ENCODING‘], ‘gzip’)) ob_start(”ob_gzhandler”); else ob_start();

define(’WP_USE_THEMES’, true);

Summa Summarum

Cooles Wort. Wollte ich immer schon mal verwenden :-) Egal, Webseiten optimieren ist kein Voodoo, aber meiner Meinung nach echt eine Kunst!

Was sind Deine Erfahrungen? Woran kann es liegen, wenn man beim Besuch einer Webseite sich einen Kaffee kochen kann bevor es los geht?