MENU
SEO対策

【WordPressの高速化】サイトを高速化する方法まとめ

wordpress 高速化

こんにちは、りゅうのすけ(@k_r001)です。

この記事では、WordPressの表示速度を高速化する方法についてまとめています。

 

  • ブログの表示速度を改善したい
  • WordPressの最適化プラグインって何を入れればいいの?
  • WordPressを高速化するのにどんな方法があるかなぁ

 

こういった方に向けて、書いています。
 

\このサイトの表示速度/
wordpress 高速化

モバイルでの表示速度が97点に達しているので、参考になると思います。

WordPressの表示速度を確認

wordpress 高速化

WordPressの表示速度を測定するには、「PageSpeed Insights」を使います。

URLを入力して、分析を押せば測定できます。

 

改善項目
  • 次世代フォーマットでの画像の配信
  • 適切なサイズの画像
  • レンダリングを妨げるリソースの除外
  • 使用していないCSSの削減
  • 使用していないJavaScriptの削減
  • 最初のサーバー応答時間を早くしてください

 

それぞれプラグインなどで対処していきましょう。

WordPressの高速化に使うプラグイン

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の最適化手順

wordpress 高速化

ソースコードをできるだけ触らないようにしてるので、プログラミングがわからない方でも導入しやすいと思います。

  • STEP1
    画像を最適化
    画像をアップロード前と、アップロード後に縮小・圧縮をします。
  • STEP2
    Autoptimizeの導入
    ソースコードの最適化、フォントや絵文字の削除もできます。
  • STEP3
    Async JavaScriptの導入
    JavaScriptの非同期読み込みができる。
  • STEP4
    Speed Up – JavaScript To Footerの導入
    headのJavaScriptをbodyに移動することで、HTMLの表示速度改善
  • STEP5
    WP Fastest Cacheの導入
    キャッシュを生成して、表示速度の最適化
  • STEP6
    WP-Optimizeの導入
    データベース内の不要なデータを処理して、サーバーの容量を軽くする。
  • STEP7
    Googleアドセンスの遅延
    Googleアドセンスを導入すると読み込み速度が著しく低下するので、表示を遅らせることで対策をする。
  • STEP8
    使用していないCSSの削減
    JitBit」を使ってCSS削減します。他はプラグインで遅延
  • STEP9
    アニメーションの停止
    テーマによって設定されているアニメーションを停止することで表示速度をあげる。
  • STEP10
    サーバーを変える
    サーバーの応答時間を早くするには、サーバーを変えるしかないです。

    今あるサーバーの中でおすすめなのは、「ConoHa WING」です。

STEP1.画像の最適化

wordpress 高速化

ブログを一番重くする原因は、画像です。

画像の容量は、文字と比べてもかなり重いので、必ず圧縮しましょう。

 

正しい手順で圧縮していくことで、ほとんどの画像は100kB以下にすることができます。

 

手順は、4つ!

画像圧縮の手順

  • STEP1
    トリミング
    トリミングで画像の不要な部分を削除して切り取った部分の容量を削減する。
  • STEP2
    画像を縮小
    画像のサイズを小さくする。
  • STEP3
    画像を圧縮
    不要なデータを削って余計なデータを削減する。
  • STEP4
    EWWW Image Optimizerでさらに圧縮
    プラグインをWordPress内にインストールしていれば、アップロード時に圧縮できる。

詳しい方法に関しては、⬇︎下記記事にまとめています。

 

\画像の最適化手順/

 

すでに圧縮せずにアップロードした画像に関しては、再ダウンロードして圧縮するしかないです。

WordPressから画像をダウンロードするには、⬇︎下記記事にまとめてあります。

 

\画像を一括ダウンロード/

 

STEP2.Autoptimizeの導入

wordpress 高速化

Autoptimize」を使って、ソースコードの最適化を行うことができます。

WordPressを構成するソースコードは、「JavaScript」、「CSS」、「HTML」の3つです。

 

