Seitengeschwindigkeit und warum es wichtig ist

Veröffentlicht: 2019-02-22

Niemand mag eine langsam ladende Website. Wir wollen Inhalte so schnell wir können. Wenn Sie wie ich eine Suche in Google durchführen und die Website ewig zum Laden braucht, klicken Sie auf die Schaltfläche „Zurück“ und finden ein anderes Ergebnis.

Google sieht und versteht dieses Verhalten.

Wenn Ihre Website langsam lädt, ist es an der Zeit zu prüfen, wie Sie Ihre Leistung verbessern und eine bessere Chance haben, Besucher und Rankings zu halten.

Inhaltsverzeichnis

Werfen Sie einen Blick auf die Statistiken

Die neueste Studie von Google besagt, dass die durchschnittliche Ladezeit einer Seite auf einem mobilen Gerät 15 Sekunden beträgt. Die gute Nachricht ist, dass die Zahl im Vergleich zum Vorjahr gesunken ist.

Allerdings verlassen immer noch 53 % der mobilen Nutzer die Seite, wenn das Laden länger als 3 Sekunden dauert. Da mehr als die Hälfte des Traffics im Web von Mobilgeräten kommt, wäre es ratsam sicherzustellen, dass Ihre Seite in nicht mehr als 3 Sekunden geladen wird.

Die Seitengeschwindigkeit ist nicht nur wichtig für die Benutzererfahrung, sondern sollte auch aus der Perspektive des organischen Rankings betrachtet werden.

Wenn die Seitengeschwindigkeit steigt, steigt auch die Absprungrate. Wenn die Seitengeschwindigkeit von 1 Sekunde auf 3 Sekunden steigt, steigt die durchschnittliche Absprungrate um 32 %. Und wenn die Seitenladezeit näher bei 10 Sekunden liegt, kann die Absprungrate bis zu 123 % betragen.

Bounce-Rate-Statistiken

Lassen Sie uns diese Site beschleunigen

Sie haben jetzt die Statistiken zu den Ladezeiten gelesen. Macht Ihnen das Sorgen um die Geschwindigkeit Ihrer eigenen Website? Möchten Sie Ihren Benutzern eine Freude bereiten, damit sie auf Ihrer Website bleiben und einen Kauf tätigen? Möchten Sie, dass Ihre Seite höher rankt?

Google hat öffentlich erklärt, dass die Seitengeschwindigkeit im Jahr 2010 ein Rankingfaktor auf dem Desktop ist. Im Juli 2018 kündigten sie an, dass die Seitengeschwindigkeit ein Rankingfaktor für die mobile Suche sein wird.

Wenn Sie Ihre Website im Jahr 2019 ranken möchten, muss Ihre Seite schnell sein.

Jeder liebt eine schnelle Website: Ihre Besucher, SEOs, Webentwickler und Google. Sie sollten alles tun, damit Ihre Website wahnsinnig schnell geladen wird.

Überprüfen Sie zunächst Ihre Seitengeschwindigkeit mit dem Testtool PageSpeed ​​Insights von Google und sehen Sie sich die detaillierten Berichte und Vorschläge zur Verbesserung an. Dies ist eine gute erste Überprüfung und sollte Ihnen einige wertvolle Informationen darüber geben, wo Sie anfangen sollen.

Sobald Sie Ihre URL in die Eingabe eingegeben haben, wird Ihnen oben ein Gesamtgeschwindigkeitswert angezeigt. Dies ist eine gewichtete Punktzahl aus allen Timing-Metriken.

Nach dem Geschwindigkeits-Score wird Ihnen eine detailliertere Ansicht der verschiedenen Timings präsentiert. Einige davon können ziemlich technisch werden, aber wir werden sie weiter unten durchgehen.

Bei den PageSpeed ​​Insights müssen Sie die Berichte manuell ausführen und Aufzeichnungen führen. Ein Tool namens SpeedMonitor.io automatisiert diesen Prozess und prüft Ihre Website jede Nacht mit der PageSpeed ​​Insights API. Sie können dann einen historischen Trend der Geschwindigkeitsleistung Ihrer Website im Laufe der Zeit sehen.

Entdecken Sie mit den intuitiven Diagrammen von Raven Site Auditor schnell Ihre On-Page-Probleme mit der höchsten Priorität. Kostenlos starten.Entdecken Sie mit den intuitiven Diagrammen von Raven Site Auditor schnell Ihre On-Page-Probleme mit der höchsten Priorität. Kostenlos starten.Entdecken Sie mit den intuitiven Diagrammen von Raven Site Auditor schnell Ihre On-Page-Probleme mit der höchsten Priorität. Kostenlos starten.

Geschwindigkeitsleistungsmetriken

Werfen wir einen Blick auf einige der Geschwindigkeitskennzahlen, die Ihnen diese Tools zeigen:

Zeit für Interaktivität

Dies ist die Zeit, in der die Seite für den Benutzer interaktiv ist. Sobald Sie Bilder und Text auf eine Seite geladen haben, würden Sie erwarten, mit der Seite interagieren zu können. Wenn jedoch noch andere Skripte, Schriftarten oder Stile geladen werden, kann es für den Benutzer schwierig sein, zu scrollen und zu interagieren.

Um Ihre Time to Interactive zu verbessern, sollten Sie einige der folgenden Punkte berücksichtigen:

Faules Laden von Bildern, wenn der Benutzer die Seite weiter nach unten scrollt.

Laden Sie Inhalte „above the fold“ zuerst, damit Benutzer früher damit interagieren können.

