Lädt eine Webseite nur schleppend, sucht man die Schuld schnell bei der Infrastruktur oder dem Webbrowser des Anwenders. Doch das Zusammenspiel von Webserver, Webseite und Browser ist kompliziert. Eine Reihe von Kniffen hilft, das Laden der Webseite zu beschleunigen.

Der erste Teil [1] dieser Artikelserie führte in die Thematik der Webseitenoptimierung ein und widmete sich hauptsächlich der Benutzerseite. Er zeigte, wie Sie die Konfiguration des Webbrowsers optimieren und mithilfe verschiedener Browser-Erweiterungen unerwünschte Inhalte aus den angezeigten Webseiten entfernen. Im vorliegenden zweiten Teil steht nun die Betreiberseite im Vordergrund: Diesmal gehen wir auf die Punkte ein, die Ihnen als Redakteur beim Vorbereiten und Bereitstellen der Inhalte weiterhelfen.

Als Redakteur verantworten Sie den Content der Webseite. Neben den einzelnen Elementen der Webpräsenz, wie Texten, Tabellen und Bildern, beinhaltet das häufig auch das Seitendesign. Dabei spielen neben Formatvorlagen in Form von Cascading Style Sheets (CSS) auch aktive Inhalte durch Javascript eine Rolle, inklusive populärer Komponenten wie Ajax, JQuery und JSON. Mithilfe diverser Werkzeuge zum Validieren der Inhalte bändigen Sie das mitunter doch recht rege Eigenleben dieser Technologien.

Lesbarkeit

Inhalte möglichst lesbar zu formulieren – das klingt erst einmal nach einer absoluten Selbstverständlichkeit. Oft widmen sich Autoren diesem Punkt allerdings eher beiläufig. Ideen und die daraus entstandenen Texte bedürfen einer klaren Sprache, damit zum Beispiel auch automatisierte Übersetzungen gelingen. So erreichen Sie Leser aus aller Welt.

Als Indikator für die Attraktivität der Webseite für eine internationale Leserschaft dient dabei die Rückübersetzung einer automatisiert erstellten Übersetzung aus einer anderen Sprache (Abbildung 1). Das gelingt beispielsweise mit den Übersetzerdiensten von Google [2] oder Yandex [3]. Erfassen Sie den Text nach dem zweiten Übersetzungsschritt inhaltlich nicht mehr ohne Weiteres, bewirken eine Vereinfachung des Textaufbaus und eine weniger komplizierte Grammatik schnell bessere Resultate und steigern so den Erfolg merklich.

Abbildung 1: Der Erlkönig ist nach dem automatischen Übersetzen ins Französische und zurück ins Deutsche noch gut zu verstehen.

Generatoren

Erzeugen Sie die Webseiten automatisiert oder auf der Basis einer Vorlage, dann sollten Sie auf die im Kasten “Website-Generatoren” aufgeführten Punkte achten. Das sieht auf den ersten Blick nach viel Aufwand aus, beschleunigt jedoch am Ende die Verarbeitung auf mehreren Ebenen: Webbrowser verarbeiten valide Daten deutlich schneller, da keine Nacharbeit durch die Render-Engine des Browsers anfällt. Zudem lesen Suchmaschinen-Crawler nicht nur den Inhalt aus, sondern auch den Seitentitel mit den dazu passenden Schlüsselwörtern – und verstehen so überhaupt erst Ihren Webauftritt.

Mithilfe dieser Indikatoren erfolgt die Identifikation der Webseite und die Bewertung auf Relevanz bei einer späteren Suche. Ihr Webauftritt wird darüber von der Suchmaschine nach deren eigenen Kriterien genauer klassifiziert und später bei der Recherche über den Index der Suchmaschine überhaupt wiedergefunden. Das erhöht nicht nur die Trefferquote, sondern auch die Anzahl der Besucher, was wiederum einen direkten Einfluss auf die Breitenwirkung und die Relevanz der Webpräsenz hat. Ihre Inhalte und die Werbung bringen ohne Besucher wenig.

Automatisch

