Jul 1, 2020
JS:EVENTS — web.dev live Day 1
web.dev live is organized by the google for the entire web developers out there in the universe. The whole event is online and it is for 3 consecutive days.
Day1
Day1 kicked off with the event brief and it had the multiple sessions handled by different people from Chrome Team. My favorite session was Optimize for Core Web Vitals by Addy Osmani
Most of the Day 1 session was about the Web Vitals and CrUX API.
Web Vitals — Essential Metric for a healthy site
Core Web Vitals are the subset of Web Vitals that apply to all web pages, should be measured by all site owners, and will be surfaced across all Google tools.
CLS took over the event and many live questions were shooted and most of the sessions had a talk about the CLS and it plays a major role in the visual stability for the user and web performance on the initial load.
Thank you addy for sharing the techniques on optimization.
These web vitals will be versioned annually with new audits and API.
Optimize for Core Web Vitals by Addy Osmani
CLS — Cumulative Layout Shifts.
When you arrive at the page, the content shifts due to new elements appearing and it causes unintended clicks and is just an annoying experience.
How this can be avoided:
- images/videos/iframes can cause the poor CLS score, to avoid this, each element should specify the size attributes and for img elements, we can specify the aspect ratio.
- avoid inserting new content above the existing content.
- static containers for dynamic content such as iframes, ads, etc.,
- avoid large layout shifts.
- defer the non-critical CSS and JS.
- slow server response time.
- Server Push(needs to be extra cautious)
Analyzing JS Bundles
- Source Map explorer in dev tools.
- Source map support in Lighthouse for the audits.
Web Workers:
workerdom which enables the web workers to update the DOM and it is efficient when it is combined with AMP. This workerdom will always bee in sync with the main page DOM.
Google Search Console:
It is a tool to test your sites google search performance, this provides the report for your entire site.
Rich Results test
Mobile-Friendly test
To know more about Day 1 in detail. Please check the below video.
Visit web.dev/live for today and tomorrow’s session details and timings.
