Webサイトの読み込み速度を改善！Google PageSpeed Insights（ページスピードインサイト）でWebサイトを高速化する方法

webサイトの高速表示が叫ばれて久しいですが、便利なツールを紹介します。

そうです。みなさんご存知のGoogle PageSpeed Insightsです。

今回はそんな便利なツールGoogle PageSpeed Insightsを使ったサイト最適化を複数回に分けてご紹介します。

まずはGoogle PageSpeed Insightsでサイトをチェックしてみましょう。

 

「サイトができた！バリデートもオールクリア！よっしゃ、リリースするぞ！」

いや、ちょっと待って、表示スピードは確認しました？

ちょっとこれで確認してみましょう！

 

 

あらら。。。モバイルの方はともかく、PCの方は赤いの出てますね。100点中17点ですか。これはいけません。

Google PageSpeed Insightsはこんな風に、URLを打ち込むだけで、ページ速度のスコアを評価してくれます。

それだけでなく、最適化するにはここを直したほうがいいよーって色々提案してくれます。

 

それでは順を追って提案内容をみていきましょう。

まずは、画像を最適化します。

「修正方法を表示」をクリックすると、最適化すべき画像がずらずら〜っと表示され、最適化を行うとどれだけのサイズが削減できるかを表示してくれます。

今回の場合は最適化する事で2.6Mの削減ができるようです。

しかもご丁寧に、最適化された画像をまとめてダウンロードする事ができます。

結果画面の下の方「このページ向けに最適化された画像、JavaScript、CSS リソースをダウンロードできます。」のリンク部分をクリックすると、、、、。

最適化されたファイルがひとまとめに格納された圧縮ファイルがダウンロードできるのです。便利！

ただし、分析対象の画面の画像がimagesフォルダに全て格納されているので、コンテンツごとにイメージフォルダがある場合などは、自分で画像の最適化をしたほうが効率がいいかもしれません。

 

今回の例のように、画像を最適化するをするだけで、かなりの効果が得られます。

他の提案は正直気休め程度の場合が多いです。せいぜい100kb以下の圧縮であったり、gzip や deflate を使用してリソースを圧縮するのですが、それをする手間とリスクを考えるとあまり効率的とはいい難いです。

 

色々と提案してくれていますが、まずはファーストステップとして画像の最適化をして、スピードテストをしてみましょう。