Im Chrome-Team legen wir großen Wert auf die Nutzerfreundlichkeit und ein florierendes Web-Ökosystem. Wir möchten, dass Nutzer das Web bestmöglich nutzen können – nicht nur mit statischen Dokumenten, sondern auch mit umfangreichen, interaktiven Anwendungen.
Open-Source-Tools und ‑Frameworks spielen eine wichtige Rolle, damit Entwickler moderne Web-Apps erstellen und gleichzeitig eine gute Entwicklererfahrung bieten können. Diese Frameworks und Tools unterstützen Unternehmen jeder Größe sowie Einzelpersonen, die im Web entwickeln.
Wir sind der Meinung, dass Frameworks auch eine wichtige Rolle dabei spielen können, Entwickler bei wichtigen Qualitätsaspekten wie Leistung, Barrierefreiheit, Sicherheit und mobiler Nutzung zu unterstützen. Anstatt jeden Entwickler und Websiteinhaber zu bitten, sich in diesen Bereichen zu spezialisieren und mit den sich ständig ändernden Best Practices Schritt zu halten, kann das Framework sie mit integrierten Lösungen unterstützen. So können sich Entwickler auf die Entwicklung von Produktfunktionen konzentrieren.
Kurz gesagt: Unsere Vision ist es, dass eine hohe UX-Qualität eine Nebenwirkung der Entwicklung für das Web wird.
Aurora: Eine 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, um die Webleistung zu verbessern. Außerdem haben wir beliebte Tools und Bibliotheken wie Vue, ESLint und webpack unterstützt. Heute geben wir diesem Projekt einen Namen: Aurora.
Nordlichter sind ein Naturschauspiel, das am Himmel leuchtet. Da wir versuchen, die Nutzerfreundlichkeit von mit Frameworks erstellten Websites zu verbessern, empfanden wir diesen Namen als passend.
In den kommenden Monaten werden wir noch viele weitere Details zu Aurora bekannt geben. Das Projekt ist eine Zusammenarbeit zwischen einem kleinen Team von Chrome-Entwicklern (interner Codename WebSDK) und Framework-Entwicklern. Unser Ziel ist es, Nutzern die bestmögliche Nutzererfahrung für Produktions-Apps zu bieten, unabhängig vom Browser, in dem Sie die Inhalte rendern.
Wie sieht unsere Strategie aus?
Bei Google haben wir viel gelernt, während wir Frameworks und Tools zum Erstellen und Verwalten von Webanwendungen im großen Maßstab wie der Google Suche, Google Maps, der Bildsuche und Google Fotos verwendet haben. Wir haben festgestellt, dass Frameworks eine entscheidende Rolle bei der vorhersehbaren App-Qualität spielen können, indem sie ausgewogene Standardeinstellungen und umfassende Tools bereitstellen.
Frameworks bieten eine einzigartige Möglichkeit, sowohl die Nutzererfahrung als auch die Nutzerfreundlichkeit zu beeinflussen, da sie das gesamte System umfassen: den Client und den Server, die Entwicklungs- und Produktionsumgebungen und sie integrieren Tools wie Compiler, Bundler, Linter usw.
Wenn Lösungen in das Framework eingebunden sind, können Entwicklerteams diese Lösungen nutzen und sich auf das Wesentliche für das Produkt konzentrieren – die Bereitstellung großartiger Funktionen für Nutzer.
Wir arbeiten daran, Tools in jeder Schicht 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, wurden die meisten unserer Optimierungen in Next.js getestet, bevor sie auf das gesamte System ausgeweitet wurden.
Aurora unterstützt den Erfolg im großen Maßstab, indem Lösungen auf der richtigen Schicht beliebter Technologie-Stacks bereitgestellt werden. Durch die Schließung der Lücke zwischen Browsern und Frameworks wird eine hohe Qualität zu einem Nebeneffekt der Entwicklung für das Web und dient als Feedbackschleife zur Verbesserung der Webplattform.
Wie läuft unser Arbeitsablauf ab?
Unsere Prinzipien für die Brücke zwischen Browsern und dem Entwickler-Ökosystem sind: Bescheidenheit, Neugier, wissenschaftliche Untersuchung und Pragmatismus. Wir arbeiten mit den Framework-Entwicklern an Verbesserungen, arbeiten mit der Community zusammen und führen eine sorgfältige Prüfung durch, bevor wir Änderungen vornehmen.
Hier eine Zusammenfassung der Schritte, die wir bei jeder neuen Funktion ausführen:
- Identifizieren Sie Probleme mit der User Experience in einem beliebten Stack anhand repräsentativer Apps.
- Prototyplösungen entwickeln, die dieses Problem angehen, mit Schwerpunkt auf „starken Standardeinstellungen“
- Prüfen Sie die Funktion mit einem anderen Framework-Stack, um sicherzustellen, dass sie anpassbar ist.
- Testen Sie die Funktion in einigen Produktions-Apps, in der Regel mit Leistungstests im Lab.
- Entwickeln Sie das Design mithilfe des RFC-Prozesses und berücksichtigen Sie dabei das Feedback der Community.
- Platzieren Sie die Funktion in einem beliebten Stack, in der Regel hinter einem Flag.
- Aktivieren Sie die Funktion in einer repräsentativen Produktions-App, um die Qualität und die Integration in den Entwickler-Workflow zu bewerten.
- Messen Sie die Leistungsverbesserung, indem Sie Messwerte in repräsentativen Produktions-Apps erfassen, in denen die Funktion verwendet oder aktualisiert wurde.
- Aktivieren Sie die Funktion als Standardeinstellung im Stack, damit alle Nutzer, die ein Upgrade ausführen, davon profitieren.
- Sobald die Funktion funktioniert, können Sie zusätzliche Frameworks verwenden, um sie zu implementieren.
- Identifizieren Sie Lücken in der Webplattform mithilfe einer Feedbackschleife.
- 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. Dies trägt dazu bei, positive Auswirkungen zu erzielen, auch wenn Sie zu einem einzelnen Framework-Stack beitragen.
Außerdem unterstützt der Chrome Framework Fund Open-Source-Tools und ‑Bibliotheken finanziell. Wir hoffen, dass die Problem- und Lösungsebenen unserer Bemühungen ausreichend übereinstimmen, um sie auf andere Frameworks und Tools anzuwenden. Wir wissen aber, dass wir noch mehr tun können. Deshalb möchten wir unseren Beitrag dazu leisten, dass Bibliotheken und Frameworks, die Entwicklern zum Erfolg verhelfen, weiter gut funktionieren. Das ist einer der Gründe, warum wir weiterhin in den Chrome Framework Fund investieren werden. Bisher wurden damit Arbeiten an Webpack 5, Nuxt sowie an der Leistung und Verbesserungen von ESLint 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 Bildkomponente in Next.js, die Best Practices für das Laden von Bildern enthält, gefolgt von einer Zusammenarbeit mit Nuxt. Die Verwendung dieser Komponente hat zu erheblichen Verbesserungen bei den Malzeiten und beim Layout-Shift geführt (z. B. 57% weniger Largest Contentful Paint und 100% weniger kumulativer Layout-Shift auf nextjs.org/give).
- Automatische Einbettung von CSS für Web-Schriftdeklarationen bei der Build-Zeit Diese Funktion ist jetzt in Angular (Google Fonts) und Next.js (Google Fonts und Adobe Fonts) verfügbar. Das hat zu deutlichen Verbesserungen bei Largest Contentful Paint und First Contentful Paint geführt (Beispiel).
- Einbetten von kritischem CSS mit Critters in Angular und Next.js, um die Darstellungszeiten zu verkürzen. Dies führte zu einer Verbesserung der Lighthouse-Leistungsbewertungen in einer typischen, groß angelegten Angular-App um 20 bis 30 Punkte, wenn diese Funktion mit der Funktion zum Einfügen von Schrift-CSS kombiniert wurde.
- In Next.js ist standardmäßig ESLint-Unterstützung verfügbar. Dazu gehören ein benutzerdefiniertes Plug-in und eine freigegebene Konfiguration, mit denen sich häufige frameworkspezifische Probleme bei der Buildzeit leichter erkennen lassen. Das führt zu einer besser vorhersehbaren Ladeleistung.
- Einführung eines integrierten Leistungs-Relays in Create React App und Next.js, um die Seitenleistung mithilfe von Web Vitals und anderen benutzerdefinierten Messwerten leichter zu analysieren.
- Detailliertes Chunking in Next.js und Gatsby, was zu einer Reduzierung der Bundle-Größe um 30 bis 70 % und einer Verbesserung der Caching-Leistung führte. Dies ist in Webpack 5 standardmäßig aktiviert.
- 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 verbessern.
Alle diese Funktionen sind entweder automatisiert und standardmäßig aktiviert oder müssen nur einfach aktiviert werden. Dies ist wichtig, damit Entwickler die Vorteile einfach nutzen können, ohne ihren Workflow zu verkomplizieren.
Was planen wir für 2021?
Im Laufe des restlichen Jahres werden wir uns darauf konzentrieren, Framework-Stacks dabei zu helfen, die Nutzerfreundlichkeit zu verbessern und ihre Leistung bei Messwerten wie den Core Web Vitals zu steigern. Dazu gehören:
- Einhaltung von Best Practices Weitere Informationen finden Sie in diesem Blogpost.
- Die Leistung beim ersten Laden wurde optimiert, indem wir auf unsere Zusammenarbeit zur Optimierung von Bildern, Schriftarten und wichtigem CSS zurückgegriffen haben.
- Wir haben die Leistung von Drittanbieter-Scripts optimiert, indem wir auf unserer Arbeit an einer Script-Komponente aufgebaut und intensiv recherchiert haben, wie Drittanbieter-Scripts am besten angeordnet und sequenziert werden können.
- JavaScript-Leistung im großen Maßstab (z. B. Unterstützung von React-Serverkomponenten in Next.js)
Unser Team wird versuchen, regelmäßiger Informationen zu RFCs und Designdokumenten für diese Ideen zu veröffentlichen, damit alle Frameworks oder Entwickler, die sich informieren möchten, dies tun 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 Engagement im Laufe der Zeit ausweiten, um noch mehr Frameworks und Tools abzudecken. Im Laufe des kommenden Jahres werden wir weitere Blogbeiträge, Vorträge und RFCs von unserem Team veröffentlichen.