「Async JavaScript」は姉妹プラグインなので、「Autoptimize」と組み合わせて使うことでより効果を発揮します。

 

Autoptimizeの使い方は、⬇︎下記記事にまとめています。

 

\Autoptimizeの設定方法と使い方/

 

STEP3.Async JavaScriptの導入

wordpress 高速化

Async JavaScript」は、JavaScriptの非同期読み込みができるプラグインです。

 

「レンダリングを妨げるリソースの除外」の、JavaScriptのファイルに対策できます。

 

「Autoptimize」の補助の役割を果たしてくれるので、併せて使うことでより高い効果を発揮してくれます。

Async JavaScriptについての詳細は、⬇︎下記記事にまとめています。

 

\Async JavaScriptの設定方法と使い方/

 

STEP4.Speed Up – JavaScript To Footerの導入

wordpress 高速化

Speed Up – JavaScript To Footer」は、インストールして有効化するだけでOKです。

headのJavaScriptをbodyに自動で移動してくれるので、HTMLの読み込み速度を早くすることができます。

 

インストールは、「プラグイン」➡︎「新規追加」を押します。

 

wordpress 高速化

キーワードに、「Speed Up – JavaScript To Footer」と入力すると出てきます。

インストールできたら有効化しておきましょう。

wordpress 高速化

パソコンにダウンロードしたい場合は、⬇︎下記リンクで取得できます。

 

\Speed Up – JavaScript To Footerをダウンロード/

 

STEP5.WP Fastest Cacheの導入

wordpress 高速化

WP Fastest Cache」は、キャッシュを生成するプラグインです。

キャッシュを生成すればサイトページのデータを一時保存させることができるので、表示速度をあげることができます。

 

キャッシュの削除は自動でできるので、その後操作をすることはないです。

 

WP Fastest Cacheの使い方は、⬇︎下記記事でまとめています。

 

\WP Fastest Cacheの設定方法と使い方/

 

キャッシュ生成プラグインの注意点

wordpress 高速化

会員制のサイトやECサイトを運用する場合、キャッシュ生成プラグインはつかわないようにしましょう。

 

ECサイトは、「Shopify」や「BASE」など自分の商品やサービスをネットワーク上に置いたサイトのことです。

 

会員制サイトやECサイトの場合、カートや購入履歴などユーザーごとにユニークページを表示する必要があります。

そういったページをキャッシュさせてしまうと、購入履歴などが他のユーザーに見られてしまう可能性があるので危険です。

 

情報漏洩やトラブルの原因になることもあるので注意しましょう。

 

STEP6.WP-Optimizeの導入

wordpress 高速化

WP-Optimize」は、データベース内の不要なデータを処理できます。

 

サーバー内の不要なデータを削除するとサイトが軽くなり、表示速度をあげることができます。

 

定期的に自動でキャッシュを削除できるので、設定後の手間がかからないです。

WP-Optimizeの使い方は、⬇︎下記記事にまとめています。

 

\WP-Optimizeの設定方法と使い方/

 

STEP7.Googleアドセンスの遅延

wordpress 高速化

Googleアドセンスを導入すると、サイトの読み込み速度が著しく低下してしまいます。

 

このGoogleアドセンスによって起こるサイトの読み込み速度低下は、Googleアドセンスを遅延表示させることで改善できます。

 

設定方法は、しばゆー(@shibayu_blog)さんがていねいにまとめてくれているので参考にしてください。

 

\Googleアドセンスの遅延設定/

 

こちらは、ソースコードを少し操作する必要がありますので、慎重に変更してください。

 

STEP8.使用していないCSSの削減

wordpress 高速化

使用していないCSSは、「JitBit」を使ってCSS削減できます。

使い方はサイトURLを入力して、「CRAWL FOR UNUSED CSS」をクリックするだけです。

あとは、待っていればサイト内をクロールして不要なCSSを削除してくれます。

