WordPressブログをグーんと高速化させる極意3つ【紳士になりましょう】

悩む人

WordPressブログを高速化したいんだけど、現状の効果がイマイチなんだよな…

WordPressブログを高速化したいんだけど、現状の効果がイマイチなんだよな…そもそも、サイトの高速化ってやる意味あるのかな?もっと大きな効果を期待できるサイトスピードUPの極意があれば、やる気上がるのに…

こんなお悩みを解決します。

✔︎本記事の内容

WordPressブログの高速化が重要な3つの理由
WordPressブログをグーんと高速化させる極意3つ

この記事を書いている僕は、ブログ歴2年ほど。2021年末からブログを毎日更新しており、サイトスピードは下記のツイートをご覧ください。

🔽WordPressのサイト高速化をテコ入れした結果

・スマホ：92点
・PC：100点

読み込み速度が3秒かかると、離脱率が「32%」増えるというデータもあります。Googleが掲げる「Core Web Vitals」の観点からみても、サイト高速化は必須。よし、これでストレスなく執筆できます。コツは記事で解説しますね😶‍🌫️ pic.twitter.com/sUsr1tF1Oh

— インペリアルミヤビ＠ノマド🇬🇪ブロガー (@ImperialMiyavi) March 6, 2022

🔽WordPressのサイト高速化をテコ入れした結果

・スマホ：92点
・PC：100点

読み込み速度が3秒かかると、離脱率が「32%」増えるというデータもあります。Googleが掲げる「Core Web Vitals」の観点からみても、サイト高速化は必須。よし、これでストレスなく執筆できます。コツは記事で解説しますね😶‍🌫️

WordPressのサイトスピードをグーんとUPさせる極意を解説します。

他の記事をみてもわかりにくかったので
世界一わかりやすく解説しますね。

なお、本記事を読む前にWordPressブログを高速化するテク9つをご覧いただけると、細々としたサイト高速化のテクニックを理解できます。

WordPressブログの高速化が重要な3つの理由

理由は、下記のとおり。

理由①：SEO対策
理由②：ユーザーの離脱防止
理由③：ユーザーに紳士じゃない

理由①：SEO対策

言うまでもないですが
SEO対策で、表示速度は大切ですよ。

なぜなら、ページの読み込み速度をモバイル検索のランキング要素に使用しますとGoogleは公言してるからです。

つまり、、、

読者は、質問の答えを早く知りたいと考えてる
読者は、ページの読み込み速度を気にしている
読者は、パソコンよりスマホで検索をしている

フツーに自分に当てはめて考えてみても、ページ速度が遅かったら離脱しちゃいますよね?

「ページ速度=高速」が正義でして
表示速度の遅いサイトは、Googleから低評価です。

Googleがページ速度を評価する具体的な指標については、Googleが重視するCore Web Vitals（コア・ウェブ・バイタル）とは?をどうぞ。

理由②：ユーザーの離脱防止

上記と関連しますが
ユーザーが離脱するタイミングは下記のとおり。

その①：記事をクリックした後
その②：記事を見始めたとき

その①：記事をクリックした後

気になる記事を見つけたら、クリックしますよね?

しかし、いつまでたっても「グルグル」で、記事内容が見れなかったらイライラしませんか?

こうなると、読者は別の記事に100%行きます。
下記は、データで証明されてます。

読み込み速度が3秒かかると、直帰率が32%増える
読み込み速度が5秒かかると、直帰率が90%増える
読み込み速度が6秒かかると、直帰率が106%増える
読み込み速度が10秒かかると、直帰率が123%増える

というわけで、問答無用で「速いが正義」です。

>> 参考 | Think with Google

その②：記事を見始めたとき

ページには遷移した。
しかし、画像がスムーズに表示されないorz…

こういった場合でも、読者はイライラしてしまい
サイト離脱の原因になります。

画像のサイズが重すぎて表示されない場合が多いので、こういったサイトだと離脱率はかなり高くなります。この改善方法は、記事の後半で解説します。

理由③：ユーザーに紳士じゃない

理由②と少し被りますが
読者への「おもてなし」精神です。

たとえばですが、レストランを経営しており、店内が汚かったらお客は来ると思いますか?

「いやいや、料理がうまければOKでしょ?」と思う方は、プロの料理人ではないですよ。客は、細かいところに敏感ですので。お絞りが提供されないだけでも、大問題な日本ですので。

速度が遅い→読者は、離脱する
お店が汚い→お客は、離脱する

上記のとおりでして
サイトの高速化は、読者へのサーヴィスです。

やはり、紳士になるべきかと。

ブログの表示速度を測る方法

無料で使える、Page Speed Insights一択ですね。

使い方は、カンタン。
計測したいサイトのURLを入力するだけ。

スマホとPCを計測できますが
見るべきは「スマホの点数」ですよ。

質問：100点を目指す必要はありますか?

