So beschleunigen Sie die Ladezeiten Ihrer Website

Möchten Sie, dass Ihre Website blitzschnell lädt? In diesem Artikel erfahren Sie, wie Sie dafür sorgen, dass Ihre Website schneller lädt, als Sie es jemals für möglich gehalten hätten.

Um zu verstehen, warum eine schnelle Website wichtig ist, sehen Sie sich diese Statistiken an: Der durchschnittliche Smartphone-Benutzer verlässt eine Website, wenn sie nicht innerhalb von 3 Sekunden geladen wird; Google betrachtet die Seitengeschwindigkeit mittlerweile als einen wichtigen Faktor für das Suchmaschinenranking; 75 % der Internetnutzer stimmten zu, dass sie nicht zu einer Website zurückkehren würden, wenn diese nicht innerhalb von 4 Sekunden geladen würde.

Eine schnelle Website ist äußerst wichtig, um im modernen Zeitalter des Webdesigns bestehen zu können. Für langsame Websites ist einfach kein Platz mehr.

Ladezeiten von Websites verstehen

Die Ladezeit einer Website steht in direktem Zusammenhang mit der Anforderung an den Server, die Website zu laden. Je mehr HTTP-Anfragen an den Server gestellt werden und je länger das Rendern von Elementen dauert, desto langsamer wird eine Website.

Beispiele für HTTP-Anfragen sind:

  • Laden von CSS-Stylesheets;
  • Laden von Skripten;
  • Laden von Bildern;
  • Laden von HTML.

Ein weiterer Faktor, der die Ladezeit einer Website beeinflusst, ist die Größe einzelner Dateien und Bilder. Das Laden großer Bilder mit hoher Auflösung kann zehnmal so lange dauern wie normale Bilder und unnötig große Dateien können die Seitendarstellung drastisch verlangsamen.

Das Ziel einer schnellen Website besteht darin, sie effizienter zu machen. Dies können wir erreichen, indem wir eine Reihe von Anpassungen an der Codierung, den Bildern und dem Layout unserer Website vornehmen.

Lesen:  Die Grundlagen der Vorbereitung einer Anzeigenberichtsstrategie

Seitengeschwindigkeit verfolgen

Wir können unsere Seitengeschwindigkeitswerte verfolgen Googles Page Speed ​​Insights für die Suche und Yahoo Ylangsam. Google hat auch ein Page-Speed-Plugin, das hervorragend mit Firefox funktioniert Feuerkäfer ist installiert.

Beispiel-Website

Nehmen wir eine Website, die sich in der Entwicklung befindet, und verwenden Sie sie als Beispiel für dieses Tutorial. Der anfängliche Page-Speed-Score bei Google liegt bei 48 von 100. Es läuft auf der OS Commerce-Plattform.

Geschwindigkeitsbewertung der Startseite: 48 von 100

Schritt 1: Bilder komprimieren

Schritt Nummer eins besteht darin, alle Bilder für webbasierte Qualität zu komprimieren. Wir können dies tun, indem wir den standardmäßigen Bildkompressor verwenden, der in das Page Speed-Plugin von Google integriert ist. Speichern Sie die komprimierte Version des Bildes in Ihrem lokalen Ordner auf Ihrem Computer und laden Sie das Bild anstelle des unkomprimierten Bildes erneut hoch.

Aktualisierte Punktzahl: 61 von 100

Schritt 2: Bilder skalieren

Nach dem Komprimieren der Bilder müssen wir unsere Bilder dann ändern, damit sie für die Website richtig skaliert werden. Dadurch wird eine Serververzögerung vermieden, die zum Ändern der Bildgröße erforderlich ist. Sie können Bilder in Photoshop skalieren, indem Sie sie auf die gleichen Pixelabmessungen anpassen, die sie in Ihrem HTML-Code haben werden.

Aktualisierte Punktzahl: 72 von 100

Schritt 3: Browser-Caching nutzen

Browser-Caching speichert zwischengespeicherte Versionen statischer Ressourcen. Dies beschleunigt die Seitengeschwindigkeit enorm und reduziert die Serververzögerung. Um das Caching zu aktivieren, müssen Sie den folgenden Code zu Ihrer .htaccess-Datei hinzufügen:

# BEGIN Läuft Header ab
Läuft abAktiv am
Läuft abStandardwert „Zugriff plus 1 Sekunde“
ExpiresByType image/jpeg „Zugriff plus 2592000 Sekunden“
ExpiresByType image/png „Zugriff plus 2592000 Sekunden“
ExpiresByType Bild/GIF „Zugriff plus 2592000 Sekunden“
ExpiresByType Text/CSS „Zugriff plus 604800 Sekunden“
ExpiresByType Text/Javascript „Zugriff plus 604800 Sekunden“
ExpiresByType application/javascript „Zugriff plus 604800 Sekunden“
ExpiresByType text/html „Zugriff plus 2592000 Sekunden“
# END Header ablaufen lassen

Lesen:  Verbessern Sie Ihr Geschäft mit moderner Technologie und Software

Aktualisierte Punktzahl: 78 von 100

