YouTube 影片連結: https://youtu.be/RFNP_qbMa2o

1. July 23th, 2020 @GDG Taichung

2. web.dev LIVE Extended @GDG Taichung
Web Ecosystem Consultant, Google
Irene Chang

3. web.dev LIVE Extended @GDG Taichung
15 mins
15 mins
15 mins
15 mins
Web Vitals
● What’s Web Vitals
● Page experience
What’s next?
● Tooling
● Vital Loop
What else?
● Tooling.Report
● What’s new in Chrome DevTools
● Web Stories
Q&A

4. web.dev LIVE Extended @GDG Taichung

5. web.dev LIVE Extended @GDG Taichung

6. web.dev LIVE Extended @GDG Taichung
web.dev/covid19

7. web.dev LIVE Extended @GDG Taichung
Web Vitals
An initiative by Google to provide unified guidance for quality signals that,
we believe, are essential to delivering a great user experience on the web.

8. web.dev LIVE Extended @GDG Taichung
Web Vitals
Essential metrics for a healthy site
● Help site owners improve user experiences
● Simplify performance measurement
● Focus on metrics that matter most
● Review metrics on an annual basis

9. web.dev LIVE Extended @GDG Taichung
contentbazaar.co/20160314/pi-way
Visual Stability
Is it delightful?
contentbazaar.co/20160314/pi-way
Loading
Is it happening?
contentbazaar.co/20160314/pi-way
Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco
Interactivity
Is it responsive?
Essential metrics for a healthy site

10. web.dev LIVE Extended @GDG Taichung
Essential metrics for a healthy site
To ensure you're hitting this target for most of your users, a good threshold to measure is
the 75th percentile of page loads, segmented across mobile and desktop devices.
LCP
Largest Contentful Paint
GOOD
NEEDS
IMPROVEMENT
POOR
4.0 sec2.5 sec
Measures Loading Performance
FID
First Input Delay
GOOD
NEEDS
IMPROVEMENT
POOR
100 ms 300 ms
Measures Interactivity
CLS
Cumulative Layout Shift
GOOD
NEEDS
IMPROVEMENT
POOR
0.1 0.25
Measures Visual Stability

11. web.dev LIVE Extended @GDG Taichung
Measures the render time of
the largest content element
(image or block of text) visible
within the viewport.
LCP
GOOD
NEEDS
IMPROVEMENT
POOR
4 sec2.5 sec

12. web.dev LIVE Extended @GDG Taichung
Measures the time from when a
user first interacts with the page
until the time when the browser
is actually able to respond to
that interaction.
FID
GOOD
NEEDS
IMPROVEMENT
POOR
300 ms100 ms

13. web.dev LIVE Extended @GDG Taichung
Measures the sum of all
unexpected layout shifts that
occur throughout the
lifespan of the page
CLS
GOOD
NEEDS
IMPROVEMENT
POOR
0.250.1
0.5
0.25
0.75

14. web.dev LIVE Extended @GDG Taichung
Metrics and APIs
LCP
Measures Loading Performance
web.dev/lcp
FID
Measures Interactivity
web.dev/fid
CLS
Measures Visual Stability
web.dev/cls
Largest Contentful Paint API
wicg.github.io/largest-contentful-paint/
Event Timing API
wicg.github.io/event-timing/
Layout Instability API
wicg.github.io/layout-instability/

15. web.dev LIVE Extended @GDG Taichung
The Science Behind Web Vitals → bit.ly/web-vitals-science
Why these metrics? → bit.ly/web-vitals-science
Why X threshold and P75? → bit.ly/web-vitals-methodology
when a site meets the above
(Core Web Vitals) thresholds, users are 24% less
likely to abandon page loads

16. web.dev LIVE Extended @GDG Taichung
● Upcoming Search ranking change
that incorporates Web Vitals
● User’s experience on the page
matters, more than ever
● Unifies previous search efforts and
makes it easier for publishers and
site owners to understand and
optimize for
🔗 bit.ly/page-experience

17. web.dev LIVE Extended @GDG Taichung
What’s next?
Tooling and beyond

18. web.dev LIVE Extended @GDG Taichung
LCP, FID, CLS are
R U M metrics
What is RUM?

19. web.dev LIVE Extended @GDG Taichung
Data is from simulated users
● Lighthouse
● WebPageTest
● PageSpeed Insights
Field Data
Data is from actual users
● Chrome User Experience Report
(CrUX)
● Analytics data (e.g. Google
Analytics)
● PageSpeed Insights
Lab Data
How to measure web performance?

20. web.dev LIVE Extended @GDG Taichung
Development Post-LaunchIdea
Easier to isolate variables
Measures performance
experienced by users
Different tools for different stages
Lab Data Field Data

21. web.dev LIVE Extended @GDG Taichung
Core Web Vitals now in your favorite tools
use TBT instead
use TBT instead

22. web.dev LIVE Extended @GDG Taichung
Provides an origin-level report for all Core Web Vitals across country, device,
and connection type dimensions over the last 28 days.
Overview of Google Performance Tools
Use in DevTools to optimize your user experience and ensure
you are setting yourself up for success with Core Web Vitals in the field.
Use to compare your page-level lab and field Core Web
Vitals performance.
Exposes LCP in the performance timeline as well as CLS and TBT when
running a performance trace.
Use Core Web Vitals report for a summary of how your
origins are performing in the field.
Use the to track a page's performance against Core
Web Vitals in real-time.

