Eine Zusammenfassung der wichtigsten Neuigkeiten und Updates, die während unserer dreitägigen Online-Community-Veranstaltung angekündigt wurden, sowie eine Erinnerung an anstehende regionale Veranstaltungen.
Wir haben gerade unsere dreitägige Veranstaltung web.dev LIVE beendet, bei der sich einige Mitglieder der Web-Community online getroffen haben, um über den Stand der Webentwicklung zu sprechen. Wir haben jeden Tag in einer anderen regionalen Zeitzone begonnen und Googler haben Updates, Neuigkeiten und Tipps geteilt, um Entwickler mit Tools und Anleitungen zu unterstützen, damit das Web stabil, leistungsstark und zugänglich bleibt.
Wenn Sie einen Teil des Livestreams verpasst haben, können Sie sich die Aufzeichnungen der Sessions auf YouTube ansehen. Außerdem finden demnächst weltweit regionale Veranstaltungen statt, die von Google Developer Groups organisiert werden. Dort werden Themen, die wir bei web.dev LIVE behandelt haben, in vertiefenden Sitzungen besprochen.
Sehen wir uns einige der Neuigkeiten und Updates an, die während der drei Tage vorgestellt wurden.
Web Vitals
Das Chrome-Team hat die Initiative Web Vitals angekündigt, um einheitliche Leitfäden, Messwerte und Tools bereitzustellen, mit denen Entwickler die Nutzerfreundlichkeit im Web verbessern können. Das Google-Suchteam hat außerdem vor Kurzem angekündigt, dass die Nutzerfreundlichkeit von Seiten als Ranking-Kriterium herangezogen wird und dass die Core Web Vitals-Messwerte als Grundlage dienen.
Die drei Säulen der Core Web Vitals von 2020 sind Ladezeit, Interaktivität und visuelle Stabilität von Seiteninhalten. Sie werden durch die folgenden Messwerte erfasst:
- Largest Contentful Paint misst die empfundene Ladegeschwindigkeit und markiert den Punkt während des Seitenaufbaus, zu dem der Hauptinhalt einer Seite wahrscheinlich geladen wurde.
- First Input Delay misst die Reaktionsfähigkeit und quantifiziert die Erfahrung von Nutzern, wenn sie versuchen, zum ersten Mal mit einer Seite zu interagieren.
- Cumulative Layout Shift misst die visuelle Stabilität und quantifiziert die Menge an unerwarteten Bewegungen von Seiteninhalten.
Bei web.dev LIVE haben wir Best Practices zur Optimierung für Core Web Vitals und zur Verwendung der Chrome-Entwicklertools zum Ermitteln der Vitals-Werte Ihrer Website vorgestellt. Wir haben auch viele andere Vorträge zum Thema Leistung gehalten, die Sie unter web.dev/live im Programm für Tag 1 finden.
tooling.report
Die Entwicklung für eine so breit gefächerte Plattform wie das Web kann eine Herausforderung sein. Build-Tools sind oft das Herzstück Ihres Webentwicklungsprojekts und spielen eine wichtige Rolle bei der Verwaltung des Entwickler- und Produktlebenszyklus.
Wir alle kennen unhandliche Build-Konfigurationsdateien. Um Webentwicklern und Tool-Autoren zu helfen, die Komplexität des Webs zu bewältigen, haben wir tooling.report entwickelt. Auf dieser Website können Sie das richtige Build-Tool für Ihr nächstes Projekt auswählen, entscheiden, ob sich die Migration von einem Tool zu einem anderen lohnt, oder herausfinden, wie Sie Best Practices in Ihre Toolkonfiguration und Codebasis einbinden können.
Wir haben eine Reihe von Tests entwickelt, um herauszufinden, mit welchen Build-Tools Sie die Best Practices für die Webentwicklung einhalten können. Wir haben mit den Autoren der Build-Tools zusammengearbeitet, um sicherzustellen, dass wir ihre Tools richtig verwenden und fair darstellen.
Die erste Version von tooling.report deckt webpack v4, Rollup v2, Parcel v2 und Browserify mit Gulp ab, die derzeit die beliebtesten Build-Tools zu sein scheinen. Wir haben tooling.report so entwickelt, dass mit Hilfe der Community weitere Build-Tools und zusätzliche Tests hinzugefügt werden können.
Wenn eine Best Practice fehlt, die getestet werden sollte, schlagen Sie sie in einem GitHub-Problem vor. Wenn Sie einen Test schreiben oder ein neues Tool hinzufügen möchten, das wir nicht in die ursprüngliche Gruppe aufgenommen haben, können Sie gerne einen Beitrag leisten.
In der Zwischenzeit kannst du mehr über unseren Ansatz zur Erstellung von tooling.report lesen und dir unsere Session von web.dev LIVE ansehen.
Datenschutz und Sicherheit im Web
Chrome setzt sich für ein offenes Web ein, das die Privatsphäre der Nutzer respektiert und wichtige Anwendungsfälle unterstützt, damit das Web für alle funktioniert.
2019 hat Chrome eine Aktualisierung des Cookie-Standards vorgeschlagen, um Cookies standardmäßig auf Erstanbieter-Kontexte zu beschränken und Cookies für Drittanbieter-Kontexte explizit als solche zu kennzeichnen. Insbesondere bietet dies eine Verteidigungslinie gegen websiteübergreifende Anfragen zur Fälschung von Anforderungen. Der Vorschlag wird jetzt von Chrome, Firefox, Edge und anderen Browsern übernommen.
Chrome hat sich zwar entschieden, diese Änderungen angesichts von COVID-19 vorübergehend zurückzunehmen, aber leider nehmen solche Angriffe in einer Krise, in der die Menschen am anfälligsten sind, zu. Mit der stabilen Version von Chrome 84 (Mitte Juli 2020) werden die Änderungen also wieder eingeführt, und zwar für alle Chrome-Versionen ab 80. Weitere Informationen finden Sie im Leitfaden zu SameSite-Cookies und in der web.dev LIVE-Sitzung.
Darüber hinaus führt Chrome im Rahmen der Privacy Sandbox eine Reihe von Standardvorschlägen ein, die die Anwendungsfälle unterstützen sollen, mit denen Menschen ihren Lebensunterhalt über die Webplattform verdienen, aber auf eine Weise, die den Datenschutz für Nutzer besser respektiert. Chrome bittet aktiv um Feedback zu diesen Vorschlägen und beteiligt sich an den offenen Foren des W3C, um die Vorschläge sowie die von anderen Parteien eingereichten Vorschläge zu diskutieren. Weitere Informationen zu dieser Initiative findest du in der Session Sicherheit und Datenschutz für das offene Web.
In Bezug auf die Nutzersicherheit war Spectre eine Sicherheitslücke, die dazu führte, dass bösartiger Code, der in einem Browserprozess ausgeführt wurde, alle mit diesem Prozess verknüpften Daten lesen konnte, auch wenn sie von einem anderen Ursprung stammten. Eine der Browser-Maßnahmen dagegen ist die Website-Isolierung, d.h. jede Website wird in einem separaten Prozess ausgeführt. Weitere Informationen findest du in der web.dev LIVE-Sitzung zu den neuen Cross-Origin Opener- und Embedder-Richtlinien (COOP und COEP).
Ein Web mit leistungsstarken Funktionen erstellen
Chrome möchte, dass Sie die Möglichkeit haben, hochwertige Web-Apps zu erstellen, mit denen Sie die größtmögliche Reichweite bei Nutzern auf allen Geräten erzielen. Chrome kombiniert die Installierbarkeit und Zuverlässigkeit von PWAs mit dem Capabilities Project (Project Fugu) und konzentriert sich auf drei Dinge, um die Lücke zwischen plattformspezifischen Apps und dem Web zu schließen und Ihnen dabei zu helfen, großartige Erlebnisse zu schaffen und bereitzustellen.
Erstens haben die Chrome-Teams hart daran gearbeitet, Webentwicklern und Nutzern mehr Kontrolle über die Installation zu geben, eine Installationsaufforderung in die Omnibox einzufügen und mehr. Trotz der Allgegenwart des Webs ist es für einige Unternehmen immer noch wichtig, ihre App im Store anzubieten. Chrome hat Bubblewrap eingeführt, eine Bibliothek und Befehlszeile, mit der Sie Ihre PWA ganz einfach in den Google Play Store stellen können. Tatsächlich verwendet PWABuilder.com jetzt Bubblewrap im Hintergrund. Mit nur wenigen Mausklicks können Sie ein APK generieren und Ihre PWA in den Google Play Store hochladen, sofern Sie die Kriterien erfüllen.
Zweitens bietet Chrome eine engere Integration in das Betriebssystem, z. B. die Möglichkeit, ein Foto, einen Song oder andere Inhalte zu teilen, indem der Freigabedienst auf Systemebene mit der Web Share API aufgerufen wird, oder die Möglichkeit, Inhalte zu empfangen, wenn sie von einer anderen installierten App geteilt werden. Sie können Nutzer auf dem Laufenden halten oder sie mit App-Badges unauffällig über neue Aktivitäten informieren. Außerdem können Nutzer jetzt mit App-Verknüpfungen, die in Chrome 84 (Mitte Juli 2020) eingeführt werden, schneller eine Aktion starten.
Außerdem wurden in Chrome neue Funktionen entwickelt, die neue Szenarien ermöglichen, die zuvor nicht möglich waren, z. B. Editoren, die Dateien im lokalen Dateisystem des Nutzers lesen und schreiben, oder die Liste der lokal installierten Schriftarten abrufen, damit Nutzer sie in ihren Designs verwenden können.
Während web.dev LIVE haben wir über viele andere Funktionen gesprochen, mit denen ihr dieselbe Art von Nutzererfahrung mit denselben Funktionen wie plattformspezifische Apps bieten könnt. Alle Sessions finden Sie unter web.dev/live im Zeitplan für Tag 2.
Neu in den Chrome-Entwicklertools und Lighthouse 6.0
Chrome-Entwicklertools: Neuer Tab „Probleme“, Emulator für Farbschwächen und Unterstützung für Web Vitals
Eine der leistungsstärksten Funktionen der Chrome-Entwicklertools ist die Möglichkeit, Probleme auf einer Webseite zu erkennen und den Entwickler darauf aufmerksam zu machen. Das ist besonders wichtig, da wir uns in der nächsten Phase eines datenschutzorientierten Webs befinden. Um die Anzahl der Benachrichtigungen und die Unordnung in der Konsole zu reduzieren, wurden in den Chrome-Entwicklertools der Tab „Probleme“ eingeführt, der sich zu Beginn auf drei Arten von kritischen Problemen konzentriert: Cookie-Probleme, gemischte Inhalte und COEP-Probleme. Sehen Sie sich die web.dev LIVE-Sitzung zum Suchen und Beheben von Problemen mit dem Tab „Probleme“ an, um loszulegen.
Da die Core Web Vitals zu den wichtigsten Messwerten für Webentwickler gehören, sollen sie in den DevTools ganz einfach nachverfolgen können, wie sie im Vergleich zu diesen Grenzwerten abschneiden. Diese drei Messwerte sind jetzt im Bereich „Leistung“ der Chrome-Entwicklertools verfügbar.
Da sich immer mehr Entwickler auf Barrierefreiheit konzentrieren, wurde in den Entwicklertools auch ein Emulator für Farbblindheit eingeführt, mit dem Entwickler verschwommenes Sehen und andere Arten von Sehbehinderungen emulieren können. Weitere Informationen zu dieser und vielen anderen Funktionen finden Sie in der Session What's new in DevTools.
Lighthouse 6.0: Neue Messwerte, Labormessungen für Core Web Vitals, aktualisierter Leistungswert und neue Audits
Lighthouse ist ein automatisiertes Open-Source-Tool, mit dem Entwickler die Leistung ihrer Website verbessern können. In der aktuellen Version hat sich das Lighthouse-Team darauf konzentriert, Einblicke auf der Grundlage von Messwerten bereitzustellen, die Ihnen einen ausgewogenen Überblick über die Qualität der Nutzererfahrung in Bezug auf wichtige Dimensionen geben.
Um die Konsistenz zu gewährleisten, wurde Lighthouse um die Unterstützung für die Core Web Vitals erweitert: LCP, TBT (ein Proxy für FID, da Lighthouse ein Labortool ist und FID nur im Feld gemessen werden kann) und CLS. Außerdem wurden drei alte Messwerte aus Lighthouse entfernt: Inhalte weitgehend gezeichnet, CPU erstmals inaktiv und Maximaler potenzieller FID. Diese Entfernungen sind auf Überlegungen wie die Variabilität von Messwerten und neuere Messwerte zurückzuführen, die den Teil der Nutzererfahrung, den Lighthouse messen möchte, besser widerspiegeln. Außerdem hat Lighthouse basierend auf Nutzerfeedback einige Anpassungen daran vorgenommen, wie stark die einzelnen Messwerte in die Gesamtleistung einfließen.
Lighthouse hat außerdem einen Bewertungsrechner hinzugefügt, mit dem ihr eure Leistungsbewertung analysieren könnt, indem ihr die Bewertungen der Versionen 5 und 6 vergleicht. Wenn Sie eine Prüfung mit Lighthouse 6.0 durchführen, enthält der Bericht einen Link zum Rechner, in dem Ihre Ergebnisse bereits eingetragen sind.
Und schließlich wurden in Lighthouse eine Reihe neuer Prüfungen hinzugefügt, wobei der Schwerpunkt auf der JavaScript-Analyse und der Barrierefreiheit liegt.
Weitere Informationen finden Sie in der Sitzung What's new in speed tooling.
Weitere Informationen
Vielen Dank an alle in der Community, die mit uns über die Möglichkeiten und Herausforderungen der Webplattform diskutiert haben.
In diesem Beitrag wurden einige der Highlights der Veranstaltung zusammengefasst, aber es gab noch viel mehr. Sehen Sie sich alle Sitzungen an und abonnieren Sie den web.dev-Newsletter, wenn Sie weitere Inhalte direkt in Ihren Posteingang erhalten möchten. Im Bereich Regionale Veranstaltungen auf web.dev/live findest du anstehende Community-Veranstaltungen in deiner Zeitzone.