今回は、このような疑問にお答えしていきます！
本記事の内容
- PageSpeedInsightsとは？
- モバイルの表示速度を改善する方法は４つ
- まとめ
こんにちは、ゆうき（@yukiblogmesi）です。
今回はブログ運営において、大切な要素の１つである「ページの表示速度」を改善する方法をご紹介します。
ポイント
なお、ページの表示速度の計測にはPageSpeedInsightsを使用。Googleの公式ツールなのでブロガー必須と言えます。
「PCの表示速度は割と速いのに、モバイルの表示速度だけどうしても改善できないんだよな‥。」
あなたもこのように悩んでいるブロガーの1人ではないでしょうか？
今回は、そんな悩みを解決するべく、僕自身が実践して効果があったモバイル表示速度を速くする方法をご紹介。
この記事を読むことで、PageSpeedInsightsの使い方から、モバイルの表示速度の改善まで実施することが可能です。
本記事の信頼性
当ブログでも、PageSpeedInsightsを使用し頻繁にページスピードの確認を行っています。また、実際にPC、モバイル両方のページスピード（表示速度）を２倍以上改善することにも成功しました。
補足
なお、今回紹介するモバイル表示速度の改善方法は、前提としてWordPressブログ（エックスサーバー）を使用しているユーザーを想定しています。
そんな方は、ぜひ下記の記事を参考にしてみてください。
-
【簡単】WordPressブログの始め方【１０分で完了します】
続きを見る
もくじ
PageSpeedInsightsとは？
ブログの表示速度を改善する方法を紹介する前に、前提として計測ツール「PageSpeedInsights」について簡単に解説します。
結論から言うと、下記のことについて解説します。
- PageSpeedInsightsの概要と使い方
- PageSpeedInsightsの評価基準
ここを読むことで、表示速度について必要な知識が得られますので一読してみてください。
PageSpeedInsightsの概要と使い方
PageSpeedInsightsは、Googleが提供するWebサイトの表示速度を計測、評価するツールです。
下記はGoogle公式からの引用文です。
PageSpeed Insights では、モバイル端末やパソコン向けのページの実際のパフォーマンスに関するレポートと、そうしたページの改善方法を確認できます。
出典：PageSpeed Tools
つまり、PageSpeedInsightsを使用することで、あなたのブログの表示速度を計測し、改善が必要かどうか判断することができます。
ここからは、サクッと使い方を画像付きで解説します。使い方自体は簡単なので安心してください。
まずは下図のようにPageSpeedInsightsへアクセス。
あなたのブログのトップページURLを入力し「分析」をクリック。
すると数秒後に、PCとモバイル両方の表示速度の測定結果がでます（ここではモバイルのみお見せします）
早速、あなたのブログも測定してみてください。
PageSpeedInsightsの評価基準
さて、ここからはPageSpeedInsightsの評価基準や、見方を解説します。
ここを抑えることで、PageSpeedInsightsを活用してあなたのブログの表示速度を改善する方法が分かると思います。
まず、PageSpeedInsightsでは、ページ速度のランクとして下記の３つに分けられます。
ページ速度のランク
- Good：ページスコアが８０以上。最適化の余地はほとんどないとされている。
- Medium：ページスコアが６０～７９の範囲。ある程度最適化の余地があるとされている。
- Low：ページスコアが５９以下。最適化すべき点がかなりあるとされている。
この評価をもとに、あなたのブログの現在値を確かめ、改善が必要か不要かをまず判断していきましょう。
ポイント
Lowであれば、これからご紹介する方法でかなりの確率で改善すると思うのでぜひ、試してみてください。
PageSpeedInsightsのモバイル速度を改善する方法
ここからいよいよ、モバイルの表示速度を改善する具体的な方法をご紹介します。
結論から言うと、下記の４つ。
表示速度の改善方法
- Googleアドセンスの自動広告をやめる
- プラグインを導入する
- 画像を外部サイトで圧縮する
- 有料テーマを使用する
僕は上記を全て実施したところ、モバイルの表示速度が２倍以上に改善されました。
改善前のモバイル速度は下図。
改善後のモバイル速度は下図のとおり。
このように、僕の運営するyukiblogで実証済みですので、まだやっていない項目がある方はぜひやってみてください。
それでは、詳しく解説していきますね。
Googleアドセンスの自動広告をやめる
１つ目は、Googleアドセンスの自動広告をやめるのがおすすめ。
これは僕自身のサイトで、最も表示スピードの改善に効果を感じた方法だからです。
僕は自動広告をやめただけで、モバイル表示速度のランクが２０程度は改善しました。
方法は簡単でGoogleアドセンスにアクセス後、左側にある「広告」をクリックすると下図の画面になるので「編集」をクリックしましょう。
次に、広告の編集画面に移るので一番右上の「自動広告」の部分をオフにしましょう。
以上で、完了になります。
読者にとっても、アドセンス広告が多すぎると煩わしく感じるので、アドセンス広告は個別に設定することをおすすめしますよ。
メモ
なお、Googleアドセンスの個別設定方法については別記事にまとめます。
プラグインを導入する
プラグインの導入もページの読み込み速度を速くするために有効です。
理由は下記のとおり。
プラグインの目的
画像サイズを最適化できる
キャッシュを使用する
ソースを最適化する
これらを実現することで、ページの読み込み速度を改善することができます。
僕は上記３つを実現するために、「EWWW Image Optimizer」と「W3 Total Cache」、「Autoptimize」を使用しました。
それぞれ簡単に説明します。
注意ポイント
動作環境によっては、プラグインを導入することで不具合が発生するかもしれません。導入する前に必ずバックアップを取るようにしてください。
EWWW Image Optimizer
このプラグインを使用することで、画像サイズを最適化することが可能になります。
例えばあなたがブログに画像をアップロードした時に、このプラグインを入れておけば、自動で画像が劣化しないように画像サイズを圧縮してくれます。
ぜひ、あなたも導入してみてください。
W3 Total Cache
「W3 Total Cache」は、キャッシュを使用することで表示速度を改善することができる優れたプラグイン。
キャッシュとはざっくり言うと、一時的に保存されたサイトデータのこと。キャッシュを使用することができると、読者があなたのブログに訪問するたびに、データベースからサイトデータを読み込む必要がないので、表示速度が改善されるというカラクリです。
僕も、このプラグインを導入したことで、ページが表示される速度が目に見えて速くなりましたよ。
まだ導入していない方はぜひ試してみてください。
Autoptimize
あなたのブログのソースを最適化してくれるのが「Autoptimize」です。
ソースとは、テキストデータやCSS、JavaScriptのこと。簡単に言えばブログを構成する文字やレイアウト、デザインのもとになるものというイメージでOK。
これらの無駄をそぎ落として、ページの読み込み速度を速く、最適化できるのが「Autoptimize」です。
僕も先ほどの「W3 Total Cache」と一緒に導入して効果を感じることができました。
ぜひ、あなたのブログでも試してみてくださいね。
画像を外部サイトで圧縮する
モバイルの表示速度を改善する方法３つ目は、外部サイトで画像を圧縮すること。
先ほど紹介した「EWWW Image Optimizer」でも、あなたのブログの画像を圧縮することはできます。ただ、圧縮できる容量が若干少ないのがちょっと残念なところ。
それに比べて、外部サイトを使用することで、より大きな容量カットが可能になります。
具体的に僕が使っている外部サイトは「TinyJPG」です。
上図のように可愛い？クマのデザインが印象的。このサイトで画像を圧縮しつつ、アップロード時にEWWW Image Optimizerでさらに圧縮という方法で大幅に容量カットできます。
ぜひ、あなたもTiny JPG使用してみてくださいね。
有料テーマを使用する
最後は、もしかしたらもう既にあなたは導入済みかもしれませんが念のために。
ページの読み込み速度を今よりも速くしたいなら、WordPressの有料テーマを導入しましょう。
実際にテーマを無料から有料に変えただけで、表示速度が改善したという声は多く聞くからです。
僕自身は無料テーマの時に、ページの表示速度を計測していなかったので何とも言えませんが、検索順位は確実に上がりました。
SEOの点で見ても、やはり有料テーマは優れた点が多いため、機会損失を減らすためにも導入しましょう。
せっかく良いコンテンツを書いていても、テーマが悪くて検索順位上がらないのは非常にもったいないことです。
なお、僕自身の経験やネット上をリサーチして、本当におすすめの有料テーマを下記にまとめてみました。
ぜひ参考にしてみてください。
-
WordPressテーマのおすすめ８選【ブログ初心者必見】
続きを見る
モバイルの表示速度は改善しておこう
ここまで、PageSpeedInsightsを活用しあなたのブログの表示速度を改善する方法をご紹介しました。
最後にまとめておきます。
表示速度の改善方法
- Googleアドセンスの自動広告をやめる
- プラグインを導入する
- 画像を外部サイトで圧縮する
- 有料テーマを使用する
ページの表示速度を改善すること、特にモバイルの表示速度を改善することはSEOの点から非常に大切になってきています。
ぜひ、あなたも上記のことを実践し、表示速度の改善に取り組んでみましょう。