Der Geschwindigkeitsindex (SI) ist eine interessante Kennzahl, wenn es um die Geschwindigkeit einer Seite geht. Er ist ein absoluter Indikator für die Leistung deiner Seite, aber er unterscheidet sich völlig von anderen nutzerzentrierten Metriken wie First Contentful Paint und Largest Contentful Paint. SI gibt an, wie schnell deine Website „above the fold“ geladen wird (wörtlich aus dem Zeitungsdruck und Verlagswesen kommend „oberhalb des Falzes“). Oder anders ausgedrückt, wenn der gesamte Inhalt innerhalb des Sichtfensters des Nutzers vollständig sichtbar ist.
Wenn du dir die Ladezeiten deiner Seite ansiehst, wirst du für deinen Speed Index wahrscheinlich weder bestraft noch belohnt. Das ist aber kein Grund, ihn zu ignorieren. Als einzelne Kennzahl ist sie eine der wenigen, die mehrere andere Kennzahlen umfasst und deine eine solide Vorstellung von der Gesamtgeschwindigkeit, Effizienz und Leistung Ihrer Website vermitteln kann.
Was ist der Geschwindigkeitsindex?
Lighthouse, das Google-Backbone für PageSpeed Insights, berücksichtigt mehrere Leistungsmetriken, um deine Website zu bewerten. Der Geschwindigkeitsindex (SI) ist eine davon, und der Bericht zeigt die Zeit in Sekunden an und nicht in Millisekunden wie bei einigen anderen Metriken. Google definiert den SI als „wie schnell der Inhalt einer Seite sichtbar aufgefüllt wird“.
Ziemlich einfach, oder?
Der Speed Index berücksichtigt keine Backend-Skripte oder andere nicht gemalte Ladevorgänge. Sie wirken sich jedoch auf den Index aus. SI ist einfach ein Maß dafür, wie lange es dauert, bis die Nutzer deinen Inhalt vollständig sehen. Das ist der springende Punkt. In vollem Umfang. Während andere Metriken wie LCP sich darauf beziehen, wann der größte Teil des Inhalts angezeigt wird, berücksichtigt der Speed Index alle Inhalte, die tatsächlich angezeigt werden sollten.
Es handelt sich nicht um eine Messung der Gesamtgeschwindigkeit der Seite. Hier wird berücksichtigt, wann der Browser alle Elemente rendert. Dazu gehören auch nicht sichtbare Skripte und Elemente, die die Leistung beeinträchtigen. Wenn Sie jedoch einen guten Anhaltspunkt dafür haben wollen, wann dein Nutzer die Seite als vollständig geladen empfinden, ist SI die richtige Kennzahl. Da der SI sehr nutzerorientiert ist, kann er ein guter Indikator für den allgemeinen Zustand der Website sowie eine Grundlage für die Benutzerfreundlichkeit (UX) deiner Website sein.
Wie man den Geschwindigkeitsindex misst
Wie bei den meisten Metriken zur Website-Performance ist eines der am besten geeigneten Tools das Google-eigene PageSpeed Insights. Dieses Tool ist auch in Bezug auf die Ergebnisse, die es liefert, eines der genauesten. Es ist selbst bei den am besten aufgebauten Websites relativ kritisch. PageSpeed Insights liefert in den meisten Fällen Labordaten für deine Website, die auf einer Zusammenfassung der letzten 28 Tage basieren. Wenn du jedoch genügend Besucher hast, die Informationen über Chrome an Google weiterleiten, kannst du auch reale Felddaten aus dem Bericht erhalten. Dies ist jedoch nicht für jede Website möglich.
Wie du sehen kannst, ist die Geschwindigkeit für viele dieser Metriken im grünen Bereich. Das bedeutet, dass sie „gut“ sind. Das ist natürlich das, was du für deine Website willst. Der Geschwindigkeitsindex ist jedoch 4,0 Sekunden und orange. Das ist eine lange Wartezeit für den Benutzer, bis er alles über der Falz sieht.
Was ist ein guter Speed-Index-Wert?
PageSpeed Insights verwendet die folgenden Werte, um den Geschwindigkeitsindex deiner Website zu bewerten und ihn entsprechend zu kodieren:
- Grün (Gut) – 0 bis 3,4 Sekunden
- Orange (mäßig) – 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 du dich im orangen oder roten Bereich befindest, solltest du ein Tool wie GTmetrix oder Pingdom’s Speed Test verwenden, um zu sehen, was deren Echtzeitdaten zeigen. Wir sind der Meinung, dass es am besten ist, deine Website mit mehreren Tools zu verschiedenen Zeiten zu testen, um das beste Bild der Gesamtleistung zu erhalten.
Wie du deinen Speed Index Score optimierst
Du kannst eine Reihe von Maßnahmen ergreifen, um deinen Speed Index-Wert zu optimieren. Wenn du schon einmal versucht hast, deine Website zu optimieren, um die Seitengeschwindigkeit zu erhöhen (oder, technisch gesehen, zu verringern), dann hast du wahrscheinlich auch deinen SI-Wert in irgendeiner Weise beeinflusst. Wir zeigen dir ein paar Möglichkeiten, wie du deine SI-Zeit gezielt verbessern kannst, damit deine Seite so schnell wie möglich lädt und du deinen Besuchern das bestmögliche Erlebnis bieten kannst.
Reduziere deine Render-Blocking-Ressourcen
Die Reduzierung der JavaScript-Ausführungszeit ist eine der besten Möglichkeiten, deinen Speed Index zu erhöhen. Rendering-Blocking-Ressourcen sind Skripte und Code, die andere Teile deiner Website am Laden hindern, weil sie Vorrang haben. Anstatt dass die Website verschiedene Elemente gleichzeitig lädt, halten einige Elemente alle anderen an, bis sie fertig sind.
Und das senkt den Geschwindigkeitsindex deiner Website. Um dies zu umgehen, kannst du eine beliebige Anzahl von Skripten und Codebits, die erst geladen werden, nachdem die sichtbaren Elemente in das DOM eingefügt wurden, aufschieben. Die Schuldigen zu identifizieren ist eigentlich relativ einfach, da du die Chrome Dev Tools verwenden kannst, um einen Blick auf deine Website zu werfen, während sie geladen wird, und das Tool zeigt an, was die Elemente vom Rendern abhält.
Außerdem können WordPress-Benutzer ein Caching-Plugin (oder ein Plugin zur Website-Optimierung) wie W3 Total Cache oder WP Rocket verwenden, um dies zu beheben. Oft haben diese Plugins einen einfachen Schalter, um Ressourcen, die das Rendern blockieren, aufzuschieben.
Auch Divi-Benutzer haben einen großen Vorteil, wenn es um die Blockierung solcher Ressourcen geht, denn in den Theme-Optionen kannst du die Deferral-Funktion für Rendering-blockierende CSS und jQuery-Skripte umschalten. Darüber hinaus brechen die kritischen CSS-Funktionen des Themes große Code-Blöcke auf, die den Inhalt deiner Website verzögern und dazu führen können, dass sie viel schneller geladen werden, als es sonst der Fall wäre. Einige dieser Funktionen sind umschaltbar, während andere automatisch von Divi aktiviert werden. Die Installation von Divi sollte sich in den meisten Fällen sofort positiv auf dein SI-Ergebnis auswirken.
Verringerung der Arbeit des Haupt-Threads deiner Website
Ähnlich wie bei Rendering-Blocking-Ressourcen kann es zu Engpässen bei der Leistung deiner Website kommen, wenn du verschiedene Elemente lädst, die eine Menge Rechenleistung von deinem Server beanspruchen. Eine Reduzierung dieser Elemente kann dazu beitragen, dass die Website schneller an den Browser übertragen wird.
Die einfachste Lösung ist, nicht mehr so viel JavaScript zu verwenden. GTmetrix bringt es am besten auf den Punkt:
„Im Allgemeinen gilt: Je mehr JavaScript auf deiner Seite vorhanden ist, desto länger dauert der Parse-/Kompilierungsprozess, was dazu führt, dass die Benutzer länger warten müssen, bis sie den Inhalt sehen und mit deiner Seite interagieren können.“
Wir wissen, dass dies nicht einfach ist. Du hast die Seite so gestaltet, dass sie auf eine bestimmte Weise funktioniert. Möglicherweise gibt es jedoch ungenutzten Code, den du entfernen kannst, und du kannst vielleicht auch JavaScript von Drittanbietern optimieren, das du in deine Website lädst. Minifiziere auch dein JavaScript.
Zusätzlich zum JS-Audit solltest du auch dein CSS und HTML minifizieren. Dadurch wird der Main-Thread noch mehr entlastet. Caching- und Optimierungs-Plugins verfügen oft auch über diese Optionen.
Divi-Benutzer haben auch hier einen Vorteil, da das Theme CSS und JavaScript automatisch minimiert und in mundgerechte Häppchen aufteilt, um einen schnelleren Durchsatz zu ermöglichen, so dass sich der Haupt-Thread nicht mehr so stark konzentrieren muss.
Häufig gestellte Fragen zu Speed Index
Speed Index ist ein einfaches Konzept, das komplexe Auswirkungen hat. Wir möchten einige häufig gestellte Fragen zu SI beantworten, damit du deine Website so gut wie möglich optimieren kannst.
Wie passt der Geschwindigkeitsindex zur Gesamtleistung meiner Website?
Der Geschwindigkeitsindex ist als einzelne Kennzahl ein sehr guter Indikator für die Leistung deiner Website in einer Reihe von verschiedenen Bereichen. Da er den vollständig sichtbaren Inhalt berücksichtigt, kannst du ihn nicht nur als Maßstab für die vom Benutzer wahrgenommene Ladezeit verwenden, sondern auch als grobe Schätzung der Leistung deiner Website in verschiedenen Bereichen.
Der Wert allein gibt nicht viel Aufschluss darüber, wie es um deine Website bestellt ist. Er kann als eine umfassende Kennzahl betrachtet werden, die, wie GTmetrix es ausdrückt, „einen nützlichen Gesamtmaßstab für die Bewertung der Leistung deiner Website in ihrer Gesamtheit darstellt.“
Sollte ich mich speziell auf meinen Speed Index Score konzentrieren?
Wahrscheinlich nicht, nein.
Ein Benchmarking deiner Website ist zwar sehr nützlich, aber es ist viel wichtiger, sich auf andere, detailliertere Aspekte wie First Contentful Paint (FCP), Largest Contentful Paint (LCP), Time to First Byte (TTFB) und First Input Delay (FID) zu konzentrieren. Du kannst jede Menge Schritte unternehmen, um diese Werte zu verbessern, was wiederum deinen Speed Index verbessern wird. Und als Gesamtbenchmark kannst du anhand von SI sehen, wie gut deine Optimierungen funktionieren.
Fazit
Die Optimierung der Seitengeschwindigkeit ist ein nie endender Kampf, den Website-Betreiber führen müssen. Sie müssen ein Gleichgewicht zwischen Benutzerfreundlichkeit, Benutzererfahrung und Leistung herstellen, und dieses Gleichgewicht zu finden, kann schwierig sein. Wenn Tests so viele verschiedene Ergebnisse für so viele verschiedene Elemente liefern, kann es schwierig sein, zu wissen, wo man seine Energie und Ressourcen einsetzen soll. Speed Index kann dir dabei helfen, da es eine einzige Kennzahl ist, die dir zeigt, wie gut deine Website funktioniert, während du andere, spezifischere Teile der Leistung deiner Website anpasst.
Was hast du im Laufe der Jahre getan, um den Speed Index deiner Website zu optimieren?
übersetzt von Verena Jütte
von Website Freiburg
Quelle, unser Divi Websoftware Partner Elegant Themes:
www.elegantthemes.com/blog/wordpress/speed-index
