Homepage optimieren

Web-Surfer sind ungeduldig. Braucht eine Seite zu viel Ladezeit, verschwindet der Leser. Dieser Artikel zeigt, wie Sie den Ladevorgang Ihrer Homepage beschleunigen.

(erschienen in Chip im Jahr 1999. Einige Informationen können inzwischen überholt sein)

Im World Wide Web zählt jede Sekunde, wenn es darum geht, Surfer auf die Homepage zu locken. Quält sich eine Web-Seite Bit für Bit auf den Bildschirm des Empfängers, bricht dieser den Ladevorgang ab und verschwindet auf Nimmerwiedersehen. Deshalb sollten Sie darauf achten, Ihre Homepage kompakt zu gestalten. Mit einigen Tricks und Kniffen sparen Sie wertvolle Bytes – für Ihre Leser geht das schneller und Ihr Provider freut sich auch, wenn sich weniger Daten durch seine Leitungen arbeiten.

Sparen mit Grafiken

Das höchste Sparpotential steckt in Grafiken. Denn die bunten Bilder nehmen auf einer Website den meisten Speicherplatz ein. Schon kleine Bilder kommen mit 10 bis 50 Kilobyte daher. Das ist oft mehr als der gesamte Text auf einer Seite einnimmt.

Grafiken weglassen

Am meisten Speicher und Übertragungszeit spart die Grafik, die es gar nicht gibt. Deshalb sollten Sie kritisch und selbstkritisch überlegen, wie viele Bilder Sie auf Ihrer Homepage beherbergen wollen. Nur selten ist es notwendig das eigene Portrait oder ein üppiges Bild der Firmenzentrale auf den Server zu legen. Solche Bilder haben keinen Informationswert. Anders sieht es aus bei Produktfotos oder erläuternden Schaubildern. Auch Fotos mit Nachrichtenwert sind erlaubt, etwa wenn Sie auf einer Seite mit Fremdenverkehrsinformationen Ihren Heimatort zur Schau stellen wollen.

Grafiken verkleinern

Wenn Sie Grafiken ins Netz bringen, reduzieren Sie diese auf die kleinste noch vertretbare Größe. Das kann enorme Einsparungen bringen. Ein Beispielbild etwa mit rund 828 mal 734 Pixel benötigt als Bitmap 1,73 Mbyte. Nach dem Verkleinern auf 700 mal 621 Bildpunkte frißt die Grafik nur noch 1,24 Mbyte. Umgewandelt in ein Jpeg ist der Effekt immer noch gut sichtbar: Die große Version benötigt mit 155 Kbyte immer noch knapp ein Drittel mehr Platz als die um etwa 120 Punkte gekürzte Version mit 105 Kbyte.

Thumbnails

Wenn Sie auf großformatige Bilder nicht verzichten wollen, bieten Thumbnails einen interessanten Kompromiß. Hier zeigen Sie anstelle pompöser Fotos nur stark verkleinerte Ansichten. Die sind schnell geladen. Hinter das kleine Bild packen Sie ein Hyperlink mit dem Verweis zum großen Original. Der Surfer bekommt also nur dann große Bilder zu sehen, wenn er diese wirklich haben will. Das Link kann beispielsweise so aussehen:

<a href=”grossbild.jpg”><img border=”0″ src=”kleinbild.jpg” alt=”Thumbnail xy”></a>

Den richtigen Grafiktypen wählen

Häufig lassen sich mit der Wahl des richtigen Speicherformates Einsparungen erzielen. Gängig im Internet sind die Formate GIF und Jpeg. Beide Formate haben ihre Vorteile abhängig von der Art Grafik, die Sie zeigen wollen. GIF ist mit seiner Beschränkung auf 256 Farben ideal für einfache Schaubilder. Dazu zählen etwa Organigramme oder Bildschirmfotos. Der Kompressionsalgorithmus von GIF arbeitet dann ideal, wenn sich in einem Bild einfarbige Flächen finden. Ein Schaubild etwa mit weißem Hintergrund und einigen wenigen farbigen Balken komprimiert GIF leicht auf 10 bis 20 Prozent der originalen Größe.

Ganz anders sieht es aus, wenn Sie sich mit GIF an Fotos oder komplexe Grafiken mit Farbverläufen wagen. Abgesehen von der reduzierten Farbpracht hat GIF hier noch einen Nachteil: Der Kompressionsalgorithmus findet nicht genug Futter, um effektiv zu arbeiten. Denn GIF sucht nach sich wiederholenden Bitmustern im Bild und bei einem Foto unterscheiden sich selbst weiß erscheinende Hintergrundflächen von Pixel zu Pixel in Nuancen – keine Chance für GIF.

