この記事では、サイトの表示時間が遅いときに起きる問題やその改善方法について解説しているとん
この記事をお読みの方、こんな経験をしたことはありませんか？
コンテンツの表示が遅いとイライラしてしまうのは、誰もが共感できると思います。
今はネット回線も高速になっており、サイトは待たなくても表示されるというのが当たり前の時代です。
そんな中、１つのページを開くだけで3秒も時間がかかってしまうと、せっかちな現代人にとってはストレスになり、サイトの評価も下がってしまいます。
この記事では、そんなことにならないように、ブログの表示速度を上げる方法について解説していこうと思います。
- 自分のブログが重くて悩んでいる
- 自分のブログの直帰率がなぜか高い
- 少しでもSEOで有利になりたい
サイト表示速度が遅いとどうなる？
サイト表示速度が遅いと何が問題になるぷう？
まずはじめに、サイトの表示速度が遅いとどのような弊害があるのかについて、しっかり理解していきましょう。
ブログアフィリエイト初心者あるあるですが、キーワードなどを意識してブログ記事を書くのはいいことなのですが、それ以外の部分について見落としがちなことが多いです。
その代表的な項目が、サイトの表示速度です。
表示速度についてあまり意識せずにブログを運営している方が意外と多く、誰かに言われるまで気づかなかったということもザラにあります。
また、普段は自分のブログに頻繁にアクセスするため、キャッシュが残っているので、サイトは速めに表示されます。
それもあって、自分ではサイトの表示時間の遅さに気づいていないパターンも実はあるのです。
後ほど、サイトの表示速度を客観的に確認する方法についても解説しますが、自分のサイトは大丈夫とは思わずに、一度はチェックしてみましょう。
今すぐ自分のサイトをチェックするとん
そして、サイト表示速度が遅いと以下のような弊害が生まれてしまいます。
- 直帰率が上がる
- 成約率が上がる
- SEOに悪影響を及ぼす
それぞれについて、今から詳細を説明します。
直帰率が上がる
まず一番の弊害は、サイトの直帰率が上がってしまうという点です。
直帰率って何？って方はこちらの記事を確認するとん
直帰率とはサイトに訪れた人が、他のページを見ずに去っていってしまう率のことを表していますが、サイトの表示時間はもろに影響します。
サイトの表示時間が遅ければ、ページが開かれる前にサイトを閉じてしまいますので、その時点で直帰確定です。
そして、運よく１ページ目の内容を見てもらったとしても、次のページにいくのにも時間がかかってしまうため、そこでも離脱してしまう可能性が高まります。
なので、サイトの表示速度が遅いと、直帰率が大幅に上がってしまう原因になります。
ちなみに、サイトの表示時間と直帰率の関係性については、このようなデータが一般的に認知されています。
表示時間が3秒遅くなると直帰率32%上昇
表示時間が5秒遅くなると直帰率90%上昇
この数値を見る限り、3秒まではまだマシですが、5秒となるともう絶望的だということがわかります。
たった1秒の差でも、直帰率が数%上がる結果となってしまいますので、少しでも表示時間を早められるように、後述の対策を１つ１つ行うことをオススメします。
成約率が下がる
サイトの表示時間が遅くなると、成約率にも影響をもたらします。
成約率とは、ブログのキャッシュポイントとして置いているアフィリエイト広告の成約率や、メルマガリストなどの取得率になります。
多くの方がビジネスでブログを行なっていますので、成約率の低下は収益化をする上で致命的になります。
成約率が1%でも下がってしまったら、同じアクセス数でも年間を通せばそれなりに金額が変わってくるでしょう。
サイトの表示時間で成約率が下がってしまうのはかなり勿体無いです。
ちなみに、成約率について一般的に言われているデータは以下の通りです。
表示が1秒遅れるごとに成約率は7%減少
通販サイトでは1秒の遅れで成約率20%減少
1秒遅れるだけでも、成約率へそれなりの影響があることがわかると思います。
ブログでは成約率の高い記事を書くことも重要ですが、表示速度によっても成約率に違いが出てきてしまいますので、その点は覚えておきましょう。
せっかくいい記事を書いても表示速度のせいで成約率が下がったら台無しだとん
SEOに悪影響をもたらす
そして、それらの悪影響は結果的にSEOにも影響します。
ページの検索順位の評価にサイトの表示速度が含まれている
サイトの表示速度とページの検索順位の関係性については、実はグーグル公式が関係性を認めているのです。
原文：
As part of that effort, today we’re including a new signal in our search ranking algorithms: site speed. Site speed reflects how quickly a website responds to web requests.翻訳：
https://webmasters.googleblog.com/2010/04/using-site-speed-in-web-search-ranking.html
この取り組みの一環として、今日では検索ランキングアルゴリズムにサイトのスピードという新しいシグナルが追加されています。 サイトの速度は、ウェブサイトがウェブリクエストにどのくらい迅速に応答するかを反映します。
そして、従来まではPC表示での速度が重要視されていましたが、昨今のスマホ普及率を鑑みて、スマホの表示速度での判断基準が設けられています。
読み込み速度はこれまでもランキング シグナルとして使用されていましたが、それはデスクトップ検索を対象としていました。 そこで 2018 年 7 月よりページの読み込み速度をモバイル検索のランキング要素として使用することを本日みなさんにお伝えしたいと思います。
https://webmaster-ja.googleblog.com/2018/01/using-page-speed-in-mobile-search.html
このように、グーグルが公式で発言していますので、ページの表示速度と検索順位に密接な関係があるということが証明されています。
信ぴょう性のある情報ですので、この情報を元に、表示速度の重要性についてより真剣に考えていきましょう。
サイト表示を速くすればメリットだらけ！
サイト表示時間を確認する方法
どうやって自分のブログの速度を見るんだぷう？
サイトの表示速度の重要性を理解した上で、ご自身のサイトの表示速度を客観的に確認する方法について解説していきます。
先ほども書きましたが、自分のブログの表示時間の遅さについてなかなか気づけないことが多いです。
一度サイトにアクセスするとキャッシュというものが出来るため、次の表示時間は短くなります。
なので、自分のブログの表示時間を改善するためには、客観的に表示時間を確認できるツールが必要です。
これからサイト表示時間を見るための便利なツールを紹介しますので、一度ご自身のサイトで利用してみましょう。
Google PageSpeed Insights
グーグル社が提供しているスピードチェックツールが一番多く利用されています。
https://developers.google.com/speed/pagespeed/insights/
検索順位を決めているグーグルが提供しているツールなので、かなり参考になると思います。
- 表示速度を点数でわかりやすく教えてくれる
- どの項目を改善すればいいのか支持してくれる
このツールの非常に優れた点は、スピードを点数で表すわかりやすさと改善点のアドバイスです。
点数表示により具体的なスピードをチェック出来ますし、ゲーム感覚で点数を上げるというモチベーションも生まれます。
また、点数を出した上で改善点も教えてもらえるので、何をすればいいのかもわかります。
使い方
使い方は非常にシンプルで、サイトのURLを入力して分析をクリックするだけです。
そして、スコアが表示されます。
モバイルとパソコン両方を確認できますので、どちらも確認してみましょう。
下の方にはページの改善ポイントが表示されています。
各項目を見ると、何を改善すればいいのか具体的な記載がありますね。
ただ、初心者の方が見てもチンプンカンプンだと思います。
なので、一番わかりやすい項目をまずは見ていきましょう。
それが一番上の、次世代フォーマットでの画像の配信という項目です。
この項目では、どの画像が重いのかについて記載されています。
画像が重いとページの表示速度が遅くなりますので、まずは重い画像の圧縮から始めましょう。
精度は微妙！？
実際自分のサイトのスコアをみてみると、ショックを受ける方が多いと思います。
このスコアによって、多くのブログ運営者が頭を抱えて奔走しているのですが、中にはツールの精度について疑問視している声も少なからずあります。
実際、検索上位に入っているブログを見ても、スコア的には低いサイトが多いです。
他のSEOの情報を配信している方の中には、グーグルのツールよりも、「実際に表示を確認して遅くなければ問題はない」という意見も出てきています。
ですので、グーグルツールのスコアについては、あくまで参考までに見ておくと良いでしょう。
もちろん、出来るだけスコアを上げられるように出来ることはしていきましょう。
ひとつの指標として把握しておくと良さそうぶぅ〜
PCよりスマホの表示速度に気を遣おう
先ほどグーグルの見解を載せましたが、現在はスマホファーストになっていますので、スマホの表示速度に気を遣いましょう。
特に、スマホ表示は速度が遅くなりがちですので、より気を遣う必要があります。
改善方法については、後ほど記載しますので、参考にしてください。
シークレットモードで確認しよう
スコアの他に、自分で実際の表示速度を確認することも重要です。
その際、ブラウザのシークレットモードという機能を使ってサイトを表示させましょう。
シークレットモードでは、クッキーやキャッシュがまっさらな状態でページを閲覧出来る
そうすることによって、初めてページを訪れた人と同じ立場でページを表示することが可能になります。
シークレットモードを使って実際のページ表示速度を体感してみましょう。
遅いと感じた場合は、改善が必要です。
サイト表示速度を改善する方法
ではいよいよ、サイトの表示速度の改善方法について解説していきます。
今回は以下の６つの方法を紹介します。
簡単に実践出来るものから、少しずつ取り組んでいきましょう。
- サーバーを変更する
- テーマを変更する
- 画像を圧縮する
- AMP対応にする
- ソースコードを最適化する
- プラグインを少なくする
サーバーを変更する
サイトの表示速度は、使っているサーバーのスペックによって大きく変わります。
スペックの低いサーバーを使っていると、それだけで速度が落ちてしまいますので、一番重要な項目と言っても過言ではないです。
もしサーバースペックで困っている場合は、一度ジャストサーバーをお試しください。
サーバーのプランを変更する
もし他社のサーバーを利用している場合は、サーバーのプランを変更できないか検討してみてください。
プランを変更すると大抵の場合スペックも上がりますので、表示速度が改善出来ることが多いです。
料金は上がってしまいますが、よく考えてみるとそこまでの負担ではないケースが多いかと思います。
年単位で見ると差額分をアフィリエイトで補うことは簡単ですので、プランの変更も視野に入れておきましょう。
テーマを変更する
サイトの表示速度は、テーマによっても変化します。
テーマによっては速度にかなり気を遣っているものもあるため、速度重視のテーマを使ってみるもの良いでしょう。
ちなみに、オススメのテーマについてはこちらで解説していますので、参考にしてください。
テーマのアップデート
意外と忘れがちなのが、テーマのアップデートです。
運営がしっかりしているところでは、月に１回くらいのペースで最新バージョンがリリースされます。
その際に様々な改善がテーマに加えられている可能性がありますので、バージョンアップは必ずしておきましょう。
ワードプレスのバージョンアップ
同時にワードプレスのバージョンアップも重要です。
セキュリティ面や内部構造の修正が行われている可能性がありますので、ワードプレスのバージョンアップは必ず行なっておきましょう。
画像を圧縮する
サイトが重くなる主な原因は、画像です。
ブログ記事のクオリティを上げるために画像はある程度必須となっていますが、画像のファイルが重いと読み込みに時間がかかってしまいます。
なので、画像を添付する際はなるべく圧縮してからアップロードするようにしましょう。
画像の圧縮については、便利なプラグインをこちらで紹介していますので参考にしてください。
次世代画像フォーマットを使用する
画像の容量を下げるためには、圧縮の他にも、拡張子を変えるという選択肢もあります。
jpegやpngが一番メジャーですが、最近ではWebPという画像形式が使われることが多いです。
WebPとは、画像の鮮度を落とさずに容量を劇的に減少させるフォーマットになります。
この形式で画像をアップすれば容量を減らすことが可能です。
ただし、WebPは閲覧ブラウザによって未対応の場合があります。
Safariなどで表示されない難点がありますし、切り替え対応など少し手間がかかりますので、初心者には少し難しいでしょう。
この対応はのちに行うことも視野に入れておきましょう。
AMP対応にする
続いて、AMPという仕様に対応するという施策も紹介しておきます。
AMPとは、スマホ表示を高速化するための仕組みのこと
AMPはスマホ対応のサイトのソースを丸ごと改造し、表示を高速化する技術になります。
最近ではワードプレスのテーマでAMP対応のものも増えてきましたので、それを使えば簡単だと思います。
ただ、AMPはサイトのデザインを簡略化することによって表示スピードを上げていますので、デザインの制約がある程度生まれてしまう難点もあります。
ですので、シンプルなサイトで良い場合は対応を検討しましょう。
ソースコードを最適化する
ブログは、CSSやJavaScriptなどのコードを含んで作られています。
そのソースコードには、無駄な改行などにより読み込みに時間がかかる場合があります。
なので、なるべくソースを簡略化し、容量を抑えるということも大切になります。
ただ、これも初心者には難しいと思いますので、プラグインで対応しましょう。
そのプラグインについてもこちらの記事で紹介しています。
プラグインを少なくする
そして、サイトを軽くするには、プラグインを少なくするという工程も必要です。
プラグインはワードプレスに追加機能を付けれる便利な機能ですが、付ければ付けるほどサイトが重くなります。
表示を軽くするためのプラグインを入れたり、その他の機能を追加で入れてしまうと、どうしても数が多くなってしまいます。
そこのバランスが非常に難しいですね。
ワードプレス運用者を悩ませるポイントですが、必要最小限に絞って入れるしか対処方法はありません。
出来ることからコツコツ行なっていくとん
シンプルがベスト！？
おしゃれでかっこいいブログを作っていく上では、様々なプラグインやデザインが必要になります。
ただ、デザインや機能に拘れば拘るほど、サイトが重くなってしまうという問題が発生します。
例えば、アニメーション機能でボタンを動かしたり、スライドメニューをつけたりすると、それも重くなる原因になってしまいます。
シンプルで質素なデザインが一番軽いサイトになりますので、どこまでデザインや機能に拘るのかが悩みのタネになります。
記事内においても、綺麗な画像が多い方がわかりやすくて見やすいサイトになるのですが、やはり置きすぎると読み込みに時間がかかってしまいます。
テキスト情報が一番軽いので文字メインが一番軽いのですが、それだと見づらいサイトになってしまう…
大変悩ましいですが、この点についてはバランスであるとしか言いようがありません。
ブログを運営しているうちに必要・不必要な機能についてわかってくると思いますので、その都度改善を試みていきましょう。
気になってサイトを開いてみたら、なかなかコンテンツが表示されなくて我慢できずに閉じてしまった