Core Web Vitals Optimieren

1. Erstbesucher verbrachten im Allgemeinen weniger Zeit auf unbekannten Websites. Zu den Kriterien für den Verbleib oder nicht auf einer Website gehört, wie schnell sie geladen wird. Die Geschwindigkeit der Website wirkt sich auf die Benutzererfahrung aus. Wenn die Seite langsam ist, warten sie nicht, sondern springen zum nächsten Browser-Tab (hohe Absprungrate, Drops). Sie können nicht erwarten, dass zeitaufwändige Inhalte viral werden. Wer teilt schon gerne eine langsame Seite?

2. Solange die Seite qualitativ hochwertige Inhalte bietet, können Besucher die Geschwindigkeit genießen, um mehr Seiten zu durchsuchen (Seitenaufrufe sind gut für das Ranking) und später wiederzukommen. Kunden können bis zu 7 Besuche machen, bevor sie etwas kaufen oder anderweitig konvertieren. Leistungsstarke Inhalte führen zu mehr Conversions, höherem Engagement und besseren Rankings in der organischen Suche.

3. Seit 2021 hat Google einen neuen mobilen Algorithmus eingeführt (Page Experience) zur Bewertung von Websites. Websites ohne schnelle Probleme mit der Suchleistung haben bessere Chancen, mehr organischen Traffic zu erhalten. Der Algorithmus wird im März 2022 um Desktop-Ranking-Signale ergänzt.

4. Die Geschwindigkeit wird durch den Serverstandort beeinflusst. Es ist sinnvoll, die Ladezeit in der Nähe des Serverstandorts zu messen und keine verzerrten Ergebnisse von Entfernungspunkten auf der anderen Seite der Welt zu erhalten. Die Zeit bis zum ersten Byte (TTFB) sollte im Durchschnitt zwischen 200 und 500 Millisekunden liegen. Die höchsten Werte gelten als sehr langsam und die niedrigsten Werte als ideal.

Core Web Vitals misst die Benutzererfahrung in 6 Bereichen:

1. First Byte (First Contentful Paint - FCP)

2. Geschwindigkeit (Speed Index)

3. Der größte Codeblock (Largest Contentful Paint - LCP)

4. Wechselwirkung (Time To Interactive - TTI)

5. Zeit blockieren (Total Blocking Time - TBT)

6. Design-/Vorlagenverschiebung (Cumulative Layout Shift - CLS)

Wichtiger Hinweis zum Debuggen von Problemen: Google Search Console erhält seine Tracking-Daten von Chrome-Nutzern [Chrome User Experience Report (CrUX)] Probelauf- oder Felddaten, die die Seiten in den letzten 28 Tagen besucht haben. Wenn die Core Web Vitals innerhalb des akzeptablen Bereichs liegen (siehe empfohlene Schwellenwerte unter jedem Core Web Vital), muss noch die Validierungstaste im GSC-Bericht gedrückt werden.

Page Speed Insights Berichte über Live-(Lab-) Daten, (neuer Lauf), die im Vergleich zu veralteten Felddaten möglicherweise weniger oder keine Probleme haben. Diskrepanzen zwischen Tools unter Googles eigenem Dach sorgen nur deshalb für Verwirrung unter Webmastern, weil Google-Ingenieure die Tools nicht synchronisieren oder erklären können, warum sie dies nicht tun und warum sie darauf bestehen, veraltete Felddaten aus der Vergangenheit anstelle von Labordaten zu verwenden, um Websites zu bewerten. Ein weiterer Bereich, in dem sie versagen (ein beschämender GSC-Fehler), ist, wenn alle Probleme behoben sind, die 28 Tage vergangen sind und GSC weiterhin Fehler anzeigt!

Der FCP ist das erste Byte des Inhalts. Es sollte nahe am Wert von Time To First Byte (TTFB). Empfohlener Wert FCP <2

