超速！ Webページ速度改善ガイド

超速! Webページ速度改善ガイド
使いやすさは「速さ」から始まる (WEB+DB PRESS plus)

佐藤 歩、泉水 翔吾

Amazon.co.jpで詳細を見る

@1000chから頂いた。

昔、HTTPリクエストを減らすためにという一連の記事を書いた（もう4年も前になるのか…）。当時はCSSの表現力が弱かったので、画像をてんこ盛りにしたようWebサイトが一般的だった。そのため、その画像をいかに減らすかが、Webサイトのパフォーマンスを決定する大きな要因だった。なぜならHTTP/1.xではホストごとのコネクション数に制限があったからだ。多くの画像をダウンロードするには、先にリクエストした画像がダウンロードされるまで、あとの画像リクエストは待たなければならず、これが体感速度に大きな悪影響を及ぼしていたことが多かった。

時代は移り、ときに2017年。HTTP/2の普及が進み、リクエストとレスポンスの多重化が可能になり、以前よりはHTTPリクエストについてはあまり気にしなくてもよい時代になったかもしれない。代わりにSPAなどJavaScriptゴリゴリのWebアプリケーションの普及により、ランタイムのパフォーマンスを気をつけなければならないかもしれない。

かもしれないというのは、必ずしもあなたの開発しているのがSPAじゃないかもしれないし、必ずしも皆がみなHTTP/2で配信しているわけでもないので、これさえやっとけば大丈夫！みたいなパフォーマンス改善のための銀の弾丸はますますなくなってきている。

Don’t guess, measure!

そうゆうわけで、本書でも『推測するな！計測せよ！』と口酸っぱく言っている。目次を見てもらえれば分かるが、

• 調査方法
• 改善方法

ほとんどの章が調査と改善がセットになった硬派な構成だ。100人いれば100人さまざまなように、あなたが開発しているWebサイト・アプリケーションのどこにパフォーマンスのボトルネックがあるのかはあなたにしかわからない。そのための調査なのだ。

幸い、ページロード・ランタイム両方の速度改善についてこと細かく解説されてあるので、なんかしら改善の役に立つことだろう（僕はランタイム側が苦手なので助かる…）。本書では、アップデートの激しいGoogle ChromeのDevToolsを主に使って説明しており、時とともにUIの変更がなされ、キャプチャと差異がでるかもしれないが、本書を通して学べる Don’t guess, measure! の精神はフロントエンドエンジニアとして、一生役に立つことだろう。

今買っといて損はない2017年冬のマストバイアイテムだ！