Unser ausführlicher Leitfaden zur Verbesserung der Seitengeschwindigkeit. Bewährte Taktiken
Wie oft verlassen Sie eine Seite, bevor sie geladen wird? Laut Google entscheiden sich bis zu 53 % der Mobilnutzer, eine Website zu verlassen, wenn das Laden länger als drei Sekunden dauert. Was verursacht, dass eine Seite langsam lädt, und wie geht man damit um? In unserem Artikel werden wir diese Themen ausführlich besprechen.
Was ist die Ladegeschwindigkeit einer Seite und was beeinflusst sie?
Die Ladegeschwindigkeit einer Webseite ist die Zeitspanne zwischen dem Klicken auf einen bestimmten Link und dem Zeitpunkt, an dem die entsprechende Seite geladen wird (oder beginnt auf unsere Interaktion zu reagieren). Dieses Thema ist in Bezug auf UX (User Experience) sehr wichtig – schließlich möchte niemand von uns auf das Laden einer langsamen Website warten.
Es ist auch zu erwähnen, dass heutzutage die Ladegeschwindigkeit von Seiten auf mobilen Geräten ebenso wichtig, manchmal sogar wichtiger ist als auf Desktop-Computern und Laptops. Es ist sinnvoll, bereits während des Anwendungsdesignprozesses über diesen Aspekt nachzudenken. Beim Styling unserer Website wird der Mobile-First-Ansatz (zuerst mobile Versionen von Anwendungen erstellen) in der Regel ein Dutzend oder mehr Prozent der Dateigröße einsparen, was auf lange Sicht einen sichtbaren Unterschied machen kann.
Anzahl und Größe zusätzlicher Dateien
Die überwiegende Mehrheit der Websites, die Sie im Internet sehen können, verwendet oft verschiedene Bilder oder Skripte, um z.B. darzustellen, was sie präsentieren möchten, das Benutzererlebnis zu verbessern oder sie zu Handlungen zu ermutigen.
Die Zeiten von Webseiten mit langen Textwänden gehören der Vergangenheit an, aber diese Veränderung hat zu einer viel größeren Datenmenge geführt, die der Browser verarbeiten muss. Wir können jederzeit überprüfen, was genau unser Browser nach dem Aufrufen einer Seite herunterlädt. Dazu einfach im Netzwerk-Tab der Entwicklerwerkzeuge öffnen (wir empfehlen hierfür die Tastenkombination Strg+Shift+I). Die Seite sollte dann aktualisiert werden, und die gesamte Liste der heruntergeladenen Dateien kann eingesehen werden.
Ein Beispiel von der Website https://youtube.com.
Schriftarten
Obwohl sie unauffällig erscheinen, weil es nur der Stil und die Schriftart der Buchstaben ist, können Schriftarten zur Gesamt-Ladezeit der Website beitragen. Dieses Problem betrifft hauptsächlich die Designer, obwohl auch einige Verantwortung auf den Schultern der Entwickler liegt, da wir hier einige Fragen beantworten müssen:
- Benötigt unsere Website so viele verschiedene Schriftarten?
- Enthalten die Schriftarten, die wir auf den Server hochgeladen haben, nur die von uns verwendeten Stile?
- Verwenden wir Schriftersatz, um den Cumulative Layout Shift (CLS) zu begrenzen?
- Senden wir Schriftarten im optimalsten Format?
Unsichtbare Elemente
Auf einer Website passiert mehr als nur das, was wir in einem bestimmten Moment sehen können. Einige Websites können mit verschiedenen Elementen reich ausgestattet sein, die, obwohl derzeit unsichtbar, eine zusätzliche Belastung für unseren Browser darstellen können.
Nehmen wir an, wir möchten eine wirklich lange Seite besuchen. Je länger die Seite ist, desto mehr Inhalt hat sie, was bedeutet, dass mehr Daten heruntergeladen werden müssen. Der Browser wird die gesamte Seite und alles, was für sie vorbereitet wurde, herunterladen, um sie "von Anfang an" verfügbar zu machen, auch wenn wir nur einen Bruchteil des Ganzen sehen können.
Suboptimaler Code
Wenn Sie jemals eine Situation erlebt haben, in der es so schien, als wäre die Seite bereits geladen, Sie aber nicht mit ihr interagieren konnten, z.B. durch Klicken oder Scrollen, könnte der Schuldige ein ineffizienter Code sein.
Am häufigsten kann der Effekt, den wir auf der Website erzielen möchten, auf tausend verschiedene Arten geschrieben werden. Doch nicht jede dieser Möglichkeiten wird dafür sorgen, dass der Code mit dem gewünschten Ergebnis ausgeführt wird.
Das Skript, das das Scrollen der Seite durch den Benutzer verfolgt, muss normalerweise nicht jedes Mal ausgeführt werden, sondern nur, wenn der Besucher das Scrollen der Seite beendet hat. Der Versand eines Dutzend oder mehrerer Dutzend Anfragen an die API pro Sekunde ist definitiv keine gute Lösung.
Wie führt man einen Website-Geschwindigkeitstest durch?
Um die Ladegeschwindigkeit der Seite sowie ihre Gesamtleistung zu überprüfen, können Sie ein Tool verwenden, das in den Chromium-basierten Browsern integriert ist (z.B. Chrome, Brave). Dazu öffnen wir erneut die Entwicklerwerkzeuge, genauer gesagt den Lighthouse-Tab. Mit diesem Tool können wir die Seite, auf der wir uns befinden, auditieren. Natürlich können wir dies auch mit anderen Browsern unter Verwendung von den PageSpeed Insights-Tools durchzuführen.
Ein Beispiel für ein Seiten-Audit, das mit PageSpeed Insights durchgeführt wurde.
Nach der durchgeführten Inspektion erhalten wir ein Paket von Daten zu verschiedenen Aspekten im Zusammenhang mit der Seitennutzung und darüber hinaus. Das Tool liefert verschiedene Statistiken und Grafiken. Der große Vorteil der Verwendung dieser Anwendung ist die Tatsache, dass wir zusätzlich zu den gefundenen Problemen auch eine Erklärung erhalten, warum eine bestimmte Sache ungünstig ist und wie man sie beheben kann.
Es wäre eine gute Idee, einen solchen Test sowohl für die mobile als auch für die Desktop-Version durchzuführen, da sich die Ergebnisse erheblich unterscheiden können. Dies liegt daran, dass unterschiedliche Versionen von Skripten oder Stilen an verschiedene Geräte gesendet werden können. Für Mobilgeräte werden andere Aspekte mehr und andere weniger berücksichtigt, je nach den angenommenen Standards.
Es ist auch erwähnenswert, dass durch die Verbesserung der Faktoren aus dem Core Web Vitals-Abschnitt sowohl das Benutzererlebnis auf der Website als auch die mit SEO verbundenen Aspekte verbessert werden. Google (oder andere Suchmaschinen) wird eher dazu neigen, eine solche Seite auf den ersten Seiten der Suchergebnisse anzuzeigen.
Zusätzliche Hilfe im Kampf zur Optimierung des Betriebs unserer Website bietet der Performance-Tab in den Entwicklerwerkzeugen. Damit können wir den Betrieb der Seite aufzeichnen und dann analysieren, warum diese Seite eine bestimmte Zeit zum Laden benötigte und was sie verursachte. Wir erhalten die genaue Hierarchie der Codeanforderungen zusammen mit Screenshots der Seite während der Aufzeichnung. Wir können dort auch die auf der Seite angezeigten Animationen, mögliche Speicherlecks oder z.B. die Nutzung der Grafikkartenlast überprüfen.
Wie kann man die Ladegeschwindigkeit einer Seite verbessern?
Wir wissen bereits, was die Ladezeit einer Seite beeinflusst und wie man sie überprüft. Nun ist die wichtigste Frage, wie man dieses neu erworbene Wissen umsetzt und die Leistung unserer Website verbessert. Wer ist jedoch verantwortlich für die Ladegeschwindigkeit? Entwickler, Content Marketer oder vielleicht die Person, die mit dem Hosting-Server und Implementierungen zu tun hat? Es stellt sich heraus, dass jeder zur schnelleren Ladezeit einer bestimmten Website beitragen kann.
Bildoptimierung
Unoptimierte Grafiken können unseren Browser erheblich durch ihr Gewicht belasten. Besonderes Augenmerk sollte auf die Bereiche gelegt werden, in denen Benutzer ihre eigenen Bilder hochladen können. Meistens sind die Bilder, die wir auf eine Webseite hochladen, nicht größer als ca. 500x500px (abgesehen von denen, die zur Erstellung von Originaldesigns verwendet werden), daher muss sichergestellt werden, dass die tatsächliche Größe eines grafischen Elements nicht die im Browser angezeigte Größe überschreitet.
Bei der Verwendung von Drupal ist das Responsive Image-Modul hierfür perfekt geeignet, da es uns ermöglicht, ein richtig skaliertes Bild vorzubereiten, abhängig von der Breite des Anzeigebildschirms unseres Geräts, in Kombination mit einem leistungsstarken Browsermechanismus – einem Bildtag. Innerhalb dieser können wir die Größe des Bildes, das vom Server auf den Browser des Benutzers heruntergeladen werden soll, abhängig von mehreren Faktoren frei einstellen:
- Anzeigebreite,
- Pixeldichte (Apple-Geräte und neuere Telefone bieten eine höhere Dichte als normale Monitore),
- Unterstützung für verschiedene Bilddateiformate.
Darüber hinaus können wir unsere Fotos auch durch Kompression "verschlanken". Verschiedene Tools wurden zu diesem Zweck entwickelt, wie Image Compressor. Eine solche Kompression ermöglicht es, die Größe um mehrere Dutzend Kilobyte, manchmal sogar noch mehr, zu reduzieren.
Der Schlüsselaspekt bei der Optimierung der Grafikelemente ist auch ihr Dateiformat. Obwohl .jpg und .png uns jahrelang gut gedient haben, lohnt es sich in Bezug auf Browser, neuere und optimalere Lösungen in Betracht zu ziehen. Bilder im .webp- oder .avif-Format können bis zu 10-mal weniger Platz einnehmen als ihre älteren Gegenstücke. Sie müssen jedoch richtig implementiert werden. Eine falsche Implementierung dieser Lösung kann neben zusätzlichen Kosten auch in das Gegenteil des beabsichtigten Effekts umschlagen.
Ressourcenoptimierung
Andere Dateien, die normalerweise zusammen mit einer Webseite gesendet werden, sind diejenigen, die den Stil und das Verhalten der Seite definieren (CSS- und JS-Dateien). Wie bei Grafikelementen können wir hier einige Optimierungen vornehmen.
Zunächst sollten diese Dateien minimiert werden, d.h. einem Prozess unterzogen werden, bei dem unnötige Zeichen entfernt werden (wie Leerzeichen, Zeilenumbrüche oder Kommentare von Entwicklern). Diese stören nicht die Funktion dieser Dateien, erhöhen aber ihre Größe.
Weiterhin können wir mit Hilfe von Bundlern oder anderen Werkzeugen ein Dutzend oder mehrere Dutzend kleine Dateien zu einer einzigen größeren zusammenführen. Dieses Verfahren reduziert die Anzahl der Anfragen an den Server, was sich ebenfalls positiv auf die Ladegeschwindigkeit der Seite auswirkt.
Quelle: Webpack
CDN
Content Delivery Network ist eine Lösung, die es uns ermöglicht, unsere Dateien auf verschiedenen Servern in verschiedenen Teilen der Welt abzulegen, sodass jede Person von überall auf der Welt die Dateien über die derzeit für sie schnellste Verbindung bereitgestellt bekommt.
Die Verwendung von CDN ist nicht mehr so effizient wie noch vor einigen Jahren, da die von ihm heruntergeladenen Dateien im Arbeitsspeicher des Browsers zwischengespeichert werden konnten, selbst wenn sie von anderen Websites heruntergeladen wurden. Diese Methode wurde jedoch aus Sicherheits- und Datenschutzgründen für Benutzer eingestellt.
Trotzdem wird uns die Nutzung dieser Lösung helfen, unsere Dateien schneller bereitzustellen, insbesondere wenn wir Benutzer auf der ganzen Welt haben.
Lazy Load
Das Lazy Loading von Bildern, das in den neuesten Browsern bereits nativ unterstützt wird, spart ebenfalls mehrere Dutzend Millisekunden beim Laden einer Seite. Es ist ein Prozess, der es ermöglicht, nur die Ressourcen zu laden, die der Benutzer in einem bestimmten Moment benötigt. Jede nachfolgende Datei wird bei Bedarf geladen, wenn der Browser feststellt, dass sie bereits erforderlich ist.
Ein einfaches Beispiel für die Nützlichkeit dieses Mechanismus kann ein paar Bilder am Ende einer Website sein. Beim Laden einer Seite müssen wir sie nicht sofort herunterladen, da wir beim Laden der Seite nur den oberen Teil sehen. Erst wenn wir sie nach unten scrollen, beginnt der Browser zu berechnen, ob der Inhalt am Ende der Seite schon heruntergeladen werden sollte.
Wir haben die Funktionsweise dieses Mechanismus anhand des Beispiels des Lazy-load-Moduls in Drupal detaillierter beschrieben.
Prefetching
Prefetching ist ein Mechanismus, der es uns ermöglicht, eine Seite zu laden, bevor wir überhaupt darauf klicken. Diese Methode funktioniert auf zwei Arten:
- Laden der Seite beim Überfahren des Links mit der Maus,
- wenn die Seite geladen ist, durchsucht das Skript die gesamte Website nach allen verfügbaren Links und lädt dann die Seiten von diesen Links.
In beiden Fällen werden wir keine negativen Konsequenzen des Herunterladens zusätzlicher Daten (von anderen Seiten) erleben, da diese Daten im Hintergrund geladen werden, wenn die Belastung des Browsers nicht zu groß ist.
Daher haben wir eine weitere Methode, die uns einige Millisekunden ersparen kann. Diese Technik funktioniert jedoch in der Regel nur bei der internen Verlinkung auf unserer Website, wo wir alle Links zu unseren anderen Seiten haben.
Wie kann man die Ladegeschwindigkeit der Seite erhöhen? Zusammenfassung
Der Fokus auf die Optimierung der Ladegeschwindigkeit von Websites wird eine Reihe von Vorteilen bringen. Potenzielle Kunden werden nicht durch lange Ladezeiten irritiert, wir verbessern das UX und durch die Verbesserung des SEO können wir neue Besucher gewinnen.
Mit den verfügbaren Tools kann auch eine nicht-technische Person jede Seite leicht auditieren und basierend auf deren Ergebnissen Maßnahmen ergreifen, um die Ladezeit ihrer Website zu verkürzen.
Beim Optimieren empfehlen wir dringend, mit den oben aufgeführten Methoden zu beginnen sowie die Ratschläge zu nutzen, die Lighthouse geben wird. Unser Web-Development-Team wird Sie auch gerne unterstützen und bei der Lösung selbst der kompliziertesten Ladeprobleme helfen.
