なんとなくの高速化から脱却「Webページ速度改善ガイド」を読んだ

Gatsbyを始めた時に「速いサイトはよい」というシンプルな気持ちになったので、どんなサイトでも高速化したい気持ちで「超速! Webページ速度改善ガイド」を購入しました。

本の内容と学び

この本の中では「ネットワーク処理、レンダリング周り、スクリプト周りの高速化」の3つのポイントによる高速化の知識と方法が紹介されています。

ネットワーク処理は今までも、リクエスト数の削減や、リソースのサイズ削減などには取り組んでいました。 それでも、HTTP2になって並列リクエストが可能になってCSSスプライトはdeprecatedな感じになっていたり、クリティカルレンダリングパスの改善手法（ページの描写を妨げる要素を解決していく）など意外と知らないことや感覚に頼って曖昧な箇所がありました。 また、ChromeのDeveloperToolsも詳しく解説されており、感覚だけで弄っていたものが「ああ、なるほど」と腑に落ちる気持ちになりました。日本語でここまで丁寧に解説されているのを始めて見た気がします。

また、クリティカルレンダリングパスの調査と改善手法はインパクトが大きいにも関わらずあまりやってこなかったので、Gatsbyでの高速化をやってるうちに「なるほど」と腑に落ちました。

レンダリング周りの高速化は今まで手をつけていなかった箇所で、「JSでアニメーションさせるのは重いからCSS Animationでいいだろ」ぐらいの気持ちでした。反省。 JSで書いたアコーディオンやハンバーガーメニューの反応が鈍い！みたいな事例の改善が出来たり、どのCSSを変更するとレイアウトの再計算が起こるのか、どのJSのDOM APIを使用するとレイアウトの再計算が起こるのかみたいな点が分かります。

スクリプティング周りの高速化は、SPA作ってるけど遅いと感じた時に見るべき項目です。しっかり調査方法を抑えておくことで、いざという時に使えるのが大事だと思います。

画像の高速化はめちゃくちゃ大切

画像はHTML, JS, CSSと比べてもファイルサイズが大きく最も大きいリソースです。 画像のフォーマットに関する知識の紹介や、具体的な高速化手法として画像の最適化レスポンシブイメージなどが紹介されています。

個人的には画像の最適化がされていないWebページは多く、これらの知識を抑えた上でImageFlux)、imgixのような画像配信SaaSの利用をすると、めちゃくちゃ高速化に効くと感じています。

この本が合いそうな人とまとめ

一度でも高速化に取り組んだことがある。けれども、あまり自信をもって高速化を成し遂げたわけではないという人に相性がよさそうです。 逆に、「ほとんど高速化を意識したことがない」ような状態であると知らないことが多すぎてツライかもしれません。

Gatsbyとこの本の知識を組み合わせて超速Webページを作ったので後日紹介できればと思います。 個人的な感覚でいえば、クリティカルレンダリングパスと画像の最適化さえ行えばどのサイトでもある程度の速度は出る印象です。

めちゃくちゃためになる本でした。

なおこのブログに関しては低予算運用を心がけているため、画像配信のSaaSを利用しておりません。（仕事ではちゃんと使って高速化してます）