Die effektivsten Möglichkeiten zur Verbesserung der Core Web Vitals

Im Laufe der Jahre hat die Web-Community umfangreiches Wissen zur Optimierung der Webleistung aufgebaut. Eine einzelne Optimierung kann die Leistung vieler Websites verbessern. Wenn Sie jedoch alle gleichzeitig vornehmen, kann das überwältigend sein. Realistisch gesehen sind nur einige davon für eine bestimmte Website geeignet.

Sofern die Leistung im Web nicht Ihre Hauptaufgabe ist, ist wahrscheinlich nicht offensichtlich, welche Optimierungen für Ihre Website die größte Wirkung haben. Sie werden wahrscheinlich nicht für alle Kampagnen Zeit haben. Daher ist es wichtig, dass Sie sich fragen, welche Optimierungen Sie am effektivsten durchführen können, um die Leistung für Ihre Nutzer zu verbessern.

Die Wahrheit über Leistungsoptimierungen ist Folgendes: Sie können sie nicht allein nach ihren technischen Vorteilen beurteilen. Außerdem müssen Sie die menschlichen und organisatorischen Faktoren berücksichtigen, die die Wahrscheinlichkeit beeinflussen, mit der Sie eine bestimmte Optimierung umsetzen können. Einige Leistungsverbesserungen können in der Theorie einen großen Einfluss haben, aber in Wirklichkeit haben nur wenige Entwickler die Zeit oder Ressourcen, sie zu implementieren. Andererseits gibt es möglicherweise Best Practices mit enormer Wirkung auf die Leistung, die fast jeder bereits umsetzt. In diesem Leitfaden werden Optimierungen der Webleistung beschrieben, die:

• die größten Auswirkungen auf die reale Welt haben
• Sie sind für die meisten Websites relevant und anwendbar.
• für die meisten Entwickler realistisch umsetzbar sind

Zusammengenommen sind dies die realistischsten und effektivsten Möglichkeiten, Ihre Core Web Vitals-Messwerte zu verbessern. Wenn Sie noch nicht mit der Webleistung vertraut sind oder noch nicht wissen, wie Sie den größten Return on Investment erzielen, ist dies der beste Ausgangspunkt.

Interaction to Next Paint (INP)

Als neuestes Core Web Vital bietet Interaction to Next Paint (INP) einige der größten Verbesserungsmöglichkeiten. Da jedoch im Vergleich zum veralteten Vorgänger viel weniger Websites die Schwelle für „gute“ Nutzerfreundlichkeit erreichen, gehörst du wahrscheinlich zu den vielen Entwicklern, die zum ersten Mal lernen, die Reaktionsfähigkeit bei Interaktionen zu optimieren. Beginnen Sie mit diesen wichtigen Techniken, um die effektivsten Möglichkeiten zur Verbesserung des Anzeigen-Impressionswerts zu erfahren.

1. Viel Geld geben, um lange Aufgaben aufzuteilen

Aufgaben sind alle einzelnen Aufgaben, die der Browser ausführt, einschließlich Rendering, Layout, Parsen, Kompilieren oder Ausführen von Scripts. Aufgaben, die länger als 50 Millisekunden dauern, werden zu einer langen Aufgabe. Lange Aufgaben sind problematisch, da sie verhindern können, dass der Haupt-Thread schnell auf Nutzerinteraktionen reagiert.

Sie sollten immer versuchen, so wenig Arbeit wie möglich in JavaScript zu leisten, aber Sie können dem Hauptthread helfen, indem Sie lange Aufgaben aufteilen. Das kannst du tun, indem du häufig zum Hauptthread zurückgehst, damit Updates schneller gerendert und andere Nutzerinteraktionen schneller ausgeführt werden.

Mit der Scheduler API können Sie Aufgaben mithilfe eines Prioritätssystems in die Warteschlange stellen. Insbesondere wird mit der scheduler.yield() API die Ausführung langer Aufgaben unterbrochen, während sichergestellt wird, dass Interaktionen verarbeitet werden können, ohne ihren Platz in der Aufgabenwarteschlange aufzugeben.