23. web.dev LIVE Extended @GDG Taichung
or measure on web.dev/measure/
● V6 release
Read more at
web.dev/lighthouse-whats-new-6.0/
● Additional audits,
metrics and scoring
● TBT correlates to FID

24. web.dev LIVE Extended @GDG Taichung
● LCP, CLS and TBT
● Related Nodes

25. web.dev LIVE Extended @GDG Taichung
● New Experience Section

26. web.dev LIVE Extended @GDG Taichung
● Chrome Extension for
local testing
● Now available in
Chrome Web Store:
github.com/GoogleChrome/
web-vitals-extension

27. web.dev LIVE Extended @GDG Taichung
github.com/GoogleChrome/web-vitals
import {getCLS, getFID, getLCP} from 'web-vitals';
getCLS(console.log);
getFID(console.log);
getLCP(console.log)
JS Library to track Core Web Vitals with your Analytics provider.

28. web.dev LIVE Extended @GDG Taichung
github.com/GoogleChrome/web-vitals
import {getCLS, getFID, getLCP} from 'web-vitals';
function sendToAnalytics(metric) {
const body = JSON.stringify(metric);
// Use `navigator.sendBeacon()` if available, falling back to `fetch()`.
(navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) ||
fetch('/analytics', {body, method: 'POST', keepalive: true});
}
getCLS(sendToAnalytics);
getFID(sendToAnalytics);
getLCP(sendToAnalytics);

29. web.dev LIVE Extended @GDG Taichung
● A new API, refreshed CrUX
Dashboard, and field
measurement of your CWV
● CrUX Dashboard:
g.co/chromeuxdash
● CrUX API:
developers.google.com/web/too
ls/chrome-user-experience-repo
rt/api/guides/getting-started

30. web.dev LIVE Extended @GDG Taichung
● Core Web Vitals
CrUX Field data
● Device split level
● URL performance grouped
by URL group
● Read more at
support.google.com/webma
sters/answer/9205520

31. web.dev LIVE Extended @GDG Taichung
developers.google.com/speed/pagespeed/insights/
● PageSpeed Insights and PSI API
● Lab and Field data
● Core Web Vitals with blue ribbon

32. web.dev LIVE Extended @GDG Taichung
Monitor with a dashboard
Try out the new CrUX API and updated CrUX
Dashboard to easily access how well your
origin and URL have performed against Core
Web Vitals in the field over the last 28 days.
Prevent regressions
Use Lighthouse CI to ensure there are no
regressions in Core Web Vitals before you
deploy a change to production.
CI
Get tailored guidance
web.dev/measure can audit your page and
show you a prioritized set of guides and
codelabs for optimization.
Get a site-wide view
Use Search Console's new Core Web
Vitals report to identify groups of pages
that need improvement.
Diagnose issues
Once you've identified pages that need work,
use PageSpeed Insights web app or API to
diagnose lab and field issues on a page.
Optimize locally
Use Lighthouse and Chrome DevTools to
measure Core Web Vitals and get
actionable guidance on exactly what to fix.
Vital Loop

33. web.dev LIVE Extended @GDG Taichung
sitekit.withgoogle.com

35. web.dev LIVE Extended @GDG Taichung
● What's New in Speed Tooling
@egsweeny
● How to Optimize for Web Vitals
@addyosmani
● Mastering the Chrome UX Report on BigQuery
@rick_viscomi
● Core Web Vitals in the DevTools Timeline
@aerotwist and @philwalton
web.dev/live

36. web.dev LIVE Extended @GDG Taichung
What else?
Those you may have missed!

37. web.dev LIVE Extended @GDG Taichung
Experimental projects from the Chrome team
proxx.appsquoosh.app

38. ● Choose the right build tool for
your next project
● Determine whether migrating
to a new build tool is worth it
● Optimize your current build
tool configuration
● Learn more at
github.com/GoogleChromeLabs/tooling.report
bundlers.tooling.report/

40. web.dev LIVE Extended @GDG Taichung

41. web.dev LIVE Extended @GDG Taichung

42. web.dev LIVE Extended @GDG Taichung

43. web.dev LIVE Extended @GDG Taichung

44. web.dev LIVE Extended @GDG Taichung

45. web.dev LIVE Extended @GDG Taichung

46. web.dev LIVE Extended @GDG Taichung

47. web.dev LIVE Extended @GDG Taichung

48. web.dev LIVE Extended @GDG Taichung
Visual storytelling for the open web

49. Introducing
Web Stories

50. StoriesFull screen
portrait
immersive

51. Current
implementations
focus on
ephemerality and
casual creation

52. Our bet: the Stories
format also works for
high-quality,
bite-sized,
informational,
non-social
content

53. More
engaging than
a text article
Stories are
cheaper to make
than video

54. Your
Stories
Hosted
on your
server
Making
your own
money,
As
ephemeral
as you want
Driving
traffic to
your site

56. WEB STORIES
for WordPress
Get it at
goo.gle/storyeditor

57. web.dev LIVE Extended @GDG Taichung
amp.dev/about/stories

58. web.dev LIVE Extended @GDG Taichung
Questions?

59. Proprietary + Confidential
web.dev LIVE Extended @GDG Taichung
More sessions are available at
web.dev/live