57 % der URLs in einer Stichprobe von 20.000 URLs schlagen in LCP fehl. Das LCP misst, wie lange es dauert, bis der aussagekräftigste Inhalt geladen ist und/oder wie schnell Nutzer das Laden Ihrer Website wahrnehmen (Ladeleistung). Beim LCP geht es um große (nicht optimierte) Bilder, Inhaltsblöcke und Codeblöcke, z. B. Seitenersteller innerhalb des Ansichtsfensters oder niedriger, wenn die oben genannten Probleme behoben sind. LCP-Fehler können behoben werden, indem die Bildgröße, der Inhalt und das Aufblähen des Codes im Ansichtsfenster reduziert werden. Das LCP unterscheidet sich zwischen der mobilen und der Desktop-Version Ihrer Website. Empfohlener Wert LCP <2.5

Das TBT misst die geschätzte Gesamtzeit, die Ihr Browser blockiert, wenn eine Website geladen wird. Das Laden von Bildern, Text, Javascripts und allem anderen zieht Strom von der CPU und verhindert, dass Ihr Browser mehr tut. Durch die Schätzung der Zeit, die Ihr Browser blockiert wird, weil er etwas lädt, kann Lighthouse messen, wie gut die Benutzererfahrung ist. Je weniger Zeit Ihr Browser gesperrt ist, desto besser ist die Benutzererfahrung.

54 % der URLs in einer Stichprobe von 20.000 URLs schlagen CLS nicht bestehen. Bei CLS (auch bekannt als Layout Shift) dreht sich alles um visuelle Stabilität. Designänderungen treten auf, wenn Elemente fehl am Platz sind oder Inhalte blockieren, z. B. Anzeigen, iframes, Schriftarten, die FOUT-Effekte erzeugen, usw. Alles, was das Design stört, auch nur um einen kleinen Prozentsatz. Korrekturen hängen von der Ursache des Problems ab, für . CSS-Beispiel, Abstürze, Anzeigen, aufgeblähter Code (Page Builder). Die Ursache des Problems bestimmt, ob die Korrekturen websiteweit oder seitenspezifisch sind. Typische Beispiele für CLS sind Menüs, die springen, Heldenabschnitte, die sich von links nach rechts oder diagonal bewegen, Bilder oder Anzeigen, die im Handumdrehen schrumpfen, Pop-ups usw. Empfohlener Wert CLS: <0.1

Die Geschwindigkeit der Website ist ein Ranking-Faktor mit der Veröffentlichung des Page Experience-Updates (Core Web Vitals) im Juni 2021. Websites, die die neuen Geschwindigkeitskriterien erfüllen, erhalten einen Schub von langsameren Konkurrenten. Die mobile Website ist die bevorzugte Version, die Google indiziert, aber die Geschwindigkeitsoptimierung kümmert sich sowohl um mobile als auch um Desktop-Versionen. Natürlich werden für jede Version unterschiedliche Metriken angezeigt, da auch die Anforderungen unterschiedlich sind.

Um zu messen, wie stark sich die Geschwindigkeit verbessert hat, verwende ich zwei der gebräuchlichsten Geschwindigkeitsmessgeräte: Google Page Speed Insights und GTmetrix.com. Es gibt mehr Optionen wie WebPageTest.org, Pingdom.com, alle werden positive Ergebnisse zeigen.

Die Geschwindigkeitsmetriken unterscheiden sich zwischen mobilen und Desktop-Versionen. In der Regel stellt die mobile Geschwindigkeit höhere Anforderungen, und Websites mit ihren aktuellen Funktionen weisen viele Einschränkungen auf, die erst nach dem Zugriff auf das Backend zu finden sind. Zum Beispiel sind nicht alle Website-Themes/-Vorlagen die besten für Mobilgeräte, obwohl sie für Mobilgeräte optimiert sind, aber das Ändern eines Themas ist ein drastischer Schritt und selten eine Option. Man muss innerhalb der Grenzen arbeiten, die sich aus den Geschäftsentscheidungen des Kunden ergeben.

Prüfen Sie, wie Die Themen in diesem Artikel funktionieren.

Jedes Website-Setup kann auf Geschwindigkeit optimiert werden, egal ob es sich um E-Commerce handelt, Wordpress Simple oder Woocommerce, Joomla, Shopify, Squarespace, Drupal, CS-cart, Magento, Prestashop, HTML, PHP usw. Ein Haftungsausschluss hier: Nicht alle Websites können 100/100 erreichen, da die Vorlagen/Themes/Plugins schlecht codiert, die Serverkonfiguration falsch sind, die Plugins überlastet sind und die Funktionen nicht immer notwendig sind usw.

