60FPSへの夢、そしていかにキャッシュを従えるか / 書評「超速! Webページ速度改善ガイド 使いやすさは「速さ」はじまる」

CAの ahomu/1000ch さんからご恵贈頂き、レビュー書いてくれと頼まれたので、自分のパフォーマンスというものへの思いの丈と共に書評を書こうと思う。

自分も6年ぐらいフロントエンドぐらいやってきたけど、あんまりちゃんと用語定義をしないまま「勘」で調査しがちだったのと、彼ら二人がどの数値見てるんだろう、という視点で読んだ。

gihyo.jp

要約: これはフロントエンドエンジニアの勘を体系化/言語化したものだ

フロントエンドエンジニアにとって Chrome DevTools は日常的にお世話になる、「これナシでは生きていけない」という類のツールだ。だが、これの読み方は癖があり、経験的に蓄積してきた積み重ねがなければやや難しい側面があった。

この本は、フロントエンドエンジニアが今まで経験的に蓄積してきたでろう「勘」を、Webの仕様や各社のUXガイドラインの明確な定義を通して再整理したものだ。

歴史的な話をすると、発想のオリジナルとなった Firebug, Webkitのデバッガの進化とともに一つ一つ機能が拡充されてきたが、今では膨大な機能を有していて、キャッチアップが難しくなってしまっていた。

それらにキャッチアップするマイルストーンとして、このタイミングで本を出す企画のタイミングが適切でうまいなーとも思った。

なぜ速度が大事か

  • モバイルの台頭
  • コンテンツのリッチによる圧迫
  • 得られるモノ
    • ユーザーによるエンゲージメント
    • UX

最近、なぜ dev.to がこんなにも速く、こんなにも自分にとって感動的なのか

って記事を書いたんだけど、ただ速いのがいいというより、そもそも速度が担保されなければ、他の機能を足す余地もそもそもない、というのが自分の持論。

DevTool に詳しくなることで得られること

数値は嘘をつかないが、数値を読み解く知識はまた別途必要だ。そして、数値の意味を知ることで、開発者のメタ認知が変わっていくことで、実際に書くコードも変わってくる。

  • CPU の気持ちになる: メモリプロファイラの読み方を通して、CPUの状態、GCが何を掴んで、何を捨てるかを意識してコードを書けるようになる。またOSSのAPIインターフェイスをみてメモリのどこにインパクトを及ぼすか、だいたい察することができるようになる。
  • GPU の気持ちになる: CSS属性の変更が及ぼす影響を通して、フレームレートに悪影響がある属性の扱いに慎重になる。

たとえば will-change 属性はパフォーマンスを意識するのにわかりやすい属性だろう。事前に変化する値を宣言しておくことで、「温めておく」わけだ。

本書もその点を詳しく解説している。

[レイアウト再算出が必要なプロパティ]

透過の合成のアルファブレンドも重いことで有名だが、スクロール時にcss属性を再計算するときと組み合わさって酷いことになりがち。これを検出するには事前に重くなりうることを意識しておく他にない。

ただ、一応気をつけておくべき点として、 Chrome DevTools は Chrome の内部状態の一種のダンプであって、他のブラウザでも おそらくブラウザでCSSでGPU命令になる場所はだいぶ異なっているだろう。ただし、同じWebの共通仕様で実装している以上、そこまで乖離はないはず。

昔は Skia Debugger を直接見てたんだけど、いい時代になったなーと思う。

本書の良かった点

  • 世代別GCの解説と、メモリスナップショットを比較して、ヒープ領域の調査でMajor GCに負荷をかけてる部分の特定手法
  • Minor GC の調査
  • 不要なイベントリスナの特定と排除
  • picture 要素でデバイスに応じてレスポンシブに必要な画像を読み込む
  • Service Workerの初歩的な実装パターン。ネットにはコード断片はあるけどまとまった資料は初かも
  • リソースヒントの dis-fetch, preconnect, prefetch, preload, prerender。これらはpreload ぐらいしか現在使えるものはないが、書き得なんで知っておくと良さそう。
  • WebAnimation の解説、日本語だとはじめてみた
  • will-change 命令による compositing 最適化
  • スクロールイベント下のForced Reflow の対策
  • FP - FCP - FMP - TTI がRAILモデルとの対応で用語整理できた
  • サンプルコードがしれっと ES2015
  • 現代でのドメインシャーディングはアンチパターンだよって話

自分が読んでよかった点なんで、初歩的な分は飛ばして読んでいた。

違和感あった点

  • Nodeのインストールについては最小限で勝手にやってくれって感じ
  • 突然 webpack commonchunk の設定例が出てきて気持ちはわかるけど何もかも前提ふっ飛ばしてさすがに唐突で笑った
  • サーバーサイドでの処理の重さは度外視します、現代ではフロントエンドが主です！と宣言してしまってるけど、要件次第なんでここはポジショントークだと言ってほしかった

最後に

「推測するな、計測せよ」を地で行く本。「属人性の高い高度に発達した勘」から体系的な知識への転換。

フロントエンドに関してはネットワークのレイテンシで制御できずYAGNI原則が通じる箇所と通じない箇所がある。それらをこの本で学べると思う。

あと DevTools の UI すぐ変わるから、早いとこ読んだほうがいい。今すぐ買おう！(あとで読んでもいいけど)

この本の知識を皆が知ってたら「なんか重いんですけど〜」って自分に振られることが減っていい世界が来そうだと思いました。完。