So beschleunigen Sie die Ladezeiten Ihrer Website
Möchten Sie, dass Ihre Website blitzschnell geladen wird? In diesem Artikel erfahren Sie, wie Sie Ihre Website schneller laden können, als Sie es jemals für möglich gehalten haben.
Um zu verstehen, warum eine schnelle Website wichtig ist, sehen Sie sich diese Statistiken an: Der durchschnittliche Smartphone-Nutzer verlässt eine Website, wenn er nicht innerhalb von 3 Sekunden geladen wird. Google betrachtet jetzt die Seitengeschwindigkeit als eine wichtige Überlegung für Suchmaschinen-Rankings; 75% der Internetnutzer stimmten zu, dass sie nicht auf eine Website zurückkehren würden, wenn sie nicht innerhalb von 4 Sekunden geladen würde.
Eine schnelle Website ist extrem wichtig, um in der modernen Ära des Webdesigns am Leben zu bleiben. Für langsame Websites gibt es einfach keinen Platz mehr.
Ladezeiten der Website verstehen
Die Ladezeit einer Website korreliert direkt mit der Nachfrage auf dem Server, die Website zu laden. Je mehr HTTP-Anforderungen an den Server gestellt werden und je länger die Elemente zum Rendern sind, 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 in die Ladezeit einer Website eingeht, ist die Größe einzelner Dateien und Bilder. Große, hochauflösende Bilder können bis zu 10x länger als normale Bilder laden, und unnötig große Dateien können das Seitenrendern drastisch verlangsamen.
Das Ziel einer schnellen Website ist es, die Website effizienter zu machen. Wir können dies tun, indem wir eine Reihe von Anpassungen an der Codierung, den Bildern und dem Layout unserer Website vornehmen.
Tracking-Seitengeschwindigkeit
Wir können unsere Seitengeschwindigkeitsbewertungen durchsehen Google's Speed Insights für die Suche und Yahoo YSlow . Google hat auch ein Seitengeschwindigkeits-Plugin, das bei Firefox sehr gut funktioniert Feuerwanze ist installiert.
Beispielwebsite
Nehmen wir eine Website, die gerade entwickelt wird, und verwenden Sie sie als Beispiel für dieses Tutorial. Der anfängliche Seitengeschwindigkeitswert bei Google beträgt 48 von 100. Er läuft auf der OS Commerce-Plattform.
Starting Page Geschwindigkeitswert: 48 von 100
Schritt 1: Bilder komprimieren
Der erste Schritt besteht darin, alle Bilder für die webbasierte Qualität zu komprimieren. Wir können dies tun, indem wir den Standard-Bildkompressor verwenden, der in das Page Speed-Plugin von Google integriert ist. Speichern Sie die komprimierte Version des Abbilds in Ihrem lokalen Ordner auf Ihrem Computer, und laden Sie das Abbild anstelle des unkomprimierten Abbilds erneut hoch.
Aktualisierte Punktzahl: 61 von 100
Schritt 2: Bilder skalieren
Nach der Komprimierung der Bilder müssen wir dann unsere Bilder so ändern, dass sie für die Website richtig skaliert werden. Dies vermeidet eine Verzögerung des Servers, die erforderlich ist, um Bilder neu zu sortieren. Sie können Bilder in Photoshop skalieren, indem Sie sie an die gleichen Pixelmaße anpassen, die sie in Ihrem HTML-Code haben.
Aktualisierte Punktzahl: 72 von 100
Schritt 3: Browser-Caching verwenden
Browser-Caching speichert zwischengespeicherte Versionen von statischen Ressourcen. Dies beschleunigt die Seitengeschwindigkeit enorm und verringert die Serververzögerung. Um das Caching zu aktivieren, möchten Sie Ihrer .htaccess-Datei den folgenden Code hinzufügen:
# BEGIN Expire headersExpiresActive OnExpiresDefault "access plus 1 seconds"ExpiresByType image/jpeg "access plus 2592000 seconds"ExpiresByType image/png "access plus 2592000 seconds"ExpiresByType image/gif "access plus 2592000 seconds"ExpiresByType text/css "access plus 604800 seconds"ExpiresByType text/javascript "access plus 604800 seconds"ExpiresByType application/javascript "access plus 604800 seconds"ExpiresByType text/html "access plus 2592000 seconds"# END Expire headersAktualisierte Punktzahl: 78 von 100
Schritt 4: Kombiniere Bilder zu CSS-Sprites
Bilder können zu CSS-Sprites kombiniert werden, um die Anzahl der auf einer bestimmten Seite geladenen Bilder zu reduzieren. CSS-Sprites sind im Grunde genommen ein großes Bild, das aus einer Anzahl kleinerer Bilder besteht. Das Kombinieren von 5 Bildern in einem CSS-Sprite ist eine schnelle Möglichkeit, eine Website zu beschleunigen, indem einem Browser ermöglicht wird, ein Bild anstelle von 5 Bildern zu laden.
Die einfachste Möglichkeit, CSS-Sprites zu erstellen, ist die Verwendung Spriteme .
Stellen Sie sicher, dass Sie nach dem Erstellen eines Bild-Sprites die richtigen Änderungen an Ihrem CSS vornehmen. Beachten Sie auch die Installationsanweisungen auf der Website. Dieses Programm wird verwendet, indem Sie über Ihren Browser auf ein Lesezeichen zugreifen.
Aktualisierte Punktzahl: 82 von 100
Schritt 5: Verzögern Sie das Parsen von JavaScript
Javascript, das sich an der Spitze eines HTML-Dokuments befindet, kann Seitenrendering blockieren, wodurch eine Seite enorm verlangsamt wird. Um das Parsen von Javascript zu verzögern, ist es am besten, diese Skripte am Ende eines HTML-Dokuments anstatt 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 Javascript zu verzögern, bis die Seite geladen ist. Beispielsweise:
Aktualisierte Punktzahl: 86 von 100
Schritt 6: Reduzieren Sie HTML, CSS und JavaScript
HTML, CSS und JavaScript können alle "minimiert" oder komprimiert werden, um ihre Ladezeit zu beschleunigen. Es gibt eine Reihe von Ressourcen im Web, die diese Dateitypen minimieren, Minifier ist ein ausgezeichnetes Beispiel.
Aktualisierte Punktzahl: 90 von 100
Weitere Anpassungen und Überlegungen
CDNs
Sie können auch statische Ressourcen von Ihrer Website in ein CDN oder "Content Delivery Network" laden. Ein CDN ist eine weitere Möglichkeit, die Serververzögerung drastisch zu reduzieren, indem statische Ressourcen in einem Netzwerk von schnell ladenden Servern gespeichert werden. Bemerkenswerte Benutzer von CDNs sind ESPN und NBA.com.
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 Designfeatures verwenden, können oft 15 oder mehr JavaScript-Dateien und genauso viele Cascading Style Sheets enthalten. Diese Skripte und Stylesheets können jeweils zu einer großen Datei kombiniert werden. Dadurch wird die Ladezeit der Seite drastisch verkürzt und Ihre Website-Besucher werden von den schnellen Ladezeiten Ihrer Website begeistert sein.
Mobile Website-Entwicklung
Beim Erstellen von Smartphone-Anwendungen für Smartphone-Nutzer ist es wichtig, sich an die Richtlinien für Webmaster von Google für Smartphone-Anwendungen zu halten. Während mobile Websites und die App-Indexierung von Google noch in Arbeit sind, ist es wichtig, die Anforderungen von Google für die Smartphone-Entwicklung zu beachten. Erwarte in den nächsten fünf Jahren große Veränderungen dafür, wie Google mobile Websites und mobile Apps indiziert. Seien Sie nicht überrascht, wenn die Seitengeschwindigkeit bei der Indizierung von mobilen Website-Anwendungen durch Google eine wichtige Rolle spielt.
Fazit
Indem wir einige Anpassungen vorgenommen haben, um unsere Website zu beschleunigen, haben wir die Ladezeit unserer Website fast halbiert! Dies kann buchstäblich der Unterschied zwischen dem Ranking auf der ersten Seite von Google oder der 5. Seite sein. Es kann auch der Unterschied zwischen der Landung von 200 Kunden und dem dauerhaften Verlust von 75% Ihrer Kunden aufgrund der langsamen Seitenladezeiten sein.
Eine schnelle Website ist für den Erfolg im Web unerlässlich. In der Regel empfiehlt es sich, auf allen Seiten einer Website eine Seitengeschwindigkeit von mindestens 80 zu erreichen.
Wie viel Zeit verbringen Sie mit der Verbesserung der Website-Geschwindigkeit? Welche Tipps würdest du teilen? Lassen Sie es uns in den Kommentaren wissen.
Ausgewähltes Bild / Vorschaubild, Geschwindigkeitsbild über Shutterstock.