Ich habe mich in einem der letzten Blogbeiträge damit beschäftigt, meine iWebseiten über sog. meta-tags für Suchmaschinen sichtbar zu machen. Einer der Hauptkritikpunkte von Besuchern von iWeb-Seiten sind aber die Ladezeiten, insbesondere dann, wenn sie über MobileMe veröffentlich wurden. Diese Trägheit hat verschiedene Gründe:

1. iWeb legt für jede Seite einen neuen Bilderordner an, damit kann sich der Browser auch bei wiederkehrenden Grafikelementen nicht immer des schnellen Caches „Zwischenspeicher“  auf der Festplatte bedienen und lädt jedes mal alle Daten neu aus dem Netz.
2. iWeb wandelt einige Elemente automatisch in Grafiken um, wenn diese nicht durch Standard-Elemente von HTML abgebildet werden können, z.B. Rechtecke mit abgerundeten Ecken.
3. iWeb generiert einen endlos langen Code
4. MobileMe-Server stehen in den USA. Damit sind sie im „Downstream“ für deutsche Betrachter ohnehin etwas langsamer als lokale Webserver.

Auf die Punkte 3) und 4) hat man leider keinen Einfluss, die ersten beiden Aspekte kann man jedoch auch in iWeb steuern.

Hier einige Tips, wie man die Ladezeiten verbessern kann.

Zentrale Bilderablage für wiederkehrende Elemente

Klassische wiederkehrende Elemente sind Buttons, Kopfzeilen- und Fußzeilengrafiken. Anhand dieses Beispiel möchte ich das recht einfache Prinzip erläutern. Ich habe die gleichen Kopf- und Fußzeilen auf allen Seiten des DocBlogMacs.

Schritt 1: Gestaltung

Der erste Schritte ist die Gestaltung. Das gute alte Keynotes ist hier mehr aus ausreichend, zumal alle Apple typischen Effekte wie Schatten, Spiegelungen, schöne Transparenzen und Standardformen viel Kreativität zu lassen. Aus Keynotes expotiert man die Grafik nun als jpg-Bild und schneidet es in einem Bildbearbeitungsprogramm zu. Beim Speichern des Bildes können schon die ersten Optimierungsschritte einfließen.

• Bildqualität anpassen: da Webseiten üblicherweise nicht in den Offset-Druck gehen, kann man hier etwas sportlicher zur Sache gehen. Ich speichere Jpgs in mittlerer Qualität. Das reduziert den Speicherbedarf für die Grafik und beschleunigt später das Laden.
• Farbpalette optimieren: nicht alle Farben des Farbraums werden benötigt. Hier können viele Tools die Farbtiefe für das Bild anpassen und das eine oder kB herausfeilen.

Schritt 2: Zentrale Ablage erstellen

In der iDisk wechselt man nun in den Bereich Web/Sites/ und erstellt für seinen Bilderablage einen Ordner, z.B. „WiederverwendeteBilder“ oder einfach „pics“. Über den Finder schiebt man die frisch erstellten JPGs in diesen Ordner und fertig. Wir haben eine zentrale Bilderablage.

Schritte 3: Grafik in iWeb einbinden

Dazu zieht man aus dem rechten Bereich „Widgets“ den „HTML-Baustein auf die zu bearbeitende Seite und fügt über HTML-Befehle das Bild aus der zentralen Ablage ein. Dazu wird die folgende Zeile eingefügt und bearbeitet.

<img src="http://www.domain.de/BilderOrdner/MeinBild.jpg"
width="...px" height="...px" alt="Alternativer text">

Man sollte auf jeden Fall die Dimensionen Breite „width“ und Höhe „height“, sowie einen alternativen text angeben. Falls das Bild mal Ladeprobleme bekommt – dies passiert gerne bei externen Quellen außerhalb Deiner Seite – zerschiesst es nicht gleich das ganze Layout.

iWeb HTML Widget

Das Ergebnis lässt sich sofort online testen. Nachdem die Bilder das erste mal geladen wurden, erscheinen sie bei weiteren Seitenzugriffen innerhalb Deiner Webpräsenz nun sofort.

Einziger Nachteil dieser Vorgehensweise ist sicherlich, dass man bei der Bearbeitung in iWeb mit dem Internet verbunden sein sollte, um den optischen „What you see is what you get“ Effekt zu haben.

Vermeide komplexe Formen

Für jeden grafischen Effekt von iWeb erstellt das Programm zusätzliche kleine Rahmenbilder die erst geladen und aufgebaut werden müssen. Dies ist insbesondere der Fall bei Spiegelung, Bilderrahmen und Schattenwürfen. Werden diese Effekte bei großen Grafiken exzessiv genutzt, steigt die Ladezeit ins Unermessliche. Will man diese Effekte trotzdem nutzen, empfehle ich Keynotes (besitzt den gleichen Effektraum wie iWeb, teilweise sogar mehr) und den jpg-Export mit Bildoptimierung.

Komplexe Formen wie Sprechblasen, Sterne, etc, wandelt iWeb direkt in Grafiken im png-Format um. Die durch iWeb erstellten Grafiken sind dabei nicht gerade Speicheroptimiert. Wenn man aus gestalterischer Sicht nicht auf sie verzichten möchte, würde ich auch den oben beschrieben Weg empfehlen. Man muss es aber auch nicht gleich übertragen. Das eine oder andere „Förmchen“ kann jede Webseite auch ohne Tricks verkraften.

Ich hoffe, damit etwas mehr Speed in Eure iWeb-Präsenz gebracht zu haben. Beim DocBlocMac habe ich damit auf jeden Fall etwas Performance herausgeholt. Übrigens nutzt DocBlocMac MobileMe als Webserver.

Zum Gruße!