悩む人
WordPressブログのサイトスピードが遅いな…
WordPressブログのサイトスピードが遅いな…ブログを高速化する方法を教えてください。
こんなお悩みを解決します。
✔︎本記事の内容
- WordPressブログの表示スピードが大切な3つの理由
- ブログのサイトスピードを確認する3つの方法
- WordPressブログを高速化するテク9つ
この記事を書いている僕は、ブログ歴2年ほど。ブログで20万ほどを稼げるようになり、サイト表示もわりと早いと思います。
実際に、僕のデータも公開しつつ
サイト高速の極意を解説します。
WordPressブログの表示スピードが大切な3つの理由
サイトスピードは、超重要です。
理由は、下記のとおり。
- 理由①：記事を読む前に離脱される
- 理由②：記事が最後まで読まれない
- 理由③：SEO対策で不利になる
理由①：記事を読む前に離脱される
あなたも、こんな経験ありませんか?
記事をクリックしたら、いつまで経っても「ぐるぐる」が表示されてる...
読み込み速度があまりにも遅いと
そもそも、記事を読んですらもらえません。
データで証明
こんなデータがあります。
- 読み込み速度が3秒かかると、直帰率が32%増える
- 読み込み速度が5秒かかると、直帰率が90%増える
- 読み込み速度が6秒かかると、直帰率が106%増える
- 読み込み速度が10秒かかると、直帰率が123%増える
現代人は忙しない生き物なので
記事の表示スピードに3秒も待ってられません。
肌感覚でも、わりと事実ですよね?
1秒の大切さを理解できるかと。
ページスピード対策は、記事の後半で解説します。
理由②：記事が最後まで読まれない
よくあることとして
画像が読み込まれないことも多いですよね?
そうなると読者は「このサイト重たいな...」と感じてしまい、サイト離脱します。
というと、コンバージョンに繋がらないので
売上も増えないということになります。
改善方法は、記事の後半で解説します。
理由③：SEO対策で不利になる
下記が答えです。
検索ユーザーはできるだけ早く質問に対する答えを見つけたいと考えています。研究によると、ユーザーはページの読み込み速度を非常に気にかけています。読み込み速度これまでもランキング シグナルとして使用されていましたが、デスクトップ検索を対象としていました。そこで 2018 年 7 月より、ページの読み込み速度をモバイル検索のランキング要素として使用することになりました。引用元：Google検索セントラル | ページの読み込み速度をモバイル検索のランキング要素に使用します
まとめると、下記のとおり。
- 読者は、早く悩みを解決したい
- 読者は、ページ速度を気にしてる
- 検索順位は、スマホの表示速度が重要
上記のように、SEO対策として表示速度が重視されてます。特にスマホからの閲覧者は70%以上というデータもあるので、スマホの表示スピードの速さが重要になってきます。
フツーな感覚として、ページ速度が遅かったら「このサイト遅いんだけど...」とイライラしてきますよね?
やはり、体感的にもページ速度は大切です。
『Core Web Vitals』とは?
2021年からGoogleがアップデートされ、「Core Web Vitals」という指標が新たに加わりました。
ザックリいうと、ページエクスペリエンス。
つまり、ユーザーの体験のことです。
ユーザー体験?意味不なんですけど...
たとえば、ページ速度が遅かったり、不快な広告でイライラしたりするなど、そういったユーザー体験をなくしましょう、、、といった指標です。
詳しくは、Googleが重視するCore Web Vitalsとは?でまとめてます。
ブログの表示速度を確認する3つの方法
すべて、無料でページスピードを確認できます。
ぶっちゃけ、どれでもOKですよ。
- PageSpeed Insights：Googleの無料ツール
- GTmetrix：無料定番ツール
- Lighthouse：デベロッパーツール
その①：PageSpeed Insights
Page Speed Insightsでサイト速度を計測
Googleが無料提供してる、スピード確認ツール。
使い方は、カンタン。
ブログのURLを入力するだけ。
というわけで、スピードを測ってみましょう。
モバイルとPCの両方を計測できます。
>> PageSpeed Insightsで表示速度をチェックする
その②：GTmetrix
GTmetrixでサイト速度を計測
コチラでも、スピードを確認できます。
ただし、英語です。
使い方は同じでして、URLを入力後「Test your Site」を押すだけ。
Web Vitalsの指標もチェックできます。
う〜ん、僕のサイトは合格圏内ですね。
その③：Lighthouse
GoogleChromeのデベロッパーツール。
使い方は「右クリック→検証→Lighthouse」でOK。
スマホとPCのサイト表示速度や指標をチェックできます。
他にもサイト速度を測るツールはありますが
とりま、上記のいづれかでOKかと。
サイト速度の向上は、ハッキリいって「沼」ですよ。レッドゾーンでなければ、無理に合格圏内を目指す必要はないです。
というわけで
以上がブログのサイトスピードの計測方法3つでした。
WordPressブログを高速化するテク9つ
ブログを高速化させる方法を解説します。
実際に僕が実践しており、効果が出てます。
- WordPressの有料テーマを使う
- 画像サイズを圧縮する
- 画像にLazy Loadをつける
- プラグインの整理・削除する
- JavaScriptやCSSを圧縮する
- JavaScriptにdeferをつける
- WordPressの不要データを削除する
- ブラウザをキャッシュする
- PHPを最新バージョンに設定する
①：WordPressの有料テーマを使う
有料テーマだと、サイト高速機能がついてます。
たとえば、僕の使ってる「SANGO」というテーマでも、標準で下記のサイト高速機能が備わってます。
- 画像の遅延読み込み（Lazy Load）
- Gutenberg用のCSSを読み込まない
- Googleフォントを読み込まない
無料テーマを使ってる人は
有料テーマに切り替えることをオススメします。
②：画像サイズを圧縮する
メチャクチャ重要。
基本的に画像は重たいので、必ず圧縮しましょう。
圧縮方法と手順
- 手順①：ダウンロードした画像をCanvaでサイズ調節
- 手順②：TinyPNG（WordPressのプラグイン）で圧縮
実は、ダウンロードした画像は大きさがバラバラ。
Canvaを使って調節することをオススメします。
TinyPNGは画像圧縮プラグインでして
毎月500枚まで無料圧縮できる優れモノ。
上記のオススメプラグインでも紹介してるので、ぜひ入れとくべきです。
>> TinyPNG – JPEG, PNG & WebP image compression
③：画像にLazy Loadをつける
Lazy Load（レイジーロード）とは
画像の遅延読み込みのこと。
つまり、必要なトップ画像だけを先に読み込み、画面に表示されない画像は後で読み込ませて、サイトを高速化させます。
WordPressの標準機能についてるのもあれば
プラグインで対応も可能。
僕が使ってるSANGOの場合は
「カスタマイズ→高速化」から設定できます。
ブログ画像の使い方とセットで ブログ画像をSEO対策する3つの手順もどうぞ。
④：プラグインを整理・削除する
不要なプラグインは、削除すべきです。
理由は、下記のとおり。
- サイトが重くなる
- エラーの原因になる
- セキュリティハックされる
- 保守管理がメンドくさい
ぶっちゃけ、10個くらいに収まるハズ。
下記で、最小限に抑える方法を解説してます。
⑤：JavaScriptやCSSを圧縮する
圧縮すると、サイトを高速化できます。
圧縮方法は、プラグインを使えばカンタン。
minify化といって、コード内の余分なインデントやスペースを1行に圧縮することで軽量化できます。
- WordPressの有料テーマ：標準機能で備わってるかもです
- プラグイン：WP-Optimizeがおすすめ
僕は「WP-Optimize」というプラグインを愛用。
ぶっちゃけ、コレが最強です。
>> WP-Optimize-Cash,Clean,Compress
⑥：Javascriptに『defer』をつける
scriptタグに「defer」or「async」をつけると
JSの読み込みスピードを速くできます。
とりま、「defer」をつければいいのか...と覚えておけばOK。ここあたりは、わりと技術的な概念がむずかしかったりするので、ザックリでOKかと。
方法は、プラグインで解決できます。
コチラも「 WP-Optimize-Cash,Clean,Compress」で解決します。
詳しくは、<script> タグに async / defer を付けた場合のタイミングの記事が参考になります。
⑦：WordPressの不要なデータを削除する
記事を書いてると、下書きやリビジョンなどの「ゴミ」が溜まっていきます。
もしかして、「何それ?」っていう感じですか?実は、削除することでサイトを軽くできますよ。
WordPressでストレスなくブログを書くなら
定期的にゴミを捨てて、キレイにしましょう。
>> WP-Optimize-Cash,Clean,Compress（また君ですか…）
⑧：キャッシュする
キャッシュとは、溜まったデータを捨てること。
キャッシュ方法は、下記が便利です。
WordPressのゴミがなくなると、表示速度が速くなりサクサク動かせますよ。
僕は「WP-Optimize」というプラグインを愛用。
もう非常に便利ですね。
⑨：PHPを最新バージョンにする
サーバーからPHPを最新バージョンに設定します。
サイト速度が劇的に向上します。
PHPには、定期的にバージョンUPがあります。
ただ、PHPをアップデートすると、プラグインが動作しなくなる可能性もあります。なので、定期的にバックアップもとっておくべきですね。（プラグイン紹介でまとめてます）
というわけで、サイト高速化テク9つは以上です。
まとめ：ブログ高速の極意を整理
というわけで、本記事では
WordPressブログの高速化についてまとめました。
サイト高速?何それ?めんどくさいな...
確かに最初はそう思うかもですが、長期的に見るとデメリットです。
ブログ高速化の大切な理由
- 理由①：記事を読む前に離脱される
- 理由②：記事が最後まで読まれない
- 理由③：SEO対策で不利になる
ブログのサイトスピード確認ツール
- Page Speed Insights：Googleの無料ツール
- GTmetrix：無料定番ツール
- Lighthouse：デベロッパーツール
サイト高速化テク9つ
- WordPressの有料テーマを使う
- 画像サイズを圧縮する
- 画像にLazy Loadをつける
- プラグインの整理・削除する
- JavaScriptやCSSを圧縮する
- JavaScriptにdeferをつける
- WordPressの不要データを削除する
- ブラウザをキャッシュする
- PHPを最新バージョンに設定する
地道にコツコツ取り組みましょう。
サイト速度は、売上や直帰率にモロ影響します。
本記事を参考に、できるところから改善してみましょう。
