こんにちは、りゅうのすけ(@k_r001)です。
この記事では、WordPressの表示速度を高速化する方法についてまとめています。
こういった方に向けて、書いています。
モバイルでの表示速度が97点に達しているので、参考になると思います。
WordPressの表示速度を確認
WordPressの表示速度を測定するには、「PageSpeed Insights」を使います。
URLを入力して、分析を押せば測定できます。
- 次世代フォーマットでの画像の配信
- 適切なサイズの画像
- レンダリングを妨げるリソースの除外
- 使用していないCSSの削減
- 使用していないJavaScriptの削減
- 最初のサーバー応答時間を早くしてください
それぞれプラグインなどで対処していきましょう。
WordPressの高速化に使うプラグイン
WordPressの高速化に使うプラグインは、6つです。
| 画像最適化 | EWWW Image Optimizer |
|---|---|
| ソースコード最適化 | Autoptimize |
| JavaScriptファイルの非同期 | Async JavaScript |
| データベースデータ整理 | WP-Optimize |
| headのJavaScriptをbodyに移動 | Speed Up – JavaScript To Footer |
| キャッシュ生成 | WP Fastest Cache |
できるだけ減らした結果6つになりました。
WordPressの最適化手順
ソースコードをできるだけ触らないようにしてるので、プログラミングがわからない方でも導入しやすいと思います。
- STEP1画像を最適化画像をアップロード前と、アップロード後に縮小・圧縮をします。
- STEP2Autoptimizeの導入ソースコードの最適化、フォントや絵文字の削除もできます。
- STEP3Async JavaScriptの導入JavaScriptの非同期読み込みができる。
- STEP4Speed Up – JavaScript To Footerの導入headのJavaScriptをbodyに移動することで、HTMLの表示速度改善
- STEP5WP Fastest Cacheの導入キャッシュを生成して、表示速度の最適化
- STEP6WP-Optimizeの導入データベース内の不要なデータを処理して、サーバーの容量を軽くする。
- STEP7Googleアドセンスの遅延Googleアドセンスを導入すると読み込み速度が著しく低下するので、表示を遅らせることで対策をする。
- STEP8使用していないCSSの削減「JitBit」を使ってCSS削減します。他はプラグインで遅延
- STEP9アニメーションの停止テーマによって設定されているアニメーションを停止することで表示速度をあげる。
- STEP10サーバーを変えるサーバーの応答時間を早くするには、サーバーを変えるしかないです。
今あるサーバーの中でおすすめなのは、「ConoHa WING」です。
STEP1.画像の最適化
ブログを一番重くする原因は、画像です。
画像の容量は、文字と比べてもかなり重いので、必ず圧縮しましょう。
手順は、4つ！
画像圧縮の手順
- STEP1トリミングトリミングで画像の不要な部分を削除して切り取った部分の容量を削減する。
- STEP2画像を縮小画像のサイズを小さくする。
- STEP3画像を圧縮不要なデータを削って余計なデータを削減する。
- STEP4EWWW Image Optimizerでさらに圧縮プラグインをWordPress内にインストールしていれば、アップロード時に圧縮できる。
詳しい方法に関しては、⬇︎下記記事にまとめています。
WordPressの画像を最適化するためにやるべき4つの手順
すでに圧縮せずにアップロードした画像に関しては、再ダウンロードして圧縮するしかないです。
WordPressから画像をダウンロードするには、⬇︎下記記事にまとめてあります。
STEP2.Autoptimizeの導入
「Autoptimize」を使って、ソースコードの最適化を行うことができます。
WordPressを構成するソースコードは、「JavaScript」、「CSS」、「HTML」の3つです。
Autoptimizeの使い方は、⬇︎下記記事にまとめています。
【Autoptimize】プラグインを使ってソースコードの最適化
STEP3.Async JavaScriptの導入
「Async JavaScript」は、JavaScriptの非同期読み込みができるプラグインです。
「Autoptimize」の補助の役割を果たしてくれるので、併せて使うことでより高い効果を発揮してくれます。
Async JavaScriptについての詳細は、⬇︎下記記事にまとめています。
レンダリングを妨げるリソースの除外を改善Async JavaScriptの設定方法
STEP4.Speed Up – JavaScript To Footerの導入
「Speed Up – JavaScript To Footer」は、インストールして有効化するだけでOKです。
headのJavaScriptをbodyに自動で移動してくれるので、HTMLの読み込み速度を早くすることができます。
キーワードに、「Speed Up – JavaScript To Footer」と入力すると出てきます。
インストールできたら有効化しておきましょう。
パソコンにダウンロードしたい場合は、⬇︎下記リンクで取得できます。
STEP5.WP Fastest Cacheの導入
「WP Fastest Cache」は、キャッシュを生成するプラグインです。
キャッシュを生成すればサイトページのデータを一時保存させることができるので、表示速度をあげることができます。
WP Fastest Cacheの使い方は、⬇︎下記記事でまとめています。
キャッシュ生成プラグインの注意点
会員制のサイトやECサイトを運用する場合、キャッシュ生成プラグインはつかわないようにしましょう。
会員制サイトやECサイトの場合、カートや購入履歴などユーザーごとにユニークページを表示する必要があります。
そういったページをキャッシュさせてしまうと、購入履歴などが他のユーザーに見られてしまう可能性があるので危険です。
STEP6.WP-Optimizeの導入
「WP-Optimize」は、データベース内の不要なデータを処理できます。
定期的に自動でキャッシュを削除できるので、設定後の手間がかからないです。
WP-Optimizeの使い方は、⬇︎下記記事にまとめています。
【WP-Optimize】でデータベースを軽量化使い方と設定方法
STEP7.Googleアドセンスの遅延
Googleアドセンスを導入すると、サイトの読み込み速度が著しく低下してしまいます。
設定方法は、しばゆー(@shibayu_blog)さんがていねいにまとめてくれているので参考にしてください。
STEP8.使用していないCSSの削減
使用していないCSSは、「JitBit」を使ってCSS削減できます。
使い方はサイトURLを入力して、「CRAWL FOR UNUSED CSS」をクリックするだけです。
あとは、待っていればサイト内をクロールして不要なCSSを削除してくれます。
「JitBit」は、⬇︎下記リンクからアクセスできます。
STEP9.アニメーションの停止
テーマごとに設定されてるアニメーションを停止させることで、読み込み速度を上げることができます。
このアニメーションがONになっていると、JavaScriptファイルを読み込むことになります。
ページが表示されるまでのちょっとした動きが追加されるだけなので、こだわりがなければ外しましょう。
STEP10.サーバーを変える
手順でも紹介しましたが、表示速度が早いサーバーは、「ConoHa WING」です。
筆者は、「mixhost」を使用していますが、「最初のサーバー応答時間を早くしてください」とひんぱんに表示されます。
WordPressの高速化の設定後にやること
全ての設定が終われば、その後の作業は少しだけです。
Autoptimizeのキャッシュの削除のやりすぎはサーバーに負荷がかかるため、1日1回だけにしましょう。
CSSの削除が新しい記事を更新した時なのは、新しい記事を更新すると余分なCSSも生成されるからです。
定期的にすることは、これだけです。
まとめ:WordPressの高速化方法
筆者はこの記事で紹介した内容で、「PageSpeed Insights」のモバイルの点数を97点にできました。
「レンダリングを妨げるリソースの除外」でCSSを除外する方法は、ソースコードについて理解が浅いので省いてます。
最後まで見ていただき、ありがとうございました。