Indem Sie lange Aufgaben aufteilen, geben Sie dem Browser mehr Möglichkeiten, wichtige Aufgaben auszuführen, die die Nutzer blockieren.

2. Unnötiges JavaScript vermeiden

Websites liefern mehr JavaScript als je zuvor aus und dieser Trend scheint sich nicht zu ändern. Wenn Sie zu viel JavaScript verwenden, schaffen Sie eine Umgebung, in der Aufgaben um die Aufmerksamkeit des Haupt-Threads konkurrieren. Dies kann sich auf die Reaktionsfähigkeit Ihrer Website auswirken, insbesondere in der wichtigen Startphase.

Dieses Problem lässt sich jedoch lösen und Sie haben folgende Möglichkeiten:

• Verwenden Sie Standard-Webplattformfunktionen, die weithin verfügbar sind, anstelle redundanter JavaScript-basierter Implementierungen.
• Mit dem Abdeckungstool in den Chrome-Entwicklertools können Sie nicht verwendeten Code in Ihren Scripts finden. Indem Sie die Größe der Ressourcen reduzieren, die beim Start benötigt werden, können Sie dafür sorgen, dass Seiten weniger Zeit mit dem Parsen und Kompilieren von Code verbringen, was für eine reibungslosere anfängliche Nutzererfahrung sorgt.
• Mit der Codeaufteilung können Sie ein separates Bundle für Code erstellen, der für das erste Rendern nicht erforderlich ist, aber später verwendet wird.
• Wenn Sie einen Tag-Manager verwenden, optimieren Sie Ihre Tags regelmäßig. Ältere Tags mit nicht verwendetem Code können entfernt werden, um den JavaScript-Footprint Ihres Tag Managers zu reduzieren.

3. Große Rendering-Aktualisierungen vermeiden

Die JavaScript-Ausführung ist nur einer der Faktoren, die sich auf die Responsivität Ihrer Website auswirken. Das Rendern ist bereits eine Art kostspieliger Arbeit. Bei umfangreichen Rendering-Aktualisierungen reagiert Ihre Website unter Umständen noch langsamer auf Nutzerinteraktionen.

Die Optimierung der Rendering-Arbeit ist kein direkter Prozess und hängt davon ab, was Sie erreichen möchten. Trotzdem gibt es einige Möglichkeiten, wie Sie dafür sorgen können, dass Rendering-Aufgaben nicht zu lang werden:

• Organisieren Sie DOM-Lese- und Schreibvorgänge in Ihrem JavaScript-Code neu, um erzwungene Layouts und Layout-Überlastungen zu vermeiden.
• Begrenzen Sie die Größe des DOM. Die DOM-Größe und die Intensität der Layoutarbeit hängen zusammen. Wenn der Renderer das Layout für ein sehr großes DOM aktualisieren muss, kann der Aufwand für die Neuberechnung des Layouts erheblich steigen.
• Verwenden Sie CSS-Begrenzungen, um DOM-Inhalte außerhalb des Bildschirms verzögert zu rendern. Es ist nicht immer einfach, aber durch das Isolieren von Bereichen mit komplexen Layouts können Sie unnötige Layout- und Rendering-Arbeiten vermeiden.

Largest Contentful Paint (LCP)

Der Largest Contentful Paint (LCP) ist der Core Web Vital, mit dem Entwickler am häufigsten zu kämpfen haben. 40 % der Websites im Chrome UX-Bericht erfüllen nicht den empfohlenen LCP-Grenzwert für eine gute Nutzerfreundlichkeit. Das Chrome-Team empfiehlt die folgenden Methoden als die effektivsten Möglichkeiten, die LCP zu verbessern.

1. Sorgen Sie dafür, dass die LCP-Ressource in der HTML-Quelle sichtbar ist und priorisiert wird.

Das Chrome-Team hat Folgendes im Hinblick auf LCP im Web festgestellt:

• Laut dem Web Almanac 2022 des HTTP Archive haben 72 % der mobilen Seiten ein Bild als LCP-Element.
• Eine Analyse der echten Nutzerdaten von Chrome zeigt, dass die meisten Ursprünge mit einem schlechten LCP weniger als 10% ihrer Zeit für LCP 75 auf das Herunterladen des LCP-Bilds aufwenden.
• Bei Seiten mit einem schlechten LCP verzögert sich das Laden der LCP-Bilder auf dem Client beim 75. Perzentil um 1.290 Millisekunden. Das entspricht mehr als der Hälfte des Budgets für eine schnelle Ladezeit.
• Von Seiten, auf denen das LCP-Element ein Bild war, hatten 39% der Bilder Quell-URLs, die in der ersten HTML-Antwort nicht erkennbar waren (z. B. <img src="..."> oder <link rel="preload" href="...">). Dadurch kann der Preload Scanner des Browsers diese schnellstmöglich erkennen.
• Laut Web Almanac nutzten nur 0,03% der infrage kommenden Seiten das HTML-Attribut fetchpriority, um Ressourcen eine höhere Priorität einzuräumen.Dazu gehören auch diejenigen, die den LCP einer Seite mit relativ wenig Aufwand verbessern könnten.

Diese Statistiken zeigen, dass Entwickler eine große Chance haben, sowohl die Verzögerung beim Laden der Ressourcen als auch die Dauer des Ressourcenladevorgangs für LCP-Bilder zu reduzieren.

Wenn eine Verzögerung beim Laden von Ressourcen das Problem ist, ist es möglicherweise bereits zu spät, um einen guten LCP zu erreichen, wenn eine Seite warten muss, bis CSS oder JavaScript vollständig geladen ist, bevor Bilder überhaupt geladen werden können. Außerdem kann die Dauer der Ressourcenauslastung eines LCP-Bildes reduziert werden, indem es mithilfe des HTML-Attributs fetchpriority neu priorisiert wird, sodass es mehr Bandbreite erhält und somit schneller geladen wird.

Wenn Ihr LCP-Element ein Bild ist, sollte die URL des Bilds in der HTML-Antwort zu finden sein, um die Verzögerung beim Laden der Ressourcen zu verringern. Hier einige Tipps, wie Sie das erreichen:

• Laden Sie das Bild mit einem <img>-Element mit dem Attribut src oder srcset hoch. Verwende keine nicht standardmäßigen Attribute wie data-src, für die zum Rendern JavaScript erforderlich ist, da dies immer langsamer ist. Auf 9 % der Seiten ist das LCP-Bild hinter data-src verborgen.
• Bevorzugen Sie serverseitiges Rendering (SSR) gegenüber clientseitigem Rendering (CSR), da SSR impliziert, dass das gesamte Seiten-Markup (einschließlich des Bilds) in der HTML-Quelle vorhanden ist. Bei CSR-Lösungen muss JavaScript ausgeführt werden, bevor das Bild erkannt werden kann.
• Wenn auf Ihr Bild aus einer externen CSS- oder JS-Datei verwiesen werden muss, können Sie es trotzdem mit einem <link rel="preload">-Tag in die HTML-Quelle einfügen. Beachten Sie, dass Bilder, auf die Inline-Stile verweisen, vom Vorabladen-Scanner des Browsers nicht erkannt werden. Auch wenn sie in der HTML-Quelle zu finden sind, wird die Erkennung dieser Bilder beim Laden anderer Ressourcen möglicherweise trotzdem blockiert. In diesen Fällen kann das Vorabladen hilfreich sein.

Außerdem können Sie die Ladedauer einer Ressource verkürzen, indem Sie dafür sorgen, dass die LCP-Ressource früh und mit hoher Priorität geladen wird:

• Füge das Attribut fetchpriority="high" in das <img>- oder <link rel="preload">-Tag deines LCP-Bilds ein. Dadurch wird die Priorität der Bildressource erhöht, sodass sie früher geladen werden kann.
• Entfernen Sie das loading="lazy"-Attribut aus dem <img>-Tag Ihres LCP-Bilds. So wird die Ladeverzögerung vermieden, die durch die Bestätigung entsteht, dass sich das Bild im oder in der Nähe des Darstellungsbereichs befindet.
• Verschieben Sie nicht kritische Ressourcen nach Möglichkeit. Wenn Sie diese Ressourcen ans Ende Ihres Dokuments verschieben, Bilder oder iFrames mit Lazy Loading laden oder sie asynchron mit JavaScript laden, können wichtigere Ressourcen wie das LCP-Bild schneller geladen werden.