Als Ausgangspunkt für Webseiten bieten sich in Auszeichnungssprachen wie XML, LaTeX, WML, Markdown oder AsciiDoc verfasste Dokumente an. Den aus diesen Daten erzeugten HTML-Code sollten Sie nach dem Export validieren, also auf seine Korrektheit hin überprüfen. Dies geht meist einher mit einer Optimierung, also einer Verschlankung und Vereinfachung des HTML-Outputs [4] und der CSS-Dateien [5]. Für den HTML-Export stehen eine Vielzahl von Werkzeugen und Ausgangsformaten zur Verfügung, von der Wiki-ähnlichen Schreibweise bei Pandoc [6] oder AsciiDoc [7] über DocBook [8] als Zwischenschritt bis hin zum direkten Weg mittels Docbook2html.

Basieren Ihre Dokumente auf LaTeX, kennen Sie sicherlich den Klassiker Latex2html [9] bereits. Da er schon seit 2001 keine Weiterentwicklung mehr erfährt, darf ein Blick auf die Nachfolger TTH (“TEX to HTML translator” [10]), HyperLaTeX [11], PlasTeX [12] und Tex4hht [13] nicht fehlen.

Gehen Sie von XML aus, erweisen sich Saxon [14] und Htc-py [15] als nützliche Helfer. Ein XHTML-Dokument ist per Definition auch ein XML-Dokument; korrekt exportiert, stellt es weder XML-Parser noch die meisten Browser vor Probleme. Allerdings zeigt hier der Internet Explorer oft Schwächen, von daher sollten Sie besser zu HTML5 greifen. Benötigen Sie XHTML5 (etwa aufgrund von SVG oder MathML), dann gelingt das am besten über die Entwicklung polyglotter Dokumente [16].

Validieren

Nur weil das Erstellen der Dokumente automatisiert abläuft, heißt das noch lange nicht, dass die durch den jeweiligen Export entstandenen Dokumente auch alle Konventionen des HTML-Standards einhalten. Zur Sicherheit sollten Sie die Ausgabe immer kontrollieren und dabei sowohl HTML als auch CSS und Javascript mit einbeziehen. Im Ergebnis reduzieren Sie die Fehler in der Darstellung (HTML und CSS) sowie in der Ausführung (Javascript, Ajax, JQuery und JSON). Um die empfangenen Daten zu interpretieren und in eine korrekte Darstellung umzuwandeln, muss der Webbrowser des Lesers somit weniger Aufwand treiben. Als Nebeneffekt ergibt sich eine reduzierte Netzwerklast, da zwischen Webserver und Browser weniger Anfragen und Datenpakete hin- und herwandern müssen.

Als Referenz zum Validieren von HTML-Code gilt der Markup Validation Service des Web-Konsortiums W3C [17]. Über diesen prüfen Sie zuverlässig ganze Webauftritte oder auch nur einzelne HTML-Dateien – Letztere laden Sie über ein Formular hoch. Aus dem detaillierten Ergebnis erkennen Sie auf einen Blick, an welchen Punkten noch Bedarf zum Aufräumen und Nachbessern besteht (Abbildung 2). Der mitunter sehr pingelige XML Schema Validator [18] spezialisiert sich hingegen auf den Dialekt XHTML. Als gute Helfer erweisen sich auch die Firefox-Plugins Validator [19] und HTML Validator [20]. Sie blenden die Ergebnisse der Überprüfung als separates Fenster ein. Die Ergebnisse basieren auf dem Verfahren des W3C in Kombination mit den Werkzeugen Tidy [21] beziehungsweise Tidy für HTML5 [22] und OpenSP [23].

Abbildung 2: Das Ergebnis der Validierung einer bestehenden Webseite mit dem Markup Validation Service des Web-Konsortiums W3C.

Javascript-Code lässt sich weniger leicht auf seine Korrektheit hin überprüfen als HTML. In der Praxis haben sich dafür JSLint [24] und JSHint [25] bewährt, die beide über die Webseite des jeweiligen Projekts ein Textfeld bereitstellen. In dieses übertragen Sie den Javascript-Code und erhalten unverzüglich eine Bewertung der Komplexität des Programmcodes sowie eine Liste der dabei entdeckten Fehler. Für einen Offline-Test existieren neben JSHint auch die Ableger Acorn.js [26] und ESLint [27]. Die Installation der beiden Kommandozeilenwerkzeuge erfolgt jeweils über den Npm-Paketmanager von Node.js und liegt somit außerhalb des Blickwinkels der Paketverwaltung der verwendeten Distribution.

