Website testen und optimieren
Auf dem Prüfstand

BrowserWorkspace

Webseiten sind schnell erstellt, bis sie aber perfekt sind, muss eine Mengegetestet werden. PCpro stellt Browser-Tests, Tools zur Validierung undLink-Checks vor, die zeigen, ob Ihre Website rund läuft.

Der typische Testablauf

Website testen und optimieren

Ist die Rohfassung einer Website erst einmal aufgebaut, ist die Arbeit noch nicht getan. Es gilt nun, die Site zu testen und zu optimieren. Der übliche Weg ist, eine Webseite in einem oder in zwei Browsern zu entwickeln und sie dann mit etwas Glück noch auf zwei oder drei anderen zu testen. Die Links werden anhand der Sitemap geprüft, wenn die Website fertig ist.

War?s das dann mit testen? In der Praxis oftmals ja. Allerdings ist das natürlich nicht optimal. Denn meistens werden wichtige Browser weggelassen, weil beispielsweise gerade kein Mac oder keine Linux-Installation zur Verfügung steht. Und auch tote Links und sonstige Fehler lassen sich von Hand nur schwer finden. Das bedeutet: Sie benötigen einen Plan zum Testen und natürlich auch die passenden Werkzeuge. Dieser Artikel beschreibt einen typischen Testablauf, stellt hilfreiche Tools vor und verrät Tricks zur Optimierung.

Website in verschiedenen Browsern

Wenn im Fußball die Wahrheit auf dem Platz liegt, liegt sie im Web im Browser. Das, was der Nutzer im Browser angezeigt bekommt, ist entscheidend für den Erfolg einer Website. Und da ist es zunächst einmal wichtig zu wissen, was die Browser können. Eine Aufstellungen der Fähigkeiten einzelner Browser finden Sie beispielsweise hier, Kompatibilitätslisten etwa bei CSS4you.

Anschließend muss der Webdesigner mit unterschiedlichen Betriebssystemen jonglieren. Konqueror muss auf Linux getestet werden, Internet Explorer auf Windows und Safari auf dem Mac. Zwar haben Konqueror und Safari gemeinsame Wurzeln, aber mittlerweile gibt es schon wieder Unterschiede, so dass Sie sich um beide Plattformen kümmern müssen.

Da es unpraktisch ist, für die verschiedenen Betriebssysteme mit mehreren Rechnern oder Partitionen zu hantieren, sollten Sie auf einen virtuellen Rechner zurückgreifen, der als Fenster auf Ihrem System angezeigt wird. Microsoft bietet dafür zwei Produkte: Virtual PC und Virtual Server. Der Virtual PC reicht für den Website-Test problemlos aus und steht für Windows mittlerweile kostenlos zur Verfügung. Für den Mac ist Virtual PC kostenpflichtig, außer Sie sind Eigentümer der Microsoft-Office-Professional-Suite. Dort ist der virtuelle Helfer bereits integriert.

VMware bietet als Spezialist in Sachen Virtualisierung eine wesentlich größere Produktpalette. Die unterste Produktstufe ist der Player – er erlaubt es, vorher erzeugte virtuelle Computer auszuführen. Er steht kostenlos zum Download zur Verfügung. Unter www. vmware.com/vmtn/appliances findet sich dann eine Vielzahl an virtuellen Computern, die damit verwendet werden können. Möchten Sie lieber einen eigenen zusammenstellen, ist zumindest die VMware-Workstation-Version notwendig. Für das einfache Testen von Websites reichen aber oft schon die vorhandenen virtuellen Rechner.

Bild: Hier geben Sie die URL Ihrer Website an.


Hilfreich: Screenshot-Dienste

Website testen und optimieren

