一気に疑問が解ける!Webページを高速化するテクニックを分かりやすく解説した良書 -Webページ高速化超入門
Post on:2019年5月10日
Webページ高速化、と聞くと専門的な知識が必要で難しそうと思う人も少なくないと思います。Webページを軽量化して表示速度を改善させるテクニックを一つずつ分かりやすく解説した入門書を紹介します。
「超入門」とあり、確かに一つ一つの解説は非常に分かりやすいです。しかし、本書を読み終えた後は、専門的な知識を身につけることができます。

本書はタイトルにある通りコーダーとウェブ担当者向けです。というのは、各章ごとに2部構成となっており、入門編では知識として把握しておきたい人用で、実践編では高速化の取り組み方法が解説されています。
巻末には高速化の目安となるGoogleのPageSpeed Insightsで改善すべき項目に対応した方法がリスト化されていて、非常に役立つ一冊です。
Kindle版も発売されています。
紙面のキャプチャで、中身を少しだけご紹介。

本書はWebページ高速化について基礎から徹底的に詳しく、そして非常に分かりやすく解説されています。初心者はもちろん、経験者も見落としがないよう、読み進めることをお勧めします。

知識は読むだけでは役に立ちません、実践方法もかなり具体的に分かりやすく解説されています。サポートサイトから高速化前のWebページもダウンロードでき、改善するとどのような効果があるのかがよく分かると思います。
上記はサンプルページをPageSpeed Insightsでチェックしたものです。これら各項目ごとに、どのように改善すれば表示速度を速めることができるか、一つずつ順番に解説されています。

本書は8章構成で、それぞれ入門編と実践編で構成されています。入門編では知識中心、実践編ではフロントエンドの開発者向けの内容となっています。
紫ページが入門編で、緑ページが実践編です。

例えば、PageSpeed Insightsでページをチェックするのは誰でもできるでしょう。そして、デベロッパーツールを使用してボトルネックを探すのはコーダーなどの開発者向けです。

2章からは、高速化の各項目です。まずは、画像の最適化。入門編では、画像の保存形式や圧縮率など、割と簡単にできることが解説されています。

実践編では、高速化前の状態を把握し、具体的な数値を元に最適化を行います。

CSSやJavaScriptファイルの最適化も重要です。Minifyやgzip化、サーバーの設定など、手順が図入りで分かりやすく解説されています。

4章からは少し高度な高速化に入ります。CSSやJavaScriptの配信の最適化、ファーストビューの構成など、体感的に速くなるテクニックです。

実践編ではファーストビューを構成するCritical Path CSSについてです。本書では各項目ごとに状況確認・問題点・改善方法が詳しく解説されています。また、ありがちなうまくいかない例とその解決方法も紹介されています。

巻末には付録として、PageSpeed insightsの改善できる項目の対応表があり、その対策方法と本書での解説ページが掲載されています。
Webページ高速化超入門の目次
- Webページが遅いのはなぜか?
- Webページ画像を最適化していますか?
- テキストファイルをどこまで圧縮できる?
- Webページをさらに速くする方法
- キャッシュの有効活用をしていますか?
- コンテンツのダイエットをしていますか?
- ストーリーで読む,既存サイトの高速化
- Web担当者・HTMLコーダーのためのGit超入門
本書に書かれていることを実践するだけで、かなりの高速化が実践できると思います。それぞれのテクニックは単純な作業ですが、一つ一つが積み重なると大きな効果を得られるのがWebページの高速化です。すぐに使えるテクニックが満載です!
献本の御礼
最後に、献本いただいた著者様・技術評論社の担当者様に御礼申し上げます。
当サイトでは随時、献本を受け付けています。
お問い合わせは下記よりお願いいたします。
sponsors