June 30 — July 2, 2020
June 30 — July 2, 2020
web.dev LIVE is now over but you can watch the videos from all three days here, go through the top community questions or join one of the live regional events being hosted by Google Developer Groups across the world!
On day 1, we kick things off by sharing why we are coming together as a community, including a guest speaker from CA.gov. We'll then cover some of the key updates made to the platform around performance, security and privacy, as well as a look at build tools and rich content.
Special Guest: Aaron Hans, Tech lead, CA.Gov
Our understanding of how to effectively measure and optimize a users' experience is continually evolving, and we keep our metrics and tooling updated to reflect the latest in our learnings. This talk will cover where to measure your Core Web Vitals in the lab and in the field, as well as how to leverage the newest features and products to build and maintain exceptionally fast experiences for all of your users.
In this hands-on talk, we'll cover tips & tricks for optimizing your user-experience to meet the Core Web Vitals. We'll use tools like Lighthouse & DevTools, show you code snippets for fixes and highlight how you too can get fast and stay fast.
Optimizing for quality of user experience is key to the long-term success of any site on the web. Whether you're a business owner, marketer, or developer, Core Web Vitals can help you quantify the experience of your site and identify opportunities to improve.
There is so much information in the Chrome UX Report dataset on BigQuery, it could feel overwhelming at first. We've been hard at work making sure that the treasure trove of web transparency data is accessible to every developer. Learn how to query the Chrome UX Report using our new summary datasets and shortcut functions, so you can extract insights quickly and cheaply like a pro.
The Core Web Vitals are a great way to assess the UX impact of page load performance. In this talk we'll cover what the vitals are, where they came from, and how you can use Chrome's DevTools to explore your site or app's vitals values.
For more on Core Web Vitals check out https://web.dev/vitals/
On day 2, we travel virtually to an EMEA friendly timezone and welcome all developers who can join us real time. We'll dive into the top pain points and how we are looking to address them, the state of CSS and layout, and the latest on developers tools that you use every day, including some very special guests from Mozilla to share their own updates.
Let's take a look at the latest and greatest features in Chrome's DevTools. We'll cover how you can use the Performance Panel to assess your page load metrics, how you can locate issues with your pages, debug your Web Assembly, and even emulate color vision deficiencies.
Increase the reach of your Progressive Web App by using it as an Android app. In this session you will learn about Bubblewrap, a new tool that developers can use to transform their PWAs into an Android application, without having to learn Android code or tooling. You’ll watch us to transform an existing PWA into an Android app from start to finish, in just a few minutes.
Learn best practices for combining different installation offerings to increase installation rates and avoid platform competition and cannibalization.
In this talk, we will show at the example of a greeting card web application how new and upcoming browser capabilities can progressively enhance this application so that it remains useful on all modern browsers, but delivers an advanced experience on browsers that support capabilities like file system access, system clipboard access, contacts retrieval, periodic background sync, screen wake lock, sharing features, and many more.
After the talk, developers will have a solid understanding of how to progressively enhance their web applications with new browser features, all while not putting a download burden on the subset of their users that happen to be on incompatible browsers, and, most importantly, while not excluding them from using the web application in the first place.
Learn advanced PWA recipes that combine several modern web APIs, and how companies are using them to create app-like experiences on their sites.
In this session we’ll introduce new features for installed PWAs, including capabilities previously reserved for iOS/Android apps. You’ll learn approaches for building better PWAs, including Play apps that use PWAs. Finally, we’ll answer frequently asked developer questions about the design and future of PWAs.
Notifications on the web help users receive important updates for a wide range of applications including messaging, calendars, email clients, ride sharing, social media and delivery services. Unfortunately, notifications are also used for abusive purposes. Browser notifications can be used to spam, mislead, show ads, phish or promote malware.
This year we’ve made major changes in Chrome to reduce abuse of notifications and create a safer, better web browsing experience for Chrome users. This session will review the recent changes, demo techniques for improving your website’s use of notifications and discuss the future of notifications on the web.
How should we be storing data and caching our critical app resources on the client? Is IndexedDB still the best option? What about Local Storage? Let's dive into web storage to learn about the best way to store data in the browser, how much you can safely store, how to check your quota, how browser eviction works, how you can start Chrome with limited storage to test quota exceeded errors, and more.
Now more than ever, having a dependable and performant video chat connection to your friends and family is critical. The Chrome team has been collaborating with Zoom over the past few months to explore advanced new APIs that will allow for a dramatically improved web experience.
Day 3 will have us move to the Asia and Australia continents where we we will get insights from Evan You, the founder of Vue.js, share the latest on PWA and new capabilities that allow you to build rich web applications, and show how you can understand your applications deeply through the latest updates to Lighthouse.
Special guest: Evan You, Vue.js
Build tools are an integral part of modern web development, making it possible to build great apps that are bandwidth-friendly and delivered as-needed. However, it's surprisingly difficult to choose and configure build tools in a way that produces consistent and good results. We're often forced to make tradeoff decisions in our tooling, which can stand in the way of delivering the best possible applications on the web.
We developed a guide to help you choose tools which are best suited for your next project with example of how to set one up. Come find out how we defined what's the best tool for a job and how we investigated and tested each one.
In this dynamic talk, Una will go over the power of modern CSS layout techniques by highlighting a few key terms and how much detail can be described in a single line of code. You’ll learn a few layout tricks you can implement in your codebase today, and be able to write entire swaths of layout with just a few lines of code.
It's really common to use a build tool as part of development, but most folks don't think about writing their own plugins, which is totally understandable, as it can be pretty daunting. However, knowing how to write plugins gives you insight into how the build tool works, and makes it easier to debug the rest of your build.
In this session we'll develop the same plugin for both Rollup and webpack, showing the difference between the two systems.
Images are often the biggest assets in a web page, so compressing them well can be a huge saving for users.
There are some rough rules for which image format you should use in a given situation, but this session will dive into why, and explore some of the lesser-known capabilities of popular image formats.
Watch a live coding demo walking through the top principles and tools you can use to make your applications shine when it comes to startup performance and bundle size.
What's the role of the browser in enabling security and privacy by default on the open web? How are browsers changing to balance trade-offs and mitigate risk? How can you get involved?
Cookies really can make everything better! However, you need the right recipes and you shouldn't take too many. Hopefully you've already updated your cookies for the new SameSite changes, but that one change is just a taste of what's possible. Learn about the different cookie attributes and naming conventions that will help you tailor your cookies for the right situation.
Cross-Origin Embedder Policy (COEP) and Cross-Origin Opener Policy (COOP) isolate your origin and enable powerful features. This session helps you understand how it works and why this is important.
Fed up with wading through browser messages in the console?
The Chrome DevTools Issues Panel provides a more structured, actionable approach to deprecations and other warnings from the browser.
This video shows you how to use the Issues Panel to find and fix problems with your website.
User-Agent Client Hints provide a privacy focused approach for sites to request information about the browser that's viewing them. Moving forward from the legacy of the User-Agent string is a challenge, so now is the time to experiment and give feedback.
What's happening with Web Payments? How is it different from Google Pay or Apple Pay? This session demystifies some of the misconceptions developers may have and provides an update on topics around Web Payments.
Q & A
During web.dev LIVE, we were happy to address some very insightful and interesting questions from the community across the globe. Here are some of the top questions asked.
Keep an eye on this space as we add more questions in the coming days.Back to top
Q.Is there a tool to help us quantify LCP, FID, CLS (not in percentiles)?
A.To get your raw LCP, FID and CLS scores, you can look at the Chrome UX Report in BigQuery (for field data) and at Lighthouse (for lab data). You can also use the web-vitals.js library and Web Vitals extension to see individual Core web Vitals in the wild.
Q.Why have we moved to 75th percentile?
A.You can see rationale at https://web.dev/defining-core-web-vitals-thresholds/.
Q.Is it possible to configure the Core Web Vitals metrics thresholds during build time? or as part of your CI process?
A.Core Web Vitals prescribe a specific set of metrics thresholds and percentiles we believe correspond well to user expectations across a range of devices. We encourage using our official thresholds as much as possible. If however, you would like to set custom targets for thresholds (e.g an LCP performance budget of < 3s), this is possible using Lighthouse CI and LightWallet. You can find a more detailed answer on Stackoverflow.
Q.Do Web Vitals metrics get tested against low bandwidth connections too?
A.Chrome UX report, the source for these metrics, reports real user metrics so yes, bandwidth connections are taken into account.
Q.#webdevLIVE how do you get field values and how do you get lab values for core web vitals?
A.For field data you can look at Chrome UX Report data, available in tools like PageSpeed Insights, DataStudio and the CrUX API. For lab data, you can use Lighthouse (either in the Lighthouse panel in DevTools, via the CLI, or in PageSpeed Insights).
Q.Does on-scroll animation give a bad CLS score?
A.The CLS metric excludes layout shifts if there was user input within 500ms of the shift. However, scrolling is not considered "user input" for the purposes of calculating CLS, so scroll-driven animations could give a bad CLS if not implemented properly (e.g. animating/transitioning the `transform` property, which does not cause layout shifts). As always, the best way to know for sure is to test your page and see if your scroll-driven animations are causing an increase in CLS.
Q.What’s the best way to measure responsiveness of an interaction (not just page load)?
A.FID is the best way to measure the responsiveness of the first interaction with a page. For other interactions, Chrome is shipping the Event Timing API in M85 (currently in Chrome Canary), which I'd recommend taking a look at https://www.chromestatus.com/feature/5167290693713920
Q.How long does it take to see changes in field data? I get good lab scores but field data seems the same even though I made major changes.
A.Media field data in these tools is based on the previous 28-day period, so it could take a while changes to show up
Q.Can we also access specific urls rather than only domains with the crux dashboard?
A.The CrUX Dashboard currently only supports origin-level data from the BigQuery dataset.
A.All of the data included in the CrUX dataset is measured directly by Chrome, without any instrumentation on the websites themselves.
Q.How do you implement image width and height for responsive?
A.Two answers here. Ideally, your different sources have the same aspect ratio. For art direction with <picture>, there is work being explored to add width/height to <source> elements.
Q.#webdevLIVE if Search Console shows your CLS as high, but using Page Speed Insights & Lighthouse look great for the example Url, what could be going on?
A.There is some nuance to how PageSpeed Insights (PSI) and Search Console report on Cumulative Layout Shift. The lab portion (Lighthouse) of PSI measures CLS until Lighthouse considers a page fully loaded. Search Console and the field portion of the PSI uses Chrome UX Report data and measures CLS until unload, stopping reporting after pagehidden. What this means is that the reporting you see in different tools can vary based on the window of time we are able to look at. Lab tools like Lighthouse have to define a shorter window because they are focused on the experience during page load and optimize for delivering information about the experience quickly. Field data is able to take a more holistic view of the user-experience, which could include shifts caused after a page has loaded and the user has scrolled down to other interactions contributing to CLS. See the detailed answer here.
Q.Does "reduce initial server response time" audit take into account all API times up until LCP or is it just for the initial navigation?
A."Server response time" is just for the initial navigation of the HTML page.
Q.Any insights on how to optimize page transitions in SPA websites and how to feed crux with page transitions?
A.Measuring SPA navigation performance is something the Chrome metrics team and other teams are actively working on 🙂
Q.What can we do if we see long tasks from Google Analytics OR Doubleclick scripts ? I am sure the respective team knows about this but it hasn't been addressed so far?
A.Yes, sometimes third party scripts (including Google's) will contain long tasks, and we're working with those teams to help them reduce those.
Q.How do you do a fallback for webp in amp-img for Wordpress #webdevLive?
A.The AMP cache does that for you.
Q.You mentioned that web vitals will impact seo rankings. Can you send a link to the announcement?
Q.Can a worker handle input events?
A.You can handle input events on the main thread and then marshall the data to your worker for processing. Workers can't receive input directly.
Q.Is there anything on HTTP Status code w.r.t DevTools that can help us easily to identify in an eye catching way...
A.The Network tab highlights responses with an HTTP status code that indicates an error. The text of affected rows is red. However, you're right: this is not very accessible -- we shouldn't just rely on color to communicate the failure. I've filed https://bugs.chromium.org/p/chromium/issues/detail?id=1101323 to improve the situation.
Q.Can we call OS functionality from PWAs?
A.No, developers only have access to the capabilities of the browser, but we’re working to add new capabilities with our capabilities project.
Q.What was the philosophy behind the Fugu name?
A.Fugu reminds us to respect and protect the user. The fugu fish is a wonderful delicacy, it tastes wonderful. But, if it’s handled improperly it can be deadly. We feel the same way with Fugu features, they open up new scenarios on the web. But if implemented poorly, they could potentially be dangerous.
Q.Is it okay to make the pathname `.well-known/assetlinks.json.` be accsessible publicly?
A.Yes, it needs to be publicly accessible so an Android app can verify it as necessary.
Q.When will we get multi window support?
A.Multi-window support is something we're working on, mostly being led by the team at Microsoft.
Q.Can you give me an API that makes it easier to sync storage.
A.Take a look at Cloud Firestore, it’s an API that provides a sync datastore in the cloud.
Q.How do we drill down long tasks to understand exactly what JS function generated it?
A.You should see JS stacks if you record performance profiles, those should help you drill down.
Q.Can you share an info link for the color vision deficiency emulation in Chrome DevTools?
A.You can find more details at https://developers.google.com/web/updates/2020/03/devtools.
Q.Do we have top level await support on the web yet?
A.Sadly not yet, keep an eye on https://chromestatus.com/features/5767881411264512 for details as it progresses.
Q.What are the best features of service workers?
A.Service Workers let developers intercept their web app's outgoing requests. You can generate responses from caches or other sources, which can be more reliable & faster than going against the network. Read this and many other articles on web.dev to understand their use cases.
Q.How do you add dark mode on your website?
Q.My website sign in page has lots of fields. What is the best way to present them all?
A.Check out https://web.dev/sign-in-form-best-practices/.
Q.Can you make selected context only persist in Chrome Devtools?
A.This behavior has recently been fixed in Chrome DevTools and will be available for developers to use in Chrome M85 (July’20).
Q.Can you export HAR through Puppeteer?
A.No, but there's a userland puppeteer-har implementation that handles this.
Q.Will permission request be improved (customisation and specifying the source of the request)?
A.We don't allow customization of the prompt at the moment. We do recommend, though, to prompt contextually, so the user knows why the prompt shows up.
Q.Any updates on the A2HS button? (Google promised to change it to Install button)
A.On desktop it says install, but on mobile, it is still Add to Home Screen. We want to get this right, and are still investigating what works best for users.
Q.Do you recommend using Workbox instead of coding the SW directly?
A.When first getting started, absolutely. Service Workers are really powerful, and as a result can be very complex. Once you’ve got a handle on some of the complexities, it’s OK to start down your own path.
Q.Are installed PWA's still crawl-able by Googlebot?
A.As long as they are reachable with a public URL, they should be indexable. See Martin Splitt's talks from web.dev LIVE day 1 (Debugging JS SEO issues & Implementing Structured Data with JS) to learn more.
Q.Does AppCache still exist?
A.Yes, but it’s going away very soon! See https://web.dev/appcache-removal/.
Q.Is the Portal tag available now?
A.It's going to origin trial very soon! Check out https://web.dev/hands-on-portals/ for the latest.
Q.Can you please mention what can be used in place of localstorage and Appcache?
A.We recommend Service Workers and IndexedDB.
Q.Do Opaque Responses still have the 7MB padding applied? The Storage Quota becomes really tricky to manage on a large site with lots of third-party requests.
A.Yes, the padding still applies to opaque responses (context: https://stackoverflow.com/questions/39109789/what-limitations-apply-to-opaque-responses/39109790#39109790).
Q.What about storage from PWAs? If say someone wrote important information in a note writing app for long term storage and didn't visit for a long time, does this mean that chrome could evict that?
A.Yes, for that you should request persistent storage.
Q.Do you need service workers to use the Cache API?
A.Typically yes, but you can also use the cache API from a page.
Q.Wouldn't it be more handy if we could emulate a disk limit via DevTools?
A.Yes, absolutely, and it’s coming. Just hasn’t landed yet.
Q.How does Indexed DB work and what are its features?
A.See documentation for IndexedDB on MDN for more.
A.We've got specific details at https://web.dev/storage-for-the-web/.
Missed web.dev LIVE? We’ve got you covered. Thanks to our Google Developer Group communities, we have a ton of live events.Back to top