当ブログでは、エンジニア経験者の夫婦が経験談に基づいた有益情報を、それぞれ個々の持ち味を出しながら幅広く発信しています。

【SEO対策】ページ読み込み速度の重要性と具体的な施策を解説!

こんにちは、ゆめたろうです。

 

ゆめたろう

SEO対策には、『ページ読み込み速度が重要』だという事を知ったよ!

だけど、具体的にどういった部分を改善していけば良いんだろう?
ある程度はデザインも考えないと、逆にユーザビリティが下がっちゃうしなぁ…

 

ブログ運営をある程度こなしてきた方であれば、一度はこのような事を考えた事があるのではないでしょうか?

 

という事で、今回はSEO対策の一つでもある『ページ読み込み速度の高速化』について解説していきたいと思います。

 

『ページ読み込み速度』SEOの関係性

めちゃくちゃ早いスピードメーターのイメージ

そもそも、何故『SEO対策』に『ページ読み込み速度』が深く関係しているのでしょうか?

 

答えはシンプルで、『ユーザーの離脱率』に大きく関係する要因の一つだからです。

 

こちらのGoogleの公式文章にも

ページの読み込みに 1 秒以上かかった場合、ユーザーの集中が途切れてしまう傾向にあるようです。

という記載がある事からも、『ユーザーの離脱率』に大きく関係している事が分かると思います。

 

『1秒程度?それくらい待てそうなものだけど…』

 

そのように思う方がいらっしゃるかもしれませんが、記事を作っている側の人の考え方と、たまたまそのサイトに訪れた人の考え方は大きく乖離しているので注意が必要です。

 

あなた自身も、何らかのページを開こうとした時に、ページロードに少し時間がかかっていると

『あー、なんか遅いな。他のページに行くか。』

という感じで、無意識に戻るボタンを押したりする事が必ずあるはずです。

 

という事で、これらの要素を実現するために、『ページ読み込み速度の高速化』を行うのに有効な施策の一部を解説していきたいと思います。

 

『ページ読み込み速度の高速化』に有効な施策とは

という事で、『ページ読み込み速度の高速化』を行うのに有効な施策を、下記に5つ程リストアップしてみました。

 

  • 画像の最適化を行う
  • 画像の遅延読み込みを行う
  • 自動広告や過剰広告を外しておく
  • 記事の不要なリビジョンを削除
  • プラグインは最低限に

 

これらの要素について、深掘りしていきたいと思います。

 

画像の最適化を行う

『ページ読み込み速度の高速化』のためには、通信料を食いやすい『画像』の対策は、最早必須と言っても過言ではありませんね。

しかし、『最適化』とだけ言われても具体性がありませんよね。

 

という事で、具体的にやるべきことは次の2つとなります。

 

  • データ容量の削減
  • Google推奨の次世代フォーマットを使用(WebP)

 

データ容量の削減

データ容量の大部分を左右するのが、『解像度』となります。

もちろん、画質とトレードオフになってしまいますが、容量を無視してペタペタ張り付けているととんでもない事になりますので…

 

自分はとりあえず、横幅[1024px]以下に調整するようにしています。

解像度を調整するだけであれば、特にプラグインも必要ありません。

 

自分はいつも、[メディア]→[画像の編集]と進み、

解像度の編集手順

画面右上の赤枠部分にある入力枠で、解像度をを調整してからページに挿入するようにしています。

 

簡単ですね♪

 

Google推奨の次世代フォーマットを使用(WebP)

これについては、『EWWW Image Optimizer』と呼ばれるプラグインを使って変換される事をオススメします。

 

一度正しく設定しておけば、画像をアップロードする際に、画像データの圧縮や拡張子の最適化を自動で実施してくれるようになります。

もちろん、アップロード済みの画像であっても一括で変換することが可能となっております。

 

詳細な手順につきましては、以下の記事をご覧ください。

関連記事

こんにちは、ゆめたろうです。 SEO対策において、ページ読み込み速度を高速化させる事は重要ですよね。とはいえ、見た目にも凝りたいとなると、画像の使用は欠かせません。 ただし、残念な[…]

スピードが凄く早いイメージ

 

画像の遅延読み込みを行う

『画像の遅延読み込み』というと、ちょっとイメージが付きづらいかもしれませんが…