Bei Fotos muß Jpeg ran. Dieses Grafikformat rechnet aus den Bildern nicht sichtbare Details heraus und komprimiert diese Bilder dann zusätzlich noch einmal mit einem klassischen Kompressionsverfahren, ähnlich dem von GIF. Jpeg hat allerdings den Nachteil, daß einmal in dem Format gespeicherte Dateien nur noch eingeschränkt für die Bildbearbeitung zu gebrauchen sind. Denn es fehlen Bildinformationen. Für das Speichern von Fotos im Web hingegen ist Jpeg das Format der Wahl.

Jpeg optimal

Wenn Sie Bilder im Jpeg-Format speichern, haben Sie Einfluß auf die Stärke des Kompressionsverfahrens. Je stärker Sie komprimieren, desto kleiner werden die Bilder, desto mehr Informationen und Qualität gehen aber auch verloren.

Um den idealen Kompromiß aus Größe und Qualität zu ermitteln, fertigen Sie von einem Bild eine Testreihe an. Dazu laden Sie das Original der Grafik in ein Grafikprogramm wie Paintshop Pro 4. Mit dem Menübefehl File – Save As öffnen Sie die Dialogbox zum Speichern der Grafik. Wählen Sie unter Dateityp den Eintrag JPG – JPEG – JFIF Compliant. Klicken Sie auf den Button Options und Sie sehen das Feld Compression Level. In Paintshop Pro 5 finden Sie diese Option ebenfalls unter File – Save as und Option oder unter Datei – Speichern unter bei Optionen. Hier heißt die Angabe schlicht Compression oder Komprimierungsfaktor.

Geben Sie für die erste Kompression den Wert 90 ein und speichern Sie das Bild. Verwenden Sie als Dateinamen eine Kombination aus Bildnamen und Level, also zum Beispiel meinbild_90.jpg und speichen Sie das Bild in einem eigenen Verzeichis. Das nächste Bild bekommt den Namen meinbild_80.jpg und einen Kompression-Level von 80.

Wiederholen Sie diesen Prozeß bis zum Compression Level von 10. Vergessen Sie aber nicht, zwischendrin immer wieder das Original-TIF zu laden. Ansonsten kann es passieren, daß Sie ein eben komprimiertes Bild erneut verkleinern.

Sind Sie mit dem Testlauf fertig, öffnen Sie das Verzeichnis mit den Testbildern und schalten Sie in das Menü Ansicht – Details. Nun sehen Sie die Dateigröße des jeweiligen Files. Laden Sie die eben gespeicherten Bilder wieder in das Grafikprogramm. Nehmen Sie sich ein wenig Zeit, vergleichen Sie die Bilder und wählen das mit der höchsten Kompressionsrate bei gerade noch annehmbarer Qualität.

Achten Sie bei der Auswahl besonders auf die Ränder von Objekten und verwenden Sie die Lupenfunktion Ihres Grafikprogramms, um Details zu überprüfen. Wenn Ränder zu sehr ausfransen oder sich in Flächen häßliche Ecken zeigen, ist das Bild nicht brauchbar. Generell gilt: Je schärfer Kanten und Kontraste, desto anfälliger ist das Bild für hohe Kompressionslevel. Nach diesem Testlauf haben Sie dann das ideale Bild für das Web. Tip am Rande: Mit einem Kompressionslevel von 99 bekommen Sie bei vielen Bildern einen netten Verfremdungseffekt.

Weitere Tips

Keine überflüssigen Titelseiten

Eine beliebte Unsitte im Netz sind Eingangsseiten. Der Surfer sieht anstelle von Informationen erst einmal eine Titelgrafik. Dort muß er dann warten oder klicken, bevor er auf die eigentliche Hauptseite kommt. Diese Eingangsseite soll ein „angenehmes Gefühl“ beim Surfer erzeugen und „eine Art Tunnel“ auf die Web-Seite bilden, so die Theorie einiger Web-Designer. Verzichten Sie auf solch zeitraubenden Unsinn.

Tabellen aufteilen

