A summary of the top news and updates that were announced during our 3-day online community event and a reminder about upcoming regional events.
We just wrapped up our three-day event, web.dev LIVE, where some members of the web community came together online to discuss the state of web development. We started each day in a different regional time zone, and Google employees shared a round of updates, news, and tips in the spirit of helping developers with tools and guidance to keep the Web stable, powerful, and accessible.
If part of the live feed was missed, all sessions are recorded and available for you to view on YouTube. We also have upcoming regional events around the world that are hosted by Google Developer Groups and will offer in-depth analysis sessions on topics related to what we cover during web.dev LIVE.
Let's take a look at some of the news and updates that were shared over the three days.
Vitals web
The Chrome Team
Announced the Web Vitals initiative to provide unified guidance, metrics, and tools to help developers deliver great user experiences on the web. Google search team too recently announced They will evaluate the experience of the page as a ranking criterion and include Core Web Vitals metrics as a basis.
The three pillars of 2020 Core Web Vitals are page content load, interactivity, and visual stability, which are captured by the following metrics:
- Paint with Largest Content measures perceived loading speed and marks the point on the page loading timeline when a page's main content is likely to have loaded.
- First Input Delay measures responsiveness and quantifies the experience users feel when they first try to interact with a page.
- Cumulative layout change measures visual stability and quantifies the amount of unexpected movement of the content on the page.
At web.dev LIVE, we share best practices on how to optimize for Core Web Vitals and how to use Chrome DevTools to explore the core values of your site. We also share many other performance related talks that you can find at web.dev/live on the Day 1 calendar.
Developing for a platform as broad as the web can be challenging. Build tools are often at the heart of your web development project, assuming a key role in managing your developer and product lifecycle.
We've all seen unwieldy build configuration files, to help web developers and Tool authors conquer the complexity of the web, we created tooling.report. It's a website that helps you choose the right build tool for your next project, decide whether it's worth migrating from one tool to another, or figure out how to incorporate best practices into your code base and tool setup.
We designed a set of tests to determine which build tools allow you to follow web development best practices. We work with the authors of the construction tools to ensure that we use their tools correctly and represent them fairly.
The initial version of tooling.report covers webpack v4, Rollup v2, Parcel v2, and Browserify with Gulp, which seem to be the most popular build tools at the moment. We created tooling.report with the flexibility to add more compilation tools and additional testing with the help of the community.
If we are missing a best practice that should be tried, propose it in a GitHub issue. If you are ready to write a test or add a new tool that we did not include in the initial set, we invite you to
contribute!
In the meantime, you can read more about our approach to creating tooling.report and view our session from web.dev LIVE.
Privacy and security on the web
Chrome believes in an open web that respects user privacy and maintains key use cases that make the web work for everyone.
In 2019, Chrome
proposed an update to the cookie standard to restrict cookies to first-party contexts by default and require cookies for third-party contexts to be explicitly marked as such. Specifically, this provides a line of defense against cross-site request forgery attacks. The proposal is now being adopted by Chrome, Firefox, Edge, and other browsers.
While Chrome decided temporary reversal These changes in light of COVID-19, sadly during a crisis when people are most vulnerable, these types of attacks are also seen to increase. So with the stable version of Chrome 84 (mid July 2020), the changes
start to unfold again in all versions of Chrome from 80 onwards. See the SameSite cookie guide as well as the LIVE session of web.dev for more information.
Furthermore, under the banner of the Privacy Sandbox Chrome is putting forward a series of standards proposals that aim to support use cases that allow people to earn a living using the web platform, but to do so in a way that better respects user privacy. Chrome actively seeks feedback on these proposals and participates in the W3C open forums to discuss the proposals as well as those submitted by other parties. Learn more about this initiative in the Security and privacy for the open web session.
Finally, looking at user safety, Spectrum it was a vulnerability that meant that malicious code running in a browser process could read any data associated with that process even if it is from a different source. One of the browser mitigations for this is site isolation, that is, putting each site in a separate process. Watch the LIVE session of web.dev on the
New cross-origin opening and embedding policies (COOP and COEP) for more information.
Building a website with powerful capabilities
Chrome wants you to have the freedom to create the highest quality web applications that provide the greatest reach to users on all devices. Combining the installability and reliability of PWAs, with the capabilities project (Project Fugu), Chrome focuses on three things to bridge the gap between native and web, to help you create and deliver great experiences.
First, the Chrome teams have been working hard to give web developers and users more control over the install experience, adding an install promotion to the omnibox, and more. Despite the ubiquity of the web, it is still important for some businesses to have their app in the store. To help, Chrome released
Bubble wrap, a library and CLI that make it trivial to bring your PWA to the Play Store. In fact, PWABuilder.com now use Bubblewrap under the hood. With just a few clicks of the mouse, you can generate an APK and upload your PWA to the Play Store, as long as you meet the requirements
criteria.
Second, Chrome provides tighter integration with the operating system, such as the ability to share a photo, song, or whatever by invoking the system-level sharing service with the Web Share API, or the ability to receive content when shared from a different site. installed application. You can keep users updated or subtly notify them of new activity with the app ID. Additionally, it's now easier for users to quickly launch an action using App Shortcuts, coming to Chrome 84 (Mid-July 2020).
And finally, Chrome has been working on new capabilities that enable new scenarios that were not possible before, such as editors that read and write files on the user's local file system, or get the list of locally installed fonts for users to use. . in their designs.
During web.dev LIVE, we talked about many other capabilities and features that can allow you to offer the same type of experience, with the same capabilities, as native applications. See all sessions at web.dev/live in the Day 2 program.
Chrome Devtools - New Issues Tab, Color Gap Emulator, and Web Vitals Support
One of the most powerful features of Chrome DevTools is its ability to detect problems on a web page and get the developer's attention. This is more pertinent as we move into the next phase of a
web that prioritizes privacy. To reduce notification fatigue and console clutter, Chrome DevTools released the Problems tab which focuses on three types of critical issues to get you started: cookie issues,
mixed contentand COEP issues. See the LIVE session of web.dev at find and fix problems with the Problems tab To get started.
Additionally, with Core Web Vitals becoming one of the most important sets of metrics for web developers to track and measure, DevTools wants to ensure that developers can easily track how they are performing relative to these thresholds. So these three metrics are now in the Performance dashboard of Chrome DevTools.
And finally, with a growing number of developers focusing on accessibility, DevTools also introduced a color vision deficiency emulator that allows developers to emulate blurred vision and other types of visual impairments. You can learn more about this and many other features in the What's new in DevTools session.
Lighthouse 6.0 - New Metrics, Core Web Vitals Lab Measurements, Updated Performance Score, and New Audits
Lighthouse is an open source automated tool that helps developers improve the performance of their site. In its latest version, the Lighthouse team focused on providing metric-based insights that give you a balanced view of the quality of your user experience against critical dimensions.
To ensure consistency, Lighthouse added support for Core Web Vitals: LCP, TBT (a proxy for FID since Lighthouse is a lab tool and FID can only be measured in the field) and CLS. Lighthouse also removed three old metrics: First Significant Paint, First CPU Idle, and Maximum Potential FIDs. These eliminations are due to considerations such as metric variability and newer metrics that provide better reflections of the part of the user experience that Lighthouse is trying to measure. Additionally, Lighthouse also made some adjustments to the number of factors for each metric in the overall performance score based on user feedback.
Lighthouse also added a score calculator to help you explore your performance score by providing a comparison between version 5 and 6 scores. When you run an audit with Lighthouse 6.0, the report comes with a link to the calculator with your complete results.
And finally, Lighthouse added a bunch of new audits, with a focus on JavaScript parsing and accessibility.
Learn more by watching the What's new in speed tools
session.
Learn more
Thanks to all the community members who joined us to discuss the opportunities and challenges of the web platform.
This post summarized some of the highlights of the event, but there was so much more. Be sure to review all sessions and subscribe to the web.dev newsletter if you want to receive more content directly to your inbox. And visit the Regional Events section at web.dev/live to find an upcoming community event in your time zone!
