WordPressでブログを始めたもののアクセスが集まらない・・。
原因を色々調べていたところブログの表示スピードも大事であることが分かりました。
記事を作成することに熱中してしまい、表示スピードまで考えられてなかったのです・・反省。
そこでここでは私が表示スピードを改善するために実施したことをご紹介します！
表示スピードが遅い場合のデメリットとは
検索表示順位が下がる
表示スピードが遅いと、Googleから質の低いサイトとして検索順位を下げられてしまいます。
実際に、2018年にGoogleは公式ブログにて、モバイルページの表示スピードを検索順位に影響すると表明しています。
2010年からPCページの表示速度を検索順位の指標としていましたが、モバイル版も正式にアルゴリズムに組み込まれました。
ユーザーの直帰率が高くなる（ページを閉じてしまう）
「直帰率」なんてそれっぽい言葉を使ってしまい、すみません。笑
なかなか表示されないサイトに遭遇すると、イライラしてページを閉じてしまうことありますよね？
要はページを見ずに閉じられてしまう確率が高くなるということになります。
ユーザーに記事を見てもらいたいなら、素早く表示されるページにする必要があるということです！
Webサイトの表示スピードを調べてみよう！
表示スピードの大切さを理解していただいたところで、実際に自分のWebサイトの表示スピードを調べてみましょう！
ブログの表示スピードってどうやって調べるの？と思われている方も安心してください。
Googleがとても素晴らしいツールを用意してくれてます。
その名は「PageSpeed Insights」。
使い方は超簡単
まずは以下のボタンからサイトにアクセスしてみましょう。
するとこんな画面が表示されますので、赤枠部分に自分のWebサイトURLを入力。
あとは「分析」を押すだけで、結果が表示されます！
パフォーマンススコアの見方
PageSpeed Insightsで表示された結果はどのように見れば良いのでしょうか。
Googleによると以下の通り3分類されるとのことです。
| スコア「90~ 100」 | スコア「50 ~ 89」 | スコア「0 ~ 49」 |
| 早い | 平均的 | 遅い |
早く表示されるページにしたいので、スコア90以上を目指していきたいですね。
本ブログの検索結果は・・？
PageSpeed Insightsの結果は「モバイル版」と「PC版」の2種類の表示スピードを確認できます。
ワクワクしながら、本ブログのスコアを早速調べて見ました！
結果は・・・
モバイル版
PC版
モバイルのスコアが”60″という残念な結果に・・
PC版は”91”だったので早いページとして評価いただいたのですが、問題はモバイル版。
評価は”60“という結果に・・・普通にショックでした(T ^ T)
スコア50~90が平均値とされていましたが、50に近いので低評価のページと言っても過言ではないでしょう。。
本サイト（モバイル版）の問題点とは？
モバイル版の表示速度に問題があると分かったので、問題点を細かく確認していきます。
PageSpeed Insightsの素晴らしい点は、スコア判定の基準や、改善ポイントまでしっかり教えてくれるところにあります！
サマリとして以下3つの項目で結果表示されます。
- ラボデータ ： LighthouseというGoogleが提供しているサイトの品質向上ツールからの結果が表示されます。
- 改善できる項目 ： ページの読み込み速度に影響を与えている項目を指摘してくれます。
- 診断 ： Webサイト上で動いているアプリケーション（広告やサイトデザインなど）のパフォーマンスについての分析結果を指摘してくれます。
私のサイト（モバイルページ）結果は以下の通りでした。
本サイト（モバイルページ）の診断結果
ラボデータ
改善できる項目
診断
すみません、スクリーンショットをなぜか消去していて消えてました・・(T ^ T)
「第三者コードの影響を抑えてください 」の項目で1150ミリ秒間ブロックされたという結果が出てました・・。
モバイル版の表示速度を上げるために実施したこと
診断結果より、特に悪い結果が出ていた以下3点の改善をしていくことに決めました。
- 「次世代フォーマットでの画像の配信」
- 「使用していないCSSを削除してください」
- 「第三者コードの影響を抑えてください」
「次世代フォーマットでの画像の配信」への対策
ここでの対策としては、JPEGやPNGと言った拡張子ではなく「JPEG 2000、JPEG XR、WebP」と言った圧縮性に優れた拡張子を利用することになります。
ただ、私は次世代フォーマットへの変更は実施しませんでした！
次世代フォーマットは対応しているブラウザが限られている
次世代フォーマットとして推奨されている「JPEG 2000、JPEG XR、WebP」は対応ブラウザが限られているんです・・。
※JPEG 2000：Safariのみ対応
※JPEG XR：InternetExplorer、Edgeのみ対応
※WebP：SafariやInternetExplorerが対応外
折角圧縮効率を上げても、画像が表示されないだったら意味がないですよね・・。
なので今回はフォーマット変更は行いませんでした。
ちなみに対応ブラウザは、【Can I use ?】というサイトで確認可能です。
プラグインを利用して画像を圧縮
次世代フォーマットへの変更はしませんでしたが、プラグインを利用して画像の圧縮はしっかりとしました。
今回は圧縮プラグインでも人気のある「Compress JPEG & PNG images」を利用しました！
「使用していないCSSを削除してください」への対策
WEBページを開くとページの全体を読み込まれるようになっています。そのため、ページに画像等が多ければ多いほど読み込みに時間がかかります。
またスマホの場合、表示される画面はPCよりもかなり小さくなっているので、全てのページを読み込むのは非効率ですよね。
それを解決してくれるのが「BJ Lazy Load」というプラグインです！
画面をスクロールして辿り着いた時点で初めて画像を読み込みをするようにしてくれるので、表示速度を上げてくれます。
「第三者コードの影響を抑えてください」への対策
私の場合、「Google/Doubleclick Ads」という項目が特に悪影響となっておりました。
この「Google/Doubleclick Ads」はアドセンス広告によるものなので、改善は難しいのですが
広告の出稿料を減らすことで改善が出来ます。
Adsenseの設定画面で、広告の数を減らすことで出稿料を抑えることができます。
まとめ
以上の対策を実施したところ、モバイルページでスコア81まで改善できました！
※ちなみにPC版はスコア95まで向上しました。
基本的に、モバイル版を向上させればPC版も改善されるので、モバイル版の向上だけ目指せば大丈夫です！
ただ今後も目標のモバイル版スコア90を目指して頑張っていきたいと思います！
コメント