デバイスの処理速度は日々進化しており、通信速度も昔に比べると驚くほど速くなっています（計測値ではなく体感として）。WEBサイトを見に来る人々は、知らないうちに高速なWEBに慣れてしまっています。
Googleで検索をして、リンクをクリック。その後1秒何も表示されないと多くの人は「遅い」と感じてしまうそうです。さらに3秒待たされると、ページを見ることをあきらめて「戻る」ボタンをクリックするとのこと。
私にも心当たりがあります。
WEBは遅い
先程、WEBが日々高速になっている的な話をしましたが、その一方でWEBサイトそのものも贅沢になってきています。
ヴィルトの法則というものがあります。
例えば、どんなに凄いスマホが発売されても、常にスマホの限界を超えるアプリが出てきてしまう。といった話です。
WEBサイトの世界も同じで、環境は進化しても、画像はどんどん巨大化して高画質になり、アニメーションや埋め込み動画、SNSとの連携など、どんどんやりたいことが増え、その分パソコンやスマホ、通信などの負担が大きくなっていきます。
当然、負担が大きくなるにつれWEBサイトの表示も遅くなります。
うっかりするとWEBサイトはどんどん重くなり、ユーザーは離脱していきます。
環境が良くなればなるほど、WEBサイトの高速化は重要になるのではないでしょうか。
Webフロントエンド ハイパフォーマンス チューニングという本が凄く良い
本書は、WEB高速化をテーマに、ブラウザの仕組みを深く掘り下げつつ、高速化のためのテクニックを教えてくれます。
特にブラウザの表示（レンダリング）については、HTMLコーディングやJavascriptの実装に直接関わるレベルの話が深く書かれており、知ると知らないとでは大きく差が出ると思われる内容も含まれています。
例えば、少し専門的な話になりますが。
スタイルシートのセレクタは右から処理されるという話があります。
.parent .child divというセレクタがあった場合、ブラウザはまずHTMLソースのdivタグを全て抜き出します。
そしてその親にchildクラスが充てられてるか判定し、絞り込みます。さらにその親がparentクラスのものを選別するのです。最初に大量のdivタグを集めてきて、1つづつ親要素のチェックを行うため、このセレクタには非常に無駄が多いという事が分かります。
このような話はCSSの仕様などをじっくり調べないと出てこないような情報なので、あまり一般的には知られていないのですが、本書にはそういった情報が多く書かれています。
仕組みから学べる
先程の例もそうでしたが、まずはブラウザがどのような動きをしているのかを詳しく解説してくれます。
もう少し具体的に言うと、ブラウザがWEBサイトにアクセスした際、どのような順序でファイルが読み込まれ、HTML、CSS、Javascript等がどのように解析され、どのような順番で処理されているかといった処理の流れを「ローディング」、「スクリプティング」、「レンダリング」、「ペインティング」という4段階に分けて解説してくれています。
その中で、どのように実装するべきか、もしくはしないべきかを教えてくれます。また実装方法についても、マルチデバイスに対応する方法だけではなく、WebPやQuicプロトコル、Service Workerといった次世代技術にも触れられています。
他にこんなことも
WEB製作者の中にはChromeのデベロッパーツールを使っている方も多いと思いますが、このデベロッパーツールは全て英語で書かれているため、ちゃんと使いこなせていない方も多いはず。
計測方法が中心ですが、本書ではいろいろな使い方を日本語で教えてくれています。これはありがたいです。
更には、十分な高速化が見込まれない場合の対処法（遅延ローディング、インジケーターの使用）等にも章を割いており、ユーザーエクスペリエンスの重要性という点から見ても、十分期待に応えてくれる内容となっています。
フロントエンド業務に関わる人には是非ともお勧めしたいです。
OLDER
