Viele Grafiken und Scripte und nicht optimierte Stylesheets sorgen für eine Menge Datenflut. Doch auch in Zeiten von DSL & co. gehen auch viele Menschen noch mit einem Modem online. Doch nicht nur für die Modem-Besitzer sollte man die Ladezeiten seiner Webseite optimieren. Schnelle Ladezeiten helfen allen. Eine einzelne Webseite sollte mit all ihren Elementen möglichst 100 KB nicht überschreiten. Dass dies nicht immer möglich ist, ist klar. Dennoch gibt es viele Tricks, wie man die Ladezeiten seiner Webseite optimieren kann.
Lesen Sie in diesem Artikel, wie Sie die Ladzeiten Ihrer Webseite optimieren können.
Tabellen
Eine Webseite, die auf komplizierte Tabellenkonstrukte aufbaut, braucht in der Regel länger zum laden als eine Webseite ohne solche Tabellenkonstruktionen. Dazu kommt, dass der Inhalt einer Tabelle erst dann im Browser angezeigt wird, wenn diese vollständig geladen ist. Für das Layout einer Webseite empfiehlt sich daher der Einsatz von <div>-Layern, anstatt Tabellen. Diese haben den Vorteil, dass die Seite auch dann angezeigt wird, wenn noch nicht alles geladen ist. Außerdem verhilft es zu mehr Barrierefreiheit.
Überflüssige HTML-Tags
Wenn Sie Ihre Webseite mit Hilfe eines WYSIWYG-Editor oder einem CMS erstellen kann es vorkommen, dass diese Helferlein unnötige Tags in Ihren Quellcode einbauen. Gerade einige WYSIWYG-Editoren sind hierfür bekannt. Problematisch wird es auch dann, wenn Sie Ihre Webseiten in nicht speziell dafür vorgesehene Programme erzeugen. Beispielhaft sei hier das Product Microsoft Word aus dem Office-Paket benannt. Diese überflüssigen Tags sorgen nicht nur für mehr Datenmüll innerhalb Ihrer Webseite (und somit höheren Ladezeiten), sondern bewirken unter Umständen auch, dass Ihr HTML-Code nicht mehr valide ist.
Die beste Methode an dieser Stelle ist, entweder Programme einzusetzen, die validen Quellcode erstellen, oder aber die Webseite von Hand anzufertigen.
Kostenlose Webspace-Anbieter
Anbieter von kostenlosem Webspace hosten oftmals hunderte von Kunden auf einem einzigen Webserver. Dies hat zur Folge, dass Sie die Ressourcen eines Servers nicht für sich alleine nutzen können, sondern eben mit allen anderen Nutzern dieses Servers teilen müssen. Je nachdem, welche Webseiten zusammen mit Ihrer auf einem Server liegen, kann dies zu regelrechten Überlastungen führen. Darunter leiden schlussendlich auch Sie. Auch günstige Webspace-Anbieter verfahren oftmals nach den gleichen Prinzipien. Jedoch haben Sie hier den Vorteil, dass diese die zur Verfügung stehenden Ressourcen meist optimal verwalten, so dass es nicht zu größeren Leistungseinbrüchen kommen sollte.
Überlegen Sie sich daher, bevor Sie sich auf die Suche nach einem passenden Anbieter machen, lieber ein paar Euro mehr im Monat zu investieren. Gerade dann, wenn Sie eine professionelle Webseite erstellen möchten, sollten Sie Abstand von den kostenlosen Anbietern nehmen.
Fremde Inhalte
Als "fremder Inhalt" werden all die Dinge bezeichnet, die Sie in Ihre Webseite einbauen und dabei nicht auf Ihrem Server liegen. Dies können zum Beispiel Counter oder Scripts sein. Je nach Browsereinstellung und Konfiguration kann es vorkommen, dass der Besucher einer Webseite manchmal minutenlang warten muss, bis er etwas angezeigt bekommt. Dies passiert dann, wenn der externe Inhalt nicht geladen werden kann. Der Browser versucht in der vorgegebenen Zeit eine Verbindung zu diesen Inhalten aufzubauen. Ist der Verbindungsaufbau nach einer bestimmten Zeit nicht erfolgreich, wird dieser dann abgebrochen. Ist der externe Inhalt nun in einer Tabelle untergebracht, kann es durchaus vorkommen, dass die gesamte Webseite während der Wartezeit nicht angezeigt wird.
Java, Flash und ähnliche Scripts
Gerade Java-Applets verlängern die Ladezeit einer Webseite ungemein. Sie sollten sich daher genau überlegen, ob der Einsatz von Java oder Flash auf Ihrer Webseite wirklich notwendig ist. Bedenken Sie beim Einsatz von Scripten und Flash auch, dass die Suchmaschinen-Crawler diese nicht indexieren können. Wenn Ihre Webseite nur aus Scripts besteht, wird sie wohlmöglich gar nicht im Suchindex einer Suchmaschine aufgenommen werden, da es keine verwertbaren Inhalte gibt.
Grafiken
Die Grafiken einer Webseite nehmen meist den größten Teil der Datenmenge in Anspruch. Oftmals ist dies nicht auf optimierte Grafiken zurückzuführen. Daher sollten Sie statische Bilder nie unkomprimiert ins Netz stellen. Komprimieren Sie Ihre Grafiken, indem Sie sie ins JPG-Format konvertieren (für statische Bilder), oder ins GIF-Format (für animierte Bilder). Statische Bilder können auch im PNG-Format abgespeichert werden. Gegenüber JPEG hat PNG den Vorteil, dass ähnlich niedrige Dateigrößen erreicht werden können, dafür der Qualitätsverlust durch die Komprimierung der Grafik nicht ganz so stark ausfällt wie im JPEG-Format.
Ein weiterer Fehler ist es, große Grafiken per Angabe von width="..." und height="..." verkleinert darzustellen. Dies hat den Hintergrund, dass zwar die Grafiken optisch kleiner werden, an der Datei sich aber nichts ändert - die Dateigröße bleibt also gleich. Erstellen Sie von großen Grafiken lieber kleinere Thumbnails, also kleine Vorschaubilder. Wenn Sie diese mit einem Link auf die Originalgrafik versehen, kann ein solches Vorschaubild per Mausklick in der Originalgröße dargestellt werden. Die Angaben zur Breite und Höhe von Bildern sollten Sie dennoch immer machen (davon mal abgesehen, dass dies - je nachdem, welchen Seitenstandard Sie verwenden - ohnehin vorgeschrieben ist). Das hat den Vorteil, dass so der Browser, wenn die Bilder noch nicht voll geladen sind, Platzhalter mit den Abmessungen des Bildes anzeigen kann. Somit wird "springender Text" verhindert und Ihre Besucher wissen, dass zu Ihrem Artikel auch noch Grafiken gehören.
Auch sollten Sie Ihre Webseite auf überflüssige Bilder prüfen. Sind grafische Menüelemente, wie zum Beispiel ein roter Kreis, wirklich sinnvoll? Teilweise lassen sich die gleichen oder zumindest ähnliche Effekte auch mit reinem CSS erstellen. Das spart eine Menge überflüssiger Daten!
Zusammenfassung & Links
Grundsätzlich gilt, dass Sie Ihre Webseiten auf überflüssige Grafiken und Scripts hin überprüfen sollten. Ein roter Kreis kann auch mit CSS erzeugt werden, dafür braucht es keine Grafik. Die aktuelle Uhrzeit hat jeder PC-Benutzer in seiner Taskleiste stehen. Das aktuelle Datum haben die meisten auch im Kopf. Bedenken Sie, dass durch unnötige Scripts, und / oder schlecht optimierter Grafiken eine Menge Traffic erzeugt wird, der einfach unnötig ist.
Ein kleines Online-Tool zur Überprüfung und Analyse Ihrer Webseiten ist der Performance Grader von der Webseite "Joomla Performance". Eigentlich ist dieses Tool dafür ausgelegt, die Geschwindigkeit verschiedener Joomla-Templates zu ermitteln, es funktioniert jedoch auch tadellos mit einer ganz "normalen" Webseite. Die Analyse gibt dabei unter anderem die Anzahl und Größe der verwendeten Bilder, HTML-Dateien und Stylesheets wieder und bietet darüber hinaus noch weitere Analysemöglichkeiten. Zusätzlich wird ein Vergleichswert mit den Optimalwerten dargestellt. Jeder einzelne Analysepunkt (insgesamt 14) wird dabei auch noch extra erklärt.
|