Themes sind heute fast auf dem gleichen Leistungsniveau, sie sind Plugins und WYSIWG- Drag&Drop Seitenersteller wie Divi, Visual Composer, Elementor, WP Bakery, Wolf, Beaver Builder, Themify Builder, Site Origin, Nimble Builder, usw., zusätzlich zu seinen Plugins (es scheint, dass ein Seitenersteller von selbst nicht genug anschwillt), die die meisten Probleme verursachen. Die Gleichung, die sich verlangsamt, ist Seitenersteller + Anzahl der Plugins oder einfach Anzahl der Plugins. Nehmen wir an, Sie führen einen Test durch und entfernen Ihren Visual Composer sowie unnötige Plugins, die Site könnte von Anfang an 40-60p sein.

1. Holen Sie sich eine Zahl über 80/100, was ziemlich gut ist, wenn Sie niedrig anfangen. In der Regel liegen Kundenwebsites zwischen 15 und 40/100.

2. Lassen Sie die Website mit einer Geschwindigkeit von weniger als 2 Sekunden laden (von Google empfohlen, um die besten Rankings zu erzielen).

Sowohl auf dem Server als auch auf dem Website-Code sind verschiedene Eingriffe erforderlich. Aktivieren Sie das Server-Caching, wenn verfügbar, optimieren Sie die wichtigsten Website-Dateien, reduzieren Sie die Anzahl der Plugins usw. Die Arbeit hat keinen Einfluss auf die Ästhetik, wie die Website aussieht und auf menschliche Besucher reagiert.

Entscheiden Sie sich für schnelleres Hosting: Sie können in der gleichen Server-Preiskategorie bleiben, d.h. gemeinsam genutzter Server und einen Host finden, der Ihre Hardware-Ressourcen (RAM, CPU) nicht mit vielen anderen Clients teilt. Oder Sie können auf einen VPS (Virtual Private Server) oder die teurere Option upgraden, indem Sie einen dedizierten (physischen) Server kaufen (geeignet für E-Commerce-Websites). Eine weitere Möglichkeit besteht darin, Speicherplatz in der Cloud zu mieten, der Skalierbarkeit und On-Premise-Ressourcen bietet, ohne dass eine Serverwartung erforderlich ist.

Verwenden Sie ein CDN (Content Delivery Network): Ihre Inhalte werden auf einer Vielzahl von Servern an verschiedenen Standorten gehostet und vom nächstgelegenen geografischen Standort aus bereitgestellt. Das Ergebnis sind schnellere Ladezeiten und keine Ausfallzeiten.

Caching und Komprimierung: Dateien können auf dem Server zwischengespeichert und komprimiert werden, bevor eine lokale Datei berührt wird. Dateien werden auf dem Server gespeichert (auch für dynamische Datenbankseiten), um die Ladezeit zu beschleunigen und Ressourcen zu sparen (nicht bei jeder Anfrage zu rendern). Dateien ändern sich, wenn Sie Seiten aktualisieren, oder jeder Treffer ruft keine Datenbankanforderung aus. Diese Technik hat hervorragende Ergebnisse, aber nicht alle Server bieten viele Optionen. Darüber hinaus müssen Sie Zugriff auf den Server haben, um sie zu aktivieren.

Javascript und CSS: Reduzieren Sie HTTP-Anfragen, die durch viele einzelne JavaScript- und CSS-Dateien verursacht werden. Sie können JavaScript in einer Datei und CSS-Dateien auf die gleiche Weise gruppieren. Hier entstehen Probleme. Einige Dateien sollten nicht berührt werden, da sie die Funktionsweise und Gestaltung der Website beeinflussen, sodass besondere Aufmerksamkeit erforderlich ist. Um HTTP-Anfragen zu entschärfen, verwenden wir die Techniken des Gruppierens, Minimierens und Ladens in der Fußzeile. Darüber hinaus verwenden wir Defer-, Asynchron- und DNS- oder Link-Preloading-Methoden. Die besten Ergebnisse erzielen Sie, wenn Sie Zugriff auf lokale Dateien (auf dem Server) haben.