Ein kritischer Punkt im Web-Design sind Tabellen. Generell baut der Browser erst dann eine Tabelle auf, wenn er sämtliche Daten zur Hand hat. Das ist nachvollziehbar: Denn der Browser kann die Tabelle nicht formatieren, bevor er nicht weiß, wie breit die Felder sind. Da hilft es nicht einmal, die Breite mit witdh festzulegen. Unangenehme Nebenwirkung: Bei langen Tabellen sieht der Leser zunächst nichts. Die Gegenmaßnahme: Teilen Sie Tabellen in mehrere Teile auf. Wichtig ist dabei, daß Sie die Teiltabellen sauber formatieren. Verwenden Sie dazu die width-Parameter des

<table>

und

<td>

-Tags. Das folgende Beispiel zeigt, wie es geht:

<table border=1 width=400>

<tr><td width=200>Tabelle 1, Spalte 1, Zeile 1</td>

<td width=200>Tabelle 1, Spalte2, Zeile 1</td></tr>

<tr><td>Tabelle 1, Spalte 1, Zeile 2</td>

<td>Tabelle 1, Spalte2, Zeile 2</td></tr>

</table>

<table border=1 width=400>

<tr><td width=200>Tabelle 2, Spalte 1, Zeile 1</td>

<td width=200>Tabelle 2, Spalte2, Zeile 1</td></tr>

<tr><td>Tabelle 2, Spalte 1, Zeile 2</td>

<td>Tabelle 2, Spalte2, Zeile 2</td></tr>

</table>

Einen Makel haben die Teiltabellen allerdings. Zwischen den Einzelteilen befindet sich ein etwas dickerer Strich. Aber das nimmt man gerne in Kauf, wenn sich dafür schneller Daten auf dem Bildschirm zeigen.

Vorsicht mit Bildern in Tabellen

Das Tabellen-Ladeproblem verstärkt sich noch, wenn in der Tabelle Bilder liegen. Denn die Tabelle wartet auch so lange, bis alle Bilder geladen sind. Dieses Problem sollte auch im Hinterkopf haben, wer Tabellen für das Layout seiner Webseiten verwendet. Auch hier gilt: Besser mehrere kurze Tabellen.

Keine externen Bilder und Daten einbinden

Ein beliebter Bremser beim Seitenaufbau sind externe Grafiken oder Programme. Häufig binden Webmaster privater Homepages einen Seitenzähler ein, der auf einem fremden Server sitzt. Dieser Service mag zwar nett und nützlich sein. Doch häufig bleibt anstelle des Zählers nur eine Lücke zu sehen. Denn wenn der Server mit dem Zähler überlastet ist, braucht das Bild zu lange. Sehr kritisch wird es, wenn dieser Zähler auch noch in einer Tabelle steckt. Dann verzögert der Zähler den Ladevorgang der kompletten Tabelle. Deshalb sollten Seitenzähler wenn möglich nur vom lokalen Server kommen. Wenn man einen externen Service in Anspruch nimmt, muß der ganz unten auf der Seite stehen, um den Seitenaufbau nicht zu stören.

Kommentare entfernen

Kommentare in der Webseite sind nützlich während der Entwicklungphase. Aber auf der fertigen Site bremsen Sie den Ladevorgang. Gerade Web-Editoren packen Unmengen von Kommentaren in den Quelltext. Diesen Ballast erkennen Sie an

<!—

zu Beginn des Kommentars und

–>

am Schluß.

Bevor Sie eine Seite aufs Netz stellen, löschen Sie diese Kommentare. Aber Vorsicht: Entfernen Sie nicht versehentlich Javascripts oder andere Skripte aus Ihrer Seite. Denn auch die sind von Kommentarmarken umgeben.

Sollten Sie die Kommentare später noch brauchen, speichern Sie die Seite unter einem anderen Namen, etwa mit dem Anhängsel _kom, also meineseite_kom.html und löschen Sie die Kommentare nur in der Netzversion.

 

Javascript optimal laden

Javascript-Programmierer empfehlen: Ladet den Script-Code vor dem Seiteninhalt. Das ist im Grunde auch gut so. Denn wenn aus dem HTML-Text eine noch nicht geladene Javascript-Funktion aufgerufen wird, gibt es Probleme. Dennoch sollte man nicht den kompletten Code an den Beginn des Dokumentes packen. Gerade wenn beispielsweise Bilddaten einer Variablen zugewiesen werden, dauert es zu lange, bis der erste HTML-Code erscheint. Teilen Sie also den Javascript-Code auf. Laden Sie am Anfang nur die wichtigsten Scriptdaten. Den Rest des Codes streuen Sie auf das Dokument. Beherzigen dennoch die Leitlinie, den Code zu laden, bevor er das erste Mal aufgerufen wird.

Lesen Sie hier weiter: Pinterest-Besucher live in Google Analytics sehen