Eine Zusammenfassung der wichtigsten Neuigkeiten und Updates, die während unserer dreitägigen Online-Community-Veranstaltung angekündigt wurden, und eine Erinnerung zu anstehenden regionalen Events.
Wir haben gerade unsere dreitägige web.dev LIVE-Veranstaltung beendet, bei der einige Mitglieder der Web-Community online über den Stand der Webentwicklung gesprochen haben. Wir haben jeden Tag in einer anderen regionalen Zeitzone begonnen und Google-Mitarbeiter teilten eine Reihe von Updates, Neuigkeiten und Tipps, die Entwicklern dabei helfen sollen, Tools und Anleitungen zu entwickeln, mit denen sie das Web stabil, leistungsstark und zugänglich halten können.
Wenn du einen Teil des Livestreams verpasst hast, werden alle Sitzungen aufgezeichnet und stehen dir auf YouTube zur Verfügung. Außerdem planen wir regionale Veranstaltungen auf der ganzen Welt, die von Google Developer Groups organisiert werden, und bieten detaillierte Sitzungen zu Themen, die wir bei web.dev LIVE behandelt haben.
Sehen wir uns einige Neuigkeiten und Updates an, die im Laufe der drei Tage veröffentlicht wurden.
Web Vitals
Das Chrome-Team hat die Web Vitals-Initiative angekündigt, um einheitliche Anleitungen, Messwerte und Tools zur Verfügung zu stellen, damit Entwickler das Web optimal nutzen können. Das Team der Google Suche gab vor Kurzem bekannt, dass die Nutzerfreundlichkeit von Seiten als Ranking-Kriterium bewertet und die Messwerte zu Core Web Vitals als Grundlage herangezogen werden.
Die drei Säulen der Core Web Vitals für 2020 sind das Laden, die Interaktivität und die visuelle Stabilität von Seiteninhalten, die anhand der folgenden Messwerte erfasst werden:
- Largest Contentful Paint gibt die empfundene Ladegeschwindigkeit an und markiert den Punkt in der Zeitleiste für den Seitenaufbau, an dem der Hauptinhalt einer Seite wahrscheinlich geladen wurde.
- First Input Delay misst die Reaktionsfähigkeit und quantifiziert die Erfahrung der Nutzer, wenn sie versuchen, mit einer Seite zu interagieren.
- Cumulative Layout Shift misst die visuelle Stabilität und quantifiziert das Ausmaß der unerwarteten Verschiebung von Seiteninhalten.
Bei web.dev LIVE haben wir Best Practices zur Optimierung für Core Web Vitals und zur Verwendung der Chrome-Entwicklertools zur Untersuchung der wichtigsten Werte Ihrer Website vorgestellt. Außerdem haben wir noch viele andere Vorträge zum Thema Leistung geteilt, die am Zeitplan für Tag 1 unter web.dev/live zu finden sind.
tooling.report
Die Entwicklung für eine so breit gefasste Plattform wie das Web kann eine Herausforderung sein. Build-Tools sind oft das Herzstück eines Webentwicklungsprojekts und spielen eine wichtige Rolle bei der Verwaltung des Entwickler- und Produktlebenszyklus.
Wir alle kennen schon sehr unhandliche Konfigurationsdateien. Deshalb haben wir tooling.report entwickelt, um Webentwicklern und Tooling-Autoren bei der Bewältigung der Komplexität des Webs zu helfen. Mit dieser Website können Sie das richtige Build-Tool für Ihr nächstes Projekt auswählen und entscheiden, ob sich die Migration von einem Tool zum anderen lohnt. Sie können sich auch darüber informieren, wie Sie Best Practices in Ihre Toolkonfiguration und Codebasis integrieren können.
Wir haben eine Reihe von Tests entwickelt, um zu ermitteln, mit welchen Build-Tools Sie Best Practices für die Webentwicklung umsetzen können. Wir haben die Tools korrekt eingesetzt und fair dargestellt.
Die erste Version von tooling.report umfasst Webpack v4, Rollup v2, Parcel v2 und Browserify mit Gulp, die derzeit zu den beliebtesten Build-Tools gehören. Wir haben tooling.report mit der Flexibilität entwickelt, weitere Build-Tools und zusätzliche Tests mit Unterstützung der Community hinzuzufügen.
Wenn eine zu testende Best Practice fehlt, schlagen Sie bitte einen Vorschlag in einem GitHub-Problem vor. Wenn Sie einen Test schreiben oder ein neues Tool hinzufügen möchten, das nicht im ursprünglichen Set enthalten war, freuen wir uns, wenn Sie einen Beitrag leisten.
In der Zwischenzeit können Sie sich mehr über unseren Ansatz zur Erstellung vontooling.report und unsere Session von web.dev informieren.
Datenschutz und Sicherheit im Web
Chrome respektiert ein offenes Web, das die Privatsphäre der Nutzer respektiert und wichtige Anwendungsfälle pflegt, damit das Web für alle funktioniert.
2019 wurde in Chrome eine Aktualisierung des Cookiestandards vorgeschlagen, durch die Cookies standardmäßig auf Erstanbieterkontexte beschränkt werden und Cookies für Drittanbieterkontexte explizit als solche gekennzeichnet werden müssen. Dies bietet eine Verteidigungslinie gegen Cross-Site Request Forgery-Angriffe. Der Vorschlag wird jetzt von Chrome, Firefox, Edge und anderen Browsern angenommen.
Chrome hat beschlossen, diese Änderungen angesichts der Coronakrise vorübergehend rückgängig zu machen. Leider werden Sie während einer Krise, in der die Menschen am stärksten gefährdet sind, diese Arten von Angriffen leider erhöhen. Mit der stabilen Version von Chrome 84 (Mitte Juli 2020) werden die Änderungen also für alle Chrome-Versionen ab Version 80 wieder eingeführt. Weitere Informationen findest du in den SameSite-Hinweisen zu Cookies und in der web.dev LIVE-Sitzung.
Darüber hinaus werden unter dem Banner der Privacy Sandbox von Chrome mehrere Standards vorgeschlagen, die auf Anwendungsfälle abzielen, die den Lebensunterhalt mit der Webplattform ermöglichen sollen. Dabei wird der Datenschutz für Nutzer noch stärker respektiert. Chrome bittet um Feedback zu diesen Vorschlägen und engagiert sich in den offenen Foren des W3C, um sowohl die Vorschläge als auch die von anderen Parteien zu diskutieren. Weitere Informationen zu dieser Initiative finden Sie in der Sitzung Sicherheit und Datenschutz für das offene Web.
In Bezug auf die Nutzersicherheit war Spectre eine Sicherheitslücke, die dafür sorgte, dass schädlicher Code, der in einem Browserprozess ausgeführt wurde, möglicherweise alle mit diesem Prozess verbundenen Daten lesen konnte, auch wenn er aus einer anderen Quelle stammt. Eine der Browser-Abwehrmaßnahmen ist die Website-Isolierung, d.h., jede Website in einen separaten Prozess zu integrieren. Weitere Informationen findest du in der web.dev-LIVE-Sitzung zu den neuen Cross-Origin Opener- und Embedder Policies (COOP und COEP).
Ein Web mit leistungsstarken Funktionen erstellen
Chrome möchte, dass Sie kostenlos Web-Apps von hoher Qualität erstellen können, um geräteübergreifend die größte Reichweite zu erzielen. Mit dem „capabilities“-Projekt (Project Fugu) von PWAs werden die Installierbarkeit und Zuverlässigkeit von PWAs miteinander kombiniert. Dabei liegt der Schwerpunkt auf drei Aspekten, die die Lücke zwischen plattformspezifischen Apps und dem Web schließen und Nutzern dabei helfen, eine optimale Nutzererfahrung zu bieten.
Erstens haben die Chrome-Teams hart daran gearbeitet, Webentwicklern und Nutzern mehr Kontrolle über die Installation zu bieten, in der Omnibox eine Werbeaktion für Installationen hinzuzufügen und mehr. Trotz der Allgegenwärtigkeit des Webs ist es für manche Unternehmen immer noch wichtig, ihre App im Store anzubieten. Zu diesem Zweck hat Chrome Bubblewrap eingeführt. Diese Bibliothek und Befehlszeile macht es einfach, Ihre PWA in den Play Store zu bringen. Auf PWABuilder.com wird jetzt sogar Bubblewrap verwendet. Mit nur wenigen Mausklicks können Sie ein APK generieren und Ihre PWA in den Play Store hochladen, sofern Sie die Kriterien erfüllen.
Zweitens bietet Chrome eine engere Integration mit dem Betriebssystem, z. B. die Möglichkeit, Fotos, Songs usw. 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 neuesten Stand halten oder sie durch App-Logos auf neue Aktivitäten hinweisen. Außerdem ist es für Nutzer jetzt einfacher, Aktionen schnell mit App-Verknüpfungen zu starten, die in Chrome 84 (Mitte Juli 2020) verfügbar sein werden.
Und schließlich arbeitet Chrome an neuen Funktionen, die neue Szenarien ermöglichen, die zuvor nicht möglich waren. Dazu gehören Editoren, die Dateien im lokalen Dateisystem des Nutzers lesen und schreiben oder eine Liste der lokal installierten Schriftarten abrufen, damit Nutzer sie in ihren Designs verwenden können.
Bei web.dev LIVE haben wir uns über viele weitere Funktionen und Features gesprochen, mit denen Sie das gleiche Erlebnis mit denselben Funktionen wie plattformspezifische Anwendungen bieten können. Sie finden alle Sitzungen unter web.dev/live im Zeitplan für Tag 2.
Neues in den Chrome-Entwicklertools und in Lighthouse 6.0
Chrome-Entwicklertools: neuer Tab „Probleme“, Emulator für Farbmängel und Web Vitals-Unterstützung
Eine der leistungsstärksten Funktionen der Chrome-Entwicklertools ist die Möglichkeit, Probleme auf einer Webseite zu erkennen und den Entwickler darauf hinzuweisen. Das ist am relevantesten, wenn wir in die nächste Phase eines datenschutzorientierten Webs einsteigen. Um eine Übermüdung und Unordnung in der Console zu vermeiden, haben die Chrome-Entwicklertools den Tab „Probleme“ eingeführt. Dieser konzentriert sich zuerst auf drei Arten von kritischen Problemen: Cookie-Probleme, gemischte Inhalte und COEP-Probleme. Sieh dir zum Einstieg die web.dev-LIVE-Sitzung zum Finden und Beheben von Problemen auf dem Tab „Probleme“ an.
Da die Core Web Vitals zu einem der wichtigsten Messwerte für Webentwickler geworden sind, die sie erfassen und analysieren sollten, sollen die Entwicklertools ganz einfach nachvollziehen können, wie gut sie diese Grenzwerte erreichen. Diese drei Messwerte befinden sich jetzt im Bereich „Leistung“ in den Chrome-Entwicklertools.
Da sich immer mehr Entwickler auf Barrierefreiheit konzentrieren, haben die Entwicklertools auch einen Emulator für Farbblindheit eingeführt, mit dem Entwickler verschwommenes Sehen und andere Arten von Sehschwächen emulieren können. Weitere Informationen zu diesem und vielen weiteren Funktionen finden Sie in der Sitzung Neuerungen in den Entwicklertools.
Lighthouse 6.0: Neue Messwerte, Core Web Vitals-Labormessungen, aktualisierte Leistungsbewertung und neue Prüfungen
Lighthouse ist ein automatisiertes Open-Source-Tool, mit dem Entwickler die Leistung ihrer Website verbessern können. In der neuesten Version konzentrierte sich das Lighthouse-Team darauf, Statistiken auf der Grundlage von Messwerten bereitzustellen, die Ihnen ein ausgewogenes Verhältnis der Qualität der Nutzererfahrung mit kritischen Dimensionen ermöglichen.
Aus Gründen der Konsistenz unterstützt Lighthouse jetzt die Core Web Vitals: LCP, TBT (ein Proxy für FID, da Lighthouse ein Lab-Tool ist und FID nur vor Ort gemessen werden kann) und CLS. Lighthouse hat außerdem drei alte Messwerte entfernt: First Meaningful Paint, First CPU Inaktiv und Max Potential FID. Gründe für die Entfernungen sind Faktoren wie Messwertvariabilität und neuere Messwerte, die besser den Teil der Nutzererfahrung widerspiegeln, den Lighthouse zu messen versucht. Darüber hinaus hat Lighthouse auf der Grundlage von Nutzerfeedback auch einige Anpassungen daran vorgenommen, wie stark jeder Messwert in die Gesamtleistung fließt.
Lighthouse hat außerdem einen Bewertungsrechner hinzugefügt, mit dem Sie die Leistungsbewertung der Version 5 mit einem Vergleich zwischen Version 5 und 6 vergleichen können. Wenn Sie ein Audit mit Lighthouse 6.0 durchführen, enthält der Bericht einen Link zum Rechner mit den Ergebnissen.
Außerdem wurden in Lighthouse eine Reihe neuer Prüfungen mit Schwerpunkt auf der JavaScript-Analyse und Barrierefreiheit hinzugefügt.
Weitere Informationen zu Geschwindigkeitstools
Mehr dazu
Vielen Dank an alle Mitglieder der Community, die uns dabei geholfen haben, über die Chancen und Herausforderungen der Webplattform zu sprechen.
In diesem Beitrag haben wir einige der Highlights des Events zusammengefasst. Es gab jedoch noch so viel mehr. Sieh dir auf jeden Fall alle Sitzungen an und abonniere den web.dev-Newsletter, wenn du mehr Inhalte direkt per E-Mail erhalten möchtest. Im Abschnitt Regionale Ereignisse auf web.dev/live finden Sie außerdem anstehende Community-Veranstaltungen in Ihrer Zeitzone.