Webfonts: Heutzutage werden Schriftarten von ihren Online-Speicherorten angefordert, und mit jedem Seitenaufruf steigen die Anfragen. Quellen erholen sich von ihren Ablagerungen, was einige Mikrosekunden oder Sekunden dauert, was die Leistung verlangsamt. Sie können Webfonts verkleinern, das Laden verzögern, das moderne Browserformat WOFF2 verwenden oder lokal speichern.

Bildoptimierung: Große Bilddateien verlangsamen die Leistung. Sie sollten die Größe der Dateien reduzieren, ohne an Qualität zu verlieren. Sie können dies durch Komprimierung und andere Techniken tun. Auch Bilddateitypen (Formate) spielen eine Rolle. Wir haben auch Lazy Loading aktiviert, sodass Bilder weit unterhalb des visuellen Rahmens das Laden von Inhalten und das anschließende Aufrufen des Programms ermöglichen.

Almacenamiento en caché del sitio web: Hay muchas soluciones para acelerar Wordpress u otros CMS a través de complementos y archivos centrales de codificación manual. Para Wordpress, puede buscar complementos de caché, pero el diablo está en los detalles. No todos los complementos funcionarán para su configuración, y algunas configuraciones pueden incluso comprometer el rendimiento. Necesita un experto para ajustar esas configuraciones, además de que hay trabajo por hacer con los archivos principales de WP.

Datenbankoptimierung: Dynamische Websites wie Wordpress, Joomla, E-Commerce-Websites usw. speichern Daten in Datenbanken in Form von Tabellen. Datenbanken verwenden immer noch Formate von vor 3 Jahrzehnten, und sehr bald erreichen sie ihre Leistungsgrenze. Sie sehen, wenn Sie ein neues Plugin installieren, geht es zu Ihrer zentralen Datenbank und fügt seine Daten ein, indem es neue Tabellen erstellt. Wenn Sie das Plugin jedoch nicht mehr benötigen und deinstallieren, bleiben Ihre Tabellen in der Datenbank und laden sie ohne Grund. Dann haben wir Beiträge im Entwurfsmodus, Kommentare, Beitragsüberprüfungen, vorübergehende Daten usw., die es der Datenbank erschweren, gut zu funktionieren. Was Sie tun müssen, ist, die Datenbank in ihren vorherigen Zustand zurückzuversetzen und ihre Leistung weiter zu optimieren.

Plugins: Websites, die mit Plugins überladen sind, können niemals eine optimale Geschwindigkeit erreichen. Wir stoßen jedes Mal an eine Obergrenze, wenn wir versuchen, mit vielen aktiven Plugins zu optimieren. Das Beste, was Sie tun können, ist, die Anzahl der aktiven Plugins auf das absolute Minimum zu reduzieren, um eine optimale Website-Funktion und Benutzererfahrung zu erzielen. Darüber hinaus hat jedes Plugin individuelle Anforderungen, die nicht gut auf Optimierungsprotokolle reagieren, daher ist es besser, es zu entfernen oder durch ein besseres zu ersetzen.

Weiterleitungen, Redirects: Wie oben erwähnt, sollten HTTP-Anfragen gering gehalten werden. Weiterleitungen erhöhen HTTP-Anfragen. Wir müssen den Bedarf für jede Weiterleitung bewerten und eine Lösung finden, die besser für Leistung und SEO ist.

Clickfunnels wird in absehbarer Zeit nicht schneller. Sie haben dort ernsthafte Geschwindigkeitsbeschränkungen. Überprüfen Sie was Sie mit Ihrer Clickfunnels-Landingpage tun können, um die Geschwindigkeit zu erhöhen, bevor es zu spät ist.

Google führt l' Link-Quick-Tagging über das Link-Kontextmenü in Chrome für Android ein, um Nutzern zu helfen, großartige Erfahrungen beim Surfen zu identifizieren. Das Tagging basiert auf Signalen von Web Vitals-Kernmetriken, die wichtige Aspekte der Benutzererfahrung quantifizieren, wie sie von Chrome-Nutzern in der Praxis erlebt werden. Core Web Vitals-Metriken messen Dimensionen der Web-Benutzerfreundlichkeit, wie z. B. Ladezeit, Reaktionsfähigkeit und Stabilität von Inhalten beim Laden, und definieren Schwellenwerte für diese Metriken, um einen Standard für die Bereitstellung einer guten Benutzererfahrung zu setzen.