Logo Joomlainfo

Joomlainfo News & Infos

Wissenswertes rund um das Content Management

Hier könnte deine Werbung stehen! So wie das hier:

Freier Leseabo-Artikel: PageSpeed Insights Aussagen lesen

Martin Adams

Vergangenen November veröffentlichte Google die Version 5 seiner PageSpeed Insights API. Hier ist jetzt die Lighthouse-Technologie implementiert und auch Felddaten aus dem Chrome User Experience Report (CrUX) wurden integriert.

Die neue Version stiess in der Öffentlichkeit auf gemischte Resonanz: Während bei den einen die PSI-Ergebnisse in die Höhe schnellten, sahen andere, wie ihre Ergebnisse immer tiefer in den Keller rutschten. Wie muss man die neu gewonnenen Ergebnisse einordnen und entsprechend anwenden?

An dieser Stelle wäre für Nicht-Leseabo Leser Schluss. Du müsstest dich anmelden, um weiterlesen zu können. Aber dieser Artikel ist ausnahmsweise für alle frei zugänglich.

Wenn du schon länger meine Artikel liest, dann weisst du, dass eine zuverlässige Web-Performance-Optimierung nicht allein von der PageSpeed Insights (PSI) abhängen sollte. Da aber die Google Website-Tools zu den am häufigsten verwendeten Performance Audits gehört, sollte man als Webworker dennoch wissen, was sich beim neuen PageSpeed Insights geändert hat und welche Punkte man immer im Auge haben sollte. Was hat es mit dem Lighthouse auf sich?

Google Lighthouse kennenlernen

Bislang verliess sich Google bei der Bewertung der Leistung von Websites auf verschiedene Leistungstools, wie:

  • PageSpeed Insights (das wohl bekannteste Audit-Tool)
  • WebPageTest
  • Test My Site
  • Chrome Developer Tools
  • und Lighthouse.

Meist genutzte Google Performance Tools

Das Hauptproblem beim Einsatz verschiedener Performance-Audit-Tools besteht darin, dass sie dir oft widersprüchliche Empfehlungen ausspucken und bei der Web-Performance-Optimierung mehr Verwirrung stiften, als dass sie weiterhelfen.

Deshalb war es laut Google an der Zeit, die Dinge einfacher zu machen und es den Entwicklern zu ermöglichen, überall die gleichen Leistungsempfehlungen zu bekommen, unabhängig davon, welches Google-Tool sie verwenden.

Jetzt, da Lighthouse in PageSpeed Insights integriert ist, sollte immer das gleiche Ergebnis rauskommen. Egal ob die Performance-Empfehlungen aus dem Web, von der Befehlszeile oder über die Chrome DevTools kommen. In diesem Zusammenhang ist anzumerken, dass Google mit diesem neuen Tool eine ganz bestimmte Zielgruppe anspricht: Entwickler und technisch versierte Anwender, die bereits über gute Kenntnisse der gängigsten Praktiken und Lösungen für die Website-Optimierung verfügen.

Was ist Google Lighthouse?

Lighthouse ist die Technologie, die das Herzstück des Googles Version 5 PSI-Updates bildet. Google erklärt es so: Lighthouse ist ein Open-Source, automatisiertes Werkzeug zur Verbesserung der Qualität von Webseiten. Man kann es auf jeder beliebigen Webseite ausführen, die öffentlich ist oder eine Authentifizierung erfordert. Es verfügt über Audits für Leistung, Zugänglichkeit, progressive Webanwendungen und mehr. Du kannst Lighthouse in Chrome DevTools, von der Befehlszeile aus oder als Knotenmodul ausführen. Du gibst bei Lighthouse eine URL zum Auditing an und es führt eine Reihe von Audits auf der Seite durch und erstellt anschliessend einen Bericht darüber.

Verwenden die Hineise des Audits als Indikatoren, wie du die Seite verbessern kannst. Jedes Audit hat ein Referenzdokument, in dem erklärt wird, warum das Audit wichtig ist und wie es optimiert werden kann.

Der Lighthouse-Code ist im öffentlichen Google Chrome GitHub Repo einsehbar.

