Das Chrome-Team legt großen Wert auf Nutzerfreundlichkeit und eine reibungslos funktionierende Webumgebung. Wir möchten Nutzern die bestmögliche Erfahrung im Web bieten – nicht nur bei statischen Dokumenten, sondern auch bei interaktiven Anwendungen.
Open-Source-Tools und ‑Frameworks spielen eine wichtige Rolle, wenn es darum geht, Entwicklern die Möglichkeit zu geben, moderne Apps für das Web zu erstellen und gleichzeitig eine gute Entwicklerumgebung zu unterstützen. Diese Frameworks und Tools unterstützen Unternehmen jeder Größe sowie Einzelpersonen, die für das Web entwickeln.
Wir sind der Meinung, dass Frameworks Entwicklern auch bei wichtigen Qualitätsaspekten wie Leistung, Barrierefreiheit, Sicherheit und Optimierung für Mobilgeräte helfen können. Anstatt von jedem Entwickler und Websiteinhaber zu verlangen, dass er Experte in diesen Bereichen wird und sich über die sich ständig ändernden Best Practices auf dem Laufenden hält, kann das Framework diese mit integrierten Lösungen unterstützen. So können sich Entwickler auf die Entwicklung von Produktfunktionen konzentrieren.
Kurz gesagt: Wir möchten, dass eine hohe UX-Qualität automatisch erreicht wird, wenn man für das Web entwickelt.
Aurora: Zusammenarbeit zwischen Chrome und Open-Source-Web-Frameworks und ‑Tools
Seit fast zwei Jahren arbeiten wir mit einigen der beliebtesten Frameworks wie Next.js, Nuxt und Angular zusammen, um die Webleistung zu verbessern. Wir haben auch beliebte Tools und Bibliotheken wie Vue, ESLint und webpack finanziert. Heute geben wir dieser Initiative einen Namen: Aurora.
Eine Aurora ist ein Naturschauspiel, bei dem Licht am Himmel schimmert. Wir möchten, dass Nutzeranwendungen, die mit Frameworks erstellt wurden, glänzen und funkeln. Daher haben wir uns für diesen Namen entschieden.
In den kommenden Monaten werden wir viele weitere Details zu Aurora bekannt geben. Dies ist eine Zusammenarbeit zwischen einem kleinen Team von Chrome-Entwicklern (interner Codename WebSDK) und Framework-Autoren. Unser Ziel ist es, für Produktions-Apps unabhängig vom verwendeten Browser das bestmögliche Nutzererlebnis zu bieten.
Was ist unsere Strategie?
Bei Google haben wir viel gelernt, als wir Frameworks und Tools zum Erstellen und Warten von großen Webanwendungen wie der Google Suche, Google Maps, der Bildersuche und Google Fotos verwendet haben. Wir haben festgestellt, dass Frameworks eine entscheidende Rolle für eine vorhersehbare App-Qualität spielen können, indem sie starke Standardeinstellungen und meinungsstarke Tools bieten.
Frameworks haben einen einzigartigen Blickwinkel, um sowohl die DX als auch die UX zu beeinflussen, da sie das gesamte System umfassen: den Client und den Server, die Entwicklungs- und Produktionsumgebungen. Außerdem integrieren sie Tools wie Compiler, Bundler und Linter.
Wenn Lösungen in das Framework integriert sind, können Entwicklerteams diese Lösungen nutzen und ihre Zeit auf das konzentrieren, was für das Produkt am wichtigsten ist: die Bereitstellung großartiger Funktionen für Nutzer.
Wir arbeiten daran, die Tools in jeder Ebene des Stacks zu verbessern. Frameworks wie Next.js, Nuxt und Angular CLI verwalten jeden Schritt des Lebenszyklus einer Anwendung. Aus diesem Grund und weil React das am weitesten verbreitete UI-Framework ist, haben wir die meisten unserer Optimierungen zuerst in Next.js getestet, bevor wir sie auf den Rest des Ökosystems ausgeweitet haben.
Aurora unterstützt den Erfolg im großen Maßstab, indem Lösungen auf der richtigen Ebene beliebter Technologie-Stacks bereitgestellt werden. Durch die Überbrückung der Lücke zwischen Browsern und Frameworks wird eine hohe Qualität als Nebeneffekt der Entwicklung für das Web ermöglicht und gleichzeitig ein Feedback-Loop zur Verbesserung der Webplattform geschaffen.
Wie gehen wir vor?
Unsere Grundsätze für die Verbindung von Browsern und dem Entwickler-Ökosystem durch Aurora sind: Bescheidenheit, Neugier, wissenschaftliche Forschung und Pragmatismus. Wir arbeiten mit Framework-Autoren an Verbesserungen, tauschen uns mit der Community aus und führen eine sorgfältige Prüfung durch, bevor wir Änderungen vornehmen.
Zusammenfassend lässt sich sagen, dass wir bei jeder neuen Funktion, an der wir arbeiten, folgende Schritte durchführen:
- Probleme mit der User Experience in einem beliebten Stack anhand repräsentativer Apps identifizieren
- Entwickle Prototyp-Lösungen, die dieses Problem beheben, wobei der Schwerpunkt auf „starken Standardeinstellungen“ liegt.
- Testen Sie das Feature mit einem anderen Framework-Stack, um sicherzustellen, dass es anpassungsfähig ist.
- Validieren Sie die Funktion, indem Sie sie in einigen Produktions-Apps testen. In der Regel werden Labortests für die Leistung durchgeführt.
- Entwickeln Sie das Design mithilfe des RFC-Prozesses und berücksichtigen Sie das Feedback der Community.
- Die Funktion wird in einem beliebten Stack eingeführt, in der Regel hinter einem Flag.
- Aktivieren Sie das Feature in einer repräsentativen Produktions-App, um die Qualität und die Integration in den Entwickler-Workflow zu bewerten.
- Messen Sie die Leistungssteigerung, indem Sie Messwerte in repräsentativen Produktions-Apps erfassen, in denen die Funktion eingeführt oder ein Upgrade durchgeführt wurde.
- Aktivieren Sie die Funktion als Standard im Stack, damit alle Nutzer, die ein Upgrade durchführen, davon profitieren.
- Wenn die Funktion bewiesen ist, arbeiten Sie mit zusätzlichen Frameworks zusammen, um sie zu implementieren.
- Lücken in der Webplattform mithilfe eines Feedback-Loops identifizieren
- Fahren Sie mit den nächsten Problemen fort.
Die zugrunde liegenden Tools und Plug-ins (webpack, Babel, ESLint, TypeScript usw.) werden von vielen Frameworks gemeinsam genutzt. So können auch dann Auswirkungen erzielt werden, wenn nur ein Framework-Stack verwendet wird.
Außerdem werden mit dem Chrome Framework Fund Open-Source-Tools und ‑Bibliotheken finanziell unterstützt. Wir hoffen, dass es genügend Überschneidungen zwischen den Problem- und Lösungsebenen unserer oben genannten Bemühungen gibt, um auf andere Frameworks und Tools übertragen zu werden. Wir wissen jedoch, dass wir noch mehr tun können. Deshalb möchten wir unseren Teil dazu beitragen, dass Bibliotheken und Frameworks, die Entwicklern zum Erfolg verhelfen, weiterentwickelt werden können. Das ist ein Grund, warum wir weiterhin in den Chrome Framework Fund investieren werden. Bisher wurde die Entwicklung von Webpack 5, Nuxt und ESLint sowie die Verbesserung der Leistung unterstützt.
Was haben wir bisher erreicht?
Wir haben uns auf grundlegende Optimierungen für Ressourcen wie Bilder, JS, CSS und Schriftarten konzentriert. Wir haben eine Reihe von Optimierungen vorgenommen, um die Standardeinstellungen mehrerer Frameworks zu verbessern, darunter:
- Eine Image-Komponente in Next.js, die Best Practices für das Laden von Bildern umfasst, gefolgt von einer Zusammenarbeit mit Nuxt. Die Verwendung dieser Komponente hat zu erheblichen Verbesserungen bei den Rendering-Zeiten und Layoutverschiebungen geführt (z. B. 57% weniger Largest Contentful Paint und 100% weniger Cumulative Layout Shift auf nextjs.org/give).
- Automatisches Inlining von CSS für Webfont-Deklarationen zur Build-Zeit. Diese Funktion wurde in Angular (Google Fonts) und Next.js (Google Fonts und Adobe Fonts) eingeführt, was zu erheblichen Verbesserungen bei Largest Contentful Paint und First Contentful Paint geführt hat (Beispiel).
- Wichtiges CSS mit Critters sowohl in Angular als auch in Next.js inline einfügen, um die Rendering-Zeiten zu verkürzen. Dies führte zu einer Verbesserung der Lighthouse-Leistungsbewertungen um 20 bis 30 Punkte in einer typischen, großen Angular-App, wenn diese Funktion mit der Funktion zum Inline-Einbinden von Schriftart-CSS kombiniert wurde.
- Next.js bietet ESLint-Unterstützung, die ein benutzerdefiniertes Plug-in und eine gemeinsam nutzbare Konfiguration umfasst. So lassen sich häufige frameworkspezifische Probleme zur Build-Zeit leichter erkennen, was zu einer vorhersehbareren Ladeleistung führt.
- Einführung eines integrierten Leistungsrelais in Create React App und Next.js, um leichter Einblick in die Seitenleistung über Web-Vitals und andere benutzerdefinierte Messwerte zu erhalten.
- Granular Chunking in Next.js und Gatsby führt zu einer Reduzierung der Bundle-Größen um 30 bis 70 % und verbessert gleichzeitig die Caching-Leistung. Dies ist in Webpack 5 die Standardeinstellung.
- Ein separater Polyfill-Chunk für ältere Browser, der in Zusammenarbeit mit dem Next.js-Team entwickelt wurde, um die Bundle-Größe in modernen Browsern zu optimieren.
Jede dieser Funktionen wurde entweder automatisiert und ist standardmäßig aktiviert oder erfordert nur eine einfache Aktivierung. Das ist wichtig, damit Entwickler die Vorteile problemlos nutzen können, ohne ihren Workflow zu komplizieren.
Was haben wir für 2021 geplant?
Im weiteren Verlauf des Jahres werden wir uns darauf konzentrieren, Framework-Stacks dabei zu unterstützen, die Nutzerfreundlichkeit zu verbessern und bei Messwerten wie den Core Web Vitals besser abzuschneiden. Dazu gehören:
- Konformität zur Durchsetzung von Best Practices. Weitere Informationen finden Sie in diesem Blogpost.
- Wir optimieren die Leistung beim ersten Laden, indem wir auf unseren Kooperationen aufbauen, um Bilder, Schriftarten und wichtiges CSS zu optimieren.
- Drittanbieterskripts (3Ps) mit minimalen Auswirkungen auf die Leistung laden, indem wir auf unserer Arbeit an einer Script-Komponente aufbauen und eingehende Untersuchungen durchführen, um die beste Reihenfolge für 3Ps zu ermitteln.
- JavaScript-Leistung bei Skalierung (z.B. Unterstützung von React Server Components in Next.js).
Unser Team wird versuchen, regelmäßig Informationen zu RFCs und Design-Dokumenten für diese Ideen zu veröffentlichen, damit alle Frameworks oder Entwickler, die daran interessiert sind, auf dem Laufenden bleiben können.
Fazit
Das Aurora-Team (Shubhie, Houssein, Alex, Gerald, Ralph, Addy, Kara, Keen, Katie) freut sich darauf, weiterhin eng mit der Open-Source-Framework-Community zusammenzuarbeiten, um die Standardeinstellungen für die Nutzerfreundlichkeit in Next.js, Nuxt und Angular zu verbessern. Wir werden unser Angebot im Laufe der Zeit auf weitere Frameworks und Tools ausweiten. Wir werden in den kommenden Monaten weitere Blogposts, Vorträge und RFCs veröffentlichen :)