「Google PageSpeed Insights（ページスピードインサイト）」とは、
ウェブページの読み込み速度をGoogleのスコアで表示するツールです。
Google社公式のツールであり、調べたいページのURLだけで
ページ読み込み速度やページ内の改善の必要がある部分の結果が表示されます。
人は読み込みまで３秒以上待てないと言われています。
ページ速度を上げることでユーザビリティが高まり、サイトの評価につながります。
まずはスピード改善したいサイトをGoogle PageSpeed Insights（ページスピードインサイト）を使って分析してみましょう。
分析方法は簡単で調べたいページのURLを貼り付けて、「分析」ボタンを押すだけ。
今回は弊社ホームページを事例に、どのようにスピード改善を行ったかを、解説をしたいと思います。
弊社TOPページの改善前のスコアはパソコンが65点、モバイルが30点でした。
スコア評価の目安は以下のように示されています。
上記から分かるように、改善前のスコアはパソコンは平均で、モバイルは遅いという評価が出ました。
現代は、ほとんどの方がスマートフォンを使用しいますので、特にモバイルは改善しなければなりません。
まずは遅くなっている原因を調べていきます。
ラボデータでは大きく分けて６つの項目があります。
■First Contentful Paint
テキストまたは画像が初めて表示されるまでにかかった時間です。
■Speed Index
ページのコンテンツが取り込まれて表示される速さを表します。
■Largest Contentful Paint
最も大きなテキストまたは画像が描画されるまでにかかった時間です。
■Time to Interactive
ページが完全に操作可能になるのに要する時間です。
■Total Blocking Time
ユーザーの入力応答を阻害する時間です。
■Cumulative Layout Shift
ユーザーが意図せぬレイアウトのズレや崩れがないか。
この６つの項目の内、評価が低い項目を改善していきます。
Googleが改善方法のヒントを記載してくれていますが、結構難しいです。
中には何を言っているのか分からない、、、という人もいると思います。
さらに改善方法の正解はなく、自分で改善方法を調べたりして改善しなければなりません。
また、遅くしている原因はそのページがどのような構成で作られているかで改善方法が違ってきます。
まず一番分かりやすいのが画像サイズの軽量化です。
画像はできるだけデータサイズを抑えましょう。データサイズが大きいほど読み込むまでに時間を食ってしまいます。
画質を保ったままデータサイズだけ圧縮する方法がおすすめです。
画像圧縮をしても、少ししかスコアが改善されない場合は、だいたいJavaScriptや外部ファイルが原因です。
特にWordpressサイトはプラグインを入れるだけで重くなるものもあります。
不要なWebフォントを削除したり、JavaScriptの遅延をさせる必要があります。
弊社ではテキストにGoogleフォントを利用していたのですが、Googleフォントを使わず、
JavaScriptの遅延設定をしただけで大幅にスピード改善ができました。
改善前のスコアは、パソコンが65点、モバイルが30点でしたが、
作業後、、、
なんと、パソコン99点、モバイル77点まで上がりました！
パソコンはあと１点で100点です。
ここまで来たらなんとか100点を出したくなりますよね（^_^;）
最後に行ったのがgzip圧縮。
gzip圧縮は画像以外の構成ファイルを圧縮する設定。
WEBサイトを構成しているhtml、JS、css、xmlなどを圧縮することで、データ量が軽くなり表示速度を上げることができます。
gzip圧縮は.htaccessファイル上で行います。
下記サイトを参考にしました。
改善を重ねた結果・・・
100点出ました！
パソコンとモバイルと両方とも緑色の合格点まで改善できました。
改善前
パソコンが65点、モバイルが30点
改善後
パソコンが100点、モバイルが92点
モバイルはもう少し改善できそうな箇所はありますが、ひとまず安心です。
今回は弊社のお客様からもご要望が多いGoogle PageSpeed Insights のスコアを上げる方法についてまとめました。
ページスピードを上げることで、ユーザビリティ等が上がり、Googleの評価も高くなります。
まずは自分のサイトをGoogle PageSpeed Insights で調べて、改善部分を調べてみましょう。
