Google Web Vitalis

[Petruschka]

Prestashop 1.6.x

Hallo an alle,

Googe Web Vitalis das neue SEO Mess-Instrument gibt Rätsel auf ! Jedenfalls bei mir.

Ich sehe mich in der Google Search Console mit folgendem Eintrag konfrontiert:

"Problem mit LCP: länger als 4 s (Mobilgerät)"

Ich habe leider keinen blassen Schimmer, wie ich das beseitigen soll.

Weiss jemand eine Lösung dafür ?

Schöne Grüsse ...

[Prestachamps]

Hallo, 

Largest Contentful Paint (LCP) ist eine Google User Experience-Metrik. Es wird voraussichtlich 2021 zu einem Ranking-Faktor. In diesem Handbuch wird erläutert, was LCP ist und wie die besten Ergebnisse erzielt werden können.

Definition der größten inhaltlichen Farbe
Was ist die größte inhaltliche Farbe?
LCP ist ein Maß dafür, wie lange es dauert, bis der Hauptinhalt einer Seite heruntergeladen ist und für die Interaktion bereit ist. Was gemessen wird, ist das größte Bild oder der größte Kontextblock innerhalb des Benutzeransichtsfensters. Alles, was über den Bildschirm hinausgeht, zählt nicht.

Typische Elemente, die gemessen werden, sind Bilder, Videoposterbilder, Hintergrundbilder und Textelemente auf Blockebene wie Absatz-Tags.

Warum wird LCP gemessen?
LCP wurde als Schlüsselmetrik für den Web Vitals-Score ausgewählt, da es genau misst, wie schnell eine Webseite verwendet werden kann. Darüber hinaus ist es einfach zu messen und zu optimieren.

Elemente auf Blockebene zur Berechnung des LCP-Werts

Elemente auf Blockebene, die zur Berechnung der Punktzahl für die größte inhaltliche Farbe verwendet werden, können die Elemente <main> und <section> sowie die Formulare Heading, Div und Form sein.

Grundsätzlich kann jedes HTML-Element auf Blockebene verwendet werden, das Textelemente enthält, sofern es das größte ist.

Es werden nicht alle Elemente verwendet. Beispielsweise werden die SVG- und VIDEO-Elemente derzeit nicht zur Berechnung der größten inhaltlichen Farbe verwendet.

LCP ist eine leicht zu verstehende Metrik, da Sie lediglich auf Ihre Webseite schauen und den größten Textblock oder das größte Bild ermitteln und dann optimieren müssen, indem Sie es verkleinern oder alles entfernen, was das schnelle Herunterladen verhindern würde.

Da Google die meisten Websites in den Mobile First-Index aufnimmt, ist es am besten, zuerst das mobile Ansichtsfenster und dann den Desktop zu optimieren.

Das Verzögern großer Elemente kann nicht helfen
Manchmal wird eine Webseite in Teilen gerendert. Das Herunterladen eines großen Bilds kann länger dauern als das größte Element auf Textblockebene.

In diesem Fall wird ein PerformanceEntry für das größte Element auf Textblockebene protokolliert. Wenn das angezeigte Bild oben auf dem Bildschirm geladen wird und dieses Element mehr vom Benutzerbildschirm (seinem Ansichtsfenster) einnimmt, wird ein anderes PerformanceEntry-Objekt für dieses Bild gemeldet.

Bilder können für LCP-Scores schwierig sein
Web-Publisher laden normalerweise Bilder in ihrer Originalgröße hoch und verwenden dann HTML oder CSS, um die Größe des Bilds so zu ändern, dass es in einer kleineren Größe angezeigt wird.

Die Originalgröße wird von Google als "intrinsische" Größe des Bildes bezeichnet.

Wenn ein Publisher ein Bild mit einer Breite von 2048 Pixel und einer Höhe von 1152 Pixel hochlädt, werden diese Höhe und Breite von 2048 x 1152 als "intrinsische" Größe betrachtet.

Wenn der Herausgeber das Bild mit einer Größe von 2048 x 1152 Pixel auf 640 x 360 Pixel ändert, wird das Bild mit einer Größe von 640 × 360 als sichtbare Größe bezeichnet.

Für die Berechnung der Bildgröße verwendet Google die Größe, die zwischen den Bildern mit intrinsischer und sichtbarer Größe kleiner ist.

Optimieren für die größte inhaltliche Farbe

Es gibt drei Hauptbereiche, die optimiert werden müssen (plus einen weiteren für JavaScript-Frameworks):

Langsame Server
Renderblockierendes JavaScript und CSS
Langsame Ladezeiten der Ressourcen

Ein langsamer Server kann ein Problem mit DDOS-Hacking- und Scraper-Datenverkehr auf einem gemeinsam genutzten oder VPS-Host sein. Sie können Erleichterung finden, indem Sie ein WordPress-Plugin wie WordFence installieren, um herauszufinden, ob Sie einen massiven Ansturm erleben, und ihn dann blockieren.

Andere Probleme können eine Fehlkonfiguration eines dedizierten Servers oder VPS sein. Ein typisches Problem kann die Menge an Speicher sein, die PHP zugewiesen ist.

Andere Probleme können veraltete Software wie eine alte PHP-Version oder veraltete CMS-Software sein.

Im schlimmsten Fall handelt es sich um einen gemeinsam genutzten Server mit mehreren Benutzern, die Ihre Box verlangsamen. In diesem Fall ist der Wechsel zu einem besseren Host die Antwort.

In der Regel kann das Anwenden von Korrekturen wie das Hinzufügen von Caching, das Optimieren von Bildern, das Korrigieren von Render-blockierendem CSS und JavaScript sowie das Vorladen bestimmter Assets hilfreich sein.

Google hat einen tollen Tipp für den Umgang mit CSS, der für das Rendern der Inhalte des Nutzers nicht unbedingt erforderlich ist:

„Entfernen Sie nicht verwendetes CSS vollständig oder verschieben Sie es in ein anderes Stylesheet, wenn es auf einer separaten Seite Ihrer Site verwendet wird.

Verwenden Sie für jedes CSS, das für das anfängliche Rendern nicht benötigt wird, loadCSS, um Dateien asynchron zu laden, wobei rel = "Preload" und Onload genutzt werden.

Ich versuche hier zu sagen, dass Sie eine Firma brauchen, um das zu erledigen. Der Prozess, den Sie benötigen, heißt Page Speed Optimization Service!

Ich hoffe, es hilft;)

MfG

Leo