Was bedeutet die von Google Pagespeed Insights oder GTMetrix berechnete Punktzahl?

Tools wie Google Pagespeed Insights oder GTMetrix berechnen eine Prozentzahl, mit der die Leistung von Webseiten bewertet wird. Diese Punktzahl hängt nicht direkt mit der Ladezeit der Webseite zusammen, sondern vor allem mit der Qualität ihres Designs. Mit anderen Worten: Der Pagespeed-Score sagt Ihnen, ob die Seite so aufgebaut ist, dass sie sehr schnell angezeigt wird oder nicht.

Warum unterscheidet sich der mobile Score vom Desktop-Score? Ganz einfach, weil das Tool die Verbindungsgeschwindigkeit berücksichtigt, die auf einem Mobiltelefon langsamer ist. Bestimmte Elemente wie die Größe von Bildern, die Anzahl der Suchanfragen usw. werden stärker gewichtet. Es wird auch davon ausgegangen, dass Mobiltelefone weniger leistungsfähig sind als Computer, sodass die CPU-Last (Ausführung von Javascript) einen größeren Anteil an der Berechnung der Punktzahl haben wird.

Wie erreiche ich einen Pagespeed-Wert von 100/100?

Mit dem CMS Prestashop kann ich Ihnen sagen, dass dies auf einer echten Website fast unmöglich ist. Warum ist das so? Ganz einfach, weil Sie immer CSS-Regeln und Javascript-Code haben werden, die von der angezeigten Webseite nicht genutzt werden und die von Modulen oder sogar dem Design für andere Seiten hinzugefügt werden. Typischerweise können die folgenden Möglichkeiten nicht behoben werden:

  • Reduzieren Sie ungenutzte JS-Ressourcen
  • Reduzieren Sie ungenutzte CSS-Ressourcen

Es gibt jedoch eine Reihe von Problemen, die von Pagespeed Insights gemeldet werden und die Sie beheben können, um möglichst nahe an die 100/100-Punkte-Marke heranzukommen.

Hier ist eine Liste der häufigsten Probleme und wie Sie sie lösen oder optimieren können

Optimierung im Zusammenhang mit der Serverleistung

Optimierung in Verbindung mit Bildern

  • Verschieben Sie das Laden von Bildern außerhalb des Bildschirms: Google empfiehlt Ihnen, das verzögerte Laden von Bildern oder Videos einzurichten, d. h. Inhalte, die nicht auf dem Bildschirm zu sehen sind, nicht sofort anzuzeigen. Dies ist vor allem für Mobiltelefone relevant, die kleine Bildschirme haben und deren Besucher nicht unbedingt nach unten scrollen, sodass es nicht nötig ist, Bilder oder Videos zu laden, die sie nie sehen werden. Die Themen bieten oft diese Funktion des "Lazy Loading" an, ansonsten können Sie ein Modul wie Speed Pack (Page Cache Ultimate + WEBP + SQL Profiling + Database cleaning) verwenden.
  • Verbreiten Sie Bilder in Formaten der nächsten Generation: Google hat das optimierte Bildformat WEBP entwickelt, das die Dateigröße reduziert und dabei eine sehr gute Bildqualität beibehält. Um Ihre Bilder im WEBP-Format zu komprimieren, benötigen Sie ein Modul wie WEBP-Komprimierung , das im Gegensatz zu anderen Modulen alle Bilder in Ihrem Shop komprimiert, nicht nur die Bilder der Produkte und Kategorien.
  • Bilder effizient kodieren: Weist darauf hin, dass Ihre Bilder stärker komprimiert werden könnten. Wenn Sie das WEBP-Format verwenden, wird dieses Problem ebenfalls behoben.
  • Bildelemente haben keine explizite Breite und Höhe: Wenn der Browser beginnt, die Webseite anzuzeigen, hat er die Bilder noch nicht heruntergeladen, sondern reserviert ihren Platz mithilfe der Attribute width (Breite) und height (Höhe), die in der HTML (den Templates des Themas oder der Module) enthalten sind. Wenn diese Attribute fehlen, kann der Browser den Platz nicht reservieren und jedes Mal, wenn ein Bild heruntergeladen wird, verschiebt sich der Inhalt der Seite, was für den Besucher sehr unangenehm ist (CLS-Problem). Sie müssen also Ihre Templates ändern, um diese Attribute hinzuzufügen.

Optimierung im Zusammenhang mit der Serverkonfiguration

  • Aktivieren Sie die Textkomprimierung: Unter Apache müssen Sie mod_deflate aktivieren, das alle Textinhalte wie CSS-, JS-, HTML-Dateien usw. komprimiert. Sie können z. B. den folgenden Code in die .htaccess-Datei im Stammverzeichnis Ihres Shops einfügen:
<IfModule mod_deflate.c>

   SetOutputFilter DEFLATE

   <IfModule mod_filter.c>

       AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css

       AddOutputFilterByType DEFLATE application/x-javascript application/javascript application/ecmascript

       AddOutputFilterByType DEFLATE application/rss+xml

       AddOutputFilterByType DEFLATE application/xml

       AddOutputFilterByType DEFLATE application/json

   </IfModule>

</IfModule>
  • Verbreiten Sie statische Elemente mithilfe effizienter Cache-Regeln: Unter Prestashop müssen Sie auf der Seite Leistung die Option "Apache-Optimierungen" aktivieren. Beachten Sie, dass Sie dieses Problem nicht für Dateien korrigieren können, die nicht auf Ihrem Server gehostet werden (Google Analytics, Facebook usw.)

Optimierung im Zusammenhang mit dem Prestashop-Thema

  • Stellen Sie sicher, dass der Text während des Ladens von Webfonts sichtbar bleibt: Sie verwenden in Ihrem Shop eine Schriftart, die der Browser herunterladen muss. Während dieser Zeit muss man dem Browser mitteilen, dass er eine Systemschriftart wie z.B. Arial verwenden soll, sonst kann er nichts anzeigen und das ist blockierend. Dazu müssen Sie die Option "font-display: swap;" in die CSS-Regel einfügen, die die Schriftart definiert (@font-face).
  • Reduzieren Sie ungenutzte JavaScript-Ressourcen: Aufgrund des Designs von Prestashop ist es unmöglich, diese zu optimieren
  • Reduzieren Sie ungenutzte CSS-Ressourcen: Eine Optimierung ist aufgrund des Prestashop-Designs nicht möglich
  • Beseitigen Sie Ressourcen, die das Rendern blockieren: nicht optimierbar, da dies von Anfang an im Theme geschehen muss
  • Reduzieren Sie die Größe der CSS-Ressourcen: lässt sich normalerweise durch Aktivierung der Option "Smart Cache CSS" auf der Seite Leistung und durch Aktivierung von Apache mod_deflate beheben
  • Reduzieren Sie die Größe der JavaScript-Ressourcen: Wird normalerweise durch Aktivieren der Option "Smart Cache CSS" auf der Seite Leistung und durch Aktivieren von Apache mod_deflate behoben
  • Vermeiden Sie eine zu große DOM-Größe: zeigt an, dass es zu viele Informationen auf Ihrer Seite gibt, genauer gesagt, dass das HTML zu groß ist. Dies hängt oft mit einer zu großen Anzahl von Produkten auf der Seite zusammen; Sie können diese Anzahl verringern oder eine Endlos-Scroll-Option aktivieren, die es ermöglicht, die weiteren Produkte herunterzuladen, wenn der Besucher bis zum Ende der Liste scrollt.
  • Die Seite verwendet keine passiven Event-Listener, um die Scroll-Leistung zu verbessern: Dies ist ein Javascript-Problem, das durch das Design oder ein Modul verursacht wird. Es wird für Sie kompliziert sein, es zu identifizieren.
  • Vermeiden Sie die Erstellung kritischer Anfrageketten: Das bedeutet, dass Dateien auf andere Dateien verweisen, sodass der Browser ihren Download erst starten kann, nachdem er diese übergeordneten Dateien heruntergeladen und gelesen hat. Um diesen Zeitverlust zu verringern, muss man diese Dateien direkt in HTML referenzieren, indem man das Attribut "preload" verwendet.

Hat die Punktzahl einen Einfluss auf die SEO?

Google sagt nicht, dass es die Punktzahl zur Bewertung der Suchergebnisse verwendet, aber ich denke, dass es eine indirekte Auswirkung gibt.

Google misst nämlich die sogenannte "Dwell Time", die Zeit, die zwischen zwei Klicks in einer Ergebnisliste verstrichen ist. So weiß es, ob der Besucher dort lange oder gar nicht verweilt hat. Wenn diese Dwell Time beispielsweise weniger als 3 Sekunden beträgt, kann man davon ausgehen, dass er uninteressant ist und mit hoher Wahrscheinlichkeit herabgestuft wird.

Zum Schluss

Es ist natürlich sehr kompliziert, all diese Optimierungen umzusetzen! Aus diesem Grund habe ich das Prestashop-Thema JPresta Origin und die dazugehörigen Module erstellt

Eine sehr hohe Geschwindigkeit beim Laden der Seiten Ihres Shops wird nicht dazu führen, dass Sie mehr verkaufen, aber eine langsame Website wird mit Sicherheit dazu führen, dass Sie Kunden verlieren!