Was gibt es Neues bei Aurora?

Kara Erickson
Kara Erickson
X

Aurora-Initiative von Chrome ist eine Zusammenarbeit zwischen Chrome und Open-Source-JavaScript-Frameworks und -Tools zur Verbesserung der Nutzererfahrung im Web. Wenn Aurora neu für dich ist, erfährst du in unserer Einführung mehr über unsere Ziele und Methodik.

Da wir seit 2021 keine Roadmap veröffentlicht haben, möchten wir Sie auf einige spannende Projekte für 2023 aufmerksam machen.

Aktuelle Projekthighlights

Seit einigen Jahren arbeiten wir mit Frameworks wie Next.js, Angular und Nuxt zusammen, um die Core Web Vitals zu optimieren. Hier sind ein paar Highlights seit der letzten Aktualisierung.

Bilder

Bilder sind oft eine Ursache für Leistungsprobleme. Im Folgenden finden Sie einige der Methoden, die wir zusammen mit Framework-Verantwortlichen erprobt haben, um sicherzustellen, dass Best Practices sofort verfügbar sind, damit Entwickler standardmäßig optimale Bilder bereitstellen können, wenn sie die Frameworks verwenden, mit denen wir zusammenarbeiten.

Anweisung für Angular-Bild

Wir haben eine Richtlinie für stabile Bilder für das Angular-Framework veröffentlicht, die in Angular 15 verfügbar ist und speziell auf 13.4 und 14.3 zurückportiert wurde. Diese Anweisung aktiviert standardmäßig natives Lazy Loading, fügt Prioritätsbildern fetchpriority-Hinweise hinzu und generiert automatisch entsprechende srcset-Attribute für responsive Bilder.

Auswirkungen: Lighthouse-Tests wurden vor und nach Anwendung der Image-Richtlinie in der QA-Umgebung von Land's End durchgeführt. Auf Computern sank der Medianwert für den Largest Contentful Paint (LCP) von 12 Sekunden auf 3 Sek., was eine Verbesserung des LCP um 75% bedeutet.

Filmstreifen-Vergleich: Website 1 mit nativen Bild-Tags und Website 2 mit Angular-Bild-Richtlinie

Weitere Informationen zu dieser Anweisung finden Sie in unserem Blogpost Optimierung von Bildern mit der Anweisung Angular-Bild.

next/image überarbeitet

Gemeinsam mit dem Next.js-Team haben wir außerdem die Bildkomponente aktualisiert, damit neue Browserfunktionen wie natives Lazy Loading und das HTML-Attribut fetchpriority verwendet werden. Die neue Version ist ab Next 13 standardmäßig verfügbar.

Der Effekt : Unser Partner Leboncoin konnte durch den Wechsel zur neuen Version von next/image den LCP-Wert einiger Seiten um bis zu 60% verbessern.

Web-Schriftarten

Die Optimierung von Webschriftarten kann schwierig sein, um richtig zu funktionieren, da sie aufwendiger ist, als nur die Übertragungsgröße der Schriftartressourcen zu reduzieren. Webschriftarten können auch einen wesentlichen Beitrag zum Cumulative Layout Shift (CLS)-Messwert einer Seite leisten und es ist mit erheblichem Aufwand möglich, Layoutverschiebungen aufgrund von Wechsel von Schriftarten zu minimieren. Glücklicherweise haben wir uns mit Frameworks zusammengetan, um diese Aufgabe für Webentwickler noch einfacher zu machen.

Tools für verbesserte Schriftart-Fallbacks in Next.js, Nuxt und Vite

In der Next 13 haben wir eine Funktion veröffentlicht, mit der die Abmessungen der Fallback-Schriftart einer Seite so angepasst werden, dass sie sich beim Laden besser an die Webschriftart anpasst. Dadurch wird der Schriftartwert CLS reduziert. Wir haben unsere Methodik mit dem Nuxt-Team geteilt und sie diente als Inspiration für das nuxtjs/fontaine-Modul und das fontaine Vite-Plug-in, die beide denselben zugrunde liegenden Algorithmus verwenden.

Der Effekt: Unser Partner Vox Media konnte den CLS-Wert auf The Verge in der Produktion auf einigen Seiten mithilfe dieser Funktion auf 0 reduzieren.

Weitere Informationen finden Sie in unseren Blogposts über das Generieren verbesserter Schriftarten-Fallbacks und die Framework-Tools für das Schrift-Fallback.

Modul "nuxtjs/google-fonts"

