Zehn Möglichkeiten zur Verbesserung der Ladezeiten Ihrer Website und der Google Core Vitals

Was sind zentrale Web-Vitals?

Anfang dieses Jahres führte Google eine Reihe neuer Kriterien ein, die die Stabilität, Geschwindigkeit und Reaktionsfähigkeit einer bestimmten Website definieren. Die drei Hauptkriterien sind wie folgt:

• Cumulative Layout Shift definiert, wie stark sich die Struktur einer Webseite verschieben und ihre Position ändern soll. Der Richtwert dafür ist 0,1.
• Largest Contentful Paint misst, wie lange es dauert, den Hauptinhalt einer Seite zu laden. Die besten Ergebnisse sollten 2,5 Sekunden oder weniger betragen.
• Die erste Eingabeverzögerung ist die Zeit zwischen dem Öffnen einer Webseite und dem Moment, in dem sie zum ersten Mal interaktiv wird. Der am häufigsten gesuchte Zeitrahmen liegt bei etwa 100 Millisekunden.

Sehen wir uns unter Berücksichtigung dieser grundlegenden Begriffe an, wie Sie Core Vitals verwenden können, um Ihre Website so schnell und effizient wie möglich zu gestalten.

1. Optimieren Sie Ihr CDN und Ihren Browser-Cache

Ihre FID- und LCP-Werte sollten sich mit dieser Methode ziemlich schnell verbessern. Stellen Sie Ihre statischen Assets von einem CDN bereit oder cachen Sie sie auf einem Dienst wie Cloudfront von AWS. Danach erhalten Browser die benötigten Ergebnisse viel schneller.

Darüber hinaus können dynamische Seiten in Ihrem CDN mit bereits angewendeten korrekten TTL-Werten zwischengespeichert werden, je nachdem, wie sich Ihre Anwendungen verhalten.

2. Verwenden Sie die exakte Größe für alle Anzeigen und Medien

Was Ihre CLS-Ergebnisse betrifft, ist dies einer der wichtigsten Faktoren. Vergewissern Sie sich immer, dass Sie eine bestimmte Höhe für Bilder oder markierte Assets festgelegt haben, was sehr wichtig ist, insbesondere für die Komponenten auf Faltebene. Wenn Sie unter Zeitdruck stehen, können Sie die Höhen jederzeit auf automatisch einstellen und eine ungefähre Größe erhalten, die zur Not gut genug funktionieren sollte.

Anzeigen werden auch in CLS berücksichtigt, und Sie müssen ihre Höhe und Größe gründlich überprüfen, um sicherzustellen, dass sie den Inhalt nicht durch falsche Anzeige verdrängen. Dies kann erfordern, dass Sie sich an Ihren Werbedienstleister wenden oder nach einigen verschiedenen Optionen suchen, wenn Ihr CLS dauerhaft betroffen ist.

Wenn Sie auf einer WordPress-Plattform arbeiten, empfehlen wir Ihnen, ein Plugin wie Ewww in Erwägung zu ziehen, das Ihre Bilder automatisch in Webp bereitstellen und Funktionen wie Lazy Load aktivieren kann, um das Laden aller Bilder beim Laden der Seite zu verzögern.

3. Laden Sie Bilder mit der richtigen Auflösung auf die faule Art, basierend auf dem verwendeten Gerätetyp

Diese Technik liefert unglaublich schnell Ergebnisse und sollte eine Ihrer ersten Überlegungen sein. Durch die Verwendung eines Lazy-Loading-Pakets, um überraschenderweise alle Bilder auf Ihrer Website zu laden, wird Ihr LCP positiv beeinflusst, vor allem, indem das Gewicht der Seite verringert und sichergestellt wird, dass sie so schnell wie möglich geladen wird.

Es ist auch wichtig, die Auflösung für jedes Asset basierend auf dem Gerätetyp festzulegen, der zum Anzeigen Ihrer Website verwendet wird. Das Laden der Auflösung als Einheitsgröße macht die Website auf kleineren oder weniger leistungsstarken Geräten viel langsamer und wirkt sich auf die schlimmstmögliche Weise auf Ihr LCP aus.

4. Verwenden Sie SSR und CSR auf intelligente Weise

Google ist immer bestrebt, gut bewertete Server Side Rendered (SSR)-Seiten zu fördern und zu fördern, um wertvolle SEO-Leistung zu inspirieren. Sie müssen jedoch das Gleichgewicht zwischen SEO und Seitenladeleistung berücksichtigen. Es kann ewig dauern, bis Seiten mit zu viel Inhalt serverseitig geladen sind, und die allgemeine Leistung Ihrer Website beeinträchtigen.

