Chrome dev summit 2020 Performance (특히 CLS)와 Privacy 가 행사 전반에 녹아있었다. 가장 중요했던 건 이제 Web Vitals 수치가 SEO 에 반영이 된다는 것이다.
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 1 2 3 4 5 6 7 8 9 const connection = navigator.connection .effectiveType ;const { width, height } = window .screen ;const debugInfo = { connection, widght, height };sendToAnalytics ({ cls, debugInfo });
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 VIDEO
첫째 날의 가장 중요한 섹션이지 않을까 싶다. 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 를 구현할 수 있다. 1 2 3 4 .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 와 함께 사용하여 리소스 로드를 제어할 수 있다. 서비스워커보다 상위에서 실행된다. 요약하면 아래와 같다. 1 2 3 4 5 6 7 8 9 10 11 Cross-Origin-Resource-Policy: cross-origin Cross-Origin-Resource-Policy: cross-origin Cross-Origin-Embedder-Policy: require-corp Cross-Origin-Opener-Policy: same-origin
Introducing the Privacy Budget 브라우저 fingerprint 를 방지하기 위한 proposalPrivacy 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 를 보는 게 이해가 쉬웠다.한 판 을 정리해놓아서 이 것만 보면 된다.이름 검사에 정규식을 사용할 때 유니코드 기반을 사용해야한다. /[\p{L} ]+/u
개인적으로 듣기 제일 좋았다. 1 2 3 4 5 6 7 <input type ="text" inputmode ="numeric" autocomplete ="one-time-code" pattern ="\d{6}" required >
한 판 을 정리해놓아 이 것만 보면 된다.type="number"
가 아닌 type="text", inputmode="numeric"
을 사용해야한다.OTP 문자 마지막 라인에는 @${bound-domain} #${OTP}
처럼 넣어주면 브라우저에서 파싱이 가능하다. (e.g. @gracefullight.dev #123456
) Web OTP API 를 사용하여 서버에서 바로 받아서 사용할 수도 있다.Gird 지원 추가 Location 변경 기능 추가, Timezone, Language Idle Detection API 추가, Kiosk 에서 비활성화시 사용 가능 Font-face 에서 fallback 을 확인 가능, Disable Local font 추가 animation 수정 가능 element screenshot element hover 시 accessibility 확인 필드 추가 warning 등이 Issues 탭으로 나와서 가이드까지 추가 됨 WebAuthn 탭으로 디버깅 가능 CSS Overview 탭 추가 Media 디버깅 패널 추가 Extending CSS with Houdini Houdini.how 에 Worklet 확인 가능CSS.paintWorklet.addModule
로 바로 가져와서 쓸 수 있다고 강조했다.Static gradient worklet 가 예뻐보였다. emcc 로 c++ 디버깅 옵션을 주면 c++ 소스를 바로 디버깅도 가능하다. 추후 memory inspection, custom formatters, profiling, code coverage 기능을 추가할 예정이다. google map 에 어떤 wasm 기술이 적용되었는지 알려주면 좋을텐데 아쉬웠다. Transitioning to modern JavaScript
모던 자바스크립트는 최신 버전을 말하는 게 아니라, All modern browsers 가 사용할 수 있는 스크립트를 말한다. ES2017
은 유저 중 94% 가 다 사용할 수 있으므로 더 높은 버전 사용시에는 이 버전을 타켓으로 해야한다. (ES2021
은 70%)더 낮은 브라우저에 대한 지원이 필요할 경우 ESnext > ES2017 > ES2015
처럼 ES2017
을 한번 더 말아서 따로 제공해야한다. 필요 없는 코드가 너무 많이 들어가기 때문이다. 달마다 80PB 가 필요없는 레거시 자바스크립트 로드에 사용된다고 한다. EStimator 를 사용하여 어떤 코드를 변경해야할지 확인할 수 있다.Publish, ship, and install modern JavaScript for faster applications Next-level web apps on desktop PWA 로 추가될 내용들이였다. 기능 설명 위주였다. navigator.runOnOsLogin
Window placement window.getScreens(), internal/external
Tabbed application mode & Display override manifest.display_override: "tabbed"
Notification triggers TimestampTrigger
Link capturing manifest.capture_links, manifest.url_handlers
File type handling manifest.file_handlers, launchQueue
Badging (이게 드디어 나온다.) Digital goods API New logic to detect PWA offline support 현재는 오프라인 체크시 서비스워커에 fetch event
가 정의되어있는지만 확인하는데 이제는 offine 시에 200 이 반환되어야한다. chrome88 에서 check-offline-capability
플래그를 활성화하여 테스트 가능하다. chrome89 에서 console.warn 을 발생시킬 것이다. offline.html 파일을 강제시키는 bug fix 느낌이다. What’s new for web apps in Play bubblewrap/cli
사용하여서 TWA 를 만드는 방법PaymentRequest
로 PWA 와 구글 결제 연동 가능Extending Workbox: custom strategies and plugins Workbox v6 이 되면서 Lifecycle hook 과 기존 strategy 를 확장 가능하게 변경되었다. 한 판 을 정리해놓아 이 것만 보면 된다.Structured data for developers Dynamic structred data 가 가능하다. 1 2 3 4 5 6 7 8 9 const s = document .createElement ('script' );s.setAttribute ('type' , 'application/ld+json' ); fetch (`/api/events/structured-data?id=${id} ` ).then ((r ) => r.text ()) .then ((data ) => { s.textContent = data; document .head .appendChild (s); });
테스트는 Rich Results Test 에서 가능하다. schema-dts, react-schemaorg
패키지도 있다.Making the web more visual with Web Stories Web story 를 만드는 방법에 대해 나온다. stories.google 나 Google의 웹 스토리 사용 설정하기 참조하자.nws.ai , wp.stories.google , makestories.io 에서 만들거나 amp story 로 가능하다.구글 검색에도 표시되어서 언젠가는 만들어야할 것 같다. The web ahead
Wasm: The bridge that helps from lagacy application to that better world. Write your code once for all browsers. 원반 언제 다 볼 수 있을까 갈수록 기본기가 중요해지는 것 같다.