Eine gute Performance wirkt sich positiv auf die Besucher aus – schließlich mag niemand lange Ladezeiten, erst recht dann nicht, wenn man diese beim Laden jeder einzelnen Unterseite in Kauf nehmen muss. Schon im HTML-Code des Webdesigns können Fehler vermieden werden, die später zu unnötig langen Ladezeiten führen würden. In diesem Artikel stellen wir daher 5 Performance-Killer für Webdesigner vor, die mit ein wenig Einarbeit in die Materie beseitigt werden können.

Performance-Killer Nr. 1: Grafiken

Grafiken sind Performance-Killer – das heißt jedoch nicht, dass man auf sie verzichten muss; man sollte sie nur mit Bedacht einsetzen. Ein gutes Beispiel ist ein Menü, das aus einzelnen Grafiken als Menüpunkte besteht. Hier macht es Sinn, alle Menüpunkte in einer Grafik zu vereinen und entweder per Imagemap oder via CSS-Sprites die einzelnen Punkte zu verlinken. Die Größe der Datei ist nicht nur kleiner als die der einzelnen Grafiken zusammen, auch werden Grafikinformationen wie Dateityp oder Kodierung nur einmal und nicht mehrmals heruntergeladen.

Performance-Killer Nr. 2: HTML und CSS-Code vermischen

Häufig sieht man, dass CSS-Code mit dem HTML-Code vermischt wird, das sieht dann zum Beispiel so aus:

1

<img src="grafik.png" style="float: left; border: 1px solid #f2f2f2; padding: 2px; margin-right: 5px;">

Das Problem: Dieser Code muss beim Laden jeder einzelnen Unterseite heruntergeladen werden. Sinnvoller ist es daher, alle CSS-Informationen in einer externen CSS-Datei zu speichern. So wird diese beim ersten Aufruf der Webseite heruntergeladen und im Cache gespeichert – für die Unterseiten müssen die CSS-Informationen also nicht erneut heruntergeladen werden.

Performance-Killer Nr. 3: Grafiken falsch Skalieren

Moderne Webseiten nutzen sogenannte Thumbnails, um auf der Startseite aktuelle Artikel zu präsentieren. Erst beim Aufrufen des jeweiligen Artikels kann der Leser das Bild in voller Größe bzw. im vollen Ausschnitt ansehen. Falsch ist es hier, einfach die großen Grafiken zu nehmen und per CSS zu skalieren – schließlich findet die Skalierung so nur optisch statt und der Anwender muss das Bild trotzdem in voller Größe herunterladen. In diesem Fall sollte also eine andere Lösung gefunden werden – zum Beispiel können Grafiken mittels PHP automatisch verkleinert werden oder aber die Redakteure der Seite müssen manuell die große Grafik um ein verkleinertes Thumbnail ergänzen.

Performance-Killer Nr. 4: Unnötige Effekte

Mit JavaScript in Verbindung mit AJAX lassen sich tolle Effekte zaubern. Fragen Sie sich, welche dieser Effekte wirklich nötig sind, denn jeder zusätzliche JavaScript-Code muss vom Benutzer zusätzlich heruntergeladen werden. Ganz wichtig: Wenn auf bestimmte Skripte nicht verzichtet werden kann, sollten die am Ende des HTML-Quelltexts platziert werden. So wird die übrige Seite beim Laden nicht behindert.

Performance-Killer Nr. 5: Flash

So schön Flash auf schnellen Computern auch sein mag – langsamere Computer haben häufig Probleme mit Flash, einige Geräte wie das iPad können damit gar nicht umgehen. Besitzt man also einen langsamen Computer und hat zusätzlich noch eine langsame Internetverbindung, wird das Laden von Flash-Elementen zur Qual. Deshalb gilt: Selbst bei einzelnen Elementen wie einer Slideshow sollte auf Flash komplett verzichtet werden. Bei richtiger Programmierung ist AJAX erheblich schneller und auch hinsichtlich der Suchmaschinenoptimierung besser.