「JitBit」は、⬇︎下記リンクからアクセスできます。

 

\JitBitへのアクセス/

 

STEP9.アニメーションの停止

wordpress 高速化

テーマごとに設定されてるアニメーションを停止させることで、読み込み速度を上げることができます。

このアニメーションがONになっていると、JavaScriptファイルを読み込むことになります。

 

アニメーションをOFFにすることで、JavaScriptファイルを読み込む時間を短縮できます。

 

ページが表示されるまでのちょっとした動きが追加されるだけなので、こだわりがなければ外しましょう。

STEP10.サーバーを変える

wordpress 高速化

手順でも紹介しましたが、表示速度が早いサーバーは、「ConoHa WING」です。

 

サーバーの表示速度が国内最速なので速さにとことんこだわりたい方におすすめです。

 

wordpress 高速化

筆者は、「mixhost」を使用していますが、「最初のサーバー応答時間を早くしてください」とひんぱんに表示されます。

 

料金も高くないので、これからWordPressを開設するかサーバーを切り替えるという方は、「ConoHa WING」一択です。

 

\他のサーバーとのスペック比較/

 

\ConoHa WINGはこちら/

 

WordPressの高速化の設定後にやること

wordpress 高速化

全ての設定が終われば、その後の作業は少しだけです。
 

設定後にやること
  1. 1日1回Autoptimizeのキャッシュを削除
  2. 新しい記事を更新したときに「JitBit」でCSSの削除

これだけです。

 
Autoptimizeのキャッシュの削除のやりすぎはサーバーに負荷がかかるため、1日1回だけにしましょう。

CSSの削除が新しい記事を更新した時なのは、新しい記事を更新すると余分なCSSも生成されるからです。

定期的にすることは、これだけです。

まとめ:WordPressの高速化方法

筆者はこの記事で紹介した内容で、「PageSpeed Insights」のモバイルの点数を97点にできました。

 

「Async JavaScript」と「Speed Up – JavaScript To Footer」は、一見同じ機能に見えます。

ですが、どちらも入れていた方が何度測定しても表示速度が上がったので、両方採用することにしました。

 

「レンダリングを妨げるリソースの除外」でCSSを除外する方法は、ソースコードについて理解が浅いので省いてます。

最後まで見ていただき、ありがとうございました。
 

ABOUT ME
りゅうのすけ
高校卒業後、地元香川で就職、一度転職を経て現在はブロガーとして活動してます。 投資をしたり、MLMに騙されそうになった経験をもとに、ブログを書いています。
PS.

記事が有益だなと思った方は、サポートしていただけるとやる気出ます。
 

\1円からのドネーション/

仕事依頼

 

\WordPress開設依頼/

公式LINE

 

\公式LINEもやってます/
公式LINE無料プレゼント

 

  • ワンクリックで登録可能
  • 個人情報はこちらからわからないようになっているのでご安心を

 

こんな人におすすめ
  • ブログを進めていく上でわからないことがある
  • 設定など誰か相談できる人が欲しい
  • 記事ネタに困った時に情報収集したい
  • ブロガー仲間が欲しい

 
困っていることなど直接相談できる場所になってますので、登録しておくといいですよ!
 

登録者特典

 

公式LINE@無料プレゼント
  1. 限定公開記事の共通パスワード配布
    • ブログ内の限定公開記事のパスワードを配布してます。
  2. サイト作成依頼クーポンコード
    • サイト作成依頼時に使えるクーポンコードを配布します。
  3. ブログスターターキット
    • ブログに必要な便利ツール、イラストなど随時更新
  4. 完全個別無料相談
    • ブログについて、1日1人限定で無料相談を受けてます。
      (営業を仕掛けるのはやめてください。)

 

\友達追加しますと、下記のメニューが表示されます。/
公式LINEリッチメニュー

 
各ボタンをポチポチ押すことで欲しい情報だけで情報を取得できるので便利ですよ!