サイトの表示速度はSEOで重要なの？
もしそうなら、表示速度の調べ方や速くする方法を教えてほしい！
このような悩みを解決します
本記事の信頼性
SEO関連の書籍30冊以上、数々の有料コンテンツや動画などありとあらゆるSEO関連の情報を調べ、そして実際にアクセスの集まっているブログを分析した結果、SEOの本質が見えてきました。
結論から先に言っておくと、サイトの表示速度はSEOで重要です。
さらにはSEO以外においてもメリットはめちゃくちゃあるので、もし他のサイトと比べてみて、自分のサイトは表示に時間かかるなーと感じたら、すぐに改善しておかないと損しますよ。
じゃあなんでそんなに重要なのか？という点について、これから解説していきます。
表示速度が速いとSEOで有利です
SEOで有利になる3つの根拠
SEOでサイトの表示速度が速い方が有利だと言われるのには理由があります。
それは、「googleが表示速度の早いサイトを評価しているから」です。
検索順位はgoogleによって決められるため、googleの評価を得ることは結果的に検索順位を上げることに繋がります。
googleがページの表示速度を重要としている根拠は３つあります。
- googleが掲げる10の事実
- スピードアップデート
- googleアナリティクス
これだけを並べてもわかりにくいと思うので、ひとつずつ解説していきます。
Google が掲げる 10 の事実というものが公表されており、この中で以下のような既述があります。
３．遅いより速いほうがいい。
Google は、ユーザーの貴重な時間を無駄にせず、必要とする情報をウェブ検索で瞬時に提供したいと考えています。自社のウェブサイトにユーザーが留まる時間をできるだけ短くすることを目標にしている会社は、世界中でもおそらく Google だけでしょう。Google は、Google のサイトのページから余計なビットやバイトを削ぎ落とし、サーバー環境の効率を向上させることで、自己の持つスピード記録を何度も塗り替えてきました。検索結果の平均応答時間は 1 秒足らずです。Google が新しいサービスをリリースするときには、常にスピードを念頭に置いています。モバイルアプリをリリースするときも、新時代のウェブにふさわしい高速ブラウザの Google Chrome をリリースするときも同じです。今後も、さらなるスピードアップを目指して努力を続けていきます。
Google が掲げる 10 の事実
「自社のウェブサイトにユーザーが留まる時間をできるだけ短くすることを目標にしている会社は、世界中でもおそらく Google だけでしょう。」
この文章が個人的に好きです。 ここまでユーザーのことを一番に考えている企業があるでしょうか？
また、2018年7月にWEBサイトの表示速度に関するアルゴリズムのアップデート「スピードアップデート」が実施されました。
それに伴い、ページの表示速度が検索順位の評価に影響するようになりました。
そしてあとで詳しく説明しますが、googleからサイトの表示速度を調べるツールが公開されています。
表示速度を調べるツールを公開したということは、表示速度を重要だとしている証拠でもありますよね。
これらの理由から、サイトの表示速度はgoogleが評価する項目のひとつであることが分かります。
そこまで大きな要因ではないという意見も...
とはいえ、表示速度がそこまでSEOに影響するのか？という意見もあります。
確かにgoogleも重要視しているポイントではありますが、コンテンツの質や、記事の専門性、権威性など情報そのものの方が評価されやすい傾向にあります。
SEOという観点だけでは、正直ページの表示速度はそこまで重要ではないのかも？と思いますが、実は表示速度を上げた方がいいというのは、SEO対策のためだけでなく、もうひとつ重要な理由があるんです。
表示速度は速い方がいいもう一つの理由
ズバリその理由とは、ユーザーの離脱率を下げるためです。
説明よりまず、こちらを見てください。
ページの表示速度とサイト離脱率の関係についてgoogleが発表してものです。
英語なので分かりにくいかもしれませんが、ページの表示速度が1秒から3秒、1秒から5秒、1秒から6秒、1秒から10秒になったとき、ページから離れてしまうユーザーがそれぞれ、32%、90%、106%、123%も増えてしまうという調査データです。
時間の価値が上がっている現代では1秒のロスでも致命的です。
これがページの表示速度が重要であるもうひとつの理由で、結論、少しでもページ速度は速いほうが良いということですね。
サイトの表示速度を調べる３つの方法
じゃあ自分のサイトの表示速度は速いのか遅いのかを知らなければ、対策ができません。そこで、表示速度を調べる方法を３つ紹介します。
具体的な方法は以下の３つです。
一つずつ解説していきます。
Google PageSpeed Insights
PageSpeed Insightsはgoogleが提供するページの表示速度を教えてくれるツールです。
登録不要、サイトのURLを入力するだけで、PC・モバイル別に表示速度をスコア化して教えてくれます。
さらに、どこを修正すれば良いか提案もしてくれるので、かなり優秀なツールですね。
Websee
chromeの拡張機能で、自分のサイトを開いた状態でこのツールを使うと、サイトの読み込み速度を表示してくれます。
アイコンをクリックするだけなので、サクッと表示速度を分析したいときには便利ですね。
➝ Websee
Test My Site
Googleが2017年6月末から提供しているモバイルサイトのページ読み込み速度を計測できるテストツールです。
注意しなければいけないことは、「Test My Site」はモバイルページの読み込み速度について診断するツールで、デスクトップのページ表示速度は計測できないということです。
「競合他社と速度を比較する」「速度が向上した場合の費用対効果を見積もる」などの分析もできます。
スマートフォンの普及によって、モバイル端末から閲覧する人も多いので、スマホでの表示速度も無視できません。
サイトの表示速度をあげる３つの方法
上記の方法で分析した結果、自分のサイトの表示速度が遅かったのなら、すぐに改善しましょう。
SEO的にも順位が上がりにくいし、ユーザーの離脱率も高まるのでデメリットしかないです。
今回は特にブロガーに向けて、wordpressサイトの表示速度を速くする具体的な方法を３つ紹介します。
- 画像を最適化
- ソースコードの最適化
- キャッシュを使用
ひとつずつ解説していきます。
画像を最適化
サイトを構成する要素で、もっとも容量が大きくなりがちなのが「画像」です。
アイキャッチ画像や見出し画像、バナーやアイコンなど、ひとつのサイトにも数多くの画像が使用されています。
それらの画像サイズが大きいほどサイトの読み込みに時間がかかるので結果的に表示速度は遅くなってしまいます。
画像を最適化させる方法は具体的に以下の２つです。
- 画像の圧縮
- 画像の遅延読み込み
画像の圧縮
おすすめは、「EWWW Image Optimizer」というプラグインを使用する方法です。
投稿するすべての画像に対して、自動で圧縮してくれるめちゃくちゃ便利なプラグインです。
これを使うと、JPGファイルでは平均15%、PNGファイルでは平均50%ほどサイズを圧縮することができます。
さらに過去に投稿した画像に対しても一括で圧縮してくれるので、「すでに大量の記事を投稿して今更圧縮していくのは無理！」という方にはこのプラグインがおすすめです。
また、画像の質はあまり下げたくない！という方には以下のツールを紹介します。
投稿する前にこのツールを使って圧縮する必要があるため、少々面倒ではありますが、どうしても画質にこだわりたい画像を使用するときには、こちらを使ったほうが、画質を損なうことなく圧縮することができます。
画像の遅延読み込み
画像の遅延読み込みと聞いてもピンとこないブログ初心者のために簡単に解説しておきます。
通常、webページを読み込む時、ページの上から順にロードが始まります。そのときに、例えばページの上の方にめちゃくちゃ重たい画像が貼られていると、その画像の読み込みに時間がかかり、他のコンテンツはその間表示されません。
そこで、画像の読み込みは後回しにして、先に文字を表示させるようにしておくと、とりあえずページがすべて表示されているように見えるので、ユーザーの離脱率を下げる効果があります。
画像を遅延読み込みさせると聞くとなんだか難しそうに聞こえますが、プラグインを使えばめちゃくちゃ簡単にできるので試してみてください。
ちなみに、Lazy Loadというプラグインがおすすめです。
ソースコードの最適化
wordpressは主に３種類のファイルから構成されています。
HTML(PHP)
サイトのベースとなる文字情報を持ったファイルです。
CSS
サイトのレイアウトや、色、簡単なアニメーションなどの情報を持っています。
JavaScript
さらに複雑なアニメーション情報を担っているファイルです。
HTML(PHP)ファイルは文字情報を表示するだけのファイルなので、容量もそれほど大きくなく、サイトの表示速度にはほとんど影響しないです。
一方で、CSSとJavaScriptは読み込みの時間がかかるファイルなので、サイトの表示速度に影響するファイルです。
ファイルの最後の部分でjavascriptを読み込ませることで、サイトの表示速度の高速化ができます。
なんで高速化されるの？
厳密に言うと、トータルの読み込みスピードは変わりません。
ちょっと専門用語で申し訳ないのですが、HTMLファイルのheadと呼ばれる部分でまとめて読み込ませる書き方が一般的でした。
しかしこれだと、サイトを表示させるのに関係ないJavaScriptが読み込まれるまで、サイトの表示がストップしてしまいます。
HTML（＝文字情報）とCSS（デザイン情報）が先に読み込まれれば、サイトの見た目上はすべて表示されているように見えるので、サイトの表示速度が早くなったように感じることができるというわけです。
「javascriptを後で読み込ませる」と聞くと難しそうに聞こえますが、「Head Cleaner」というプラグインを使えば簡単にできます。
ちなみに、最初から記述方法が最適化されているテーマを使っている場合は必要ありません。
キャッシュを使用
キャッシュというものを使うと、サイトの表示を高速化させることができます。
先にどうすればいいのかということを伝えておくと、「W3 Total Cache」というプラグインを使えばサイト表示は高速化されます。
導入方法はこちらの記事がわかりやすいです。
注意
キャッシュ系のプラグインはテーマによって相性が悪い可能性があります。
導入前に、必ずバックアップを取ってから導入することをおすすめします。
また当ブログと同じAffinger5を使用している場合は、別のプラグイン「WP Fastest Cache」が推奨です。
なんで高速化されるの？
毎回サイトを読み込む時、
- サーバーに読みたいページ情報をリクエスト
- サーバーがwordpressへリクエスト
- wordpressがデータベースからページの情報を探す
- 探したページの情報をサーバーへ返す
- サーバーから読者の端末にページ情報を返す
このような流れが毎回行われています。
ページを読み込む度にこれが行われていたのでは、時間がかかりますよね。
そこで一度読み込んだ情報はwordpressが保存しておいて（この保存しておく情報がキャッシュ）その情報を返すことで、ショートカットすることができるという仕組みです。
まとめ：サクッと高速化しておこう
ページの表示速度を最適化するのはプラグインでサクッとできます。
もしこの記事で紹介したサイト高速化の方法を導入していないのであれば、ぜひ自分のブログに導入してみてください。
手間がかからないので、さっさとすませて渾身の記事づくりに専念しましょう。