Geschwindigkeitsindex: Was es ist und wie Sie Ihre Website dafür optimieren

Der Geschwindigkeitsindex (SI) ist eine interessante Kennzahl, wenn man die Seitengeschwindigkeit betrachtet. Es ist ein absoluter Hinweis auf die Leistung Ihrer Seite, unterscheidet sich jedoch vollständig von anderen benutzerorientierten Metriken wie First Contentful Paint und Largest Contentful Paint. SI gibt an, wie schnell Ihre Website über dem Fold geladen wird. Oder anders ausgedrückt, wenn der gesamte Inhalt im Viewport des Benutzers vollständig sichtbar ist. Wenn Sie sich die Ladezeiten Ihrer Seite ansehen, werden Sie wahrscheinlich nicht für Ihren Geschwindigkeitsindex bestraft oder belohnt. Das ist kein Grund, es zu ignorieren. Als einzelne Metrik ist sie eine der wenigen, die mehrere andere Metriken umfasst und Ihnen eine solide Vorstellung von der Gesamtgeschwindigkeit, Effizienz und Leistung Ihrer Website geben kann.

Abonnieren Sie unseren Youtube-Kanal

Was ist der Geschwindigkeitsindex?

Lighthouse, Googles Rückgrat für PageSpeed ​​Insights, berücksichtigt mehrere Leistungskennzahlen, um Ihre Website zu bewerten. Der Geschwindigkeitsindex (SI) ist einer davon, und der Bericht zeigt die Zeit in Sekunden statt in Millisekunden an, wie bei einigen anderen Metriken. Google definiert SI als „wie schnell der Inhalt einer Seite sichtbar gefüllt wird“.

Ziemlich direkt, oder?

Speed ​​Index berücksichtigt keine Backend-Skripte oder andere nicht gemalte Lasten. Sie wirken sich jedoch darauf aus. SI ist einfach ein Maß dafür, wie lange es dauert, bis Benutzer Ihre Inhalte vollständig sehen. Das ist der Hammer. In vollem Umfang . Während andere Metriken wie LCP gemessen werden, wenn der größte Teil des Inhalts angezeigt wird, berücksichtigt Speed ​​Index alle Inhalte, die tatsächlich angezeigt werden sollten.

Dies ist kein Maß für die Gesamtseitengeschwindigkeit. Dies berücksichtigt, wenn der Browser alle Elemente rendert. Einschließlich nicht sichtbarer Skripts und Elemente, die sich auf die Leistung auswirken. Wenn Sie jedoch wissen möchten, wann Ihre Benutzer die Seite als vollständig geladen wahrnehmen , ist SI die Metrik, die Sie im Auge behalten sollten. Aufgrund seiner Benutzerzentrierung kann SI ein guter Indikator für den allgemeinen Zustand der Website sowie eine Grundlage für die Benutzererfahrung (UX) Ihrer Website sein.

Geschwindigkeitsindex messen

Wie bei den meisten Website-Leistungskennzahlen ist eines der wichtigsten Tools die Google-eigenen PageSpeed ​​Insights. Dieses Tool ist auch eines der speziellsten in den Ergebnissen, die es liefert. Es ist selbst den am besten zusammengestellten Websites relativ kritisch. Pagespeed Insights meisten gibt oft Labordaten für Ihre Website, basierend auf einem Aggregat der letzten 28 Tage der Sammlung. Wenn Sie jedoch genügend Besucher haben, die Informationen über Chrome an Google weiterleiten, können Sie auch reale Felddaten aus dem Bericht abrufen. Dies kann jedoch nicht jede Website erreichen.

Wie Sie sehen, liegen die Geschwindigkeiten für viele dieser Metriken im grünen Bereich. Dies zeigt an, dass sie „gut“ sind. Dies ist offensichtlich, wo Sie Ihre Website haben möchten. Der Geschwindigkeitsindex beträgt jedoch 4,0 Sekunden und ist orange. Das ist eine lange Zeit für den Benutzer, um zu warten, um alles oberhalb der Falte zu sehen.

Was ist ein guter Geschwindigkeitsindex?

