みなさん、こんにちは！
ストレスフリーでやりがいのある仕事を探して、WebマーケティングをはじめたSHIORIです。
サイトの表示スピードをあげたいのに、なかなか上がらないという悩みはありませんか？
PCは良くても、モバイルのスピードが40止まりだったり‥
ネットで調べても色んな情報が多すぎて分からない！
そんな方は、私がスコアを43→84に上がったやり方を紹介しますので、ぜひ参考にして下さい。
・ブログの表示速度をもっと上げたい方
・モバイルの表示速度を上げたい方
・ラクしてSEO対策をしたい方
そんな方の悩みを解決します。
PageSpeed Insightsで数値を上げる方法
「PageSpeed Insights」で数値を上げる方法は、画像を圧縮したり、使っていないプラグインを消したりすれば、簡単に数値を上げることができます。
まず「PageSpeed Insights」は何かというと、ページ速度を計測できる無料のサイトです。
ページ読み込み速度が速いほど、Googleのランキングが上がりやすくなります。
なので、こちらの数値を上げるのは、SEO対策するのにもとっても大事な要素です！
モバイルスコアの改善方法
こちらは、PCも同じことが言えますが、
- 画像を適切なサイズにする
- ページ表示速度を改善する
- 重たいプラグインの削除
- HTML,CSS,Javascriptなどソースの最適化
- キャッシュプラグインで最高化
をすることで、スコアが改善されます。
難しすぎてよくわからないので、簡単にできる最低限の事だけ紹介します！
PageSpeed Insightsの目安をチェック
まずは、PageSpeed Insights でご自身のサイトのスピードを測定してみてください。
こちらを使って実際にスコアを測定してみました。
今回は、モバイルに焦点を当ててみていきます。
0～100点で測定されるスコアは、
0～49点（赤/悪い）・50～89点（オレンジ/要改善）・90点以上（緑/よい）の3つに改善されます。
100点に近いほど良いサイトと言えますが、時間をかけて改善すればよくなりますが、そこまで満点を目指す必要はないです。
最初の目安としてモバイルのスコアは50・デスクトップのスコアは80に設定できれば大丈夫です！
モバイルの表示スピードが20上がる簡単な設定の仕方
ページスピードを上げるためにやった、WordPressの設定からできる簡単な方法を2点ご紹介します。
- ヘッダー画像を無くす
- デフォルトフォントの変更をする
たったこれだけで、スコアが20上がりました。
それでは実際にやっていきましょう！
ヘッダー画像を無くす
変更前 43 → 変更後 49
ヘッダー画像の容量が大きいと非常に重たくなってしまいます。
削除もしくは圧縮させて表示スピードをあげましょう！
まずはWordPressのダッシュボードから、
「プラグイン」→「カスタマイズ」とクリックしていきます。
すると上記のような画像に移動します。
こちらの、「ヘッダー画像設定」をクリックします。
上記のような設定画面に移動するので、
「削除」→「公開」を押してください。
実際に変更したのがこちらです。
ヘッダーにあまりこだわりが無かったら、削除してしまった方がスコアが上がります。
デフォルトフォントへの変更
変更前 49 → 変更後 63
私の場合、JINを使っているのですが、フォントをデフォルトに変更しただけでこんなにスコアが上がりました。
先程と同様に、WordPressのダッシュボードから、
「プラグイン」→「カスタマイズ」とクリックしていきます。
すると、上記のような画面になるので、
「サイトの基本設定」をクリックしてください。
上記のような画像に変更するので、
フォント選択の設定を「デフォルト」にします。
最後に「公開」をクリックしたら、設定は終了です。
デフォルト以外だと処理に時間がかかってしまうので、絶対ゴシックがいい！という場合以外は、デフォルト表示をおすすめします。
変更する前と後の比較
たった3分しかいじっていないのに、モバイルのスコアが「20」も変更しました。
すぐに変更できるので、変更してみてください！
もっと表示速度が上がるプラグイン
もっと表示速度を上げたい方は、WordPress内にプラグインを入れていきます。
- EWWW Image Optimizer（画像の軽量化）
- WP Super Cache（キャッシュを利用する）
- Autoptimize（ファイルの圧縮と結合をする）
今回はこちらの無料で使える3点をご紹介します。
EWWW Image Optimizer（画像の軽量化）
こちらをいれると、簡単に画質を保ったままファイルを小さくしたり、軽量化ができます。
例えば、スマホで写真を撮影したものをそのまま使うと、たくさんの容量・サイズが大きくなってしまいます。
「EWWW Image Optimizer」をアップロードしておくと、自動に圧縮され、さらに既にWordPressのメディアにある写真も圧縮してくれます。
WP Super Cache（キャッシュを利用する）
このプラグインを入れることで、キャッシュを利用することができます。
キャッシュとは、一度訪問したサイトのデータを一時的に保存し、表示速度を上げる仕組みのことです。
無料のプラグインですが、設定をする必要があります。
Autoptimize（ファイルの圧縮と結合をする）
ファイルというのは、HTML・CSS・JavaScript です。
こちらをインストールしてファイルを圧縮すると、余分な改行や空白がなくなって、サイズが軽量化されます。
複数のファイルを結合すると読み込みファイル数が少なくなって、全体の読み込み時間も短くなります。
「EWWW Image Optimizer」のプラグインは、スコアを上げるためには必ず入れた方がいです。
もっとスコアを上げたい方は、こちらの2つもインストールしてみてください。
- WP Super Cache（キャッシュを利用する）
- Autoptimize（ファイルの圧縮と結合をする）
最終的なスコアの比較
ページの速さを実際に、PageSpeed Insights を使ってスコアを測定しました。
- ヘッダー画像をなくす
- デフォルトのフォント設定
- EWWW Image Optimizer（画像の軽量化）
- WP Super Cache（キャッシュを利用する）
- Autoptimize（ファイルの圧縮と結合をする）
こちらの5つをやってみた結果…
モバイルのスコアが「41」も上がりました！
ちなみに、PCのスコアは、74→99と「25」上がりました！
ぜひやってみてね！
まとめ
以上が、私が試したpagespeed insightsで数値を上げる方法です。
簡単に無料でできるものなので、ユーザーの為に入れてみてください。
表示速度を向上させることで、ユーザーにとって見やすいサイトを作ることができます。
検索順位にも関わってくるので、対策を行っていきましょう。