Geschwindigkeitsindex

Der Zeitpunkt, zu dem sichtbare Teile der Seite angezeigt werden. Es sollte als eine weitere Metrik verwendet werden, um die Gesamtleistung Ihrer Website zu messen, aber es sollte nicht das einzige sein, was Sie sich ansehen sollten. Je niedriger Ihr Speed-Index-Score ist, desto schneller ist Ihre Website.

Um Ihren Geschwindigkeitsindex zu verbessern, sollten Sie einen Blick auf Ihren kritischen Rendering-Pfad werfen, der die Anzeige von Inhalten und die Schritte priorisiert, die der Browser unternimmt, um die Ressourcen für die Seite zu erhalten.

Damit Ihre Website Elemente anzeigen kann, muss sie die kritischen Ressourcen wie HTML-, CSS- und Javascript-Dateien laden, um die Seite zu laden. Sie sollten sich darauf konzentrieren, die Anzahl kritischer Ressourcen zu minimieren, die zum Laden Ihrer Seite erforderlich sind.

Laden Sie Ihre Bilder faul, um nur Bilder anzuzeigen, die über dem Falz benötigt werden

Laden Sie nur die Javascript-Dateien , die Sie beim Laden benötigen

Kombinieren Sie Ihre CSS-Dateien zu einer einzigen, um mehrere Aufrufe zu minimieren

Erste zufriedene Farbe

Der Zeitpunkt, zu dem der Browser zum ersten Mal Text oder Bilder rendert. First Contentful Paint ist eine sehr genaue Darstellung dessen, wie ein Benutzer Ihre Seite sehen würde. Wenn der Inhalt, ob Text oder Bilder, zum ersten Mal im Browser angezeigt wird, wird dieses Timing als First Contentful Paint bezeichnet. Dies signalisiert dem Benutzer, dass die Seite wie beabsichtigt funktioniert und lädt.

Um Ihren First Contentful Paint zu verbessern, sollten Sie Folgendes beachten:

Minimieren Sie Renderblocking-Ressourcen wie CSS und Javascript

Laden Sie asynchron Skripte von Drittanbietern wie Werbetracker, Schaltflächen zum Teilen in sozialen Netzwerken, Videoeinbettungen usw.

Verwenden Sie HTTP-Caching für Ihre wiederkehrenden Besucher

Ungenutzten CSS- oder Javascript-Code entfernen

Zeit bis zum ersten Byte

Der Zeitpunkt, zu dem der Browser das erste Byte vom Server erhält. Eine langsame Zeit bis zum ersten Byte (TTFB) beträgt normalerweise über 200 ms. Es ist ideal, es unter dieser Nummer zu halten. Wenn Ihr Server mit einer hohen TTFB antwortet, könnte dies einen der folgenden Gründe haben:

– Schlechte Netzwerkverbindung

– Langsam reagierender Server

Um Ihre langsame Zeit bis zum ersten Byte zu diagnostizieren, hosten Sie Ihre Website oder Seite zunächst lokal. Bekommst du immer noch die gleiche hohe TTFB? Wenn dies der Fall ist, sollten Sie Möglichkeiten zur Verbesserung der Antwortzeiten in Betracht ziehen. Datenbankabfragen, Webservice-Optimierung und Konfigurationseinstellungen sowie Caching sind alles Dinge, die bei der Diagnose einer hohen TTFB zu berücksichtigen sind.

Die Apache Foundation hat ein Modul namens PageSpeed ​​veröffentlicht, das die Geschwindigkeit Ihrer Website automatisch verbessert, indem es Ressourcen auf Ihrer Seite ändert. Sie können Änderungen an den integrierten Filtern in Ihren Webserver-Konfigurationsdateien vornehmen.

Wenn Sie beispielsweise unnötige Leerzeichen von Ihrer Website entfernen oder Bilder optimieren möchten, können Sie dies ganz einfach mit einem der vielen Filter tun.

Was ist der kritische Renderpfad?

Der kritische Rendering-Pfad sind die Schritte, die der Browser unternimmt, um HTML, CSS und JavaScript zu aussagekräftigen visuellen Elementen zu verarbeiten.

Wenn Sie als Benutzer eine Seite laden, nimmt der Browser den HTML-Code und konvertiert ihn in Bytes. Die Bytes werden dann in Token umgewandelt. Dann werden Tokens dann in Objekte umgewandelt. Dies wird als Document Object Model (DOM) bezeichnet.

Dann passiert dasselbe mit CSS. Es wird in Bytes umgewandelt und schließlich in eine Baumstruktur umgewandelt, die als CSS-Objektmodell (CSSOM) bezeichnet wird.

Sehen Sie sich Folgendes an, um den kritischen Renderpfad zu verbessern:

Anzahl kritischer Ressourcen , die das anfängliche Rendering blockieren könnten

Asynchrones Laden von Javascript-Ressourcen

Verschieben Sie jegliches JavaScript, das für das anfängliche Laden unkritisch ist

Haben Sie CSS-Ressourcen höher in der Seitenlast

Verwenden Sie nicht die CSS-Importregel , um zusätzliche Roundtrips zu vermeiden

Fazit

Es ist an der Zeit, sich ernsthaft mit der Webleistung und Ihrer Seitengeschwindigkeit zu befassen. Wenn Sie 2019 ranken wollen, müssen Sie eine schnelle Seite haben. Hoffentlich bringen Sie diese Tipps auf den richtigen Weg.