PageSpeed ​​Insights verwendet die folgenden Bewertungen, um den Geschwindigkeitsindex Ihrer Website zu bewerten und ihn entsprechend farblich zu kennzeichnen:

• Grün (Gut) – 0 bis 3,4 Sekunden
• Orange (Mittel) – 3,4 bis 5,8 Sekunden
• Rot (langsam) – über 5,8 Sekunden

Wie bereits erwähnt, ist PageSpeed ​​Insights bei seinen Messungen sehr kritisch. Wenn Sie im orangen oder roten Bereich sind, möchten Sie vielleicht ein Tool wie GTmetrix oder den Geschwindigkeitstest von Pingdom verwenden, um zu sehen, was ihre Echtzeitdaten zeigen. Wir sind der Meinung, dass es am besten ist, Ihre Website mit mehreren Tools zu unterschiedlichen Zeiten zu testen, um ein optimales Bild von der Gesamtleistung zu erhalten.

So optimieren Sie Ihren Geschwindigkeitsindex-Score

Sie können eine Reihe von Schritten unternehmen, um Ihren Geschwindigkeitsindex zu optimieren. Wenn Sie schon immer versucht haben, Ihre Website für eine beliebige Erhöhung der Seitengeschwindigkeit zu optimieren (oder technisch gesehen zu verringern), dann haben Sie wahrscheinlich auch Ihren SI-Wert beeinflusst. Wir zeigen Ihnen einige Möglichkeiten, wie Sie Ihre SI-Zeit gezielt ausrichten können, damit Ihre Seite so schnell wie möglich geladen wird, um Ihren Besuchern das bestmögliche Erlebnis zu bieten.

Reduzieren Sie Renderblocking-Ressourcen

Genauer gesagt ist die Reduzierung der JavaScript-Ausführungszeit eine der besten Möglichkeiten, um Ihren Geschwindigkeitsindex zu erhöhen. Renderblockierende Ressourcen sind Skripte und Code, die verhindern, dass andere Teile Ihrer Website geladen werden, indem sie Vorrang haben. Anstatt dass die Site verschiedene Elemente gleichzeitig lädt, pausieren einige Elemente alle anderen, bis sie fertig sind.

Und das senkt den Geschwindigkeitsindex Ihrer Website. Um dies zu umgehen, können Sie eine beliebige Anzahl von Skripten und Code-Bits zurückstellen, die geladen werden, bis die sichtbaren Elemente in das DOM gemalt wurden. Die Täter zu identifizieren ist eigentlich relativ einfach, da Sie die Chrome Dev Tools verwenden können, um einen Blick auf Ihre Site zu werfen, während sie geladen wird, und das Tool zeigt an, was Elemente vom Rendern abhält.

Darüber hinaus können WordPress-Benutzer ein Caching-Plugin (oder Site-Optimierungs-Plugin) wie W3 Total Cache oder WP Rocket verwenden, um dies zu handhaben. Oft haben diese Plugins einen einfachen Schalter, um Render-Blocking-Ressourcen zu verschieben.

Auch Divi-Benutzer haben einen großen Vorteil beim Blockieren solcher Ressourcen, da Sie mit den Themenoptionen die Rendering-blockierende CSS-Verzögerung sowie jQuery-Skripte umschalten können. Darüber hinaus brechen die kritischen CSS-Funktionen des Themes große Codestücke auf, die den Inhalt Ihrer Website verzögern und dazu führen können, dass sie viel schneller geladen werden, als dies sonst der Fall wäre. Während einige davon Umschalter sind, aktiviert Divi automatisch andere. Die Installation von Divi sollte Ihrem SI-Score in den meisten Fällen sofort helfen.

Reduzieren Sie die Hauptthread-Arbeit Ihrer Site

Wie bei Ressourcen, die das Rendern blockieren, können Sie die Leistung Ihrer Site einschränken, indem Sie verschiedene Elemente laden, die viel Rechenleistung von Ihrem Server verbrauchen. Wenn Sie diese reduzieren, können Sie die Site schneller an den Browser übertragen.

Die einfachste Lösung hierfür besteht darin , auf so viel JavaScript zu verzichten . GTmetrix drückt es am besten aus:

Im Allgemeinen gilt: Je mehr JavaScript Ihre Seite hat, desto länger dauert der Analyse-/Kompilierungsvorgang; Dies führt dazu, dass Benutzer länger warten müssen, um Inhalte anzuzeigen und mit Ihrer Seite zu interagieren.

Wir wissen, dass dies möglicherweise nicht einfach ist. Sie haben die Site so gestaltet, dass sie auf eine bestimmte Weise funktioniert. Möglicherweise gibt es jedoch nicht verwendeten Code, den Sie ausschneiden können, und Sie können möglicherweise JavaScript von Drittanbietern optimieren, das Sie in Ihre Website laden. Verkleinern Sie außerdem Ihr JavaScript.

Stellen Sie zusätzlich zum JS-Audit sicher, dass Sie CSS und HTML verkleinern. Dadurch wird noch mehr Hauptfadenbelastung gelindert. Caching- und Optimierungs-Plugins haben oft auch diese Optionen.

Divi-Benutzer haben hier wieder einmal einen Vorsprung, da das Thema CSS und JavaScript automatisch minimiert und in mundgerechte Stücke aufteilt, um einen schnelleren Durchsatz zu erzielen, sodass Sie sich nicht mehr auf Ihren Hauptthread konzentrieren müssen.

Häufig gestellte Fragen zum Geschwindigkeitsindex

Speed ​​Index ist ein einfaches Konzept mit komplexen Auswirkungen. Wir möchten einige häufig gestellte Fragen zu SI beantworten, um Ihnen zu helfen, Ihre Website so gut wie möglich zu optimieren.

Wie passt der Geschwindigkeitsindex zur Gesamtleistung meiner Website?

Der Geschwindigkeitsindex als einzelne Kennzahl ist ein sehr guter Indikator für die Leistung Ihrer Website in verschiedenen Bereichen. Da es vollständig sichtbare, über dem Bildschirm liegende Inhalte berücksichtigt, können Sie es nicht nur als Maßstab für die vom Benutzer wahrgenommene Auslastung verwenden, sondern auch als grobe Schätzung dessen, was Ihre Website in verschiedenen Bereichen tut.

Es gibt Ihnen eigentlich nicht viele Informationen darüber, was Ihre Website tut. Es kann als ein Alleinstellungsmerkmal angesehen werden, das, wie GTmetrix es ausdrückt, „einen nützlichen Gesamtmaßstab für die Bewertung der Leistung Ihrer Website in ihrer Gesamtheit“ darstellt.

Sollte ich mich speziell auf meinen Geschwindigkeitsindex konzentrieren?

Wahrscheinlich nicht, nein.

Es ist zwar sehr nützlich, Ihre Website zu vergleichen, aber die Konzentration auf andere, detailliertere Probleme wie First Contentful Paint (FCP), Largest Contentful Paint (LCP), Time to First Byte (TTFB) und First Input Delay (FID) sind viel wichtiger. Sie können beliebig viele Schritte unternehmen, um diese individuell zu verbessern, was wiederum Ihren Geschwindigkeitsindex verbessert. Und als Gesamt-Benchmark können Sie sehen, wie gut Ihre Optimierungen durch SI funktionieren.

Abschluss

Die Optimierung der Seitengeschwindigkeit ist ein nie endender Kampf, gegen den Website-Besitzer kämpfen. Sie müssen die Balance zwischen Benutzerfreundlichkeit, Erfahrung und Leistung finden, und es kann schwierig sein, diese Balance zu finden. Wenn Tests so viele verschiedene Punktzahlen für so viele verschiedene Elemente liefern, kann es schwierig sein, zu wissen, wo Sie Ihre Energie und Ressourcen einsetzen sollen. Der Speed ​​Index kann dabei helfen, als einzelner Messwert, der Ihnen zeigt, wie gut Ihre Website abschneidet, wenn Sie andere, spezifischere Teile der Leistung Ihrer Website anpassen.

Was haben Sie im Laufe der Jahre getan, um den Geschwindigkeitsindex Ihrer Website zu optimieren?

Beitragsbild des Artikels von HappyDrawing / shutterstock.com