みなさん、こんにちは！
ストレスフリーでやりがいのある仕事を探して、WebマーケティングをはじめたSHIORIです。
SEO対策を行っていて、pagespeed insights で表示スピードを測定したけど、低いスコアで落ち込んでないですか？
はい、私もその1人でした。
pagespeed insights の細かな評価については分からないけど、とりあえず何からやったらいいか分からずに放置していないですか？
そんな方は、これからご紹介する5つの方法をやったら、絶対スコアが上がりますよ！
実際にやってた結果、下記の数値まで上げることができました。
| モバイル | 43 → 84 |
| デスクトップ | 74 → 99 |
スコアをここまで上げた、簡単な5つの方法をご紹介します。
・pagespeed insights でモバイルの数値を上げたい方
・ラクしてSEO対策をしたい方
・表示速度をもっと上げたい方
そんな方の悩みを解決します。
pagespeed insights でモバイルのスコアが84点になった方法
実際に私が行ったのは、誰でもできる簡単なやり方です。
- ヘッダー画像を無くす
- フォントをデフォルトへ変更
- プラグインを入れる
たったこれだけで、スコアが上がらなかったモバイルも改善できたので、ご紹介します。
pagespeed insights でモバイルだけスコアが悪い原因
そもそもなぜ、表示速度でモバイルだけがものすごくスコアが悪くなってしまうのでしょうか？
それは、あなただけではなく、スマホ本体そのもののせいだったのです。
画像を読み込んだり、処理をするときは、スマホとPCだと圧倒的にCPUのレベルが低くなるので、スマホのスコアを上げるのは難易度が高いのです。
（CPU＝処理を行うパーツのこと、心臓部分）
なので、PCよりスコアが下なのは、仕方がないことなのです。
それでもできるだけスコアは上げたいですよね。
時間を使えばいくらでも上げることはできますが、そこに割いている時間があるなら、記事を書いた方がいいです！
なので目安として、モバイルのスコアは50・PCのスコアは80を目指しましょう！
簡単にモバイルのスコアが上がる方法
それでは実際にスコアを上げていきましょう！
モバイルのスコアを20上げた、ものすごく簡単な方法をご紹介します。
- ヘッダー画像をなくす
- フォントをデフォルトへ変更
たったこれだけですが、画像の容量が重かったり、フォントの処理速度が時間がかかってしまったりして表示速度に影響していたようです。
なので、ものすごくこだわりがあるわけじゃなかったら、変更してしまった方がいいですね。
3分でできる設定なので、ぜひこちらを参考にしてやってみましょう！
プラグインを入れてスコアが上がる方法
さらに、モバイルのスコアを21上げたプラグインは下記のものです。
- EWWW Image Optimizer（画像の軽量化）
- WP Super Cache（キャッシュを利用する）
- Autoptimize（ファイルの圧縮と結合をする）
1つずつ見ていきましょう！
EWWW Image Optimizer（画像の軽量化）
EWWW Image Optimizer は、「画像を軽量化する」プラグインです。
pagespeed insights のスコアが低い要因の1つが画像が大きいことです。
GoogleからもWebp（ウェッピー）と使って画質を小さくすることが推奨されています。
Webp（ウェッピー）は、画像を小さくするために1枚1枚作業しなければならないので、時間がかかってしまいます。
多すぎて全部できない方に、おススメするのがこちらのプラグインです。
少しサイズが大きくなってしまいますが、プラグインを入れるだけで画像をアップロードしたときは自動で圧縮してくれます。
しかも、既にWordPress内にある画像も一括最適化できるのです。
簡単にpagespeed insights のスコアも上がるので、こちらは必ず入れた方がいいプラグインです。
WP Super Cache（キャッシュを利用する）
WP Super Cache は、キャッシュを利用するプラグインです。
キャッシュとは、一度訪問したサイトのデータを一時的に保存し、表示速度を上げる仕組みの事です。
例えば、一度開いたWebページのデータを保存しておき、再び同じページを開く時に高速で表示してくれるのです。
似たようなプラグインとして、WP Fastest Cache がありますが、こちらは有料プランでないとモバイルのキャッシュをしてくれません。
なので、無料使えるWP Super Cache のプラグインをご紹介します。
注意点として、キャッシュを利用していると、修正点が反映されないことがあります。
理由は、キャッシュが記事修正前のファイルを読み込んでいるのが原因です。
こちらの改善方法も後程、画像込みで説明します。
Autoptimize（ファイルの圧縮と結合をする）
Autoptimize は、ファイルの圧縮と結合をするプラグインです。
インストールしてファイルを圧縮すると、余分な改行や空白がなくなって、サイズが軽量化されます。
複数のファイルを結合すると、読み込みファイル数が少なくなって、全体の読み込み時間も短くなります。
もしかしたらファイルを結合することで、レイアウトが変わってしまう場合がありますが、プラグインを停止して頂ければ元に戻ります。
こちらのサイトで試してみた結果、あまり気になることがなかったので使用しています。
- EWWW Image Optimizer
- WP Super Cache
- Autoptimize
3つ紹介しましたが、WP Super Cache （画像の軽量化）のプラグインは必ずインストールした方がいいです。
WP Super Cache（キャッシュを利用する）・Autoptimize（ファイルの圧縮と結合をする）は、さらにスコアを上げたい方は入れてください。
実際にモバイルのスコアが84になったので、効果は絶大です！
モバイルの数値をもっと上げるプラグインのインストールから初期設定
それではさっそく、インストールしていきましょう！
WP Super Cache
インストール方法
まずは、「WP Super Cache」のインストールを行っていきましょう。 
まずはWordPressのダッシュボードから、
「プラグイン」→「新規追加」とクリックしていきます。
右上の検索窓に「WP Super Cache」と入力すると上記のようにプラグインがヒットするはずです。
こちらの「今すぐインストール」をクリックしてプラグインをインストールします。
「WP Super Cache」で検索すると、「WP Fastest Cache」というのがヒットする場合があります。
トラの画像の方は有料プラグインになります。無料版だとモバイルのキャッシュを有効化できないので、「WP Super Cache」を入れましょう。
インストールが完了すると、上記のように有効化ボタンが表示されます。
有効化ボタンを押して、「WP Super Cache」を有効化にしましょう。
こちらでインストールは終了です。
初期設定
キャッシングの利用をするために必要な初期設定になるので、必ず行ってください！
ダッシュボードの左のメニューの、
「設定」→「WP Super Cache」とクリックしていきます。
すると上記のような画面に移動します。
こちらの「簡単」タブからキャッシングの設定を変更します。
「キャッシングの利用」をチェックを入れ、「ステータスを更新」をクリックします。 
その後、高度な設定タブをクリックすると、上記画面に移動します。
ズラリと難しそうな項目が並びますあg、基本的には「推奨」と記載があるリストにチェックを入れていれば問題ありません。
下に移動して、「高度な設置」の項目では、3つにチェックを入れましょう。
- モバイルデバイスサポート
- 投稿や固定ページの公開、または更新時にすべてのキャッシュファイルとクリア
- コメントが投稿された時に該当のページだけリフレッシュする
設定後は「ステータスを更新」を忘れずにクリックしてくださいね！
「有効時間とガーベージコレクション」では、以下のように設定することで、キャッシュの削除を自動化できます。
- キャッシュのタイムアウト「86400」と入力する
※86400秒＝24時間 - スケジューラ―「定時」にチェックを入れ、「00:15」と入力する
設定後は「有効時間を有効」をクリックしてください。
最後に、先読みタブの設定です。
こちらでは、ページに初めて訪れたユーザーに対してもキャッシュを有効にできる設定方法です。
- プリロードされたキャッシュファイルは「」分毎にリフレッシュされます
「1440」と入力する
※1440分＝24時間 - プリロードモードにチェックを入れる
「設定を保存」をクリックし、作業は終了になります。
修正点が反映しなかった場合
もしも、ページが表示られなかったり、変更が反映されていない時は、キャッシュのクリアを実行すると解決できます。
「設定」→「WP Super Cache」をクリックします。
その後、コンテンツタブをクリックすると、上記画面にクリックします。
ここで「期限切れのキャッシュを削除」と「キャッシュを削除」の両方をクリックすれば、キャッシュを全て削除することができます。
Autoptimize
インストール方法
先程と同様に、WordPressのダッシュボードから、
「プラグイン」→「新規追加」とクリックしていきます。
右上の検索窓に「Autoptimize」と入力
「今すぐインストール」をクリックしてプラグインをインストールします。
インストールが完了すると、上記のように有効化ボタンが表示されます。
有効化ボタンを押して、「Autoptimize」を有効化にしましょう。
初期設定
続いて初期設定をして、ファイルの最適化をしていきましょう！
ダッシュボードの左のメニューの、
「設定」→「Autoptimize」とクリックしていきます。
すると上記のような場面に移動します。
ここでは、3つにチェックを入れます。
- HTMLコードを最適化
- JavaScript コードの最適化
- CSS コードを最適化
チェックを入れたら「変更の保存とキャッシュの削除」をクリックしてください。
その後、画像タブをクリックすると、上記の画面に移動します。
ここでは、全てのチャック項目にチェックしてください。
画像最適化の品質では、「Lossy」を選択してください。
「Lossy」にすることで、一番軽量化することができます！
もしこれで画質が悪くなってしまったら「Glossy」に変更しましょう。
このサイトは「Lossy」にしていますが、あまり気になることはなく利用できています。
自分のサイトに合った物を選びましょう。
最後に、「変更を保存」をクリックして全工程が終了になります。
よく頑張りました💮
最終的なスコア比較
それでは変更したものを実査に PageSpeed Insights を使って計測してみましょう！
この5つの方法をやっただけで、モバイル41・PC25もスコアが上がりました。
5つ全てやってみてすぐに変わらない方がいるかもしれませんが、過去28日間のデータがもとになっているので、改善してもすぐには反映がされません。
なので、すぐに変えずに1ヶ月置いてからまた確認してみてくださいs。
まとめ
PageSpeed Insights でスコアを上げるためにやった方法は、たった5つの事だけです。
- ヘッダー画像をなくす
- フォントをデフォルトへ変更
- EWWW Image Optimizer（画像の軽量化）
- WP Super Cache（キャッシュを利用する）
- Autoptimize（ファイルの圧縮と結合をする）
スコアが高いと、よりユーザーの為になっている記事とGoogleが認識してくれるので、上位表示も上がりやすくなります。
ぜひ、高得点を目指してみてください。
