Zenn
🚥

Chrome Dev Summit 2020 パフォーマンスまとめ①

2020/12/10に公開
Chrome
CoreWebVitals
パフォーマンス改善
tech

この記事は

Chrome Dev Summit 2020 1日目を視聴してこれは！と思ったものをまとめたものです。
Webパフォーマンス関連のみのまとめです。
自分のための覚書として作っているのでここに書いていない情報もあります。
ぜひ本編を視聴してください。（日本語字幕があります）（ありがたい）

セッション

State of speed tooling（スピードツールングの状況）

概要

注目ポイント

ラボデータとフィールドデータの関係、それぞれの存在意義について説明

  • ラボデータを基に最適化をすれば、実際に使うユーザーの過半数を対象に最適化を行うことができる

Lighthouseスコア中のCLSの重み付けが大きくなる

  • 十分な検証が完了したとのこと
  • CLSとは？

Lighthouseが最適なファサードを提案する

  • ファサードとは？
    • YouTubeを埋め込む際にYouTubeの埋め込みであることがわかるようなハリボテの画像を用意しておき、
      ユーザーが再生ボタン(に見えるもの)を押してから中身のスクリプトを呼び出すような仕組みのこと。
    • 参考：Lazy load third-party resources with facades

Core Web Vitalsそれぞれの指標のヒントはLighthouseやDevToolsを使うことで得られる

  • レイアウトシフトを起こす4つのアンチパターンをLighthouseが検出するように

動画内の資料

Fixing common Web Vitals issues（よくあるWeb Vitalsの問題を解決する）

概要

  • Web Vitalsの最適化をする際によく立ちはばかる問題について

注目ポイント

CLS

  • CLSはPerfoemanceObserverを使ってレイアウトシフトを測定している
  • CLSの最終スコアは visibillitychange イベント発生 + document.visibilityState が hidden になったタイミングで決定される
    • ページ移動・タブ切り替えなどページが非表示になったタイミング
  • DevToolsのRenderingタブから Layout Shift Regions にチェックを入れるとレイアウトシフト発生箇所がハイライトされる
    Renderingタブ
    • レイアウトシフトの原因となっている箇所がハイライトされるわけではないことに注意
  • ユーザーの入力から500ms以内に発生したレイアウトシフトはCLSとしてカウントされない
  • Lighthouse計測時、ページをスクロールしないため画面下部で起こるレイアウトシフトは検知できない
    • ユーザーの見えていないところで起きるレイアウトシフトはCLSにカウントされないとも捉えられる
  • 一番多いレイアウトシフトの例
    • 画面上部にあとから出現する告知バナー（あるある）

Third-party scripts

  • 画像の遅延読み込み（Lazy Load）同様に外部スクリプトも遅延読み込みが可能
  • setTimeoutでの遅延読み込みはリスクが高い
    • メインスレッドがビジーな時は想定通りのタイミングで実行されない
    • メインスレッドがビジーなら実行しない方がUXに良いと捉えることもできる
  • スクロールを起因にスクリプトを実行する場合はIntersectionObserverを用いることを推奨
    • スクロールイベントは非推奨
  • PerformanceObserverを利用するとFCPなどパフォーマンスイベントの発生を起因に遅延読み込みが可能
  • エンジニアと企画の外部スクリプトに対する認識の違いあるある
    • Google Tag Managerや他社のタグマネージャーではその認識を揃えられるようなツールもあるから活用してねとのこと

Real User Monitoring

  • フィールドデータのモニタリングができるのは以下の3つ
  • PageSpeed InsightsとCrUXでページごとのデータが見れない場合はSearch Consoleが有効
    • グループ化したURLごとのデータを見ることができる
  • より詳しいデータが必要な場合はサイトにweb-vitalsライブラリを仕込み、メトリクスツールに送信すると良い
    • 実装の正しさが証明されているため、Googleのツールで見れる値と一致する

動画内の資料

途中ですが

タイムリーに出したかった+量が多くなったので続きはまた②として書きます。

Discussion