Chrome Dev Summit 2020の覚え書き • Yurikago Blog

Chrome Dev Summit 2020 のセッションの中で印象に残った箇所をメモとして残します。

速度計測ツールの最新情報

Dec 10 3:30 am State of speed tooling

Core Web VitalsとLighthouseスコアの関係性は？
- Core Web Vitalsはユーザーに良い体験を提供するため最低限必要な投資
Lighthouseのパフォーマンススコアは各指標に異なる重み付けがされている
- LCPとTBTは25%、CLSは5%
- 詳細はLighthouse Scoring Calculatorで確認できる※

※TBTのようにウェイトが大きい指標を改善をした方がスコアは上がりやすいということ？

動画では、Lighthouseのラボデータに表示される各スコアを「メトリクス」、改善できる項目や診断で指摘される内容を「オーディット」と呼んでいた。

参考: https://googlechrome.github.io/lighthouse/scorecalc/

よくあるWeb Vitalsの問題の解決方法

Dec 10 3:40 am Fixing common Web Vitals issues

レイアウトシフトのデバッグツール
- DevToolsのLayout Shift Regions
  1. Ctrl+Shift+Pで”render”と入力、Show Renderingを選択
  2. RenderingタブのLayout Shift Regionsをチェックする
  3. ページをリロードするとレイアウトシフトの発生箇所が一時的に青色で表示される

Core Web Vitalsに最適化したUXパターン

Dec 10 3:50 am UX patterns optimized for Core Web Vitals

UXの質を測る指標として3つの問いを考える
- Loading実際に読み込んでいるか
- Interactivityレスポンスが良いか
- Visual Stability快適な表示か
これらの問いに関連するCore Web Vitalsの指標
- Loading => LCP
- Interactivity => FID (First Input Delay)
- Visual Stability => CLS
Googleが何百万ページを対象に調査したところ、サイトがCore Web Vitalsのしきい値を満たしていれば、最初のコンテンツが描画される前にユーザーがページから離脱する確率が24%低くなる

Core Web Vitalsの未来

Dec 10 4:00 am Exploring the future of Core Web Vitals

LCP = メインのコンテンツが最終的に可視化されるまでの時間
FCP
- Core Web Vitalsの1つとして追加することを検討中
FID (First Input Delay) = ユーザーがクリック、タップ、キー入力のいずれかを行ってからブラウザがその入力処理を開始するまでの時間
- メインスレッドがビジー状態になったことから発生する遅延をキャプチャしている
今後のアップデート
- Core Web Vitalsを拡張したい
- UX以外のセキュリティ、プライバシー、ユーザー補助などを指標として加えたい

Core Web VitalsとSEO

Dec 10 4:15 am Core Web Vitals and SEO

Googleはフィールドデータとラボテストデータを区別する
- フィールドデータ
  - リアルユーザーメトリクスor RUMデータとも呼ばれており、約1ヶ月をかけてユーザーから収集している
  - CrUX（Chromeユーザーエクスペリエンスレポート）の一部
- ラボテストデータ
  - ブラウザのテストツールを使用してオンデマンドで生成する、またはユーザーの体験に近づけた設定を使用してサーバーで生成する
ページエクスペリエンスのランキング要素
- Core Web Vitals
- Mobile-friendliness
- Safe-Browsing
- HTTPS
- No intrusive interstitials
Core Web Vitalsをサーチコンソールで確認できるようになる
一般的にサイトで優れたページエクスペリエンスを提供すればユーザーに良い影響を与えることが分かっている
- ユーザーがページ読み込みを中断する割合は全体で24%低くなる
- ニュースサイトでは22%、ショッピングサイトでは24%低くなる

新機能による高速化

Dec 10 4:25 am Beyond fast

CSSプロパティ
- content-visibilityとcontain-intrinsic-size
  - ページを読み込むときブラウザはビューポート内の要素のみ描画しようとする
  - ただし以下のようなケースがあるので、要素のサイズと位置を決めるときに全ての要素のレイアウトを分かっている必要がある
    - ドキュメントの最後の要素をページの一番上に表示する場合
    - 複雑な入れ子の要素を全ての親要素の外に配置する場合
  - コンテナにcontent-visibilityを指定すると、ビューポートの外にある限りコンテナの子要素のレイアウトをスキップする
  - ただしレイアウトをスキップするとコンテナの高さが制限されるのでcontain-intrinsic-sizeを指定して要素の「フォールバックコンテンツサイズ」を設定する※
  - HTML Living Standardでテストしたところ、レイアウト時間は50sから400msに短縮された
  - これらのプロパティはChrome 85から対応しており、使用しても他のブラウザに支障はない
- font metrics override descriptions (f-mod)
  - フォントを適用したテキストのサイズがブラウザによって違うことがある問題を解決する機能
  - ascent-override, descent-override, line-gap-overrideを指定してフォントサイズを設定する
  - Web Vitalsとどういう関係がある？
    - フォントの切り替え時にレイアウトが大幅に変わる可能性がある
    - f-modを指定することでフォントの交換によるレイアウトの変更を減らすことができる
  - Chrome 87から対応
preload, prefetch
- コンテンツのプリフェッチを自動化するライブラリquicklink
- quicklinkの事例（Newegg）
  - CV数 = 50%増加
  - ページナビーゲーション速度 = 4倍

※動画中では言及されていなかったがCLSが発生しないようコンテナの高さを指定している？

参考: https://html.spec.whatwg.org/multipage/

Chrome DevToolsの新機能

Dec 11 2:39 am What’s new in DevTools?

CSSグリッドのデバッグに対応
- Elementsパネルにgridバッジが追加され、グリッド要素の横に表示される
- Layoutペインでオーバーレイをカスタマイズできる
Idle Detection API
- 非アクティブなユーザーを検出してアイドル状態の変化に反応できる
- 画面ロック時にプロモーションのスライドショーを表示しやすくなる
ローカルフォント無効化のシミュレーション
メディアクエリのエミュレート (prefers-reduced-data)
Elementsパネルの機能強化
- JSフレームワークのCSSやCSS Object Model APIで作成したスタイルをStylesペインで編集できるようになった
  - 作成済みのスタイルは編集できない
- 要素を右クリックしてCapture node screenshotでスクリーンショットを取得できる
ユーザー補助機能の強化
- Inspect Modeのツールチップに表示されるユーザー補助情報が増えた
- Emulate vision deficiencies
  - 4つの異なるタイプの色覚特性をエミュレートできる
- CSS Overviewパネル
  - ページ内で色のいコントラスト比が低いテキストをすべて特定できる
パネルとタブの刷新
- Issuesタブの導入
  - サイトに問題があるとコンソールにメッセージが表示される
  - 影響するリリースや修正方法のガイダンスがIssuesタブに表示される
- Web Authentication APIのデバッグ
  - WebAuthnタブでバーチャル認証機を作成できる

HoudiniでCSSを拡張する

Dec 11 2:50 am Extending CSS with Houdini

Houdini
- 低レベルブラウザAPIの総称
- ブラウザのレンダリング、エンジンのスタイリング・レイアウトプロセスにフックすることで実現している
ワークレットのリソース houdini.how
Paint Polyfillがあるのでネイティブ実装の状況によらずクロスブラウザで機能する