つれづれ日記
Webカテゴリ 106/108
超速! Webページ速度改善ガイド」がおもしろく、一気に読み切った。

昨年、3回ぐらい別々のカンファレンスで「この本がよい」と紹介されていて、これは読まないとと思っていた本だった。webサイトの高速化テクニックの本はこれまでもあった。この本は「推測ではなく計測して対応しよう」とあり、Google ChromeのDevToolsを使って具体的にどこか遅いのか特定する方法も詳しく紹介しているところがよい。特にDevToolsのPerformanceタブの読み方が詳しく、「表示するフレーム単位で10 ms以下に収まるように上からチェックする」という考え方がわかってようやくあの表示の意味が理解できた。

対策方法については最新の手法も含めて紹介されていて勉強になる。基本的にnode.jsを使って自動化する方法も、簡潔でよかった。最後のService Workerの説明もよかった。例となるコードもありちょっと試すこともできる。

本としては文章自体がわかりやすく、上位の概念から計測、対策へと流れがきちんと踏襲されていてとても安心して読める。コード例のフォントは横幅が狭いcondensed書体を使っていて行が折り返されることがほとんどなく、とても読みやすかった。

しかし、いちばん驚くのはChromeのDevToolsがパフォーマンス解析と処理の分析ツールとしてよくできていること。JavaScriptのPerformance APIもすごい。DNS検索とWebサイトからのダウンロード、コンテンツの解析とサブリソースのダウンロードとレイアウト、表示と、処理がきちんと分離されて名前がついているところもwebの歴史を感じる。

全部読み切って思ったのは、@keyframesのデバッグ方法が見当たらなかったこと。これは直接、速度改善にはつながらないのだが、@keyframesがどのアニメーション設定を何%で参照しているか、CSSのソースか設定を見ながら確認ができない。DevToolsの左下のdrawerからAnimation drawerは確かにあるのだが、数直線上にプロットされたタイミングをGUIで操作できるだけで、どういう処理が呼ばれているかわからない。

とてもよい本だったが、図版は小さかった。ChromeのDevToolsというGUIツールを紹介する場面が多いため、画面例を印刷したページが多かった。しかし、本の体裁がA5版とコンパクトで、画面例が縮小されていて読みづらかった。画面例で「赤い矢印がある」などの色を指定した説明は詳しくてよかったが、白黒印刷で図が縮小されているため、色で小さなUIを指定する説明もわからなかった。

よいものを作る作業は、いろいろたいへんなのだ。

Webカテゴリ 106/108