Gemeinsam mit dem Nuxt-Team haben wir ein Modul zur Optimierung der Leistung von Google Fonts veröffentlicht. Das Modul lädt automatisch Google-Schriftarten herunter und hostet sie, um zusätzliche Server-Roundtrips zu vermeiden. Außerdem unterstützt das Modul Schriftart-Inline-Optionen.

Drittanbieter-Skripts

Drittanbieter-JavaScript ist eine mögliche Ursache für Leistungsprobleme und kann sich auf Messwerte wie Interaction to Next Paint (INP) auswirken, da die Ausführung dieser Scripts die Ausführung von Nutzerinteraktionen verzögern kann.

next/script-Komponente für Drittanbieter-Skripts

Für die Next 12+ haben wir eine Skriptkomponente entwickelt, die die Skripts standardmäßig nach der Hydration lädt, um zu verhindern, dass der kritische Pfad beim Laden blockiert wird. Darüber hinaus gibt es einen Web-Worker-Modus, in den Partytown integriert wird, um Skripts vollständig aus dem Hauptthread zu verschieben.

Die Auswirkungen: Bei Lighthouse-Tests verzeichnete CareerKarma bei Verwendung des next/script component mit aktiviertem Worker-Modus eine Reduzierung des LCP-Werts um 24 %.

Filmstreifenvergleich mit verbessertem LCP-Wert

Weitere Informationen finden Sie in unserem Blogpost Laden von Drittanbieter-Skripts in Next.js optimieren.

Sonstige

Unsere Partnerschaft mit Framework-Entwicklern endet nicht mit der Verbesserung der Core Web Vitals. Wir arbeiten auch daran, noch mehr neue Funktionen zu nutzen und Entwicklern den Einstieg in die Nutzung bahnbrechender Webplattformfunktionen noch weiter zu erleichtern.

Polyfill für Containerabfragen

Wir haben das Polyfill für Containerabfragen aktualisiert, um mehr CSS-Funktionen zu unterstützen, und seine Leistung im Hinblick auf das Release 1.0 verbessert.

Weitere Informationen finden Sie in unserem Blogpost Inside the Container Query Polyfill.

Wie geht es mit Aurora weiter?

Zwischen 2023 und 2024 stehen einige spannende Projekte an, mit denen wir Core Web Vitals für Framework-Entwickler optimieren möchten.

Im kommenden Jahr werden wir uns auf Folgendes konzentrieren:

  • Wrapper-Komponenten von Drittanbietern für Next.js und Nuxt: Wrapper-Komponenten können das Laden gängiger Drittanbieter-Bibliotheken für LCP und INP vereinfachen. Wenn Sie ein Komponenten-Tag in das DOM ziehen, wird statt eines Script-Tags Ihr Drittanbieter-Tag geladen. Das Framework wählt dann die beste Ladestrategie aus. Weitere Informationen finden Sie im RFC.

  • Entwicklererfahrung mit Angular SSR und Hydration: Wir haben eng mit dem Angular-Team am SSR- und Hydrationsprojekt zusammengearbeitet. Unser Ziel war es, die Nutzung von SSR für Entwickler effizienter zu gestalten, damit mehr Anwendungen von den LCP-Vorteilen profitieren können. Demnächst gibt es einen offiziellen RFC zu den Funktionen zur Bearbeitung von SSR-DOMs.

  • Angular-Image-Anweisung und nuxt/image-Funktionen: Für Angular sind einige interessante Funktionen geplant, z. B. automatische Vorverbindungshinweise für die Vorabverbindung, Migrationstools für den Übergang von einfachen <img>-Elementen, Unterstützung von <picture>-Elementen und Platzhalter. Außerdem werden wir uns mit dem Nuxt-Team über eine Reihe neuer Funktionen für nuxt/image beraten.

  • INP-Forschung (Frameworkübergreifend): Da Interaction to Next Paint (INP) 2024 den First Input Delay (FID) ersetzt, weiten wir die Unterstützung zur Verbesserung von INP in Frameworks aus. Dazu gehört die Analyse der Ursachen von INP-Problemen in Frameworks und die Entwicklung integrierter Lösungen für Framework-Nutzer, sofern möglich.

  • Tachometer 3: Wir unterstützen auch die nächste Generation des Benchmarking-Tools Tachometer, um das moderne Web-Framework 2023 darzustellen.

Bleibe auf dem neuesten Stand

Speichern Sie unsere Landingpage als Lesezeichen, um die neuesten Nachrichten, Tech-Talks und Blogposts vom Aurora-Team zu erhalten. Sie können uns auch auf Twitter folgen: