Webサイトの表示速度を解析できるGoogleのPageSpeed Insightsを使い倒してみた
更新日：カテゴリ：Webデザイン
昨今のWebサイトにおける表示速度の向上は、非常に重要なものとされています。
Googleは公式に「Webサイトの表示速度が検索順位にも影響する」と発表していますし、ECサイトでは「表示速度が1秒遅くなるだけで売上が10％落ちる」というデータもあるそうです。
今となってはSEOを意識する上でも、ユーザビリティを向上させる上でも無視できない課題ですね。
Googleの表示速度解析ツール「PageSpeed Insights」
「PageSpeed Insights」の「Enter a web page URL」というフォームにWebサイトのURLを入力し、「ANALYZE」をクリックすることでそのサイトの表示速度を解析してくれます。
（下層ページのURLも入力することができるので1ページ単位で解析できます。）
使える機能としては、具体的な改善提案をしてくれる「Overview」と、表示速度を視覚化してくれる「Critical Path Explorer」の2つがあります。
具体的な改善提案をしてくれる「Overview」
「Overview」では、解析の結果、Webサイトの表示速度が100点中何点なのかをスコアとして採点してくれます。
（ちなみにKowappaの採点結果は87点でした。勉強不足ですね。。）
また、「PageSpeed Insights」の嬉しいところは、どこを修正すれば表示速度を改善できるかという提案までしてくれるところです。
改善提案は以下の5つのステータスによって分かれているので、優先度の高いものから修正していくことができますね。
High priority
優先度高めの修正したほうがよい項目です。
具体的な改善提案は、「サーバー応答時間を改善する」など。
Medium priority
優先度中の修正したほうがよい項目です。
具体的な改善提案は、「ブラウザのキャッシュを活用する」「画像を最適化する」「重複するリソースは1つのURLから提供する」「JavaScriptの解析を遅延する」など。
Low priority
優先度低めの修正したほうがよい項目です。
具体的な改善提案は、「JavaScript を縮小する」「小さなJavaScriptをインライン化する」「リダイレクトの回数を減らす」「キャッシュバリデータを指定する」など。
Experimental rules
試験的な改善提案です。「試験的（Experimental）」という表現が曖昧ですが、簡単に説明すると「表示速度は向上するけど、採点のスコアは向上しないよ」というものです。
具体的な改善提案は、「長時間実行されるスクリプトは避ける」など。
Already done!
既に修正済みの項目です。
このステータスになっている項目は改善しなくて大丈夫です。
表示速度を視覚化してくれる「Critical Path Explorer」
「PageSpeed Insights」のもう一つの機能としては、表示速度を視覚化してくれる「Critical Path Explorer」です。
以下のように色別にわかれているので、何にどれだけ読み込み時間がかかっているのかが一目瞭然でわかります。
- ブルー：HTMLファイル
- グリーン：CSSファイル
- オレンジ：JavaScriptファイル
- パープル：画像ファイル
- ライトブルー：PHPファイル
Google Chromeの拡張機能「PageSpeed Insights extension」
「PageSpeed Insights」の使い方を説明してきましたが、Google Chromeの拡張機能「PageSpeed Insights extension」というものもありますので、おこのみでこちらも使ってみてください。
