Wer kennt das nicht: Man googelt zu einem Thema, öffnet eine Webseite in der Hoffnung, dort die gewünschten Informationen zu finden, und der Content und die Bilder bauen sich sehr langsam auf. Laut einer Studie von Akamai Technologies Akamai Technologies warten 57% der Suchenden nur drei Sekunden oder auch weniger, bevor sie die Homepage wieder verlassen. Die durchschnittliche Ladezeit von Webseiten liegt bei etwa 8 Sekunden. Gemeint ist hier die Zeit, bis alle Scripte, alle Bilder und Plug-ins geladen wurden. Es ist auch kein Geheimnis mehr, dass Google die Ladezeiten als Faktor in seinen Suchalgorithmus einbezieht.

Bild 1: Eine Übersicht über die Ladezeitinformationen. Erstellt mit www.pagespeed.com

Mit kleinen Anpassungen eine große Wirkung erzielen und Ladezeiten verringern

Hier einige kleine Tipps, die schon Großes bei der Performanz der Seite bewirken können:

Nutzen der cache Funktion: Seiten, welche sich nur selten bis gar nicht ändern, können durch den Browser ihres Besuchers zwischengespeichert werden, das sogenannte Cachen. Eigentlich alle CMS Systeme wie zum Beispiel Wordpress und Typo3, bringen diese Funktion in den Seiteneinstellungen mit. So können speziell ausgesuchte Seiten gecached werden. Falls dies nicht der Fall ist, lassen sich Einstellungen diesbezüglich in der .htaccess vornehmen.Stylesheets: Es sollten so wenige extra CSS-Dateien wie möglich eingebunden werden. Von Vorteil ist es, den gesamten Code in einem einzigen Stylesheet zu haben. Damit verringern sich auch die Ladezeiten, da hier wieder der Cache eine große Rolle spielt. Stylesheets sollten generell im Header der Webseite implementiert werden. Auch hilft eine regelmäßige Überprüfung, welche CSS-Codeschnipsel oder gar ganze CSS-Dateien nicht mehr benötigt und gelöscht werden können. Durch das direkte Festlegen von Formaten, sogenannten Inline-Styles, wird eine unnötige Datenlast produziert. Das Sahnestück zur Optimierung einer Webseite wäre noch die Entfernung überflüssiger Leerzeichen und Kommentare, sowie das sogenannte „Minify“ (Minimierung von Zeichen).Beispiel Adiv.menu {

background: black;

height: 15px;

width:240px;

}

Beispiel B

div.menu {background: #000; height: 15px; width:240px;}Der Unterschied zu Beispiel A und Beispiel B ist, dass alle Leerzeichen entfernt wurden. Auch der Zeilenumbruch gehört zu den Sonderzeichen und wurde ebenfalls rausgenommen. Das background-Attribut wurde mittels Hex-Code zusammengestaucht. Allgemein sollten ein nach W3C valider Quellcode, richtige Verschachtelung der HTML Elemente sowie insgesamt ein schlanker Quellcode Hauptziele der Optimierung sein.Js, HTML und weitere Plugins: Skripte wie zum Beispiel JavaScript oder aber auch Plugins sind grundsätzlich im Footer der Webseite eingebunden, wenn sie nicht am Anfang des HTML Quellcodes gebraucht werden. Man sollte auch vermeiden, ganze Bibliotheken einzubinden. Diese Realisierung ist nicht immer leicht, wenn später neue Codefragmente hinzugefügt werden müssen.

Bild 2: Beschreibt den sogenannten „content breakdown“ und gibt prozentual alle Dateien an.

Umgang mit Bildern und Videos: Grafiken und auch Bilder sind aufgrund Ihrer Dateigröße eine (zentrale) Datenlast und können dadurch die Ladezeit deutlich verringern. Viele gängige Grafikprogramme bieten schon eine spezielle und optimierte Speicherung für die Einbindung in Webseiten an. Bestenfalls benutzt man Bilder im Dateiformat *.JPEG, da diese die höchste Komprimierungsstufe aufweisen. Es sollte darauf geachtet werden, dass Elemente nicht allzu häufig von externen Seiten geladen werden sollen. Die Bilder sollten auf keinen Fall über den Quellcode skaliert werden. Tipp! Mit dem jQuery Plugin Lazyload kann das Laden von Bildern verzögert werden, bis sie im Viewport, also erst beim Scrollen, zu sehen sind. Wordpress bietet ein Plugin für LazyLoad, welches sich unkompliziert installieren und konfigurieren lässt. Das Anpassen der Bilder über den Quellcode erfordert Leistung des PCs und lässt die Seite nicht schneller aufbauen. Im Grunde gilt für Videos das Gleiche. Es gibt aber schon viele Tools, auf denen Videos, wie z.B. YouTube auf der Webseite eingebunden werden. Aufgrund der Einbindung ist keine Optimierung möglich.Zusätzliche Tools in CM-Systemen: Steckt hinter der Webseite ein „Content Management System“ (CMS), sollte die Anzahl der Plug-ins bzw. Extensions wohlüberlegt sein. Oft bringen die Plug-ins Features mit, welche man auch problemlos mit eigenen Funktionen im Template implementieren kann. Jedes noch so scheinbar kleines Modul benötigt Ladezeit und auch Speicher beim Aufbau der Webseite. Die Liste der Plug-ins sollte stets aufgeräumt sein.

Weitere mögliche Ursachen für lange Ladezeiten

Streng genommen sind auch folgende Gründe Schuld für eine sich langsam aufbauende Webseite:

Wo liegt der Webserver?: Besitzt man ein günstiges aber langsames Hostingpaket bei einem der großen Anbieter? Oder läuft die Webseite auf einem eigenen Server? Die beste Lösung ist ein schneller und leistungsstarker Server, wobei durch die technische Optimierung (technisches SEO) des Servers die Ladezeit deutlich verringert werden kann.Architektur der Browser: Der Browser ist ein Indikator für die Performanz einer Webseite. Browser nutzen unterschiedliche Rendering-Engines welche unterschiedliche Stärken und Schwächen haben und dadurch unterschiedlich lange für das Rendern einer Webseite brauchen. Zu den genaueren Stärken und Schwächen der gängigen Browser erfahren Sie mehr in dem nächsten Artikel unserer Reihe.

Was wir für Sie tun können

Sie möchten die Performanz Ihrer Webseite verbessern und die Absprungrate reduzieren? Gerne unterstützen wir sie bei der Optimierung Ihrer Dateien, Stylesheets und Content Management Systeme zur Optimierung der Ladezeiten ihrer Webseite.

Kontaktieren Sie uns!