お役立ち情報

[WordPress]PageSpeed Insights改善方法【1日で40点→87点の事例あり】

pagespeedinsights記事のアイキャッチ
考える女性

サイトスピードを改善したい。「PageSpeed Insights」のスコアを改善するためにはどうしたらいいの?即効性がある改善方法を知りたいな。

 

ユニちゃん

こんな悩みを解決するよ

 

SEOを語る上でサイトスピードは極めて重要です。

サイトスピードは一般にPageSpeed Insights」で計測することが多く、

当ブログのPageSpeed Insights」も改善前はモバイルで47点でしたが、

改善を行うことで87点にスコアを上げることができました。

それもたった1日で。

今回はその具体的な方法をご紹介します。

まだやっていない方はやらない手はないです。

是非みなさん試してみてください!因みに改善方法はWordPressを利用していることが前提ですのでご了承くださいませ。

因みに現在の当ブログのPageSpeed Insights」の結果は以下のようになっています

■モバイル:87点

 

■パソコン:96点

 

まずはPageSpeed Insightsでサイトスピードを確認しよう

 

ユニちゃん

自分のサイトスピードはGoogleが提供するPageSpeed Insights」でサイトURLを入れるだけで簡単に調べることができます。まずは自分のサイトスコアを知るところからはじめよう。

私の改善前のスコアはこちらです。

■モバイル:47点

ページスピードはSEOに関連する重要な要素であり、50点以下は改善が必要とされています。

また、Googleはモバイルファーストを掲げており特にモバイルのスコアを重要視しているので

たとえパソコンが50点を越えていてもモバイルが50点を下回っている場合は改善しましょう。

考える女性
スコアが50点以下だったけど、具体的に何をすればいいの?

結論からいうとこの2点を改善することでスコアアップすることができます。

  • 「次世代フォーマットでの画像の配信」の改善

  • 「オフスクリーン画像の遅延読み込み」の改善

この2つはGoogleからの改善施策としても挙げられていると思います。

「PageSpeed Insights」改善項目

この2つの改善を行っていくのですが、「オフスクリーン画像の遅延読み込み」は設定をするだけなので簡単に改善をすることができます。まずはこちらから改善をしていきましょう。

PageSpeed Insights改善方法①「Autoptimize 」の設定

 

「オフスクリーン画像の遅延読み込み」とは、画面外の画像は遅延させて読み込みましょうということです。

多くの画像を一気に読み込んでしまうと読み込みに時間がかかってスピードが遅くなるのです。

なので画面内の画像だけ先に読み込ませて、画面外の画像は後から読み込ませればスピードが早くなるよということです。

そこで登場するのが「Autoptimize」というプラグインです。

このプラグインを利用すれば勝手に画面外の画像を後から読みこむ設定にしてくれます。ソースコードはいじらず初期設定だけしてしまえばOKです。

手順は下記を参考にしてください。

 

「Autoptimize」の設定方法

 

step
1
「Autoptimize」のプラグインをインストール

 

管理画面のプラグイン > 新規追加で「Autoptimize」と検索しインストールしましょう。

 

 

step
2
「Autoptimize」を開く

設定 > 「Autoptimize」で開くことができます。

設定するのは、【JS、CSS&HTML】と【画像】の2項目です。

 

Autoptimize画面

 

step
3
【JS、CSS&HTML】の設定

 

こちらの設定で【JS、CSS&HTML】それぞれの圧縮設定やコードの最適化を行います。

下記の通り設定しましょう。

 

「JavaScript オプション」の設定

 

「JavaScript コードの最適化」と、「JS ファイルを連結する」の2つをチェックしましょう。

それ以外はチェックなしでOKです。

 

Jsオプションんの設定

 

「CSSオプション」の設定

 

「CSS コードを最適化」、「CSS ファイルを連結する」、「インラインの CSS を連結」の3つにチェックしましょう。

それ以外はチェックなしでOKです。

 

CSSオプション設定

 

変更を保存してキャッシュをクリア

 

CSSオプションにチェックをしたら、HTML オプション、CDN オプション、キャッシュ情報、その他オプションはデフォルトから変更を加えずに、変更を保存してキャッシュクリアボタンを押しましょう。

 

Autooptimiz保存ボタン

 

step
4
【画像】の設定

 

こちらが画像遅延読み込みの設定です。

「Lazy-load images?」にチェックをいれて保存で完了です。

 

Autooptimiz画像設定

 

お疲れさまです。ここまで設定が完了したら一度サイトスピードを確認しましょう。

因みに、私はこの設定を行っただけで以下のスコアになりました笑

 

ページサイトインサイト結果82点

 

ユニちゃん
「Autoptimize」とは恐ろしく有能なプラグインだな。

 

PageSpeed Insights改善方法②画像の圧縮

 

さて、次は「次世代フォーマットでの画像の配信」の改善についてみていきましょう。冒頭で、出てきたGoogleが推奨する改善できる項目にあるやつです。

「PageSpeed Insights」改善項目

 

「次世代フォーマットでの画像の配信」とあるのですが、まず次世代フォーマットとは「WebP」、「JPEG 2000」「JPEG XR」というファイルが該当するようです。こちらはChlomeでは見れるけどSafaiでは見れないというようなブラウザにより制限があり実用的ではないです。

ここで、Googleとして伝えたいことは「画像ファイルが軽いと読み込みを早くすることができるぞ」ということです。

画像サイズが大きすぎると読み込みが遅くなるのでなるべく画像は圧縮して使うようにしましょう。

画像ファイルの圧縮は下記のサイトで無料かつ簡単にできます。

画像の質はJPEG・PNGなど画像ファイル形式によって得意・不得意な表現があるので、画像の内容によって適切なファイル形式を選ぶと有効です。

特徴は以下のようになっていますのでご参考ください

JPEG

圧縮率が高くフルカラーでの表現ができるため、写真向き。
画像データを小さくできるが、圧縮のたびに画質が劣化。

PNG

8bitは256色でイラストやロゴ向き。24bitならフルカラー表現やアルファチャンネルにも対応できる。
圧縮しても画質は劣化しない。

私は画像ファイル圧縮ツールで特に大きいサイズだった20枚ほどの画像を圧縮して写真を入れ替えたところ、サイトスピードは更にあがりました。

■82→87

 

まとめ

今回は「PageSpeed Insights」の改善方法をご紹介させていただきました。

簡単かつすぐできる有効な方法は2つです。

 

  1. 「Autoptimize」のプラグインを設定する
  2. 画像圧縮を行う

 

みなさんもぜひ試して、サイトスピードの改善に役立ててもらえたら嬉しいです!

やってみて結果が出た場合は、改善できたよー!

Twitrerで教えてもらえると、とっても喜びます!

 

ユニちゃん

Twitterのアカウントはこちら

@unicoornblog

 

 

 

Copyright© ユニコーンブログ , 2020 All Rights Reserved Powered by AFFINGER5.