「Chrome Tech Talk Night #12 ~ #perfmatters」に参加してきました

勉強会メモ
  • Chrome Tech Talk Night #12 ~ #perfmattersに参加してきました。

events.withgoogle.com

タイトル 発表者
Introduction to Performance APIs Shogo Sensui (@1000ch), Merpay, Inc.
Start Performance Budget Shunya Shishido (@sisidovski), Google
Tools for Performance Budgeting Katie Hempenius (@katiehempenius), Google

Introduction to Performance APIs

  • Shogo Sensui (@1000ch), Merpay, Inc.

Lazy Loading

Intersection Observer

  • viewport内に入ってるかどうか検知できる
    • 検知してから(必要になった時点で)読み込む
  • Webkitにも入った(safari!)

Intersection Observer v2

  • 表示されてるかどうかまでチェックできる

Browser native lazy-loading

  • ブラウザの機能ででlazy load
  • lazyload=onという属性
    • imgとかiframeにつけられる

Prefetch

Priority Hints

  • 並列で通信処理するときの優先度の指定
  • importance属性でつける
  • fetchのオプションでもしていできる

Resource Hints

  • ブラウザが暇してるときに読み込んでおく
    • ページを読み込み終わった後の次になにするかにフォーカスしてる機能
  • DNS Prefetch
  • Preconnect
  • Prefetch
    • quicklink
      • viewportに入ったaタグのリンク先を自動でprefetch
      • ネットワーク状況なんかも見てくれる
    • nuxt v2.4はquicklinkに影響を受けて同じような機能を入れてる
  • Prerender
    • chromeは内部で勝手にやってる

Preload

  • リソースからリソースを読み込むことが多くなってる
  • 順番待ちしないように先に読み込ませるようにする

Web Packaging

  • Signed HTTP Exchanges
    • AMPのURLがgoogleになってしまう問題を解決できる
  • Bundled HTTP Exchanges
  • Loading Signed Exchanges

Off The Main Thread

  • 最近のWebは重くなってきてる

Main Thread is busy

  • Loading
    • HTMLとってきて
    • HTMLパースして
    • CSSとってきて
    • CSSパースして
    • Eval heavy JavaScript
    • .....
  • Runtime

Performance metrics are changing

  • サーバサイドだけでなくクライアントサイドの指標も見るようになってきた

DOM manipulation is heavy

  • Virtual DOM
    • 最小限のdiff patch
  • Virtual DOMのdiffアルゴリズム重い
  • Split DOM manipulation
    • React Suspense
    • use requestIdleCallback
    • workerでDOMを処理とか

Off The Main Thread(inner browser)

  • ブラウザの中の処理をメインスレッド使わないように
    • V8の中でやってたり
  • Worklet

Off The Main Thread(web page land)

postMessageが使いづらい

Start Performance Budget

  • Shunya Shishido (@sisidovski), Google

Speed equals Revenue

  • スピードは収益につながる
  • モバイルブラウザだと顕著

Performance Budgetの事例

Pinterest

  • Budget
    • < 200kb JS
  • 結果
    • 44% Revenue

Tinder

  • Budget
    • < 160kb JS
    • <50kb lazy loaded JS
  • 結果
    • TTI = 6s(3G)

なぜパフォーマンスは悪化するか

  • Webはモバイルにおいては遅くなっている
  • リソースのサイズが大きくなってきている
  • チームにパフォーマンス改善の経験がない
  • 仕組みで解決せずに一時的な解決策になっている
  • 継続的なモニタリングをしていない
  • 変化に対する抵抗感

ビジネスとパフォーマンスのバランス

  • 会話の土台としてPerformance Budget
  • 開発者だけでなく周りを巻き込んでいかないといけない
  • 技術でなくビジネス上の課題を解決することを考える

Introducing Performance Budget

  • パフォーマンスの要件の閾値
  • Budgetの範囲内でよいUXを提供していく

Performance Budgetのメトリクス

Budgetの計算の仕方

  • サイトの特性によって変わってくる
  • 2つの方向性で考えると良い
    • Budgets
    • Goals

Budgets

  • いきなりゴールを目指すのは難しいので現実的な値を設定する
  • Budgetに収まった状態で改善を進められると良い

Goals

  • 最終的に目指したい値
    • 現状との比較
    • 競合との比較

20%ルール

  • 20%以上差があると違いを認知できる
  • 競合と比較して20%差をつけられると利用者にも認知してもらえる

ネットワーク

  • 日本では90%が4Gで10%が3Gというデータ
    • 日本向けなら4Gをターゲットとするとよい

3rdパーティスクリプト

  • 3rdパーティスクリプトのサイズも考慮する
    • それを含めてどれくらいのbudgetが残されているかを見る

Performance Budgetの運用

  • 開発に入る前の段階からパフォーマンスについて考えておくべき
  • Budgetが超過したらどうするか？
    • 既存機能を改善
    • 古い機能をを削る
    • 新しい機能を追加しない
  • 開発者だけでなくステークホルダーも含めて考える
  • モニタリングツールは必須
    • 定期的なメトリクスの取得
    • 競合との比較
    • 通知
    • SpeedCurveがいい
  • SpeedDemon
    • 無料なのがいい

Tools for Performance Budgeting

  • Katie Hempenius (@katiehempenius), Google

Understanding Performance Budget toolts

  • Performance Budget = Performance Goals
  • 計測 + CI and/or 通知

Lab Data vs Field Data

  • Lab Data
    • simulated users
    • 例えばlighthouse
    • 開発中に見える
  • Field Data
    • actial users
    • 例えばGoogleAnalytics
    • リリース後に見える

Timing metrics

  • Timing metricsは分散しがち
    • maxとかmedianとか見ていく

Resource based metrics

  • devtoolsで見れる
    • request count
    • request size
  • js/css等どこがボトルネック化見れるといい
  • JavaScript is expensive
    • parse
    • compile
    • excute
  • 27%のサイトは90-99%が3rdパーティコンテンツ

Score based budget

  • 計測ツールを使う
    • lighthouse
    • WebPageTest
  • わかりやすい
  • budgetを設定しやすい

Using Performance Budget tools

bundlesize

webpack

  • hints: 'error'
  • maxEntryoiuntSizeの設定
  • maxAssetSizeの設定

Lighthouse

Google Analytics

PageSpeedd Insights(API & Website)

  • Lighthouse + Chrome User Experience
    • => Lab Data + Field Data
  • First Input Delay(FID)