Warum dieses PageSpeed Insights Update ein Wendepunkt ist

Von nun an erfordert das neue PageSpeed Insights von uns allen, dass wir die Art und Weise anpassen müssen, wie wir die Leistungswerte lesen und die Web Performance Optimization Audits interpretieren.

Wenn du eine Seite mit PageSpeed Insights prüfst, enthältst du als Ergebnis Labor- wie auch Felddaten geliefert.

Google erklärt den Unterschied zwischen Labor- und Felddaten wie folgt:

a) Labordaten sind nützlich für das Debuggen bei Performance-Problemen, da sie in einer kontrollierten Umgebung gesammelt werden. Es kann jedoch sein, dass es Engpässe aus der Praxis nicht berücksichtigen kann, weil es nur hypothetische Labordaten sind.

b) Felddaten sind nützlich, weil sie aus echten, realen Benutzererfahrungs-Daten gesammelt werden – Sie basieren aber nur auf einer begrenzteren Menge an Kennzahlen.

Labordaten auf PSI basieren auf verschiedenen Metriken:

Jede dieser Kennzahlen erhält eine Punktzahl und das (un)bekannte PSI-Symbol: grüner Haken bei guter Note (90+), orangefarbener Kreis für die Durchschnittsnote und ein rotes Dreieck für die niedrigste Note.

lighthouse 3
Farbliche Indikatoren, helfen dir, die Leistung der Site einzuschätzen

Felddaten hingegen basieren auf einer Reihe historischer Statistiken, die darstellt, wie sich eine bestimmte Seite „in der realen Welt“ verhalten hat: Sie berücksichtigt anonymisierte Leistungsdaten von realen Benutzern, welche die Seite von verschiedenen Geräten und Netzwerkbedingungen aus besucht haben. Diese Daten werden im Datensatz Chrome User Experience Report gespeichert und werden in der Benutzeroberfläche als Klassifizierung der Geschwindigkeit dargestellt:

  • ein grüner Balken für schnelle Seiten,
  • ein oranger Balken für durchschnittliche Seiten
  • und ein roter Balken für langsame Seiten.

PageSpeed Testresultat für joomlainfo.ch

lighthouse 4
Vorschläge zur Verbesserung werden gleich mitgeliefert

Es ist wichtig zu beachten, dass nicht alle Standorte über genügend Felddaten verfügen, die angezeigt werden können (das kann das Ergebnis verfälschen, weil reale Daten fehlen).

Warum du die PSI-Punkte auf eine andere Weise lesen solltest

Vereinfacht ausgedrückt, während Labordaten die Leistung einer Seite unter festen Bedingungen (Gerät und Netzwerk) simuliert, erfassen Felddaten einen Durchschnitt der realen Leistung deiner Besucher. Da nun alle PSI-Ergebnisse auf Lighthouse basieren, müssen wir die Ergebnisse aus einem einfachen Grund unterschiedlich interpretieren: Lighthouse simuliert eine Seitenauslastung in Mobilfunknetzen und mit Mittelklasse-Geräten.

lighthouse 5
Email-Bericht mit den Testergebnissen

Dies ist die eigentliche Revolution der neuen PageSpeed Insight-Version! Jedes Mal, wenn du einen PSI-Bericht liest, musst du dich daran erinnern, dass die erste Aussage die mobile Leistung ist. Sie beschreibt, wie sich deine Website mit einer mobilen Verbindung und darüber hinaus auf einem Mittelklasse-Gerät verhält.

Darum erschrecke nicht, wenn die Leistung deines PSI-Audits auf einen Schlag schlechter geworden ist.

3 wichtige Punkte, die bei der Durchführung eines PageSpeed-Tests beachtet werden muss

Da du jetzt weisst, dass das Handy von Google und seinem Lighthouse-Tool priorisiert wird, solltest du drei wichtige Punkte beachten, wenn du einen PageSpeed Insight-Test mit der neuen API durchführst:

1. PSI-Tests werden mit einer gedrosselten 3G-Verbindung durchgeführt. Dies wird wahrscheinlich eine Rolle spielen, wenn deine Besucher langsame 3G-Netze verwenden. Wie du sicher weisst, steigt die durchschnittliche Download-Geschwindigkeit auf dem Handy ständig an: Unsere Mobilfunknetze sind immer leistungsfähiger und können viermal so schnell laufen, wie eine 3G-Verbindung. Dieser Parameter ist nicht so relevant, wenn dein Ziel-Publikum auf Ländern basiert, in denen 3G-Mobilfunknetze von schnelleren Verbindungen übertroffen werden.

2. Der von den PSI-Berichten verwendete Standort des Testservers ist unbekannt. Das ist ein wichtiger Punkt! Angenommen, dein Server befindet sich in Zürich, welcher nahe bei deiner Zielgruppe ist, während der von PageSpeed Insights verwendete Testserver, sagen wir mal, in Kanada liegt. Dann erhältst du Ergebnisse, die kein reales Szenario darstellt, weil der Besucher in Zürich eine geringere Ladezeit hat, da er geografisch näher an deinem Server ist. Deshalb empfehlen wir, die Wirtschaftlichkeitsprüfung mit Tools wie Pingdom und GTMetrix abzuschliessen, die es ermöglichen, selber verschiedene Serverstandorte auszuwählen. (bei GTMetrix musst du neu ein Konto erstellen, um auf die Liste der Serverstandorte zuzugreifen).

3. Das von PSI verwendete mobile Setup (oder der Emulator des mobilen Setups) ist ein Moto G4 der Mittelklasse. Mobile Geräte unterscheiden sich erheblich in der Rechenleistung und den Eigenschaften, was einen grossen Einfluss auf die Ladezeit der Seiten haben kann. Das Smartphone der neuesten Technologie würde deutlich weniger Zeit in Anspruch nehmen, um eine Seite zu laden, als eine Seite, die unter den gleichen Netzwerkbedingungen sogar nur ein paar Jahre älter ist.

Wie geht man mit den neuen PageSpeed-Empfehlungen um?

Neben dem erwähnten Technologie-Update hinter dem PageSpeed-Algorithmus sind einige neue Empfehlungen zu erwähnen, die viele dazu bringen, sich zu fragen: «Wie kann ich das optimieren?». Schauen wir das zusammen an:

Nicht verwendetes CSS weglassen

Der PageSpeed-Hinweis beschreibt diese Empfehlung wie folgt: Entfernen Sie unbenutzte Regeln aus Stylesheets, um unnötige Bytes zu reduzieren, die durch Netzwerkaktivitäten verbraucht werden.

Wenn du ein fertiges Joomla!-Template verwendest, enthalten sie in der Regel mehr Code, als es für deine Seite erforderlich ist. Dies geschieht, weil der Autor nicht vorhersagen kann, wo und für was du deine Website einsetzen wirst. Beispielsweise kann die Startseite eine Struktur aufweisen, dass die neuesten Beiträge anzeigt, während im angemeldeten Zustand diese Auflistung der Beiträge möglicherweise nicht vorhanden sind. Aber öffentliche Startseite und interne Seiten haben oft das gleiche Stylesheet. Das bedeutet, dass immer das ganze CSS für jede Seite geladen werden muss, auch wenn sie aufgrund des Inhalts nicht verwendet werden.

Kann ein Plugin wie JCH-Optimize diesen Hinweis über «Defer Unused CSS» korrigieren? Nein. Um diese Empfehlung wirklich zu erfüllen, müsstest du ein individuelles Website-Template bauen, anstatt ein vorgefertigtes Joomla!-Template zu verwenden.

Main-Thread Aufgaben minimieren

Eine gute Erklärung zu dieser Empfehlung liefert der Leitfaden von Addy Osmani, Engineering Manager bei Google: JavaScript Optimierung (engl.).

Was PageSpeed sagt, dass die Prozesse deiner Website zu stark auf JavaScript angewiesen ist. JavaScript ist schwerfällig: Es wirkt sich auf deine Website in Bezug auf das Herunterladen und Ausführen aus, denn je langsamer die Benutzerverbindung, desto länger wird der Download der Seite dauern. Eine weitere Belastung für das Verarbeiten von JavaScript ist die Zeit, die benötigt wird, um den Code nach dem Download zu analysieren/kompilieren: Je mehr JavaScript du sendest, desto länger ist der Parse/Compile-Prozess, desto länger müssen deine Benutzer warten, um mit der Interaktion auf der Website zu beginnen, insbesondere vom Handy aus.