2. Schnelle Navigation anstreben

Idealerweise müssen Nutzer nie warten, bis eine Seite geladen ist. LCP-Optimierungen wie die Ressourcenerreichbarkeit und -priorisierung können effektiv dazu beitragen, die Wartezeit der Nutzer auf das Laden und Rendern des LCP-Elements zu verkürzen. Es gibt jedoch eine physische Grenze dafür, wie schnell diese Bytes über das Netzwerk geladen und auf einer Seite gerendert werden können. Schon lange vor Erreichen dieses Limits ist ein unverhältnismäßig hoher Aufwand erforderlich, um nur wenige Millisekunden einzusparen. Um eine sofortige Navigation zu erreichen, müssen wir also einen völlig anderen Ansatz wählen.

Bei der sofortigen Navigation wird versucht, die Seite vor dem Aufruf durch den Nutzer zu laden und zu rendern. So kann die vorab gerenderte Seite sofort mit einer LCP von nahezu null angezeigt werden. Rekonstruktionen und Spekulationen sind zwei Möglichkeiten, dies zu tun. Wenn ein Nutzer zu einer zuvor besuchten Seite zurückkehrt oder vorwärts wechselt, kann sie schnell aus einem In-Memory-Cache wiederhergestellt werden und wird genau so angezeigt, wie der Nutzer sie verlassen hat. Alternativ können Webanwendungen versuchen zu vorhersagen, wohin ein Nutzer als Nächstes gehen wird. Wenn dies richtig ist, wurde die nächste Seite bereits geladen und gerendert, wenn der Nutzer dorthin navigiert.

Das Wiederherstellen zuvor besuchter Seiten wird durch den Back-Forward-Cache (bfcache) ermöglicht. Damit Sie ihn verwenden können, müssen Ihre Seiten die Teilnahmevoraussetzungen für bfcache erfüllen. Häufige Gründe dafür, dass Seiten nicht für den bfcache infrage kommen, sind Cache-Direktive vom Typ no-store oder Ereignis-Listener vom Typ unload.

Wenn Sie vollständig gerenderte Seiten wiederherstellen, wird nicht nur die Ladeleistung, sondern auch die Layoutstabilität verbessert. Weitere Informationen zum bfcache und dazu, wie effektiv er die CLS verbessern kann, finden Sie im Abschnitt Dafür sorgen, dass Seiten für den bfcache infrage kommen.

Das Vorab-Rendering der nächsten Seite, die ein Nutzer besucht, ist eine weitere effektive Möglichkeit, die LCP-Leistung drastisch zu verbessern. Dies wird durch die Speculation Rules API ermöglicht. Damit Sie diese Vorteile nutzen können, müssen die richtigen Seiten vorab gerendert werden. Falsche Spekulationen verschwenden Ressourcen sowohl auf dem Server als auch auf dem Client, was sich negativ auf die Leistung auswirken kann. Je weniger sicher Sie sich hinsichtlich der nächsten Seite sind, desto konservativer sollten Sie beim Pre-Rendering sein. Im Zweifelsfall können Ihre Analysedaten Ihnen dabei helfen, Seiten, die mit hoher Wahrscheinlichkeit als Nächstes besucht werden, schneller vorab zu rendern.

3. CDN zur Optimierung der TTFB verwenden

Die vorherige Empfehlung konzentrierte sich auf die sofortige Navigation, die Nutzern die bestmögliche Nutzererfahrung bietet. Es kann jedoch Situationen geben, in denen die bfcache- und die Techniken für die spekulative Datenübertragung nicht anwendbar sind. Angenommen, ein Nutzer folgt einem plattformübergreifenden Link zu Ihrer Website, bei dem die Antwort des ursprünglichen HTML-Dokuments den LCP effektiv blockiert. Der Browser kann erst dann mit dem Laden von Unterressourcen beginnen, wenn er das erste Byte der Antwort erhalten hat. Je früher das passiert, desto früher kann alles andere beginnen.

