dackdive's blog

新米webエンジニアによる技術ブログ。JavaScript(React), Salesforce, Python など

Google I/O'19の「Speed at Scale: Web Performance Tips and Tricks from the Trenches」を観たメモ

途中飛ばしてしまった箇所もありますが、一通り観たのでメモを。

長いので最初にまとめ

動画の最後のスライドにキーワードがまとまってます。

f:id:dackdive:20190604035502p:plain

  • 速くする(Get fast)ための13個のTips
  • 速さを維持する(Stay Fast)ためのTipsとしてPerformance BudgetsおよびLightWallet

が紹介されています。
また、このセッションではパフォーマンス改善の事例が多数紹介されています。

f:id:dackdive:20190604035551p:plain


Performance Budgets

  • パフォーマンスを維持するためのしくみ
    • 予算を管理するように守るべきパフォーマンス指標を設定できる
  • Performance Budgetsでできること
    • Time (TTI ◯秒以下)
    • Resources (JSは◯KB以下)
    • Lighthouse (スコア◯点以上)

f:id:dackdive:20190604035618p:plain

  • Budgetsすなわち予算を設定することで、shipする前にパフォーマンスの問題に気づける
  • 事例: Walmart Grocely
    • PR時にチェックし、バンドルサイズが1%以上増加するとPRは失敗、Issue登録されPerformance Engineerにエスカレーションされる


LightWallet

  • Webサイトのパフォーマンス測定ツールであるLighthouseでPerformance Budgetsをサポート
  • CLI版のLighthouseで使える
    • Lighthouse自体はCLI版とChrome拡張版がある
$ npm i -g lighthouse
$ lighthouse https://example.com --budgetPath budgets.json --chrome-flags="--window-size=1280,660" --view

🤔時間系のBudgetsは指定できない?


画像

Lazy Loading
  • JSのライブラリを使った例だと、こんな書き方をすることが多い
    • LazySizesやReact Lazy Loadなど
<img data-src="images/unicorn.jpg" class="lazyload">
  • 事例: chrome.com サイト
    • 20% Faster page load times (mobile)
    • 26% Faster page laod times (desktop, Windows)
    • 画像サイズに関してはページ初回ロード(initial page)で46%の削減に成功
  • 事例: Netflix

    • たくさんの動画がタイル状に並んだページ
    • 初期描画では最初に見える数行分の画像のみロードし、残りはlazy load
    • ページ全体で4.4MBの画像があるのを、初期描画では1.2MBに抑えることができた
    • メモリだと45MB(Full Page Load) -> 8MB(Initial Page State)
  • ブラウザのAPIで画像のlazy loadをサポート(comming to Chrome this summer.)

    • iframeも
<img loading=eager>
<img loading=lazy>


Responsive Images
<!-- By width -->
<img src="cat.jpg"
  srcset="cat-240.jpg 240w,
          cat-480.jpg 480w,
          cat-960.jpg 960w>


Images CDNs
  • image optimization as a service
    • Cloudinary, Imgix, Thumborなど

f:id:dackdive:20190604035824p:plain

  • 事例: Trivago
    • Image CDNとしてCloudinaryを採用
    • Image CDNを利用することにより、自社のエンジニアはコアビジネスに集中できた
    • 全体の画像サイズを80%削減
  • 日本の事例もいくつか(一休、ANA)

f:id:dackdive:20190604035910p:plain

JavaScript

Defer Third-Party JavaScript
  • third-partyのコードはJS実行時間の57%を占める
  • 事例:Telegraph
    • JSをすべて(third-partyだけでなく自社のものも含め)deferして描画を3s高速化した
  • ref. asyncdeferの違いについては \<script> タグに async / defer を付けた場合のタイミング - Qiita
    • deferはJSの実行順序を保証してくれる
  • 事例: chrome.com
    • トップページに埋め込んでいたYouTube動画をlazy loadしたところTTIで10sの高速化


Remove Expensive Libraries
  • moment.js, jQuery, Bootstrapのようなサイズの大きいライブラリをリプレイスする
    • 例: lodash -> lodash-es, momentjs -> date-fns
    • サイズが小さいことに加え、Tree-shakeableなライブラリを選ぶのも重要
  • 事例: Tokopedia
    • ランディングページをSvelteでリライトした
    • 新バージョンはabove-the-fold contentの描画に必要なJSは37KB
    • Reactで作成した現行バージョンは320KB
    • ランディングページ以外はReactのまま。Service Workerを使ってprecache
  • Update dependencies
    • 事例: Zalando (ヨーロッパのfashion retailer)
      • Reactを15.6.1 -> 16.2.0に上げただけでload timeが100ms向上した
  • Code-splitting


Critical CSS

  • Critical CSS: above-the-fold contentの描画に必要なCSS
  • ドキュメントにインラインで埋め込むべき。14KB以下
  • 事例: TUI (ヨーロッパの旅行サイト)
    • First Contentful Paintの描画を2.4s -> 1.2sに短縮
  • 事例: 日経
    • Critical CSSが300KBもあった
    • シチュエーション(ユーザーがログイン状態か、など)に応じた適切なCritical CSSを返すサーバーを構築
    • ESI: Edge Side Inclusion