Virtuelle Computer sind zwar praktisch zum Testen, aber sie erfordern auch einen leistungsstarken Rechner, und alle Browser müssen eingerichtet werden. Gerade wenn Sie viele Exoten berücksichtigen möchten, ist das eine Menge Aufwand. Abhilfe schaffen Webdienste, die Browser-Screenshots von einer beliebigen URL machen. Hier müssen Sie nur Ihre zu testende Webseite irgendwo ins Netz stellen und sich dann einen Screenshot anfertigen lassen.


Zukunftssicher mit XHTML

Website testen und optimieren

XHTML – dieses Schlagwort schwebt über den Köpfen der Web-Entwickler wie ein Damoklesschwert. Allerdings ist es stumpf, denn eigentlich hat man von XHTML-Konformität an sich wenig. Das wichtigste Argument war immer, dass HTML den XML-Regeln folgen sollte, um gut austauschbar und mit diversen Parsern gut bearbeitbar zu sein.

Aber das ist meist an der Realität vorbeigedacht, da diese Flexibilität nur in umfangreicheren Dokument-Workflows wirklich notwendig ist. Auf der normalen Website aber dient HTML nur der Darstellung im Browser – und da ist es im Moment noch völlig egal, ob HTML oder XHTML zum Einsatz kommt. Dies zeigen prominente Beispiele im Web. XHTML-Konformität wird heute meist nur im Zuge von CSS-Layouts und der Optimierung für Barrierefreiheit eingeführt, weil es da nicht mehr viel Aufwand bedeutet. Und mit Blick auf die Zukunftssicherheit der frisch gestalteten Webseiten sollte XHTML die Sprache der Wahl sein.

Valider Code

Über diese Zweisprachigkeit kann man sich beschweren, oder man nimmt es wie der Webbegründer und W3C-Vorsitzende Tim Berners-Lee sportlichZu akzeptieren, dass HTML und XHTML nebeneinander existieren, trifft die Realität sicherlich besser als die zu vehemente Forderung nach standardkonformen Websites.

Ganz gleich, ob Sie sich für HTML oder XHTML entscheiden – Korrektheit im Sinne des Standards gehört bei beiden einfach zum guten Ton. Gerade neuere Browser, die sich – wie der Internet Explorer 7 sehr schön zeigt – enger an Standards halten, produzieren sonst in der Zukunft Darstellungsfehler.

Die erste Anlaufstelle sind natürlich die offiziellen Validierer des W3C: validator.w3.org für HTML und XHTML undjigsaw.w3.org/css-validator für CSS. Daneben gibt es solche Tests natürlich auch in gängigen HTML-Editoren wie Dreamweaver. Viele Editoren implementieren auch Tidy oder ähnliche Bibliotheken, die den HTML- und CSS-Code direkt bereinigen. Tidy stammt ursprünglich von Dave Raggett und ist mittlerweile als Kommandozeilen-Werkzeug, als PHP-Bibliothek und mit diversen Oberflächen erhältlich. Das Hauptprojekt ist bei Sourceforge gehostet. Nicht Validität, sondern Kompatibilität steht beim HTMLWorld-CSS-Prüfer im Vordergrund. Sie übergeben als Adresse die URL zu Ihrem (externen) Stylesheet. Als Ergebnis werden Auflistungen potenzieller Schwierigkeiten im CSS Ihrer Website zurückgeliefert. Die Auflistung besteht aus einer prozentualen Wertung und einer detaillierteren Liste mit Problemstellen. Selbiges bietet HTMLWorld auch für HTML-Seiten an.


Accessibility

Website testen und optimieren

Auch wenn die eigene Website nicht unbedingt komplett barrierefrei sein muss, können die Test-Tools zusätzlich zur einfachen Validierung auch darüber einigen Aufschluss geben. Das W3C führt die wichtigsten Werkzeuge auf, und auch online gibt es einige Testdienste: Der Klassiker ist das Angebot von Watchfire , das ursprünglich auf den Namen Bobby gehört hat. Die Watchfire-Werkzeuge sind auch in viele HTML-Editoren integriert. Einen Online-Test mit interessanter Optik finden Sie unter wave.webaim.org. Hier werden die Analyse-Ergebnisse in der Seite mit Icons angezeigt, und Sie können sich auch auf Unterseiten durchklicken. Einen ähnlichen Weg geht valet.webthing.com/access/url.html. Hier wird allerdings der auf Accessibility durchleuchtete Quellcode optisch dargestellt.

