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 해서 내용이 추가되는 경우도 마찬가지이다.
Exploring the future of Core Web Vitals
- Web Vitals Changelogs 확인하고 피드백 주면 좋겠다.
Core Web Vitals and SEO
- 첫째 날의 가장 중요한 섹션이지 않을까 싶다. 21년 5월부터 랭킹에 적용된다.
- Loading, Interactivity, Stability 가 중요하다.
- SEO 에는 필드 데이터를 사용한다.
- Field data: RUM, CrUX 랑 비슷하고, last ~month 사이의 기간동안 측정된 결과이다.
- Lab test data: 테스트 데이터
- Ranking factor 는 위와 같다. Google 검색결과의 페이지 환경 이해를 참조하자.
- Search Console 에서 Core Web Vitals report 데이터를 확인 가능하다.
- 회사명 같은 특정한 경우는 속도가 Ranking factor 에 주는 영향력이 낮지만,
best editor
처럼 여러 검색 결과가 나오는 경우에는 page experience 가 표시에 더 많은 영향을 준다. Great relevant content > Page experience
- Page experience 가 좋으면 유저의 이탈율이 24% 감소한다. (The Science Behind Web Vitals)
Beyond fast
- 동적으로 로드되는 영역에 대해 content-visibility을 줘서 placeholder 를 구현할 수 있다.
.content {
content-visibility: auto;
content-intrinsic-size: 0 500px;
}
- 운영체제와 브라우저에 따라 폰트가 다르게 보이는 것과
swap
폰트 로드로 인해 레이아웃이 변경되는 구조를 막을 수 있다. ascent-override, descent-override, line-gap-override
Chrome87 부터 가능하다.- Back Forward Cache 가 Chrome87 에서 Same Origin 에 대해서도 적용되었다. (November 17, 2020)
- chrome은 strict multi-process architecture 라 적용하는데 좀 걸렸다.
portal
을 18년 소개 후부터 미는데.. 브라우저 지원이 없어서 아직까진 잘 모르겠다.- 포탈을 쓰면 스토리지 제한이 없어서 두 사이트 간 content 공유가 쉽다.
- quicklink 도 짧게 소개했다. newegg 사는 50% 컨버젼 상승과 4x faster navigation 을 달성했다고 한다.
Enable and debug cross-origin isolated
- 헤더가 추가된다.
Cross-Origin-Opener-Policy: same-origin
코옵Cross-Origin-Embedder-Policy: required-corp
코엡
- Why you need "cross-origin isolated" for powerful features 문서와 Demo 참조하는 게 좋다.
- COOP 는 no-openner 속성과 비슷하며 제어하는 위치의 차이이다.
- COEP 는 CORP 와 함께 사용하여 리소스 로드를 제어할 수 있다. 서비스워커보다 상위에서 실행된다.
- 요약하면 아래와 같다.
# 타 도메인 리소스
Cross-Origin-Resource-Policy: cross-origin
# 또는 CORS 열고 img[crossorigin] 추가
# 타 도메인 아이프레인
Cross-Origin-Resource-Policy: cross-origin
# 내 사이트
Cross-Origin-Embedder-Policy: require-corp
Cross-Origin-Opener-Policy: same-origin
# 또는 a[no-openner] 추가
Introducing the Privacy Budget
- 브라우저 fingerprint 를 방지하기 위한 proposal
- Privacy Sandbox
- Less entropy, User-Agent Client Hints 로 개선하여 특정하지 못 하게 할 것이다.
A more private way to measure ad conversions
- 쿠키를 심어서 arbitrary information까지 추적이 가능한 걸 개선하려한다.
conversiondestination, impressiondata, reportingorigin
가 추가된다.- 브라우저 자체에 고유값이 저장되며
chrome://conversion-internals
에서 디버깅 가능하다. - A more private way to measure ad conversions, the Event Conversion Measurement API와 Demo 를 보는 게 이해가 쉬웠다.
Sign-up form best practices
- 한 판을 정리해놓아서 이 것만 보면 된다.
- 이름 검사에 정규식을 사용할 때 유니코드 기반을 사용해야한다.
/[\p{L} ]+/u
- 개인적으로 듣기 제일 좋았다.