CSS validieren

Das Überprüfen von Formatvorlagen in Form von Cascading Style Sheets (CSS) bleibt im Alltag oft links liegen. Mit den beiden Programmen Csstidy [28] und Cssed [29] kommen Sie Fehlern in diesen Dateien allerdings schnell und ohne viel Arbeit auf die Spur. Während Sie beim Kommandozeilenwerkzeug Csstidy im Terminal arbeiten, liefert Cssed eine grafische Oberfläche (Abbildung 3). Die Validierung starten Sie hier über die Schaltfläche mit dem grünen Haken.

Abbildung 3: Der grafische CSS-Validator Cssed bietet beim Überprüfen von CSS-Dateien viel Komfort und zahlreiche weitere Funktionen.

Csstidy validiert den CSS-Code nicht nur, sondern analysiert ihn und optimiert die darin benutzten Schlüsselbegriffe. So wandelt das Programm etwa Farben in Wortform in den entsprechenden Farbcode in RGB-Notation um, etwa “white” nach “#FFF”. Darüber hinaus entfernt Csstidy überflüssige Leerzeichen, Semikolons und Mehrfachzuweisungen. Die Ausgabe in Listing 1 zeigt das anhand eines Beispielaufrufs. Insgesamt verkleinert Csstidy das Beispiel um mehr als 25 Prozent.

$ csstidy style.css
Selectors: 24 | Properties: 100
Input size: 2.922KiB  Output size: 2.134KiB  Compression ratio: 26.97%
-----------------------------------
body {
background:#FFF;
color:#000;
font-size:medium;
}
img {
border:none;
}
[...]
3: Optimised color: Changed "white" to "#FFF"
4: Optimised color: Changed "black" to "#000"
20: Optimised color: Changed "#DD0000" to "#D00"
38: Optimised color: Changed "white" to "#FFF"
46: Optimised color: Changed "white" to "#FFF"
47: Optimised font-weight: Changed "normal" to "400"

Kombiniert

Viele Webpräsenzen gliedern die Formatvorlagen in unterschiedliche Dateien und binden diese zu einem späteren Zeitpunkt wieder ein. Sie sollten diese Einzel-Dateien soweit wie möglich zu einer einzigen Formatvorlage zusammenfassen: So muss der Browser nicht für jede weitere CSS-Datei eine neue Verbindung öffnen. Da moderne Webbrowser versuchen, die referenzierten Daten parallel zu laden, sollten Sie zudem darauf achten, die Formatvorlagen im Kopf der HTML-Datei zu referenzieren. Dabei spielt auch der Cache des Webbrowsers eine Rolle – dort puffert der Browser externe Dateien. Nur bei einem expliziten Reload lädt er alle Daten erneut von der Originalquelle.

Prüfen Sie dabei am besten gleich mit, ob sich der Inhalt der Webseite auch ohne Formatvorlage dem Betrachter erschließt. Möglicherweise nutzten manche Leser Ihres Angebots Text-Browser, andere haben eventuell die Darstellung von CSS im Webbrowser deaktiviert, oder die Formatvorlage ging bei der Übertragung gleich ganz verloren. Beachten Sie auch, dass sich die Webcrawler der Suchmaschinenbetreiber nur für die Inhalte der Webseite interessieren und CSS ebenfalls wenig Beachtung schenken.

Optimiert

Wie bereits im ersten Teil der Artikelserie geschildert, verbirgt sich hinter der Darstellung einer Webpräsenz auf dem Monitor ein komplexer Vorgang. Dazu gehört besonders die Anzeige von Abbildungen im Textfluss. Kennt die Render-Engine des Webbrowsers die Bildgröße bereits vorab, reserviert sie entsprechend Platz und fügt die mit Verzögerung nachgeladenen Bilddaten nach dem Transfer passend ins Layout ein.

