Warum ist die Ladezeit für eine Webseite relevant:
Positive User Experience:
- Laut einer Studie erwartet knapp die Hälfte aller Internetnutzer eine Ladezeit von weniger als zwei Sekunden.
- Dauert das Laden mehr als drei Sekunden, springen 40 Prozent der Besucher ab
SEO-Rankingfaktor:
- Für Google und andere Suchmaschinen ist eine positive User Experience ein wichtiger Faktor, um die Qualität einer Webseite zu bestimmen. Deshalb wurde der Pagespeed auch von Google zum Rankingfaktor erhoben.
- Je schneller eine Webseite lädt, desto höher sind die Chancen auf gute Rankings
Conversion-Rate-Optimierung:
- Eine Verzögerung der Ladezeit um eine Sekunde kann die Conversions laut einer Studie um bis zu sieben Prozent senken. Was sich im ersten Moment nicht so viel anhört, lässt sich aber anhand einer einfachen Rechnung veranschaulichen
- Macht ein Online-Shop einen Tagesumsatz von 1.000 Euro, kann die Verzögerung der Ladezeit um eine Sekunde Einbußen von 70 Euro pro Tag bringen.
- Auf den Monat gerechnet, entgehen einem dadurch 2.100 Euro an Umsatz. Auf das Jahr gerechnet ist eine langsame Webseite somit ein echter Umsatzkiller
Crawling:
- Langsam ladende Webseiten werden vom Googlebot langsamer und nicht so intensiv gecrawlt, da er nur ein begrenztes Budget für das Crawling zur Verfügung hat
- Mit der Ladegeschwindigkeit bestimmt man somit auch, wie gut eine Webseite gecrawlt wird und wie aktuell die Inhalte im Google-Index sind
verschiedene Messtypen der Ladezeit:
- Time to First Byte (TTFB): Zeitraum vom Aufruf und dem vom Webserver ersten geladenen Byte
- First Contentful Paint (FCP): Zeitpunkt an dem vom Browser zum ersten Mal ein Darstellungselement angezeigt wird
- First Meaningful Paint (FMP): User hat das Gefühl die Seite wurde geladen
- Time to Interactive (TTI): die Webseite wurde richtig gerendert und ist nun bereit für Usereingaben
Auf diese Faktoren hat man keinen direkten Einfluss:
Bandbreite:
- Die Ladezeit einer Webseite wird durch die vorhandene Internet-Bandbreite beeinflusst
- Mit einer 3G-Verbindung und einem Smartphone wird sich die Webseite langsamer aufbauen als mit einem schnellen DSL-Anschluss.
Browsercache:
- Wenn ein Nutzer einen Browser verwendet, dessen Cache schon lange nicht mehr geleert wurde, kann sich der Seitenaufbau stark verzögern, weil der Arbeitsspeicher des Rechners nicht mehr ausreicht, um die Datenmenge zu verarbeiten
Rechenleistung des Clients:
- Auf älteren Desktop-Computern und Smartphones kann es zu Verzögerungen beim Seitenaufbau kommen, da der Aufbau des DOM und die Ausführung von Skripten durch zu wenig Arbeitsspeicher und Prozessorleistung verlangsamt werden
Diese Faktoren kann man aktiv beeinflussen:
Dateigrößen:
- Die Größe einer Webseite bestimmt, wie schnell sie geladen werden kann. Darunter fällt nicht nur der HTML-Code an sich, sondern auch Stylesheet- und Skript-Dateien sowie Bilder. Je geringer die Größe dieser Dateien ist, desto schneller kann die Seite laden.
Rechenleistung des Servers:
- Wird eine Webseite aufgerufen, bearbeitet der Webserver die Anfrage. Auch hier gilt: Müssen weniger Daten angefordert werden, erfolgt die Bearbeitung auch schneller
- Erfolgen bei hohem Traffic der Webseite viele Anfragen gleichzeitig, können Arbeitsspeicher und Prozessorleistung zu stark ausgelastet werden und somit zum Flaschenhals für die Ladezeit werden
- In diesem Fall sollten die Kapazitäten nach oben angepasst werden.
Bilder:
- Umstellen auf moderne Bildformate wie WebP
- Komprimieren von Bildern mithilfe von Programmen wie Photoshop oder PNGOUT
HTTP/2:
- Webserver auf das Protokoll HTTP/2 umstellen, dadurch können zum Beispiel alle Dateien oder Bilder über eine Verbindung heruntergeladen werden
Verwendung von Lazy Loading:
- hier werden Datenobjekte grundsätzlich bereitgestellt, diese aber erst bei einer konkreten Anfrage aus der Datenquelle geholt
Optimierungen im Quellcode:
- Auslagern von CSS und Javascript auf externe Files oder das Laden von JS Code erst am Ende,
- Optimierung des Quellcodes: Beseitigen von allen unnötigen Kommentare im Quellcode, Entfernen von allen überflüssigen Leerzeichen oder Zeilenumbrüchen
zum Beispiel mit Hilfe von YUI Compressor oder cssmin.js für CSS-Dateien,Closure Compiler oder jscompress für JavaScript
Einsatz von Prefetching: Bei dieser Technik speichert der Browser bestimmte Elemente der Webseite in den Cache, schon bevor die Seite komplett geladen wurde. Somit können Bilder, Grafiken oder JavaScript und CSS geladen werden, ohne das Rendering der Webseite zu behindern. Um eine Datei zu prefetchen, musst Du den Quellcode anpassen. In diesem Fall wird vor das gewünschte Element das Attribut rel=”prefetch” gesetzt.
<link rel="prefetch" href="//meineseite.de/beispielbild.jpg">
Einsatz von Prerendering:
- Hier wird das Beispiel schon vor dem Aufruf einer weiteren Seite mitgeladen. Die Ladezeit beim neuen Seitenaufruf wird dadurch verkürzt
- Nutzt man die Prerendering-Methode, wird eine komplette Webseite im Voraus vom Browser heruntergeladen und im Cache zwischengespeichert. Darin eingeschlossen sind alle Dateien, die für das komplette Rendering benötigt werden.
- Die im Voraus gerenderte Webseite kann bei einem Aufruf fast ohne Verzögerung geladen werden
- Die Ladezeit wird dabei auf weniger als 50 Millisekunden gekürzt
- Um das Prerendering zu implementieren, musst man folgenden Zeile im Quellcode der betreffenden Webseite einfügen:
<link rel=“prerender" href="//prerendering-seite.de/verzeichnis">