Naturgemäß sind Usability und das Nutzererlebnis einer Website schwerer per automatisiert
en Tests zu erfassen. Zwar gibt es erste Ansätze, zumindest häufige Fehler auch aus dem Code zu filtern (zum Beispiel zing.ncsl.nist.gov/WebTools), diese sind aber tendenziell eher akademisch und experimentell. Hier hilft daher meist nur ein klassischer Usability-Test beispielsweise mit Nutzerbefragung und -beobachtung.

Fit für Suchmaschinen

Haben Sie HTML-Code und Browser im Griff, geht es an die spezielleren Tests für bestimmte Einsatzzwecke. Für die Suchmaschinenoptimierung bietet die Suchmaschine Seekport einen Basistest. Hier findet sich der Seekbot, der die Website auf wichtige Kriterien für die Suchmaschinenfreundlichkeit testet.

Klassische Link-Test-Angebote gibt es viele. Kostenlos für bis zu 150 URLs ist beispielsweise www.mylinkcheck.de. Ähnlich wie beim Browser-Screenshot-Dienst browsershots.org müssen Sie hier in die Warteschlange und erhalten eine URL, unter der dann das Ergebnis zu finden ist. Sie können sich allerdings per E-Mail benachrichtigen lassen, wenn die Prüfung beendet ist. Eine Link-Prüfung mit detaillierterer Ergebnisaufstellung ist zwar nicht besonders schnell, wird aber – außer im Internet Explorer – kontinuierlich aufgebaut und zeigt so frühzeitig erste Ergebnisse.

Link-Checks gibt es natürlich nicht nur als Online-Test, sondern auch als Skript, denn die Logik – Quellcode durchgehen, Link aufrufen, HTTP-Meldung auswerten – ist nicht besonders komplex.

Der Link-Check ist die Basis jeder Suchmaschinenoptimierung. Wollen Sie dann noch einen Schritt weiter gehen, sollten Sie die Links auf die eigene Site prüfen. Hierzu bietet beispielsweise www.check-link.de ein praktisches Online-Tool. Bei den Ergebnissen werden auch die vermuteten Pageranks angezeigt. Eine ähnliche Vorhersage treffen noch viele andere Sites und natürlich auch die Google Toolbar. Mehrere solcher Tests finden unter www.seochat.com/seo-tools.

Bild: Tote Links auf ihrer Website spüren Sie mit Mylinkcheck auf.


Fazit

Website testen und optimieren

Jenseits der einfachen Tests wartet auf den Web-Entwickler natürlich noch wesentlich mehr. Zum einen geht es um Software-Tests, zum anderen um Last- und Stresstests, die die Standfestigkeit des Webservers unter Beweis stellen sollen. Das beginnt beim Ermitteln der Ladezeiten und Server-Antwortzeiten. Kostenlos ist das zum Beispiel bei HTMLWorld möglich. Die kommerziellen Lösungen reichen von browserübergreifenden Testszenarien von Froglogic über Software-Tests von Automated QA bis zu kompletten Test-Suites von Empirix oder Mercury. Diese Ansätze lohnen sich preislich aber erst bei größeren Projekten.

Dass Websites getestet werden müssen, ist offensichtlich. Wie Sie das gründlich und doch zeitsparend erledigen, oftmals nicht. Diese Sammlung an Online- und Offline-Tools ist bei weitem nicht vollständig, soll Ihnen aber zumindest ein wenig Zeit sparen und ein paar neue Perspektiven eröffnen. Denn wenn etwa das Testen in Safari weniger mühsam ist, wird es in Zukunft öfter gemacht. Und davon haben alle Surfer etwas.