Chrome dev summit 2020 빠르게 훑기
· 약 11분
Performance (특히 CLS)와 Privacy 가 행사 전반에 녹아있었다. 가장 중요했던 건 이제 Web Vitals 수치가 SEO 에 반영이 된다는 것이다.
State of speed tooling
- Lighthouse 지표가 올해 리뉴얼 되었는데 FCP, TBT, CLS 지표를 주로 보면 된다.
- 이 값이 Core Web Vitals 지표로 사용된다.
- 실험실 데이터와 필드 데이터가 있는데, 실험실 데이터로 향상을 시킨 뒤 필드 데이터로 확인하면 된다.
- Third party 에 대한 측정도 추가되었다.
- Thrid party facades 를 통해 iframe 등도 lazy load 해야한다.
Fixing common Web Vitals issues
- CLS를 측정하고 개선하는 방안에 대해 설명하였다.
- GoogleChrome/web-vitals 로 측정해라.
- LayoutShiftAttribution API
const connection = navigator.connection.effectiveType;
const { width, height } = window.screen;
const debugInfo = { connection, widght, height };
sendToAnalytics({ cls, debugInfo });
// Ohter sources of info:
// window.scrollY
// LayoutShiftAttribution (part of the Layout Instability API)
// Debugging info specific to your app (e.g. tokens)
UX patterns optimized for Core Web Vitals
- Placeholder 를 놓아 CLS 를 막아야한다는 내용이였다.
- Click 해서 내용이 추가되는 경우도 마찬가지이다.