結論、ありません。
執筆に専念できないと本末転倒ですので。

目安は、下記のとおりです。

0〜49点：改善
50〜89点：70点を目指しましょう
90〜100点：合格

レッドゾーンなら、流石に改善させるべき。

あまりに高速化テクにこだわっても、記事執筆に集中できなくなっては困るので、70点くらいであれば改善する必要はないです。

もちろん、スマホが優先です

Googleは、モバイルファーストを掲げてるので
PCよりスマホの表示速度を上げるべきです。

たいはんのユーザーもスマホ検索ですので、やはりスマホ設計を優先すべきかと。

とはいえ、スマホだと点数が上がりにくいのも事実。目先の目標として、「70点」を目指しましょう。

WordPressブログをグーんと高速化させる極意3つ

結論、下記のとおりです。

極意①：SNSウィジットを外す
極意②：Googleアドセンス遅延読み込み
極意③：画像のWebP化＆遅延読み込み

シンプルに、これだけ。
サイトがメッチャ高速化しますよ。

極意①：SNSウィジットを外す

特に、ツイッターですね。
専用スクリプトを読み込むので、重たいです。

よくあるブログで、フッターウィジットやサイドバーにtwitterのタイムラインをカスタマイズしてる人が多いですが、果たして効果はありますか?

経験から「効果いまひとつ」でして
重たくなる原因なので、むしろ外した方がいいかと。

ウィジットでツイッターの埋め込みは
インフルエンサーじゃない限りやめた方がいいですよ。

SNSは、アイコンで読み込みましょう

アイコンならリンクタグなので、重たくなりませんね。

ツイート文が必要なら、埋め込めばOKかと。
ユーザーのことを考えましょう。

極意②：Googleアドセンス遅延読み込み

ブロガーなら、Googleアドセンスを貼り付けてる方も多いかと。

しかし、そのまま貼り付けてたらサイトが遅くなりますよ。

Googleアドセンスも専用スクリプトを読み込むので、かなりサイトに負荷がかかります。

高速化する方法

不要なコードを削除する
遅延読み込みコードを挿入する

記事内のすべてのGoogleアドセンスコードから
下記の不要なスクリプトコードを削除します。

//Adsenceコード
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-9177731053891310" 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>

不要なコードを削除したら、遅延読み込みコードを「footer.php」のbodyタグの直前に追加します。

<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>

これで、鬼の高速化です。

極意③：画像のWebP化&遅延読み込み

画像の形式を「WebP」に変換します。
すると、サイトが鬼高速化します。

WebPというのは、次世代の画像ファイル形式でして、PNGやJPEGよりも圧倒的に軽いです。ただ、ブラウザによっては、WebPで表示されないデメリットもありますが、PNGなどの画像で表示されるのでご安心を。

サイトが重い原因は「画像」です。
やはり、バズ部によると、、、

まず画像について分かりやすく単純にお伝えすると、WEBページのコンテンツはテキストと画像で出来ている。１万文字のテキストのサイズは、30KB（キロバイト）ほどにしかならないが、画像は、500 × 500 px 程度のものでも、JPG形式なら数十KB、PNG形式なら数百KBほどのサイズになる。引用元：バズ部 |１秒前半で表示する誰でもできる簡単な方法

とのことです。
画像を圧倒的に軽くする方法は、下記のとおり。

WebP（ウェッピー）に変換する方法

WordPressのプラグイン「EWWW Image Optimizer」を使います。

手順①：EWWW Image Optimizerをインストール
手順②：コードを「.htaccess」の一番上に記述
手順③：過去の画像を「WebP」に変換
おまけ：ついでに、「遅延読み込み」にもチェックしとく

「.htaccess」をいじるので、事前にバックアップを取ることをオススメします。記述をミスると、アクセス不可（500）になるので、必ずバックアップをとりましょうね。

詳しくは、【無料】画像をWebP化するなら『EWWW Image Optimizer』が最適をどうぞ。

画像のSEO対策もすべし

画像は、意外と奥が深いのでアナドレない。
ちゃんと、下記のSEO対策もしましょう。

記事の内容と一致した画像
テーマと一致した画像ファイル名
画像タイトル
画像キャプション
代替テキスト

詳しくは、失敗しないブログ画像の選び方とセットで、ブログ画像をSEO対策する3つの手順も合わせてどうぞ。

読者のために、紳士を目指しましょう

ブログは、サーヴィスです。
せっかく来た読者に「おもてなし」すべきです。

そのための施策として、「サイト高速」は控えめにいって大切かと。

さいごに、サイト高速の極意をまとめます。

極意①：SNSウィジットを外す
極意②：Googleアドセンス遅延読み込み
極意③：画像のWebP化＆遅延読み込み

これだけで、サイトの表示速度はグーんと改善できます。

これであなたも、記事に専念できますね。
素敵なブログ生活を共に過ごしましょう。