Damit dies möglichst ohne Rechenaufwand und damit verbundenen Zeitverzug gelingt, benötigen die eingebundenen Bilder Alternativtexte (ALT-Attribut) sowie korrekte Größenangaben im IMG-Tag. Die Alternativtexte zeigt der Webbrowser während des Datentransfers im Platzhalter an, auch Blinde oder Fehlsichtige – und letzten Endes auch die Suchmaschinen – profitieren von guten Beschreibungen der Bilder. Besonders nachteilig wirkt sich in diesem Schritt eine Skalierung aus: Es ist Unsinn, großformatige Bilder samt des damit verbundenen Datenvolumens über die Leitung zu zerren, nur damit die Render-Engine sie wieder passend verkleinert.

Die Bildgröße beeinflusst auch die Verarbeitung im Browsercache. Von Vorteil sind Kantenlängen, die ein Vielfaches von 2 darstellen – also etwa 8, 16, 32, 64, 128, 256, 512 oder 1024 Pixel. Damit gehen die interne Verarbeitung und das Page-Alignment im Cache am effektivsten um.

Nachgeladen

HTML5 beinhaltet Funktionen, die Inhalte bereits laden, bevor der Besucher der Webseite sie explizit aufruft. Zum Einsatz kommt die Technik zum Beispiel bei Anrisstexten (“Teasern”), die auf weiterführende Inhalte verweisen, etwa den vollständigen Artikel. Diese Funktionen verwenden Nachrichtenportale gern auf der Titelseite; viele Content-Management-Systeme integrieren sie von Haus aus.

Aus technischer Sicht sind diese Inhalte explizit als nachladbar gekennzeichnet – HTML5 kennt dafür die Link-Attribute prefetch und prerender [30]. Während das erste nur die referenzierte Ressource nachlädt, bereitet das zweite zusätzlich die gesamte Seite im Hintergrund vor. Listing 2 zeigt zwei entsprechend ausgestaltete Links als Beispiel.

<link rel="prefetch" href="http://www.meineurl.de">
<link rel="prerender" href="http://www.andereseite.de">

Der Webbrowser des Benutzers lädt die Seite im Hintergrund und stellt sie dann ohne weitere Lade- oder Rechenzeiten sofort dar, sobald der Anwender den entsprechenden Link aufruft. Das reduziert die Ladezeiten und nutzt zudem die Netzwerkbandbreite besser aus, sorgt aber einerseits für zusätzliche Netzwerklast und andererseits für Einträge in den Browsercache – auch bei Seiten, die Sie tatsächlich niemals besucht haben.

Das Ganze funktioniert allerdings nur, wenn die entsprechende Option dazu auch im Webbrowser aktiviert ist. Firefox nutzt Prefetch in der Standardkonfiguration von Haus aus; bei Bedarf kontrollieren Sie die entsprechende Einstellung im Schlüssel network.prefetch-next unter about:config (Abbildung 4). Eine Option, die Funktion über den Konfigurationsdialog zu steuern, bietet Firefox nicht.

Abbildung 4: In Firefox lässt sich das sogenannte Prefetching, also das automatisierte Laden von Inhalten vor dem eigentlichen Abruf, über die internen Einstellungen abschalten.

Sauberer Code

Bei dynamischen Inhalten, die Sie mittels Javascript, PHP, Perl oder Python bereitstellen, empfiehlt es sich, dafür die jeweils effektivste Sprache einzusetzen, die für die Webseite infrage kommt. Wenn möglich, nutzen Sie stets die aktuellste verfügbare Version. Berücksichtigen Sie dabei die üblichen Prinzipien der Programmentwicklung – Lesbarkeit, Dokumentation und Modularisierung der genutzten Komponenten. Das Verwenden von Vorlagen verringert die Fehlerquote und ermöglicht eine übergreifende Einheitlichkeit, die Ihnen die spätere Pflege der Webpräsenz erleichtert.

Sorgten früher komplexe Browserweichen für zusätzlichen Aufwand und graue Haare, müssen Sie als Entwickler heute die unterschiedlichen Ausgabegeräte im Auge behalten. Ein Leser mit einem Smartphone in der Hand hat andere Anforderungen an die Webseite als der Anwender vor dem PC. Mit ein wenig PHP-Code wie in Listing 3 identifizieren Sie das genutzte Gerät und senden eine spezifische Formatvorlage zurück. Nutzen Sie mehrere unterschiedliche Formatvorlagen, referenzieren Sie diese bei HTML5 analog zu Listing 4.

if(strpos($_SERVER['HTTP_USER_AGENT'], "iPhone"))
{
   // Anweisungen für Besucher mit einem iPhone
}

