本記事のもくじ
ブログの表示速度が遅いと、売上の機会損失ですよ。
この記事で紹介する「WordPressブログを高速化する13の方法」を実践すると、ブログの表示速度が劇的に向上します。実際に当サイトでも、PageSpeed Insightsのスコア表示で高得点を叩き出してます。
そこで本記事では、WordPressブログを高速化させる方法を解説します。
この記事を読むと、ブログの表示スピードが遅いと悩んでるあなたに、ブログを高速化させる必要性や具体的な改善方法を理解できます。
結論、ブログを高速化させる方法は、下記のとおりです。
- 方法①:高性能サーバーを使う
- 方法②:WordPress有料テーマを使う
- 方法③:プラグインを減らす
- 方法④:画像を最適化する
- 方法⑤:画像を遅延読み込みさせる
- 方法⑥:アイキャッチ画像を非表示にする
- 方法⑦:キャッシュする
- 方法⑧:不要なデータを削除する
- 方法⑨:PHPを最新バージョンにする
- 方法⑩:Googleアドセンスを外す
- 方法⑪:CSS・JavaScriptを圧縮する
- 方法⑫:JavaScriptに『defer』を付与する
- 方法⑬:SNSコンテンツを埋め込まない
もはや、この記事で紹介する以外の施策は不要です。サクッと、WordPressブログを高速化させ、Googleとユーザーから愛され、ブログの売上を最大化させましょう。
Googleの理念を確認せよ
サイトの表示速度は速い方が良いですね。 Googleの理念を確認してみましょう。
3. 遅いより速いほうがいい。
Google は、ユーザーの貴重な時間を無駄にせず、必要とする情報をウェブ検索で瞬時に提供したいと考えています。引用元:Googleが掲げる100の事実
このとおり「ユーザーファースト」を掲げており、表示速度の重要性を説いてます。
- 表示速度が遅いと、滞在時間を奪う
- すると、ユーザーは離脱してしまう
- 結果、Googleの広告収益も下がる
つまり、ユーザー体験が損なわれつつ、Googleの広告収益も下がりかねない...というビジネス的な意図が隠されてます。
というわけで、サイトの表示速度が重要な理由を深堀りしていきます。
ブログの表示速度が大切な理由2つ
ブログの表示速度は「ユーザー」と「SEO」の観点から重要です。
- 理由①:ユーザーにマイナス評価
- 理由②:SEOでマイナス評価
理由①:ユーザーにマイナス評価
ページの表示速度が遅いと、ユーザーに即離脱されますよ。下記の調査でも、ページの読み込み速度は「3秒以内」が理想と判明してます。
- ページの表示速度「1〜3秒」→直帰率が32%UP
- ページの表示速度「1〜5秒」→直帰率が90%UP
- ページの表示速度「1〜6秒」→直帰率が106%UP
- ページの表示速度「1〜10秒」→直帰率が123%UP
あなたも、経験ありませんか?記事をクリックしたら、グルグルのままで、ページを離れたことを。
このように、人間はガマンのできない生き物でして、とても「せっかち」であることを忘れてはいけません。ファーストビュー画面は、3秒以内に表示させましょう。
理由②:SEOでマイナス評価
ブログの表示速度は、SEO対策で重要です。
検索ユーザーはできるだけ早く質問に対する答えを見つけたいと考えています。研究によると、ユーザーはページの読み込み速度を非常に気にかけています。読み込み速度これまでもランキング シグナルとして使用されていましたが、デスクトップ検索を対象としていました。そこで 2018 年 7 月より、ページの読み込み速度をモバイル検索のランキング要素として使用することになりました。引用元:Google検索セントラル|ページの読み込み速度をモバイル検索のランキング要素に使用します
- ユーザーは、検索への解答を早く知りたがってる
- ユーザーは、ページの読み込み速度を気にしてる
- ユーザーは、パソコンよりスマホで検索している
特に「モバイル検索」でのランキング要素として、ページの表示速度は重要です。
いつまでもグルグルしてたら、きっと離脱しちゃいますよね?表示速度の遅いサイトは、Googleやユーザーからもメッチャ低評価なんです。
具体例:コンビニ店員
たとえば、朝の通勤でコンビニ店員の接客スピードがトロかったら、あなたはどー思いますか?
- レジが遅い→お客は、イライラして、もう来ない
- 表示が遅い→読者は、イライラして、即離脱する
現代人はせっかちな傾向にあるため、ブログでも表示速度が遅いと、お客さんに逃げられますよ...ということ。
ブログの高速化 =「読者へのサーヴィス」です。Googleでも「遅いより速いほうがいい」と述べており、こーいった顧客心理による損失を考えましょうね。
ブログの表示速度を高速化する方法13個
ブログを高速化させる13の方法を解説します。
- 方法①:高性能サーバーを使う
- 方法②:WordPress有料テーマを使う
- 方法③:プラグインを減らす
- 方法④:画像を最適化する
- 方法⑤:画像を遅延読み込みさせる
- 方法⑥:アイキャッチ画像を非表示にする
- 方法⑦:キャッシュする
- 方法⑧:不要なデータを削除する
- 方法⑨:PHPを最新バージョンにする
- 方法⑩:Googleアドセンスを外す
- 方法⑪:CSS・JavaScriptを圧縮する
- 方法⑫:JavaScriptに『defer』を付与する
- 方法⑬:SNSコンテンツを埋め込まない
あくまでも「テクニック」ですが、ページ速度の改善としては、どれも効果抜群です。
方法①:高性能サーバーを使う
ブログの表示速度は、契約するレンタルサーバーによって大きく変わります。そのため、高速環境を実現したサーバーを使いましょう。
サーバーの応答時間は 200 ミリ秒以下に抑える必要があります。 サーバーの応答が遅くなる要因としては、さまざまな理由が考えられます。たとえば、速度の遅いアプリケーション ロジック、遅いデータベース クエリ、遅いルーティング、フレームワーク、ライブラリ、リソースによる CPU の消費、メモリ不足などです。サーバーの応答時間を改善するには、こうした要因をすべて検討する必要があります。引用元:GoogleDevelopers|サーバーの応答時間を改善する
このように、サーバーの応答時間は「0.2秒以下」が推奨されてます。
サーバー環境を見直し、表示速度を大幅に改善してみましょう。おすすめは、国内最大手レンタルサーバー「エックスサーバー」です。
なお、各レンタルサーバーの比較検討は【7社】WordPressブログおすすめレンタルサーバー徹底比較【プロが厳選】をどうぞ。
-
【7社】WordPressブログおすすめレンタルサーバー徹底比較【プロが厳選】
続きを見る
方法②:WordPress有料テーマを使う
WordPressのテーマを使うと、ブログの表示速度を大幅に改善できます。
特に「内部SEO対策」が充実してる有料テーマを選びましょう。おすすめは、デザイン・カスタマイズ・SEO対策の三拍子揃った「AFFINGER6」一択ですね。
人気WordPressテーマは【比較】WordPressブログでおすすめな有料テーマ7つ【AFFINGER6一択】にてまとめております。
-
【比較】WordPressブログでおすすめな有料テーマ7つ【AFFINGER6一択】
続きを見る
方法③:プラグインを減らす
WordPressに導入するプラグインは「必要最低限」にしましょう。
- 機能が干渉する
- 読み込み速度が遅くなる
- セキュリティハックにつながる
こーいったデメリットがあるため、プラグインは最小限にすることをおすすめします。具体的な目安は「10個以内」が理想です。
WordPressにおすすめなプラグインは【9選】WordPressブログおすすめ無料プラグイン【不要プラグイン5選】をどうぞ。
方法④:画像を最適化する
サイトの表示速度を大きく決定づける要素が「画像」です。
まず画像について分かりやすく単純にお伝えすると、WEBページのコンテンツはテキストと画像で出来ている。1万文字のテキストのサイズは、30KB(キロバイト)ほどにしかならないが、画像は、500 × 500 px 程度のものでも、JPG形式なら数十KB、PNG形式なら数百KBほどのサイズになる。引用元:バズ部 |1秒前半で表示する誰でもできる簡単な方法
上記のとおり、テキストの何百倍もの容量を占めるため、画像ファイルを最適化し、表示速度をガツンと改善させましょう。そのためには、下記を実践すること。
- 圧縮:画像のファイルサイズを小さくする
- リサイズ:画像そのもののサイズを縮小する
- WebP化:圧縮率の高い画像ファイル形式「WebP」に変換する
こーいった画像の軽量化に最適なのが、WordPressプラグイン「EWWW Image Optimizer」を使った方法です。
特に「画像のWebP化」は重要でして、サイトが超高速化します。WebPとは、次世代の画像ファイル形式でして、PNGやJPEGよりも圧倒的に軽いのが特徴です。
画像をSEO対策せよ
また、セットで「画像SEO」も大切です。詳しくは【10選】SEOに効果的!おすすめ画像対策まとめ【PV1.5倍/画像検索の重要性】をどうぞ。
方法⑤:画像を遅延読み込みさせる
画像は「Lazy Load」を付与させて、高速化させましょう。
Lazy Load とは?
Lazy Load とは、画面をスクロールした際に画像を読み込む技術です。ファーストビューで余計な画像を読み込まないため、ガツンと表示速度が上がります。
なお、WordPressに標準搭載されており、テーマでも細かく設定できます。その際、本体とテーマ側で機能が重複するため、必ずどちらか一方でOFFにしてください。
画像を遅延読み込みさせて、ユーザーの体感速度を上げましょう。
方法⑥:アイキャッチ画像を非表示にする
記事内でアイキャッチ画像を非表示にすると、サイトの表示速度がガツンと向上します。
当サイトでは、アイキャッチ画像を非表示にすると、離脱率が改善されました。
そもそも、ユーザーは悩みを解決するために検索します。一般的に「ブログにアイキャッチ画像は必要」と言われてますが、果たしてそうでしょうか?
個人的には、ユーザーに「遅延」をプレゼントするなら、読者の悩みを代弁した方が紳士だと思います。当サイトでは、冒頭で読者の悩みを代弁してます。
ブログで一番みられるのは、ファーストビューです。そして、読み進めてくれるどうかは冒頭で決まりまして、必ずしも、アイキャッチ画像は必要じゃありませんよ。
ちなみに、いったん画面をスクロールされると、そのまま記事が読まれやすくなる傾向にあります。なので、ファーストビューで離脱させない施策が重要です。
詳しいアイキャッチ画像の作り方については【Canva】ブログ用アイキャッチ画像の作り方【思わずクリックしたくなるコツ7つ】をどうぞ。
ページ速度に影響あるアイキャッチ画像は非表示!
方法⑦:キャッシュする
ブログで「キャッシュ」機能を使うと、サイトの表示速度が改善されます。要は、サイトに溜まった"ゴミ"を削除する仕組みです。
- 方法①:WordPressプラグインのキャッシュ
- 方法②:レンタルサーバーのキャッシュ
- 方法③:ブラウザのキャッシュ
上記を組み合わせつつ、定期的に溜まった"ゴミ"をお掃除しましょう。
キャッシュは、表示崩れのバグ要因にもなります。サイトデザインが変更されない場合は、キャッシュを削除することで改善できることが多いですよ。
方法⑧:不要なデータを削除する
WordPressでブログを書いてると「下書き・リビジョン」といったデータが蓄積されます。
プラグインで削除可能でして、下書きやリビジョンといった"ゴミ"を削除することで、わずかながら、WordPressを速くできます。
当サイトでは、プラグイン「WP-Optimize - Cache, Clean, Compress.」を利用しており、定期的にお掃除してます。
方法⑨:PHPを最新バージョンにする
PHPを最新バージョンにすると、サイトの表示速度を大幅に改善できます。設定は、レンタルサーバー側で行います。
たとえば「エックスサーバー」ですと、サーバーパネル >「PHP Ver.切替」より、ドメインを選択後、PHPの切替が可能です。
常に、最新のPHP環境に設定しておきましょう。
方法⑩:Googleアドセンスを外す
ブログにGoogleアドセンスを表示させると、スクリプトを読み込むため、表示速度がかなり遅くなります。
どの道、アドセンスでは大きく稼げないため、ユーザーファーストを優先して、外してしまっても問題ありませんね。
遅延読み込み方法
Googleアドセンスの表示速度を向上したい場合は、スクリプトの遅延読み込みが便利です。
- 手順①:アドセンスの遅延読み込みコードを挿入する
- 手順②:アドセンスのコードを削除する
アドセンス遅延読み込みコード
<script> var lazyloadads = false; window.addEventListener("scroll", function() { if ((document.documentElement.scrollTop != 0 && lazyloadads === false) || (document.body.scrollTop != 0 &&lazyloadads === false)) { (function() { var ad = document.createElement('script'); ad.type = 'text/javascript'; ad.async = true; ad.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'; var sc = document.getElementsByTagName('script')[0]; sc.parentNode.insertBefore(ad, sc); })(); lazyloadads = true; } }, true) </script>
上記コードを「</body>タグ」の直前に貼りつけます。AFFINGERの場合、AFFINGER管理 >「その他」>「上級者向け|コードの出力」に、コードをコピペしましょう。
アドセンスのコードを削除
//Adsenceコード <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxxxxxxxxxxxx" crossorigin="anonymous"></script> //↑上記を削除 <ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-xxxxxxxxxx" data-ad-slot="xxxxxxxxxx"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script>
遅延読み込みコードを挿入したら、通常のアドセンスコードから「<script>タグ」をすべて削除してください。
方法⑪:CSS・JavaScriptを圧縮する
CSSやJavaScriptを圧縮すると、ブログの表示速度を改善できます。コード内の「スペース・改行・インデント」などを取り除くことで、ファイルをミニファイ化します。
WordPressテーマやプラグインごとに設定できますので、必要に応じて最適化しましょう。
方法⑫:JavaScriptに『defer』を付与する
<script>タグに「defer」or「async」をつけると、表示速度を改善できます。
むずかしい概念なので、とりま「defer」をつければ良いのか...と覚えればOK。
プログラミングの心配は不要です。方法はカンタンでして、プラグイン「WP-Optimize - Cache, Clean, Compress.」にて解決します。
>> 参考:<script> タグに async / defer を付けた場合のタイミング
方法⑬:SNSコンテンツを埋め込まない
ツイッターなどのSNSコンテンツを埋め込むと、サイトスピードが大幅に低下します。専用スクリプトを読み込むため、あまり掲載しない方が良いですね。
よく、フッターウィジットやサイドバーにTwitterのタイムラインを載せてる人も多いですが、果たして効果ありますか?
経験から「効果いまひとつ」でして、サイトが重たくなるため、個人的には外した方がいいと思います。
以上が、ブログを高速化する13の方法です。続いて、ブログの表示速度を確認する方法を解説しますね。
ブログの表示速度を確認する方法3つ
あなたのサイトが、どれくらいの表示速度なのかを確認してみましょう。
- その①:PageSpeed Insights
- その②:GTmetrix
- その③:Lighthouse
すべて無料で使えます!
その①:PageSpeed Insights
PageSpeed Insightsとは、Googleが無料提供するWebサイトの表示速度をチェックできるツール。URLを入力すると、パフォーマンスが100点満点で表示され、改善項目を分析できます。
- 0点~49点:要改善(レッド)
- 50点〜89点:普通(オレンジ)
- 90点〜100点:合格(グリーン)
スコアは、PC「90点以上」、スマホ「70点以上」を目指しましょう。
なお、ユーザーの検索デバイスは「スマートフォン」が主流です。必ず、スマホのスコアを優先してください。
さらに「改善できる項目」を見れば「具体的な改善項目と対策」「短縮できる推定時間」を把握できます。
たとえば「次世代フォーマットでの画像の配信」が要改善ならば、画像を「WebP化」してみましょう。
その②:GTmetrix
GTmetrixは、サイトの読み込み速度をスコアリングできる無料ツール。
使い方はPageSpeed Insightsと同じでして、URLを入力後「Test your Site」を押すだけ。
SEOで重要な「Web Vitals」もチェックできます。サイトの健全性を表す重要指標でして、良好なユーザー体験を提供することで検索上位を狙いやすくなるメリットがあります。
なお、現在は「Web Vitals」ではなく「Core Web Vitals」です。
質の高い記事を作るのはいうまでもありませんが、ユーザー体験を損なわないコンテンツも重要です。
その③:Lighthouse
GoogleChromeのデベロッパーツール。無料でサクッと使えるので、知っておくと便利です。
使い方は、右クリック >「検証」>「Lighthouse」>「Analyze page load」でOK。
スマホとPCサイトの表示速度や指標をチェックできます。
以上、上記3つのツールを使いこなし、サイトの表示速度を把握しつつ、改善していきましょう。
ブログの高速化におすすめなプラグイン2選
ブログの高速化に重宝するプラグインを紹介します。
EWWW Image Optimizer
EWWW Image Optimizer | |
---|---|
機能 | 画像圧縮 |
インストール数 | 100万以上 |
WordPressとの互換性 | あり |
最終更新 | ◯ |
おすすめ | 【】 |
EWWW Image Optimize を導入すると、下記の画像対策をマルっと実践できます。
- その①:画像の圧縮
- その②:画像のWebP化
- その③:画像のリサイズ
- その④:画像の遅延読み込み
特に「画像のWebP化」は目玉でして、JPGやPNG形式の画像ファイルから「.webp」に自動変換できます。
詳しくは【神】EWWW Image Optimizerの設定&使い方ガイド【画像のWebP化方法】をどうぞ。
WP-Optimize - Cache, Clean, Compress.
WP-Optimize - Cache, Clean, Compress. | |
---|---|
機能 | キャッシュ削除 |
インストール数 | 100万以上 |
WordPressとの互換性 | あり |
最終更新 | ◎ |
おすすめ |
WP-Optimize を導入すると、WordPress内に溜まった"ゴミ"をマルっと削除できます。
- キャッシュの削除
- データベースの最適化
- 画像の自動圧縮
- スクリプトコードのMinify化
- スクリプトコードの高速化
特に「目玉機能」が、WPのデータベース最適化でして、投稿リビジョンのデータを削除できます。これにて、下書きデータを削除できるので、サイトが高速化します。
サイト高速化に必須なプラグインを紹介しました!
ブログの高速化が目的化してはNGです
ブログ初心者〜中級者さんにありガチですが、ページ表示速度の向上に夢中になりすぎてはいけません。
大切なのは、読者に役立つ記事を届けることです。
いつの間にか、ブログ高速化マニアを目指してませんか?あくまで、ユーザー体験を向上させ、SEOで高評価を得る手段であって、目的ではありません。
そして、ブログの高速化は「底なし沼」です。PageSpeed Insightsのスコアがレッドゾーンでなければ、無理して100点を目指す必要はありません。
本記事で紹介した「ブログを高速化させる13の方法」を実践すれば、サイトの表示速度はサクッと合格圏に届きますよ。
ブログを高速化し、売上を伸ばそう
本記事では、WordPressブログの表示速度を高速化する13の方法を解説しました。
ブログの表示速度は、SEOで検索上位を狙うことやブログの売上にも大きく影響します。
たった「0.1秒」遅くなることで、、、「いや...そんなの誤差でしょ...」と思うかもですが、AmazonやGoogleの調査結果よりデメリットが判明済みです。
- 検索順位が下がる
- PVが下がる
- 平均滞在時間が下がる
- ユーザーの満足度が下がる
- コンバージョンが下がる
- 結果、ブログの売上が下がる
裏を返せば、表示速度を改善するだけで、売上が「数%」上昇するかもですね。
そして大切なのが「お客さんを取りこぼさない」という視点です。表示速度が遅いために、大切なお客さんが離脱されてしまっては、売上の機会損失につながります。
ブログの表示速度は今すぐ改善できます。この記事を読み終えたら、今すぐ現状と問題点を炙り出し、ブログの高速化を目指してみてください。
SEO対策
ブログの表示速度改善は、重要なSEO対策です。セットで【保存版】ブログSEO対策の完全ロードマップ【普遍的に通用します】をご覧ください。
-
【保存版】ブログSEO対策の完全ロードマップ【普遍的に通用します】
続きを見る
WordPressブログの始め方
-
【無料】たった10分でできるWordPressブログの始め方【エックスサーバー】
続きを見る
最後までお付き合いありがとうございました。僕のTwitter(@ImperialMiyavi)もフォローしてもらえたら嬉しいです。ブログ運営に関するお役立ち情報を発信しており、ブログとセットで勉強できます!