Der eigentliche Inhalt sollte „above the fold“ bleiben, während andere Website-Features zurückgehalten werden sollten, um die SSR zu verbessern. Dieser asynchrone Ladestil nimmt Ihnen viel Zeit beim Laden und Rendern von Partituren.

5. Brechen Sie alles auf, indem Sie Ihren Code aufteilen

Die Verwendung der signifikantesten Dateigrößen für Assets (insbesondere JS-Dateien) ist im Allgemeinen eine schlechte Idee. Stattdessen sollten Sie das h2-Protokoll zulassen und dieses nutzen, um Assets erneut asynchron in separaten Teilen zu laden.

Anstatt eine riesige HTML-Datei zu verwenden, können Sie die Site auch in mehrere kleinere Dateien aufteilen und so die Ladelast verringern.

6. Verwenden Sie Brotli-Komprimierungstechniken, um statische Assets herunterzuskalieren

In Bezug auf die Komprimierung scheint Brotli die beste Option in Bezug auf die Ladegeschwindigkeit zu sein. Höhere Komprimierungsverhältnisse verlängern jedoch die Paket- und Buildzeiten in Bezug auf DevOps.

Aber am Ende des Tages ist die Ladezeit der Website der wichtigste Faktor und sollte über allem anderen priorisiert werden.

7. Gestalten Sie den Antwortinhalt und die API-Anfrage so effizient wie möglich

Zweifellos kann das wichtigste Element in Bezug auf Ladegeschwindigkeiten, selbst die kleinsten Änderungen, mit API massive Ergebnisse erzielen. API-Antworten und -Anfragen sollten zur Optimierung häufig überprüft werden.

Definieren Sie außerdem die Datenparameter und verwenden Sie nur das Nötigste, um viel Zeit und Mühe zu sparen. Die Auswahl eines Netzwerks für Ihre APIs verdient ebenfalls sorgfältige Überlegung, da das Hosten in den falschen Subnetzen den Zeitbedarf massiv erhöhen kann.

8. Reduzieren Sie die Gesamtgröße Ihrer Seiten und Dokumente

Zielseiten mit umfangreichem Code (alles über 75 KB ist wahrscheinlich schwerwiegend) sind sehr unerwünscht, da sie die Lade- und Abrufzeiten drastisch erhöhen.

Versuchen Sie immer, die Dinge auf der Codeseite sauber zu halten, da es leicht ist, Bits redundanter Daten zu übersehen.

9. Ersetzen Sie Video-Thumbnails durch Platzhalterbilder

Viele Website-Besucher ziehen es vor, sich nicht mit Videoinhalten zu beschäftigen, daher ist das Laden der Miniaturansichten von Videos, die nicht abgespielt werden, in diesem Fall eine Ressourcenverschwendung.

Es ist eine bessere Idee, ein Platzhalterbild oder einen leeren Videobereich zu wählen, um Ressourcen zu sparen und somit die Website-Geschwindigkeit zu erhöhen.

10. Wählen Sie den schnellsten verfügbaren Server

Dies mag wie ein offensichtlicher Faktor erscheinen, ist aber dennoch erwähnenswert. Die Investition in die beste Serverinfrastruktur ist normalerweise eine gute Idee, da sie sich ausnahmslos direkt auf die Geschwindigkeit Ihrer gesamten Website auswirkt.

Wenn Sie etwas mehr Geld ausgeben, sparen Sie insgesamt viel Zeit. Cloudflare ist ein hervorragendes Tool auf DNS-Ebene, mit dem Sie Ihre Website ohne kostspielige Serverressourcen kostengünstig optimieren können.

Fazit

Die obigen Tipps bringen Sie auf den richtigen Weg, um einen besseren Page Speed ​​Score und bessere Core Vitals zu erreichen. Möglicherweise befinden Sie sich jedoch auf einer aufgeblähten Plattform oder einem aufgeblähten Thema, das häufig die beste Vorgehensweise zum Erstellen einer neuen, saubereren und schlankeren Website darstellt.

Angenommen, Sie kratzen sich über all diese Begriffe den Kopf oder fühlen sich entmutigt von der Idee, Ihre gesamte Website für mehr Geschwindigkeit zu überarbeiten. In diesem Fall sollten Sie eine Website-Überprüfung durch einen Webdesign- Experten in Betracht ziehen, der wahrscheinlich die beste Vorgehensweise zur Optimierung Ihrer bestehenden Website vorschlägt oder die Entwicklung zu einer neuen Website mit einer Codebasis vorschlägt, die für die Kernfunktionen optimiert ist.