途中飛ばしてしまった箇所もありますが、一通り観たのでメモを。
長いので最初にまとめ
動画の最後のスライドにキーワードがまとまってます。
- 速くする(Get fast)ための13個のTips
- 速さを維持する(Stay Fast)ためのTipsとしてPerformance BudgetsおよびLightWallet
が紹介されています。
また、このセッションではパフォーマンス改善の事例が多数紹介されています。
Performance Budgets
- パフォーマンスを維持するためのしくみ
- 予算を管理するように守るべきパフォーマンス指標を設定できる
- Performance Budgetsでできること
- Time (TTI ◯秒以下)
- Resources (JSは◯KB以下)
- Lighthouse (スコア◯点以上)
- Budgetsすなわち予算を設定することで、shipする前にパフォーマンスの問題に気づける
- 事例: Walmart Grocely
- PR時にチェックし、バンドルサイズが1%以上増加するとPRは失敗、Issue登録されPerformance Engineerにエスカレーションされる
LightWallet
- Webサイトのパフォーマンス測定ツールであるLighthouseでPerformance Budgetsをサポート
- CLI版のLighthouseで使える
$ 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%の削減に成功
-
- たくさんの動画がタイル状に並んだページ
- 初期描画では最初に見える数行分の画像のみロードし、残りは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>
- ↑のように
srcsetを指定しておくと、画面幅に応じて適切なサイズの画像が読み込まれる - pixel density 基準での指定方法(
1x, 2x, 3xなど)もある
Images CDNs
- image optimization as a service
- Cloudinary, Imgix, Thumborなど
- 事例: Trivago
- 日本の事例もいくつか(一休、ANA)
JavaScript
Defer Third-Party JavaScript
- third-partyのコードはJS実行時間の57%を占める
- 事例:Telegraph
- JSをすべて(third-partyだけでなく自社のものも含め)deferして描画を3s高速化した
- ref.
asyncとdeferの違いについては \<script> タグに async / defer を付けた場合のタイミング - Qiitadeferは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向上した
- 事例: Zalando (ヨーロッパのfashion retailer)
- Code-splitting