Schritt 4: Bilder zu CSS-Sprites kombinieren

Bilder können in CSS-Sprites kombiniert werden, um die Anzahl der auf einer bestimmten Seite geladenen Bilder zu reduzieren. CSS-Sprites sind im Grunde ein großes Bild, das aus mehreren kleineren Bildern besteht. Das Kombinieren von 5 Bildern in einem CSS-Sprite ist eine schnelle Möglichkeit, eine Website zu beschleunigen, indem es einem Browser ermöglicht, ein Bild anstelle von 5 Bildern zu laden.

Der einfachste Weg, CSS-Sprites zu erstellen, ist die Verwendung von Spriteme.

Stellen Sie sicher, dass Sie nach dem Erstellen eines Bild-Sprites die richtigen Änderungen an Ihrem CSS vornehmen. Beachten Sie außerdem die Installationshinweise auf der Website. Dieses Programm wird verwendet, indem Sie über Ihren Browser auf ein Lesezeichen zugreifen.

Aktualisierte Punktzahl: 82 von 100

Schritt 5: Verschieben Sie das Parsen von JavaScript

Javascript, das sich oben in einem HTML-Dokument befindet, kann das Rendern von Seiten blockieren, was eine Seite enorm verlangsamt. Um das Parsen von Javascript zu verzögern, ist es am besten, diese Skripte am Ende eines HTML-Dokuments und nicht am Anfang aufzurufen.

Sie können das Parsen von Javascript auch verzögern, indem Sie das Defer-Attribut verwenden. Das Defer-Attribut wird im HTML-Code verwendet, um das Parsen des Javascripts zu verschieben, bis die Seite geladen ist. Zum Beispiel:

Aktualisierte Punktzahl: 86 von 100

Schritt 6: HTML, CSS und JavaScript minimieren

HTML, CSS und JavaScript können alle „minimiert“ oder komprimiert werden, um ihre Ladezeit zu verkürzen. Es gibt eine Reihe von Ressourcen im Internet, die diese Art von Dateien minimieren. Minimierer ist ein hervorragendes Beispiel.

Aktualisierte Punktzahl: 90 von 100

Weitere Anpassungen und Überlegungen

CDNs

Sie können auch erwägen, statische Ressourcen von Ihrer Website in ein CDN oder „Content Delivery Network“ zu laden. Ein CDN ist eine weitere Möglichkeit, die Serververzögerung drastisch zu reduzieren, indem statische Ressourcen in einem Netzwerk aus schnell ladenden Servern gespeichert werden. Zu den bemerkenswerten Nutzern von CDNs gehören ESPN und NBA.com.

Lesen:  Eine Einführung in Concrete5 | WDD

Kombinieren von JavaScript- und CSS-Dateien

Das Laden mehrerer JavaScript- und CSS-Dateien kann die Ladezeit einer Website verkürzen. Benutzerdefinierte CMS-basierte Websites, die Plugins und Theme-Funktionen nutzen, können oft 15 oder mehr JavaScript-Dateien und ebenso viele Cascading Style Sheets enthalten. Diese Skripte und Stylesheets können jeweils zu einer großen Datei zusammengefasst werden. Dadurch wird die Seitenladezeit drastisch verkürzt und die Besucher Ihrer Website werden von den schnellen Ladezeiten Ihrer Website begeistert sein.

Entwicklung mobiler Websites

Beim Erstellen von Smartphone-Anwendungen für Smartphone-Benutzer ist es wichtig, die Webmaster-Richtlinien von Google für Smartphone-Anwendungen einzuhalten. Während die Indexierung mobiler Websites und Apps bei Google noch in der Entwicklungsphase ist, ist es wichtig, die Anforderungen von Google an die Smartphone-Entwicklung zu berücksichtigen. Erwarten Sie in den nächsten fünf Jahren große Veränderungen bei der Art und Weise, wie Google mobile Websites und mobile Apps indiziert. Seien Sie nicht überrascht, wenn die Seitengeschwindigkeit bei der Indexierung mobiler Website-Anwendungen durch Google eine wichtige Rolle spielt.

Abschluss

Durch mehrere Anpassungen zur Beschleunigung unserer Website haben wir die Ladezeit unserer Website fast halbiert! Dies kann buchstäblich den Unterschied zwischen dem Ranking auf der ersten Seite von Google oder der fünften Seite ausmachen. Es kann auch den Unterschied zwischen der Gewinnung von 200 Kunden und dem dauerhaften Verlust von 75 % Ihrer Kunden aufgrund langsamer Seitenladezeiten ausmachen.

Eine schnelle Website ist für den Erfolg im Web unerlässlich. Als allgemeine Regel gilt, dass es eine gute Idee ist, auf allen Seiten einer Website einen Page-Speed-Wert von 80 oder höher einzuhalten.

Wie viel Zeit verbringen Sie damit, die Website-Geschwindigkeit zu verbessern? Welche Tipps würden Sie geben? Lass es uns in den Kommentaren wissen.

Ausgewähltes Bild/Miniaturansicht, Geschwindigkeitsbild über Shutterstock.

Aktuelle Artikel:

Empfohlen