<link href="iphone.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 0px) and (max-width: 320px)">
<link href="ipad.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 321px) and (max-width: 768px)">
<link href="style.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 769px)">

Auch beim Verwenden von Größenangaben in Formatvorlagen lauern kleine Stolperfallen. Um die Vorlagen für die verschiedenen Ausgabegeräte skalierbar zu machen, benutzen Sie darin am besten stets die Angabe em [31]. Die Einheit besitzt in der Typografie eine lange Tradition und bezeichnet die Geviertgröße, um darüber die horizontale Breite und die Anzahl der Lettern zu messen. Im Rahmen von CSS definiert sie die Anzahl der Pixel und erlaubt das Messen von Breite und Höhe, wobei hier lediglich die Proportionen der Seitenelemente von Interesse sind.

Haben Sie in der Formatvorlage die Größe des Seiteninhalts nicht über den BODY-Tag spezifiziert, kommen stattdessen die Einstellungen des Benutzers zur Geltung. Ähnliches gilt für die Angaben über Art und Größe der Schrift. Geben Sie stets eine generische Schrift als Notlösung mit an, wie etwa sans oder sans-serif. Fehlt die gewünschte Schrift im System des Besuchers, lädt der Browser wenigstens eine brauchbare Alternative.

Kompakter Code

Während die Form des HTML-Quelltexts für Sie als Webentwickler oder Redakteur durchaus von Relevanz sein dürfte, ist sie dem Webbrowser im Endeffekt egal: Leerzeichen, Einrückungen und Zeilenumbrüche ignoriert er. Es ergibt daher durchaus Sinn, auf dem Webserver eine kompakte und bereinigte Variante der Webpräsenz einzustellen. Damit verringern sich die zu transferierenden Datenmenge und die Aufbereitungszeit der Webseite erheblich.

Für diesen Schritt gibt es rund um das bereits angesprochene HTML-Tidy-Projekt eine Reihe nützlicher Werkzeuge, wie etwa das javabasierte JTidy [32], die Perl-Variante PTidy [33] sowie die Python-Schnittstelle für TidyLib [34]. Benutzer von Distributionen, die auf Debian basieren, kommen über das Paket libhtml-clean-perl in den Genuss des Programms htmlclean, das diese Aufgabe mit einer ansprechenden Ausgabe übernimmt (Listing 5). Dabei enthalten die Spalten nacheinander die Originalgröße der Datei, die Größe der komprimierten Version, den Grad der Reduktion und am Schluss den Dateinamen. Htmlclean legt zusätzlich eine Archivdatei mit der Erweiterung .bak an, sodass stets die Originaldatei erhalten bleibt.

Um die Komprimierung nicht stets von Hand ausführen zu müssen, steht mit mod_tidy [35] auch ein entsprechendes Modul für den Apache-Webserver zur Verfügung. Darauf geht der dritte Teil dieser Serie noch im Detail ein.

$ htmlclean -v *.html
  2317   1999 13% impressum.html
  3669   3276 10% index.html
 15361  13823 10% neuigkeiten.html

Fazit und Ausblick

Dieser Teil vermittelte Ihnen, welche Mittel und Wege Ihnen als Redakteur zur Verfügung stehen, um die Inhalte formal auf Richtigkeit zu prüfen und zu optimieren. Als weitere Anregung dazu sei der im Rahmen des Chemnitzer Linux-Tags 2010 von Frank Richter gehaltene Vortrag “Firefox als Werkzeug zur Webentwicklung” [36] empfohlen, der auf die verschiedenen Erweiterungen mit konkreten Beispielen genauer eingeht. Brian D. Davisons Caching-Tutorial [37] erklärt zudem, wie Sie Daten optimal auf den Meta-Ebenen organisieren.

Im nächsten Teil dieser Serie werden wir die Möglichkeiten des Systemadministrators behandeln, die Leistung des Konstrukts Webseite zu optimieren. Den Schwerpunkt bilden darin die Aufgaben des Administrators und wie er im Rahmen der Betreuung des Webservers dazu beiträgt, die von Ihnen als Redakteur vorbereiteten Inhalte mit möglichst wenig Verzögerung zur Verfügung zu stellen.