SEO対策
 

【高速化】Google PageSpeed Insights のスコアを上げる方法

googlespeed

Google PageSpeed Insights(ページスピードインサイト)とは?

ページスピード

「Google PageSpeed Insights(ページスピードインサイト)」とは、
ウェブページの読み込み速度をGoogleのスコアで表示するツールです。

Google社公式のツールであり、調べたいページのURLだけで
ページ読み込み速度やページ内の改善の必要がある部分の結果が表示されます。

人は読み込みまで3秒以上待てないと言われています。

ページ速度を上げることでユーザビリティが高まり、サイトの評価につながります。

まずは測定してみよう

まずはスピード改善したいサイトをGoogle PageSpeed Insights(ページスピードインサイト)を使って分析してみましょう。

分析方法は簡単で調べたいページのURLを貼り付けて、「分析」ボタンを押すだけ。

今回は弊社ホームページを事例に、どのようにスピード改善を行ったかを、解説をしたいと思います。

改善前のスコア測定

弊社TOPページの改善前のスコアはパソコンが65点、モバイルが30点でした。

スコア評価の目安は以下のように示されています。

スコア評価

Good 90~100 緑(速い)
Medium 50~89 オレンジ(平均)
Low 0~49 赤(遅い)

上記から分かるように、改善前のスコアはパソコンは平均で、モバイルは遅いという評価が出ました。

現代は、ほとんどの方がスマートフォンを使用しいますので、特にモバイルは改善しなければなりません。

まずは遅くなっている原因を調べていきます。

 

ラボデータで遅くなっている原因を見る

ラボデータでは大きく分けて6つの項目があります。

First Contentful Paint
テキストまたは画像が初めて表示されるまでにかかった時間です。

Speed Index
ページのコンテンツが取り込まれて表示される速さを表します。

Largest Contentful Paint
最も大きなテキストまたは画像が描画されるまでにかかった時間です。

Time to Interactive
ページが完全に操作可能になるのに要する時間です。

Total Blocking Time
ユーザーの入力応答を阻害する時間です。

Cumulative Layout Shift
ユーザーが意図せぬレイアウトのズレや崩れがないか。

この6つの項目の内、評価が低い項目を改善していきます。

改善できる項目を見て改善する

Googleが改善方法のヒントを記載してくれていますが、結構難しいです。
中には何を言っているのか分からない、、、という人もいると思います。

さらに改善方法の正解はなく、自分で改善方法を調べたりして改善しなければなりません。

また、遅くしている原因はそのページがどのような構成で作られているかで改善方法が違ってきます。

画像データを軽くする

まず一番分かりやすいのが画像サイズの軽量化です。

画像はできるだけデータサイズを抑えましょう。データサイズが大きいほど読み込むまでに時間を食ってしまいます。

画質を保ったままデータサイズだけ圧縮する方法がおすすめです。

おすすめ画像圧縮サイト

TinyPNG
このパンダのサイトは画像圧縮で有名なサイトです。1回につき20枚まで、最大5MBまで圧縮可能です。
リンク先 ⇒ https://www.iloveimg.com/ja/compress-image

おすすめ画像圧縮Wordpressプラグイン

EWWW Image Optimizer
このWordpressプラグインは画像を劣化させることなく、アップ時に自動で画像サイズを圧縮してくれるプラグインなので、圧縮率は少し低いようですが手間が省けます。
リンク先 ⇒ https://ja.wordpress.org/plugins/ewww-image-optimizer/

無駄なものは削除・遅延させる

画像圧縮をしても、少ししかスコアが改善されない場合は、だいたいJavaScriptや外部ファイルが原因です。
特にWordpressサイトはプラグインを入れるだけで重くなるものもあります。

不要なWebフォントを削除したり、JavaScriptの遅延をさせる必要があります。

弊社ではテキストにGoogleフォントを利用していたのですが、Googleフォントを使わず、
JavaScriptの遅延設定をしただけで大幅にスピード改善ができました。

改善前のスコアは、パソコンが65点、モバイルが30点でしたが、
作業後、、、

なんと、パソコン99点モバイル77点まで上がりました!

パソコンはあと1点で100点です。
ここまで来たらなんとか100点を出したくなりますよね(^_^;)

JavaScriptを遅延させるおすすめプラグイン

Flying Scripts by WP Speed Matters
JavaScriptの読み込みを遅延してくれるプラグインです。
リンク先 ⇒ https://wordpress.org/plugins/flying-scripts/

.htaccessでgzip圧縮

最後に行ったのがgzip圧縮。

gzip圧縮は画像以外の構成ファイルを圧縮する設定。
WEBサイトを構成しているhtml、JS、css、xmlなどを圧縮することで、データ量が軽くなり表示速度を上げることができます。

gzip圧縮は.htaccessファイル上で行います。

下記サイトを参考にしました。

gzip圧縮参考サイト

.htaccess(gzip圧縮系)の設定方法

結果

改善を重ねた結果・・・

100点出ました!

パソコンとモバイルと両方とも緑色の合格点まで改善できました。

改善前
パソコンが65点、モバイルが30点

改善後
パソコンが100点、モバイルが92点

モバイルはもう少し改善できそうな箇所はありますが、ひとまず安心です。

まとめ

今回は弊社のお客様からもご要望が多いGoogle PageSpeed Insights のスコアを上げる方法についてまとめました。

ページスピードを上げることで、ユーザビリティ等が上がり、Googleの評価も高くなります。

まずは自分のサイトをGoogle PageSpeed Insights で調べて、改善部分を調べてみましょう。


この記事をシェアする

関連記事