Diese Zeit wird als Time to First Byte (TTFB) bezeichnet. So können Sie die TTFB am besten reduzieren:

• Biete deine Inhalte so nah wie möglich an den Nutzern an.
• Diese Inhalte werden im Cache gespeichert, damit sie schnell bereitgestellt werden können, wenn sie in naher Zukunft noch einmal angefordert werden.

Die beste Möglichkeit für diese beiden Dinge ist die Verwendung eines CDN. CDNs verteilen Ihre Ressourcen auf Edge-Server auf der ganzen Welt und begrenzen so die Entfernung, die diese Ressourcen über das Netzwerk zurücklegen müssen, um Nutzer zu erreichen. CDNs bieten in der Regel auch detaillierte Caching-Steuerungen, die an die Anforderungen Ihrer Website angepasst werden können.

CDNs können auch HTML-Dokumente bereitstellen und im Cache speichern. Laut Web Almanac wurden jedoch nur 29% der HTML-Dokumentanfragen von einem CDN bereitgestellt. Das bedeutet, dass es für Websites eine große Chance gibt, zusätzliche Einsparungen zu erzielen.

Hier sind einige Tipps zum Konfigurieren von CDNs:

• Statische HTML-Dokumente auch für kurze Zeit im Cache speichern. Ist es beispielsweise wichtig, dass die Inhalte immer aktuell sind? Oder sind sie ein paar Minuten veraltet?
• Prüfen Sie, ob Sie die dynamische Logik, die auf Ihrem Ursprungsserver ausgeführt wird, an den Edge verschieben können. Dies ist eine Funktion der meisten modernen CDNs.

Jedes Mal, wenn Sie Inhalte direkt über das Edge-Netzwerk bereitstellen und einen Zugriff auf Ihren Ursprungsserver vermeiden können, ist das ein Leistungsgewinn. Selbst in Fällen, in denen Sie den Weg bis zum Ursprung ausführen müssen, sind CDNs im Allgemeinen dafür optimiert, dies schneller zu erledigen. Es ist also in jedem Fall ein Gewinn.

Cumulative Layout Shift (CLS)

Der Cumulative Layout Shift (CLS) ist ein Maß für die visuelle Stabilität einer Webseite. Der CLS ist der Messwert, bei dem die meisten Websites gute Werte erzielen. Etwa ein Viertel erfüllt jedoch immer noch nicht den empfohlenen Grenzwert. Es gibt also noch viel Potenzial, die Nutzerfreundlichkeit vieler Websites zu verbessern.

1. Explizite Größen für alle von der Seite geladenen Inhalte festlegen

Layout Shifts treten normalerweise auf, wenn vorhandene Inhalte verschoben werden, nachdem andere Inhalte geladen wurden. Der primäre Weg zur Verbesserung der CLS besteht darin, den erforderlichen Speicherplatz so weit wie möglich im Voraus zu reservieren.

Die beste Methode zum Beheben von Layoutverschiebungen, die durch nicht optimierte Bilder verursacht werden, besteht darin, explizit die Attribute width und height oder ihre entsprechenden CSS-Eigenschaften festzulegen. 72 % der Seiten haben mindestens ein nicht skaliertes Bild. Ohne explizite Größe haben diese Bilder eine anfängliche Höhe von 0px. Dies kann zu Layoutverschiebungen führen, wenn diese Bilder geladen werden und der Browser ihre Abmessungen erkennt. Das ist eine große Chance für das kollektive Web – und diese Chance erfordert weniger Aufwand als einige der anderen Empfehlungen in diesem Leitfaden.

