- Wie können Entwickler ihre Websites schneller laden?
- Testen Sie die Website-Leistung
- Verwenden Sie ein CDN (Content Delivery Network)
- Bilder optimieren
- CSS- und JavaScript-Dateien minimieren
- Reduzieren Sie die Anzahl der HTTP-Anforderungen, wenn möglich
- HTTP-Caching im Browser verwenden
- Minimieren Sie die Einbeziehung externer Skripte
- Verwenden Sie keine Weiterleitungen, wenn möglich
Wie können Entwickler ihre Websites schneller laden?
Die Website-Geschwindigkeit hat einen großen Einfluss auf Benutzererfahrung, SEO und Conversion-Raten. Die Verbesserung der Website-Leistung ist wichtig, um Traffic auf eine Website zu lenken und die Besucher der Website zu binden. Hier überprüfen wir die Schritte, die Entwickler unternehmen können, um eine Website schneller zu machen:
Testen Sie die Website-Leistung
Website-Geschwindigkeitstests bewerten die Leistung einer Website. Das regelmäßige Testen einer Website kann Entwicklern dabei helfen, Leistungseinbußen oder -verbesserungen zu verfolgen. Ein Geschwindigkeitstest sollte Entwicklern auch dabei helfen, einige oder alle Bereiche zu identifizieren, die die Leistung der Website verlangsamen, und wo die Bereiche für Verbesserungen sind.
Es gibt viele hochwertige Site-Geschwindigkeitstests zur Messung der Leistung, viele davon kostenlos. WebPageTest.org (die mit Cloudflare zusammenarbeitet) hat mehrere kostenlose Tests und erstellt detaillierte Aufschlüsselungen, wie schnell einzelne Elemente einer Seite geladen werden. In: WebPageTest.org ermöglicht es Entwicklern auch, Websites für verschiedene Geräte und Netzwerkverbindungsgeschwindigkeiten zu testen.
Google bietet auch PageSpeed Insights für detaillierte Leistungstests. Die Registerkarte Netzwerk zeigt alle HTTP-Anforderungen, wie groß die angeforderten Assets sind und wie lange Anforderungen dauern, bis sie erfüllt sind.
Verwenden Sie ein CDN (Content Delivery Network)
CDNs steigern die Geschwindigkeit von Websites, indem Sie Inhalte an mehreren Standorten auf der ganzen Welt zwischenspeichern. CDN-Caching-Server befinden sich normalerweise näher am Endbenutzer als der Host oder der Ursprungsserver. Anfragen nach Inhalten gehen an einen CDN-Server und nicht bis zum Hosting-Server, der Tausende von Kilometern und über mehrere autonome Netzwerke vom Benutzer entfernt sein kann. Die Verwendung eines CDN kann zu einer massiven Verkürzung der Seitenladezeiten führen.
Bilder optimieren
Bilder machen einen großen Prozentsatz des Internetverkehrs aus und das Laden auf einer Website dauert oft am längsten, da Bilddateien in der Regel größer sind als HTML- und CSS-Dateien. Glücklicherweise kann die Bildladezeit durch Bildoptimierung reduziert werden. Die Optimierung von Bildern umfasst in der Regel die Reduzierung der Auflösung, das Komprimieren der Dateien und das Reduzieren ihrer Abmessungen, und viele Bildoptimierer und Bildkompressoren sind kostenlos online verfügbar.
CSS- und JavaScript-Dateien minimieren
Code minimieren bedeutet, alles zu entfernen, was ein Computer nicht benötigt, um den Code zu verstehen und auszuführen, einschließlich Codekommentare, Leerzeichen und unnötige Semikolons. Dadurch werden CSS- und JavaScript-Dateien etwas kleiner, sodass sie schneller im Browser geladen werden und weniger Bandbreite beanspruchen. Die Minimierung allein führt nur zu minimalen Geschwindigkeitsverbesserungen. Zusammen mit diesen anderen Tipps führt dies jedoch zu einer besseren Website-Leistung.
Reduzieren Sie die Anzahl der HTTP-Anforderungen, wenn möglich
Für die meisten Webseiten müssen Browser mehrere HTTP-Anforderungen für verschiedene Elemente auf der Seite stellen, einschließlich Bilder, Skripte und CSS-Dateien. In der Tat werden viele Webseiten Dutzende dieser Anfragen erfordern. Jede Anforderung führt zu einem Roundtrip zu und von dem Server, der die Ressource hostet, was die Gesamtladezeit für eine Webseite erhöhen kann. Wenn Ressourcen von mehreren verschiedenen Anbietern geladen werden, kann ein Problem mit einem der Hosts die Fähigkeit der Webseite beeinträchtigen, schnell oder überhaupt zu laden.
Aufgrund dieser potenziellen Probleme sollte die Gesamtzahl der Assets, die jede Seite laden muss, auf ein Minimum beschränkt werden. Außerdem sollte ein Geschwindigkeitstest helfen, festzustellen, welche HTTP-Anforderungen die meiste Zeit in Anspruch nehmen. Wenn beispielsweise Bilder dazu führen, dass eine Seite langsam geladen wird, können Entwickler nach einer schnelleren Image-Hosting-Lösung (z. B. einem CDN) suchen.
HTTP-Caching im Browser verwenden
Der Browser-Cache ist ein temporärer Speicherort, an dem Browser Kopien statischer Dateien speichern, damit sie kürzlich besuchte Webseiten viel schneller laden können, anstatt immer wieder denselben Inhalt anfordern zu müssen. Entwickler können Browser anweisen, Elemente einer Webseite zwischenzuspeichern, die sich nicht häufig ändern. Anweisungen zum Browser-Caching finden Sie in den Headern der HTTP-Antworten vom Hosting-Server. Dies reduziert die Datenmenge, die der Server an den Browser übertragen muss, erheblich und verkürzt die Ladezeiten für Benutzer, die häufig bestimmte Seiten besuchen.
Minimieren Sie die Einbeziehung externer Skripte
Alle skriptgesteuerten Webseitenelemente, die von einem anderen Ort geladen werden, z. B. externe Kommentarsysteme, CTA-Schaltflächen oder Popups zur Lead-Generierung, müssen jedes Mal geladen werden, wenn eine Seite geladen wird. Abhängig von der Größe des Skripts können diese eine Webseite verlangsamen oder dazu führen, dass die Webseite nicht auf einmal geladen wird (dies wird als ‚Content Jumping‘ oder ‚Layout Shifting‘ bezeichnet und kann besonders für mobile Benutzer frustrierend sein).
Verwenden Sie keine Weiterleitungen, wenn möglich
Eine Weiterleitung ist, wenn Besucher einer Webseite stattdessen auf eine andere Seite weitergeleitet werden. Weiterleitungen erhöhen die Ladezeit der Seite um einige Sekundenbruchteile oder manchmal sogar ganze Sekunden. Beim Aufbau einer Performance-optimierten Website zählt jede Sekunde. Umleitungen sind manchmal unvermeidlich, sollten jedoch nicht verwendet werden, wenn dies nicht erforderlich ist.