この手法を用いれば、相対的にではありますが、『ユーザーからの操作を受け付けるまでの時間』を短縮することが可能です。

 

ゆめたろう

通常であれば、『ページ内の全ての画像を読み込んで表示』させるんだけど…

遅延読み込みにすると、『最初に表示される部分の画像だけを読み込んで表示』させて、
『その他の画像については、スクロールで画像の位置に近づいたときに読み込む』ように出来るんだ。

これで、相対的にページ読み込み速度をアップさせる事が出来るぞ!!

 

『画像の遅延読み込み』には、『Lazy Load』や『BJ Lazy Load』といったプラグインを使う手もありますが、割とテーマ側でも対応されていたりするので、自分の使ってるテーマの機能にあればそちらで設定するのがベストですね!

 

自動広告や過剰広告を外しておく

Googleアドセンス等を使って収益化を図っている場合、なるべく多く広告を貼って、ユーザーにクリックを促したいのは山々だと思いますが…

広告の貼りすぎは、ユーザビリティの低下だけでなく、『ページ読み込み速度の低下にも繋がる』ので要注意です!

 

また、自動広告機能という便利なものも存在しますが、これを使う場合と使わない場合とで、『ページ読み込み速度』にかなりの差異がありました。

『自動』というくらいなので、色々と無駄なパケットのやり取りをしているのかもしれませんね…。

 

可能であれば、手動で最適な広告配置を目指すようにしておきたいところですね。

 

記事の不要なリビジョンを削除

画像などに比べると効果は薄いかもしれませんが、突き詰めるのであれば、『記事の不要なリビジョン』についても定期的に削除しておくことをオススメします。

不要なデータベースレコードは、削除しておくに越したことはありませんので…。

 

プラグインは必要最低限に

プラグインは基本的に、『ページ読み込み速度』や『サイトの安定性』とトレードオフなものが多いので、可能な限り使わないようにするべきでしょう。

 

ただ、そうは言ってもやはり便利なものが多いので、使いたくなっちゃうものもありますよね。

 

という事で、当サイトで最低限使用しているプラグインについて紹介してみようと思いますので、興味がある方はこちらの記事をご覧ください。

※現在工事中です。

 

『ページ読み込み速度』を実際に計測してみよう

今回は、SEO対策の一つでもある『ページ読み込み速度の高速化』について解説を行いましたが、いかがでしたでしょうか?

 

最後に、こちらの記事に記載してある手法を全て実施した結果、当サイトの『ページ読み込み速度』はどうなったのか。

ビフォーアフターを紹介して終わりにしようと思います。

 

なお、計測に使用したサイトは以下の2つとなります。

気になる方は、是非ご自身のサイトも計測してみてください。

 

GTmetrix is a free tool that analyzes your page's speed perf…

 

PageSpeed Insights <Before>

高速化を実施する前のPageSpeed Insights計測結果(PC)

高速化を実施する前のPageSpeed Insights計測結果(スマホ)

 

 

PageSpeed Insights <After>

高速化を実施した後のPageSpeed Insights計測結果(PC)

高速化を実施した後のPageSpeed Insights計測結果(スマホ)

 

GTmetrix <Before>

高速化を実施する前のGTmetrix計測結果

 

GTmetrix <After>

 

高速化を実施した後のGTmetrix計測結果

 

うーん。。。

 

このサイト、結構デザインを凝っているので、しょうがない感じもあったりはするのですが…

 

確かに効果が出ているとはいえ、もう少し詰めていく事が出来そうですね。

もちろん、速さだけが全てではないので、犠牲にしてはいけないものも存在するのですが…

 

それと、この記事では紹介していませんが、サーバはかなりハイスペックなものを借りていますし、JavaScriptコード・HTMLコード等の圧縮や、ブラウザのキャッシュ等は既に使っているので…

残るは割と細かい部分で対策を進めていくことになりそうです。

 

しかし、まだやれることはあるのは確実ですので、またいつか記事にまとめてみたいところですね。

 

それでは今回はここまでとなります。

ありがとうございました!

 

 

記事はいかがでしたか?

こちらには記事を読んで頂いた方に対して最も適した広告が表示されます。

<スポンサーリンク>


スピードが凄く早いイメージ
宜しければフォローして下さると嬉しいです!