Bilder sind nicht der einzige Faktor für die CLS. Layoutänderungen können durch andere Inhalte verursacht werden, die in der Regel nach dem ersten Rendern der Seite geladen werden, z. B. Anzeigen von Drittanbietern oder eingebettete Videos. Hier kann das Attribut aspect-ratio hilfreich sein. Dabei handelt es sich um eine von Baseline allgemein verfügbare CSS-Funktion, mit der Entwickler explizit ein Seitenverhältnis für Bilder und Nicht-Bildelemente festlegen können. Damit kannst du ein dynamisches width (zum Beispiel basierend auf der Bildschirmgröße) festlegen und der Browser automatisch die entsprechende Höhe berechnen lassen, ähnlich wie bei Bildern mit Abmessungen.

Die genaue Größe dynamischer Inhalte lässt sich jedoch nicht immer ermitteln. Auch wenn Sie die genaue Größe nicht kennen, können Sie die Auswirkungen von Layoutverschiebungen verringern. Es ist fast immer besser, eine sinnvolle min-height festzulegen, als dem Browser zu erlauben, die Standardhöhe von 0px für ein leeres Element zu verwenden. Die Verwendung eines min-height ist in der Regel auch eine einfache Lösung, da der Container bei Bedarf weiterhin auf die Höhe der endgültigen Inhalte wachsen kann. Die Ausdehnung wird nur auf ein hoffentlich tolerierbares Maß reduziert.

2. Prüfen, ob Seiten für den Back-Forward-Cache infrage kommen

Wie bereits in diesem Leitfaden erwähnt, lädt der Back-Forward-Cache (bfcache) eine Seite aus einem früheren oder späteren Zeitpunkt im Browserverlauf sofort aus einem Arbeitsspeicher-Snapshot. Der bfcache ist eine erhebliche Leistungsoptimierung auf Browserebene, die die LCP verbessert und Layoutverschiebungen vollständig eliminiert. Tatsächlich war in diesem Jahr die Einführung des bfcache für die größte Verbesserung der CLS verantwortlich.

Trotzdem kommt eine beträchtliche Anzahl von Websites nicht für den bfcache infrage und lässt sich die kostenlose Webleistung entgehen. Sofern Ihre Seite keine vertraulichen Informationen lädt, die nicht aus dem Arbeitsspeicher wiederhergestellt werden sollen, müssen Sie dafür sorgen, dass Ihre Seiten den bfcache verwenden können.

Websiteinhaber sollten prüfen, ob Seiten für den bfcache infrage kommen, und alle Gründe beheben, die dagegen sprechen. In Chrome gibt es einen bfcache-Tester in den Entwicklertools. Außerdem können Sie die Not Restored Reasons API verwenden, um Gründe für die Nichtwiederherstellung im Feld zu ermitteln.

3. Vermeiden Sie Animationen und Übergänge, die Layout-induzierende CSS-Properties verwenden

Eine weitere häufige Ursache für Layoutverschiebungen ist die Animation von Elementen. Dazu gehören beispielsweise Cookie-Banner oder andere Benachrichtigungsbanner, die von oben oder unten eingeblendet werden. Das ist besonders problematisch, wenn diese Banner andere Inhalte verdecken. Aber auch wenn das nicht der Fall ist, kann die Animation Auswirkungen auf den CLS haben.

Anhand der HTTP Archive-Daten lässt sich zwar nicht eindeutig ein Zusammenhang zwischen Animationen und Layoutänderungen herstellen, aber die Daten zeigen, dass Seiten, auf denen eine CSS-Eigenschaft animiert wird, die sich auf das Layout auswirken könnte, mit 15 % geringerer Wahrscheinlichkeit einen „guten“ CLS haben als Seiten insgesamt. Einige Properties haben einen schlechteren CLS als andere. Bei Seiten, auf denen margin oder border Pixel breite Elemente animiert werden, wird die CLS fast doppelt so häufig als „schlecht“ eingestuft wie bei Seiten insgesamt.

Das ist wahrscheinlich nicht überraschend, denn jedes Mal, wenn Sie eine beliebige layout-induzierende CSS-Eigenschaft verschieben oder animieren, kommt es zu Layoutverschiebungen. Wenn diese Layoutverschiebungen nicht innerhalb von 500 Millisekunden nach einer Nutzerinteraktion auftreten, wirken sie sich auf die CLS aus.

