“超速! Webページ速度改善ガイド”を読んだ

超速！ Webページ速度改善ガイド ──使いやすさは「速さ」から始まる

昨年読み終えていたのだけど、読んだことをメモしていなかった。

Chrome Dev Toolsの使い方を中心にパフォーマンス問題・対応策を解説した本

Webフロントエンドの高速化に於いてUIやJavaScriptの処理、新たに利用できるようになったServiceWorkerの処理、SVGのロードによるアセットロード改善などをChrome Dev Toolsの使い方を中心に解説している内容。

実際のパフォーマンス問題について

• どの指標を見ればよいか
• どのやりかたが効果的か(と言われていたものがあったか)
• レンダリングからJavaScirpt実行までのステートの解説

が掘り下げられた形で解説されている。Chrome Dev Toolsの使い方は、オフィシャルサイトで取り上げられているが、UI上からは見えづらい機能については実際にパフォーマンス問題への取り組みかデバッグ作業を目的を持って行わない限り使わない。そのため知らない機能があったりもする。

Chrome DevTools | Tools for Web Developers | Google Developers

本の中で例を元に、Chrome Dev Toolsの使い方をスクリーンショット付きで解説しているため、フルスタックエンジニア(という呼び方はもう古いかもしれないが)として働いているが、バックエンドの開発には慣れているもののフロントエンドでの効果的な開発手法(debugger文を差し込む以上のことをする!)を知りたい、学びたいという人には打ってつけだな、と感じる。

アセットロードの問題や、JavaScriptの実行タイミングの問題について、おまじないとして今まで取り上げられていたものが、「なぜ効果的なのか」という点をパフォーマンス計測ツールであるChrome Dev Toolsを使って解説されている。読み返せる状態にしておきたい。(将来何かもっと良いツールが出てくると変わるかもしれない)

読んでいて思ったが要素技術やプロトコルが多く大変である。色々できて、機能が進化していくので楽しい面でもあるんだろうけど。やっていくしかない🔥