Kann ein SEO-Plugin diese Meldung: «Main-Thread-Aufgaben minimieren» beheben? Nein.

Um diesen Hinweis zu verbessern, musst du die Nutzung von JavaScript auf deiner Website auf ein Minimum reduzieren, was u.U. eine Anpassung deines Templates und/oder installierten Erweiterungen erfordert.

Verkürzung der JavaScript-Ausführungszeit

Diese Empfehlung steht in engem Zusammenhang mit dem Abschnitt oben und wie gesagt, mit JavaScript sollte man sparsam umgehen.

PageSpeed erinnert dich noch einmal daran, dass deine Website weniger JavaScript verwenden sollte, um die Ausführungszeit der Seiten zu verbessern. Jedes Mal, wenn du diesen Hinweis siehst, frage dich: «Verschicke ich wirklich zu viel JavaScript?». Die Antwort wird wahrscheinlich «Ja!» lauten. Es gibt viele Möglichkeiten, die Verwendung von JavaScript zu reduzieren. Aber dieser Artikel würde den Rahmen sprengen, um diese unendlichen Möglichkeiten zu erkunden. Ein guter Ratgeber könnte die Joomla-SEO Website von Simon sein.

Kann JCH-Optimizet den Hinweis „JavaScript-Ausführungszeit reduzieren“ beheben? Jein. JCH-Optimize hat keine Kontrolle über die Menge an JavaScript, die deine Website sendet; Dafür müsste man in den Code eingreifen und die Menge an JS senken. Das Plugin kann aber die Reihenfolge, wie der Code geladen wird, beeinflussen. Sogenanntes asynchrones Laden der Daten. z.B. der JS-Code wird ganz am Schluss geladen, wenn die Seite bereits aufgebaut ist und der Nutzer auf der Seite bereits lesen und surfen kann.

Stell dich drauf ein

Im Netz häufen sich Meldungen von besorgten Website-Betreiber, die gesehen haben, wie ihre mobilen PageSpeed-Ergebnisse über Nacht fallen. Wenn du auch zu denen gehörst, dann denke daran, dass du, um die neuen PageSpeed Insights-Ergebnisse zu verstehen, die unterschiedliche Funktionsweise von Lighthouse berücksichtigen musst.

Die Verwendung einer standardmässig gedrosselten 3G-Verbindung, eines Mittelklassen-Mobilgeräts und die Tatsache, dass der Serverstandort nicht angegeben ist, sind die blinden Flecken des neuen PageSpeed Insight-Tools: Seine Ergebnisse unter Berücksichtigung dieses zusätzlichen Kontextes zu betrachten, ist der beste Weg, um das Beste aus dessen Vorschlägen herauszuholen.

Ergänze deine Audits und Berichte mit anderen Tools zur Leistungsmessung wie Pingdom und GTMetrix. So erhältst du ein präzises und realitätsgetreues Bild deiner Websiteleistung!

Quelle: wp-rocket.me

Facebook
Twitter
LinkedIn
Pinterest
WhatsApp
Email

Das könnte dich auch interessieren...

Google Core Web Vitals

Google bringt Core Web Vitals

Google hat für Mai 2021 das nächste Rankingfaktor-Update für Websites angekündigt und bietet mit Core Web Vitals ein Werkzeug an, womit man seine Websites vergleichbar machen kann. Ich zeige dir, was Google genau testet und auf was du bei deiner Joomla-Seite achten musst.

Weiterlesen »

Willkommen zurück, wir haben dich vermisst

Bitte anmelden, um alle Inhalte werbefrei lesen zu können.

Diese Website verwendet Cookies, um dir die bestmögliche Nutzung dieser Website zu ermöglichen. Wenn du weiterhin auf dieser Website surfst, akzeptierst du die Verwendung von Cookies. Mehr erfahren