みなさんこんにちは。
副業ブロガーのソルです。
※ブログの毎日更新は234記事目です。
ブログを運営していると気になってくるのがサイトの表示速度。
サイトの表示速度が遅いだけでユーザーの離脱率は上がってしまいます。
何より、あなた自身が日頃からグーグルを使う時に経験していると思うのですが・・・
何か調べようとしている際に
という感じで苛立ちを覚えてしまうとどうでしょう？
じっくりとページを見ようという気もなくなりますし、もう一度そのページを見ようとも思いませんよね？
このように、今の時代は「サイトの表示速度が遅いだけで」ユーザーは不便なサイトだと判断してしまうのです。
2018年に実施されたGoogleスピードアップデート以降、サイトの表示速度は「SEOの検索順位にも影響がある」と言われています。
なので、あなたのブログの表示速度も速いに越したことはないのです。
しかし・・・いきなり
と言われたところで、どうすればいいのかよく分かりませんよね？
というわけで、今回の記事では
- ブログの表示速度を確認する方法
- ブログの表示速度が与える影響とは？
- ブログの表示速度を速くする方法
- 注意：ただ表示速度が早いだけではダメ
上記4つについてお話しします。
- 自分のブログの表示速度が遅いなあと感じる人
- ブログの表示速度が遅いことでどんな影響があるのかを知りたい人
- 表示速度を簡単に上げる方法を知りたい人
ブログの表示速度を確認する方法
まずは、あなた自身のブログの表示速度を計測してみましょう。
一番手っ取り早いのは「あなた自身でチェックしてみること」なのですが、きちんと測定して改善点などを知ることが大事ですからね。
その１：Page Speed Insight
まずはグーグルが運営しているPage Speed Insightです。
Page Speed Insightの使い方は非常に簡単で、表示速度を計測したいサイトのURLを入力し、ボタンをクリックするだけです。
すると、あなたのサイトを分析し、全てのコンテンツが表示されるまでにどのぐらいの秒数がかかるのかを測定してくれます。
それと同時に、
- モバイル版・PC版それぞれの表示速度
- 何が原因で表示速度を遅くしているのか
- どうすれば表示速度を速くできるのか
も確認できます。
毎日チェックする必要はないと思いますが、定期的にあなたのブログの表示速度をチェックしておきましょう。
ちなみに、目安としては
- 0〜49：要改善
- 50〜89：許容範囲だが改善の余地あり
- 90〜100：速い。問題無し。
という感じです。
その２：Test My Site
次が、これもグーグルが運営する「Test My Site」です。
こちらもサイトの表示速度などを測定してくれるのですが、どちらかといえば「モバイルに特化している」というのが特徴ですかね。
使い方はPage Speed Insightと同じで、URLを入力してクリックするだけです。
また、測定結果などのレポートを自分のメールアドレスに送信することもできます。
余談ですが、Test My Siteにはモバイルサイトの読み込み速度の重要性について訴えられています。
興味深い調査があります。ウェブページが表示されるまでに 10 秒以上かかる場合、49% の人がそのサイトを去る2というのです。ほかにモバイルサイトを閲覧する際、最もイライラする要素を聞いた調査3では、46% もの人がページの表示が遅い点を挙げています。
調査4によると、読み込み時間の 1 秒の遅延は、下記のような悪影響をもたらすとしています。
- ページビュー : -11%
- コンバージョン率 : -7%
- 顧客満足度 : -16%
おまけ：このブログの表示速度
余談ですが、このブログの表示速度も計測しておきました。
Page Speed Insightの結果は以下の通りです。
PCは99点なので文句無しですね！（ドヤ）
モバイルは81点と改善の余地ありではありますが、まあ速い方だと思います。
次がTest My Siteの結果です。
4G接続で3秒なので「遅い」ということになりますね・・・
なので、まだまだ改善余地はあります・・・
ブログの表示速度が与える影響とは？
ブログの表示速度の測定方法が分かったところで、ブログの表示速度が与える影響を再確認しておきましょう。
まず、グーグルによれば
表示速度が1秒から3秒に落ちると、直帰率は32%上昇
表示速度が1秒から5秒に落ちると、直帰率は90%上昇
表示速度が1秒から6秒に落ちると、直帰率は106%上昇
表示速度が1秒から7秒に落ちると、直帰率は113%上昇
表示速度が1秒から10秒に落ちると、直帰率は123%上昇
ページの要素（テキストやタイトル、画像など）の数が400個から600個に増えると、コンバージョン率は95%下がる
という結果があります。
直帰率とは、1ページのみのセッション数をすべてのセッション数で割った値のことです。つまり、すべてのセッションの中で、ユーザーが1ページのみ閲覧して、Google アナリティクス サーバーに対するリクエストを1回のみ発生させたセッションが占める割合のことです。
また、上記以外にも
Googleによれば、ページの反応が0.5秒遅くなるとアクセス数が20％低下する
Amazonによれば、ページの表示速度が0.1秒遅くなると、売り上げが1%低下する
という結果もあります。
このように、あなたのブログの表示速度が少し遅いだけで、多くのユーザー（顧客）を獲得する機会が減ってしまうわけですね。
また、冒頭でもお話ししましたが・・・
あなたがグーグルで何かを調べていたとして、表示速度が遅いページを見ていたらどんな気持ちになるか、もう一度考えてみてください。
という感じで、すぐに他のページに移動してしまうことがほとんどだと思います。
このような結果を招かないためにも、あなたは常にブログの表示速度を速くしておく必要があるのです！
ブログの表示速度を速くする方法
それではここで、ブログの表示速度を速くする方法をご紹介します。
私もプロではありませんが、先ほどご提示した写真の
- PC：99点
- モバイル：81点
という結果は、多少の証拠・証明にはなるのかと思います。
その１：トップページには広告を貼らない
まず、あなたのブログのトップページには広告を貼らないようにしましょう。
詳細はこちらの記事でもお話ししているのですが・・・
以前もブログの表示速度を計測していた際、どうもグーグルアドセンスの広告画像が表示速度を遅くしているような結果が見受けられました。
と思いつつも、思い切ってグーグルアドセンスの広告をトップページに表示しないように設定したところ・・・
サイトの表示速度がグーンと速くなりました。
そもそも論ですが、あなたのサイトのトップページにデーンと広告があったらユーザーはどう感じるでしょうか？
「邪魔だなあ」と思うに違いありません。
それに、大半のユーザーは検索エンジンからあなたのサイトを訪れる人がほとんどですが、そのほとんどは「トップページ」ではなく「何かしらの記事が書かれているページ」に行くことが普通です。
トップページを見る人は「あなたのサイトをブックマークしている人」ですね。
基本的な考え方として、あなたのトップページを見るような人は「リピーター」のようなものであり、あまりアドセンスの広告をクリックしません。
どちらかといえば記事を読んだ上で広告をクリックする人が多いですからね。
そう考えると、トップページにアドセンス広告を貼り付けたところであまり意味はなく、むしろサイトの表示速度を遅くするので逆効果であるということが分かると思います。
その２：不要なプラグインを削除する
次に、不要なプラグインを削除しましょう。
ブログを始めたての頃は「オススメのプラグイン」というものを、よく分からないままとりあえずインストールしていたかと思います。
しかし、慣れてくると
というものも出てくるはずです。
なので、そうした余計なプラグインは全て削除してしまいましょう。
特に「All in One SEO」を使っている人は要注意です。
このプラグインは特にサイトを重たくするプラグインであり、使っているテーマによっては役割が被っていることもあります。
最後に、私がインストールしているプラグインを一覧にしておきます。
- AddQuicktag（クイックタグを作成するプラグイン）
- Akismet Anti-Spam (スパムからブログを保護するためのプラグイン)
- Autoptimize（ソースコードを圧縮・最適化するプラグイン）
- Batch Cat（カテゴリーを一括変更するプラグイン）
- BJ Lazy Load（画像などの読み込みを遅延させるプラグイン）
- Classic Editor（ワードプレスの編集画面を古いタイプに戻すプラグイン）
- Compress JPEG & PNG images（画像を圧縮するプラグイン）
- Contact Form 7（お問い合わせフォームを作成するプラグイン）
- Easy Table of Contents（目次を表示するプラグイン）
- Edit Author Slug（記事を書いた人を表示するプラグイン）
- Font Awesome（アイコンを表示・挿入するプラグイン）
- Google XML Sitemaps（サイトマップをグーグルに送信するプラグイン）
- Kattene（Amazonなどの販売リンクを表示するプラグイン）
- No Category Base (各記事のURLからカテゴリーを消すプラグイン)
- Optimize Database after Deleting Revisions（データベースなどを最適化するプラグイン）
- Per page head（headコードを編集できるプラグイン）
- Permalink Redirect（古いURLにリダイレクトしてくれるプラグイン）
- PuSHPress（すぐにインデックスさせるプラグイン）
- Pz-LinkCard（関連リンクをカード風にするプラグイン）
- reCaptcha by BestWebSoft（reCaptchaを導入するプラグイン）
- Scripts-To-Footer（JavaScriptをフッターで読み込ませるプラグイン）
- Simple 301 Redirects（301リダイレクトを設定するプラグイン）
- Simple CSS（CSSを編集するプラグイン）
- SiteGuard WP Plugin（サイトをスパムなどから保護するプラグイン）
- SlideShare（SlideShareを表示するプラグイン）
- Throws SPAM Away（日本語が入っていないコメントをスルーするプラグイン）
- TinyMCE Advanced（ワードプレスの編集画面を使いやすくするプラグイン）
- WebSub/PubSubHubbub（すぐにインデックスさせるプラグイン）
- Wordfence Security（セキュリティを高めるプラグイン）
- WordPress Ping Optimizer（Pingの送信を制御するプラグイン）
- WP Fastest Cache（キャッシュを保存するプラグイン）
- WP Multibyte Patch（文字化けを無くすプラグイン）
- WP to Twitter（ツイッターと連携させるプラグイン）
こうしてズラーっと並べてみたときに「このプラグインはどんな役割がある」と明確に答えられないのであれば、そのプラグインは削除するべきですね。
その３：画像を圧縮する、JPGにする
次に、画像を圧縮しましょう。
画像の圧縮にはCompress JPEG & PNG imagesがオススメです。
プラグインをインストールしていれば、画像を読み込んだ時点で勝手に圧縮してくれますからね。
あなたは何もする必要はありません。
また、画像の種類についてですが、PNGは容量が大きくなってしまうので、必ずJPGに変換してから使いましょう。
あとは、オンラインで画像を圧縮するということも可能です。
こちらのサイトを使えば、1回で最大20枚の画像を圧縮できます。
しかも無料で使えますし、オンラインなので何かをインストールする必要もありません。
多くの写真を使っているブログであれば少し面倒な作業かもしれませんが、あなたのブログの表示速度を少しでも早くするためですからね！
面倒臭がらずにきちんと圧縮しましょう！
その４：画像の読み込みを遅延させる
次が、画像の読み込みを遅延させるプラグインをインストールするという方法です。
普通であれば
サイトが表示される→とりあえず画像も読み込まれる
というが流れになります。
なので、重たい画像を使っていると、それだけで読み込み時間がかかってしまうのですが・・・
読み込みを遅延させるプラグインを使うことで、
サイトが表示される→画像も読み込まれない→その画像のページに到達したら読み込まれる
という流れになりますので、一番最初にサイトを読み込んだ時の速度は速くなります。
オススメのプラグインは「BJ Lazy Load」です。
その５：コード等を圧縮・最適化する
最後が、コード等を圧縮・最適化するプラグインをインストールするという方法です。
Webページを構成する３大要素は以下の通りなのですが、
- テキストデータ：文字通りテキストのデータ。前述の通りテキストの容量は全体から見ると非常に小さいので特に気にする必要はない。
- CSS：デザインやレイアウトを指定する言語。別名スタイルシート。
- JavaScript：画像にカーソルを合わせると自動的に拡大させたり、アニメーションを取り入れる時などに使うプログラム。
このうち、CSSとJavaScriptは、テキストデータと比べて遥かに読み込み時間がかかります。
通常、CSS・JavaScriptをともにソースのタグ内に記述する場合が多いのですが、それだとページを開く時に先にJavaScriptを読み込もうとするため、その読み込みが終わるまでサイト表示に関する処理が一旦ストップしてしまうのです。（＝表示速度が遅くなる）
そこで、JavaScript のタグを少し書き換えて（タグ内ではなくタグの直前に配置することで）処理時間のタイムラグを回避することができるのですが・・・
そんなことをブログ初心者に言ったところで
という感じですよね？笑
なので、こうしたソースコードなどを自動で圧縮・最適化してくれるプラグインをインストールしちゃいましょう。
私のオススメは「Autoptimize」です。
プラグインをインストールして有効化するだけで、自動的にソースコードを圧縮・最適化してくれます。
簡単に言うと、こんな感じでコードを最適化してくれます。
なので、あなたが何かをする必要は一切ありません。
Autoptimizeは非常に人気が高いプラグインで、使っている人も非常に多い信頼できるプラグインです。
あなたもこれを機にインストールしておきましょう。
注意：ただ表示速度が早いだけではダメ
というわけで、ブログの表示速度を速くする方法をご紹介しました。
しかし、ここで一つだけ言わせてください。
ただ表示速度を速くするだけではダメだということです。
いくら表示速度が速かったとしても、コンテンツに中身がなければ意味はありません。
例えばですが、何かの食べ物を紹介するとします。
普通であれば写真を掲載するものですが「表示速度が落ちるから」と言って、写真を載せなければどうなるでしょうか？？
ユーザーが視覚的にイメージできなくなるので「利便性が悪い」と感じてしまうのです。
ページの表示速度が速いに越したことはないのですが、
早さを重視するあまり「コンテンツの質」を落としてしまうことは本末転倒である
ということです。
極論を言えば、ページの表示速度が多少遅かったとしても「読みたい」と思わせるコンテンツでなければいけないのです。
表示速度はラーメン屋さんと同じ原理
私は、ブログの表示速度はラーメン屋さんと同じ原理だと思っています。
例えばですが、行列ができるような美味しいラーメン屋さんであれば、多少並んででもラーメンを食べたいと思いますよね？？
これは
ページの表示速度が多少遅かったとしても「読みたい」と思わせるコンテンツでなければいけない
ということと同じです。
多少時間がかかったとしても「食べたい」と思わせるラーメンでなければいけないのです。
逆に、ガラガラのラーメン屋さんで大して美味しくないラーメンを食べたとしましょう。
別に待ち時間がないので「時間の短縮」にはなりますが、大した満足感は得られませんよね。
という状況であれば良いのですが、あえてそのラーメン屋さんにリピートしようとは思わないはずです。
これもブログに置き換えると
- 表示速度は速いけど大して役に立たなかったコンテンツ
- あえてリピートしようと思わないコンテンツ（最初に見てそれっきり）
ということになります。
理想論を言えば
めちゃくちゃ美味しいラーメン屋さんに、一切並ばずに食べられること
です。
ブログで言えば「表示速度がめちゃくちゃ早くて、しかもコンテンツも充実している」です。
あなたが目指すべきは「表示速度がめちゃくちゃ早くて、しかもコンテンツも充実している」なのです。
この辺りはバランスの問題でもあります。
まとめ
というわけで、今回の記事では
- ブログの表示速度を確認する方法
- ブログの表示速度が与える影響とは？
- ブログの表示速度を速くする方法
- 注意：ただ表示速度が早いだけではダメ
上記4つについてお話ししました。
ブログの表示速度を速くする方法をまとめておくと、
- トップページには広告を貼らない
- 不要なプラグインを削除する
- 画像を圧縮する、JPGにする
- 画像の読み込みを遅延させる
- コード等を圧縮・最適化する
です。
最後にもう一度言いますが、あなたのブログの表示速度が0.5秒遅くなるとアクセス数が20％低下するわけですからね。
今の時代「サイトの表示速度は速くて当たり前」の時代ですから、速いに越したことはありません。
しかし！
ただ速いだけではいけません。
ただ表示速度が早いだけでコンテンツの質が悪いのであれば、それは本末転倒ですらね。
極論を言えば、多少表示速度が遅かったとしても「読みたい」と思わせるコンテンツでなければいけないのです。
なので、あなたが目指すべきは「表示速度がめちゃくちゃ早くて、しかもコンテンツも充実している」なのです。
コメント