Webフロントエンドハイパフォーマンスチューニング【感想・レビュー】

「Webフロントエンドハイパフォーマンスチューニング」を読みました。

Webフロントエンド ハイパフォーマンス チューニング

Webフロントエンド ハイパフォーマンス チューニング

私はWebエンジニアで、jQueryとReact.jsならよく使いますくらいのステータスなのですが、新しい発見がたくさんありました。

感想を綴っていきたいと思います。

とても内容の深い本

私も全く無知な訳ではなく、CSSやJSから無駄な空白や改行を削って、ミニマムにしましょうとか、基本的なことは既に知っていたのです。

・・・でも、DNSのプリフェッチなんて機能がlink要素のrel属性にあることは、全く持って知りませんでした。つまり、今後引くであろうドメインを先に解決しておくことで、読み込みを早くしておきましょうというものです。

他にも、JavaScriptを非同期で読み込むためのdefer/async、キャッシュヘッダーの使い分け、CSSのチューニング、SVG画像の活用など、盛りだくさんの内容です。

ブラウザレンダリングの基本が学べる

本書の良いところは、いきなり高速化手法の解説をするのではなく、まず始めにブラウザのレンダリングの仕組みを解説しているところです。

ブラウザがどのようにしてHTMLやCSSやJSを解釈し、最終的にWebページを表示するのか?その過程が書かれています。

何事も基礎が重要です。上辺だけの高速化テクニックの解説にとどまらず、きっちりレンダリングの過程を解説している本書は、とても良書であると感じました。

リソースの取得から物語が始まる

本書の解説は、アドレスバーにURLを入力して、エンターキーを押したところから始まります。

データを取得するためには、IP、TCP、TLS(SSL)、HTTPなどのネットワークプロトコルに従って、手続きを踏まなければなりません。

本書が述べていることは、リソースの取得にはパケットを往復する必要があるので、相応の時間がかかりますということです。

KeepAliveを活用したHTTP/1.1では、毎回接続を切るHTTP/1.0に比べてパフォーマンスが向上しています。また、HTTP/2.0についても少し触れられています。本書を読めば、HTTP通信に必要な最低限のプロトコルを理解することができるでしょう。

リソース読み込みのチューニング

リソース読み込みのチューニングでは、前述したDNSのプリフェッチに加えて、本書では、例えば下記のようなパフォーマンスチューニングが解説されています。

  • どの拡張子で画像ファイルを送信するべきか
  • Gzip圧縮を有効にして転送量を減らす
  • ブラウザのキャッシュを活用する
  • Service Workerを活用する

特に、キャッシュはパフォーマンスのみならず、セキュリティにも絡んできます。キャッシュは正しく理解し、正しく運用することが必要です。

何せ、あのメルカリでさえも、コンテンツキャッシュによる情報漏えいを起こしたことがあるくらいなのです。

tech.mercari.com

怖いですね。メルカリの事例はとても参考になるものですので、ぜひご一読することをお勧めします。

JavaScriptのチューニング

近年は、SPA(Single Page Application)が流行しています。私もそこまでではありませんが、React.jsを活用してリアルタイムにレンダリングするサイトを構築することができます。

本書では、例えば下記のようなパフォーマンスチューニングが解説されています。

  • JavaScriptのGC(ガーベジコレクション)の発生タイミングを制御する
  • JavaScriptのパフォーマンスの測定方法について知る
  • asm.jsやSIMD.jsの活用について

JavaScriptは、もはやWebページに少し動きを加えるための言語ではなくなり、本格的な言語として歩み始めています。本書には、Chrome DevToolsを活用したJavaScriptのチューニング事例が載っています。

CSSのチューニング

CSSを活用したレンダリングには、想像以上にコストがかかります。DOM要素が100個あり、CSSのルールセットが50個あった場合には、100x50=500回のマッチング処理が行われることになるのです。

本書では、例えば下記のようなパフォーマンスチューニングが解説されています。

  • 再レンダリングはどのような時に行われるのか
  • CSSの設計規約を工夫する
  • BEM(Block Element Modifier)という規約を活用する

CSSは、複雑であればあるほど、ブラウザに負荷がかかってしまいます。よりシンプルなCSSを目指すことが、基本原則としてはもっとも重要であると言えます。

さいごに

SPAの流行や、JavaScript、HTML5の進化によって、Webアプリケーションは格段に向上した表現力を手にしました。その一方で、ブラウザにかかる負荷は増す一方です。

本書に書かれている内容を、全て実行する必要はありません。細かなことまで書いてありますので、コストや開発時間に見合わないチューニングも中にはあるでしょう。

しかし、Webアプリケーションを提供している以上、パフォーマンスを意識することはとても重要です。私は本書を読んだ結果、パフォーマンスを改善する方法はたくさんあるんだなということを学びました。

なかなかに深い本でしてたので、本屋で見かけたら、ぜひ手にとって見ることをおすすめします。

Webフロントエンド ハイパフォーマンス チューニング

Webフロントエンド ハイパフォーマンス チューニング