↑Seitenanfang
»Form follows function!«
Früher™, als die Erde von glücklichen Dinosauriern bevölkert wurde und Gummistiefel noch aus Holz waren, da waren Computer elendig große und schwere Kisten, Speicher teuer und Bandbreite etwas mit dem normale Leute überhaupt noch nichts anzufangen wussten.
Im Zeitalter der Terabyte-Festplatten, Gigahertz-Prozessoren und ADSL-Flatrates vom Discounter nebenan mögen daher einige der folgenden Betrachtungen seltsam anmuten. Aber nehmen wir einfach mal mobile Endgeräte, da lohnt sich die Optimierung doch wieder (bis auch diese die Power von derzeitigen Desktops erreicht haben – in 2-3 Jahren also).
Ein Bekannter fragte mich mal, was mit seiner Homepage nicht stimme, sie verhält sich so komisch und sieht gar nicht so aus, wie er sie in Word(!) eingegeben hatte …
Unter der Berücksichtigung vom eigentlichen Zweck einer Seite im Web, nämlich anderen etwas mitzuteilen, kann man anfangen sich Gedanken zu machen, was sich optimieren lässt.
Folgendes wäre über das Ziel hinausgeschossen:
Wie schnell eine Seite erscheint, hängt in erster Linie von ihrer Größe ab (inkl. aller Bilder und ausgelagerten Zusatzdateien wie Scripte und Stylesheets), dann noch davon was der Clientrechner alles tun muß, bis er sie fertig gerendert hat.
Wie die Seite letztendlich aussieht ist Geschmackssache, aber ein paar ergonomische Regeln sollte man beherzigen.
Zum Thema Suchmaschinen wird viel geschrieben. Das meiste davon ist Spekulation, da die wirklichen Kriterien best gehütete Geschäftsgeheimnisse sind und die ursprünglich vorgesehenen Maßnahmen für die Suchmaschinen höchstens noch eine untergeordnete Rolle spielen wenn überhaupt.
Am Quelltext kann man oft erkennen, was für einen Editor der Autor eingesetzt hat. Es ist nie verkehrt sich mal den Quelltext anzuschauen. Von WYSIWYG-Editoren erzeugter Code ist oft dermaßen aufgebläht, daß man die Hälfte wieder streichen kann, bei Textverarbeitungsprogrammen mit der Option .html zu speichern ist das Verhältnis noch schlimmer. Das liegt daran, daß diese Editoren versuchen, den Bildschirminhalt, bei Textverarbeitungen gar einen DIN A4 Ausdruck nachzuahmen. Dieses Vorhaben muß natürlich in die Hose gehen, da HTML für soetwas nicht gedacht ist.
Vielmehr sollen Webinhalte auf möglichst jedem Ausgabegerät dargestellt werden können, die Formatierung findet erst beim Betrachter statt.
Geeignetes Werkzeug
Zum schreiben und nachbearbeiten von Quelltext ist ein einfacher Texteditor am besten geeignet. Wer es bequemer mag, kann einen nehmen, der auch noch Syntaxhighlighting bietet, wie für Windows notepad++ beispielsweise.
Noch bequemer (wenn man erstmal ihre Bedienung durchgeblickt hat) sind IDEs für Programmiersprachen mit einem Webdevelopment-Modul, bspw. Eclipse mit Aptana.
Schließlich sollte man noch einen Validator benutzen, der das Ergebnis all' der Bemühungen auf Standardkonformität überprüft. Das Original HTMLTidy gibt es online unter http://validator.w3.org oder für zuhause, sowie zahlreiche andere Validatoren mit noch weiteren Überprüfungsmöglichkeiten.
Was kann man nun löschen?
Viele WYSIWYG-Editoren erzeugen endlose (nonbreakingspace – nicht trennendes, festes Leerzeichen)-Reihen oder setzen solche an absolut unnötigen Stellen. Diese sind meistens Artefakte aus früheren Formatierungsversuchen und können fast ausnahmslos gelöscht werden. Aufpassen muß man nur, wenn ein direkt von Text umgeben ist, Bsp.: hier nicht trennen. Pro gelöschtem spart man 5-6 Bytes ein.
Wenn dadurch die Seite etwas seltsam aussieht, hat man ohnehin etwas bei der Formatierung falsch gemacht (Einrückung mit der Leerschritt-Taste zum Beispiel).
Als nächstes sind leere und doppelte Tags dran.
<p></p> entsteht zB. wenn man innerhalb eines Absatzes eine Leerzeile einfügen möchte. <span style="font-size: 16px;"><span> sind 36 völlig überflüssige Bytes, die übrigbleiben wenn man Text löscht, der Editor dabei die Formatierung aber stehenlässt. Bei längeren Texten und mehreren Bearbeitungen bleiben so oft Artefakte im Quelltext, welche länger sind, als der eigentliche Inhalt selbst.
Und aus:
kann man auch:
machen.
Viele Editoren sind nicht intelligent genug, verwandte CSS-Eigenschaften zusammenzufassen. Manche dröseln zusammengefasste Eigenschaften sogar wieder auf.
Bei letzteren ist es dann notwendig, den Quelltext in einem Texteditor nachzubearbeiten und den HTML-Editor nicht mehr dranzulassen.
Weitere Bytes (Bei längeren Seite gar Kilobytes) lassen sich einsparen, indem man bei Einrückungen im Quelltext Tabs statt Spaces verwendet. Dies kann man auf die Spitze treiben, wenn man auf die (menschliche) Lesbarkeit ganz verzichtet und auf sämtliche Formatierungen im Quelltext verzichtet. Es ist sogar möglich den kompletten Quelltext auf eine einzige Zeile zu schreiben, was sämtliche Zeilenumbrüche einspart.
Da so ein Quelltext kaum mehr bearbeitbar ist, sollte man dabei zweigleisig vorgehen und eine lesbare Version als BackUp haben.
Ein paar Bytes im Quelltext zu sparen bringt überhauptnichts, wenn man seine Bilder nicht optimiert.
Beim Einsatz von Bildern und Grafiken sollte man schauen, ob diese nur schmückendes Beiwerk sind, oder den eigentlichen Inhalt darstellen.
Im ersteren Fall sollte man die Bilder so hoch komprimieren, daß sie gerade noch ansehnlich sind. Man kann auch mal probieren ein Foto als .gif abzuspeichern – allerdings muß man das für jeden Einzelfall testen.
Ein oft gemachter Fehler sind Vorschaubilder, die vom Browser auf die gewünschte Größe gebracht werden, anstatt entsprechend verkleinerte Bilder in einem Grafikprogramm zu erzeugen. So werden hunderte Kilobyte bishin zu mehreren Megabytes von Digicams durchs Netz geblasen, die schlussendlich doch vom Browser wieder kleingerechnet werden. Mit einem Grafikprogramm lassen ohnehin viel bessere Ergebnisse beim skalieren erreichen als mit den doch recht groben Algorythmen eines Webbrowsers.
Wenn man ein Bild also fest mit width und height in Pixel auszeichnet, so sollte diese Bild auch tatsächlich diese Größe haben.
Bei Scripten kann man zusätzlich zu dem schon zum Quelltext geschriebenen auch die Ausführungsgeschwindigkeit optimieren, indem man sich eingehend mit der verwendeten Scriptsprache beschäftigt. Da diese im Quellcode übertragen werden ist aber immer darauf zu achten, einen guten Kompromiss zwischen Speicherplatz und Geschwindigkeit zu finden.
Google schreibt zum Thema:
Erstellen Sie eine nützliche, informative Website und verfassen Sie Seiten, die Ihren Content klar und eindeutig beschreiben.
Damit ist eigentlich alles wichtige gesagt.
Wer seine Website nach den Regeln der Kunst erstellt, der braucht nichts zu »optimieren«.
Dazu gehört als erstes die Regeln von HTML zu beachten. Für die Überschriften gibt es die <h1>-<h6>-Tags.
Ein beliebter Fehler ist, diese zum hervorheben zu benutzen, während die eigentlichen Überschriften dann evtl. als fettgeschriebener normaler Text präsentiert werden.
Da kennt sich natürlich kein Robot oder Hilfsprogramm mehr im Text aus.
Bilder bekommen mittels des alt-Attributs einen Alternativtext zugewiesen, damit auch User ohne grafischen Browser und eben Robots wissen, was das Bild darstellen soll.
Mittels des title-Attributs kann man allen Elementen Titel oder kleine Hilfetexte zuordnen.
wird fortgesetzt …
© 2007 Markus Machner