Für einige Entwickler mag es überraschend sein, dass dies auch dann der Fall ist, wenn das Element außerhalb des normalen Dokumentflusses verwendet wird. Beispielsweise führen absolut positionierte Elemente, die top oder left animieren, zu Layoutverschiebungen, auch wenn sie andere Inhalte nicht verschieben. Wenn Sie jedoch anstelle von top oder left transform:translateX() oder transform:translateY() animieren, wird das Seitenlayout nicht vom Browser aktualisiert und es kommt nicht zu Layoutverschiebungen.

Die Bevorzugung von Animationen von CSS-Eigenschaften, die im zusammengesetzten Thread des Browsers aktualisiert werden können, ist seit Langem eine Best Practice für die Leistung, da sie den Hauptthread zur GPU verschiebt. Dies ist nicht nur eine allgemeine Best Practice für die Leistung, sondern kann auch zur Verbesserung des CLS beitragen.

Generell gilt: Animieren oder ändern Sie CSS-Eigenschaften niemals, bei denen der Browser das Seitenlayout aktualisieren muss, es sei denn, Sie führen eine Aktualisierung durch, wenn ein Nutzer auf das Element tippt oder eine Taste drückt (jedoch nicht hover). Verwenden Sie nach Möglichkeit Übergänge und Animationen, die die CSS-Eigenschaft transform verwenden.

Bei der Lighthouse-Analyse Nicht zusammengesetzte Animationen vermeiden wird gewarnt, wenn auf einer Seite potenziell langsame CSS-Properties animiert werden.

Fazit

Es kann schwierig erscheinen, die Leistung von Seiten zu verbessern, vor allem angesichts der Menge an Informationen im Web, die es zu berücksichtigen gilt. Wenn Sie sich jedoch auf diese kurze Liste der effektivsten Best Practices konzentrieren, können Sie das Problem mit neuer Energie angehen und hoffentlich die Werte für die Core Web Vitals Ihrer Website verbessern.

Wenn Sie über die hier aufgeführten Optimierungen hinausgehen möchten, lesen Sie die folgenden Leitfäden:

• INP optimieren
• LCP optimieren
• CLS optimieren

Anhang: Änderungsprotokoll

Wichtige Änderungen an diesem Dokument werden hier nachverfolgt, um zu erklären, wann und warum sich die Top-Empfehlungen geändert haben.

Oktober 2024

Aktualisierung 2024:

• INP
  • Entsprechend der Einführung von INP als Core Web Vital-Messwert haben wir diesen Messwert von FID auf INP umgestellt und ihn zum obersten Messwert in der Liste gemacht.
  • Wir haben unsere Empfehlung, die isInputPending API als Teil der Unterbrechung langer Aufgaben zu verwenden, rückgängig gemacht. Weitere Informationen finden Sie im Artikel Lange Aufgaben optimieren.
• LCP
  • Wir haben die Empfehlungen zur Sichtbarkeit und Priorisierung zu einer einzigen Empfehlung zusammengefasst.
  • Wir haben eine neue Empfehlung hinzugefügt, die auf sofortige Navigationen abzielt.

Januar 2023

Dies ist die erste Liste mit Empfehlungen:

• LCP
  • Achten Sie darauf, dass die LCP-Ressource in der HTML-Quelle sichtbar ist
  • LCP-Ressource priorisieren
  • CDN zur Optimierung der TTFB für Dokumente und Ressourcen verwenden
• CLS
  • Für alle Inhalte, die von der Seite geladen werden, explizite Größen festlegen
  • Prüfen, ob Seiten für den Back-Forward-Cache infrage kommen
  • Vermeiden Sie Animationen und Übergänge, die Layout-induzierende CSS-Properties verwenden
• FID
  • Lange Aufgaben vermeiden oder aufteilen
  • Unnötiges JavaScript vermeiden
  • Große Rendering-Aktualisierungen vermeiden

Eine Videozusammenfassung finden Sie auch in dieser Google I/O-Präsentation von 2023.