WordPressプラグイン

【これだけでOK】AutoptimizeとCache Enablerの設定でサイト高速化する方法

autoptimize cache enabler e1581331367430 - 【これだけでOK】AutoptimizeとCache Enablerの設定でサイト高速化する方法

WordPressは高機能で便利な反面、サイトが重くなりやすいという欠点もあります。

しかし、Googleは“Webmaster Central Blog”でもサイト表示速度が検索順位に影響を与えると公式にアナウンスしていますし、サイト運営者はコンテンツ作成だけではなく、サイト速度の対策もしていく必要があります。

また、モバイルサイトの表示速度は特に重視されており、表示速度が遅いとSEOに悪影響を与えるだけではなく、ユーザービリティが低下しサイトの離脱率が上がるというデータも出ています。

そこで、この記事ではWordPressプラグインの「Autoptimize」「Cache Enabler」を使用して高速化する方法をご紹介したいと思います。

WordPressのキャッシュ系プラグインは不具合を引き起こすなど比較的地雷も多いので、自分でいくつか有名どころをインストールして検証してみました。その結果、Autoptimizeとcache-enablerの組み合わせが最も高速化できましたし、設定項目も少なく最強だと実感しています。

本当にすぐに設定できるので、WordPress高速化にどのプラグインを使えば良いか悩んでいる方は是非参考にしてみてください。

また、プラグイン設定の際は不具合に備えて事前に必ずバックアップを取得するようにしてくださいね。こちらの記事では簡単にバックアップが取得できるUpdraftPlusの使用方法を説明していますので参考にしてみてください。   

027 - 【これだけでOK】AutoptimizeとCache Enablerの設定でサイト高速化する方法
【2019年最新】UpdraftPlusで超簡単にWordPressのバックアップを取得する方法こちらの記事ではWordPressプラグインの中で最も簡単にバックアップが取得できる『UpdraftPlus』の使い方を丁寧に紹介してい...

どれくらいWordPressを高速化できたの?

サイト表示速度はGoogle公式ツールの“PageSpeed Insight”を使用して測定し、WordPressプラグイン導入前後でモバイルが「0 → 81」、パソコンが「21 → 92」まで向上しました…!

サイト立ち上げ初期のためまだキャッシュ系プラグインなどは入れていなかったのですが、それにしてもBeforeのスコアはめちゃくちゃ低いですね。笑
しかし、Afterの値はわりと良いのではないかと思います。特に、比較的対策がしづらいモバイルでスコア80を超えてれば十分及第点だと思います。

 モバイルパソコン
Before021
After8192

 

【これだけでOK】AutoptimizeとCache Enablerの設定でサイト高速化する方法Before

↓ ↓ ↓ ↓ ↓

【これだけでOK】AutoptimizeとCache Enablerの設定でサイト高速化する方法After

最終的にはAutoptimizeとcache-enablerの組み合わせで大きく改善することができましたが、それまでにWordPress高速化の有名プラグインである「Head Cleaner」や「W3 Total Cache」も試しました。しかし、サイトレイアウトが崩れたり、エラーが解消しないなど私の環境では使用するには課題がありました。

このようにWordPress高速化系のプラグインは使用しているWordPressバージョンやテーマによっては不具合が生じることも多いので、これらを検討している方はご注意ください。  

サイト表示速度に影響を与える3つの要素

【これだけでOK】AutoptimizeとCache Enablerの設定でサイト高速化する方法

サイト表示速度は以下3つの要素に大きく影響を受けます。

①画像読み込み
②ソースの記述内容(HTML、CSS、JavaScriptなど)
③キャッシュ

①画像読み込みの対策は実はとても簡単です。
表示ページの画像読み込みを遅らせる「Lazy Load」と自動的に画像サイズを圧縮してくれる「EWWW Image Optimizer」という鉄板のプラグインを入れておけば対策は万全です。

EWWW Image Optimizer, WebP
【画像で解説】EWWW Image OptimizerでWebPを設定する方法この記事では『EWWW Image Optimizer』を用いてGoogleも推奨している次世代の画像フォーマットである『WebP(ウェ...

しかし、後半の2つについてはWordPressに不具合を生じさせたりレイアウトを崩すケースも多く、どのプラグインを選定するか悩んでいる方も多いと思います。また、設定項目が複雑なものも多く、そもそもプラグインとして扱いづらいですよね。

でも、この記事で紹介するAutoptimizeとCache Enablerは性能だけではなく、設定も非常にシンプルで使いやすいのでご安心ください…!それではここからはプラグインの設定についてご説明していきます。  

Autoptimizeの設定方法

Autoptimizeは「②ソースの記述内容(HTML、CSS、JavaScriptなど)」を最適化してくれるプラグインです。

WordPress管理画面からプラグインを新規追加する

【これだけでOK】AutoptimizeとCache Enablerの設定でサイト高速化する方法

Autoptimizeをインストールするために、WordPress管理画面で 「プラグイン > 新規追加」と進んでください。

右上のプラグインの検索で「Autoptimize」と入力し、対象プラグインの「今すぐインストール > 有効化」を押せば準備完了です。続いてはAutoptimizeの設定をしていきます。  

設定画面に移動

【これだけでOK】AutoptimizeとCache Enablerの設定でサイト高速化する方法

WordPress管理画面で「設定 > Autoptimize」と進んでください。

Autoptimize設定ページの「JS、CSS&HTML」タブで詳細を設定します。

今回は「JavaScriptコードの最適化」のチェックは外しました。

もちろん、JavaScriptのコードも最適化できればいいのですが、検証した結果ではここにチェックを入れると逆に性能が下がってしまったので今回は外したいと思います。

テーマとの相性もありますのでチェックの有無で性能を比較してみると良いと思います。

もしチェックを入れたい方は設定変更前後でサイト表示速度が変化するかご確認してみてください。

【これだけでOK】AutoptimizeとCache Enablerの設定でサイト高速化する方法

次のCSSオプションでは以下4つの項目にチェックを入れましょう。

・CSSコードを最適化
・Aggregate CSS-files?
・データを生成:画像をURI化
・すべてのCSSをインライン化

CSSについては最近のWordPressテーマには潤沢に組み込まれていますし、追加CSSに大量に記載したりとサイトが重くなる大きな原因となり得ますので、必ず設定するようにしましょう。

また、「インラインのCSSを連結」項目は性能が下がる場合もあるので、設定する際は十分に検証してみてください。ちなみに、CSSのインライン化とは小さなコードを外部ファイル化せずにそのままHTMLコードに書き込むことです。  

【これだけでOK】AutoptimizeとCache Enablerの設定でサイト高速化する方法

HTMLオプションでは「HTMLコードを最適化」にチェックを入れましょう。  

【これだけでOK】AutoptimizeとCache Enablerの設定でサイト高速化する方法

最後にその他オプション項目の

・連結されたスクリプト / CSS を静的ファイルとして保存
・Minify excluded CSS and JS files?
・ログイン中のユーザーも最適化しますか ?

にチェックを入れて 「変更を保存してキャッシュを削除」をクリックして設定完了です!

これだけでもWordPress高速化に効果がありますが、さらにCache Enablerを設定することで万全の状態にしておきましょう。  

Cache Enablerの設定方法

Cache EnablerはWordPressにキャッシュを保存することでサイト表示速度を早くするプラグインです。

ユーザーのアクセスが有る度にサーバから画像や文字を読み込むのではなく、一度サーバから読み込んだ情報はWordPressで保存しておき、ユーザーにすぐ提供することでレスポンスを早くすることができます。  

インストールと有効化

【これだけでOK】AutoptimizeとCache Enablerの設定でサイト高速化する方法

Cache Enablerをインストールするために、WordPress管理画面で 「プラグイン > 新規追加」と進んでください。 右上のプラグインの検索で「Cache Enabler」と入力し、対象プラグインの「今すぐインストール > 有効化」を押せば準備完了です。  

Cache Enablerの設定方法

【これだけでOK】AutoptimizeとCache Enablerの設定でサイト高速化する方法

WordPress管理画面で「設定 > Cache Enabler」に進んでください。

■Cache Expiry
Cache Expiryはキャッシュを何時間毎に更新するか?という項目です。 こちらはデフォルトの「0」でも問題ありませんが、僕は72時間にしています。理由は0の方が常にキャッシュが保持されるのでレスポンスは良くなりますが、過去記事をリライトした際に反映されないと困るので定期的(3日間)にキャッシュを更新するような設定にしています。

■Cache Behavior
Cache Behaviorでは以下の3項目にチェックを入れてください。

・Clear the complete cache if a new post has been published (instead of only the home page cache).
・Clear the complete cache if a new comment has been posted (instead of only the page specific cache).
・Pre-compression of cached pages. Needs to be disabled if the decoding fails in the web browser.

上記設定は「キャッシュをどのタイミングでクリアするか?」を定義したものです。新規記事を公開した際やコメントが付いた際はそれらが反映されるようにキャッシュを更新するように設定しています。

■Cache Minification
こちらの項目はAutoptimizeを入れている場合はそちらで対応できるので「Disabled」に設定します。

最後に「変更を保存」をクリックして設定完了です。  

キャッシュ系プラグインはWP Super CacheでもOK!

キャッシュ系プラグインとしてはCache Enabler以外だとWP Super Cacheなども候補に上がるかと思います。

実際にWP Super Cacheも検証してみた結果、こちらも問題なく作動しましたのでAutoptimizeとの相性は良さそうです。ただし、サイト表示速度を”PageSpeed Insight”で測定した結果はCache Enablerの方が良かったので、僕はこちらを使用しています。

キャッシュ系プラグインは不具合を起こす場合もありますし、必ずしもどちらが良いというわけではなく、自分の環境に合ったプラグインを選定するようにしましょう。  

プラグインによるサイト高速化のまとめ

【これだけでOK】AutoptimizeとCache Enablerの設定でサイト高速化する方法 

プラグインによるサイト高速化で重要なのは、設定項目による影響はあなたの使用するWordPress環境やテーマによって違うので、必ず設定前後でサイト表示速度を測定して効果を確かめてみるということです。

この記事では僕が検証して実際に良いパフォーマンスを得られた設定項目を記載しています。

しかし、成果が出ない、もしくはもっと性能を上げたい場合は選択項目を変更して再度サイト表示速度を測定するなど、検証を繰り返してみると良いと思います。そうすることで、自分のサイトに最適な設定が見つけられるはずです…!

WordPress高速化はアクセスアップには欠かせないので、まだ対応していない方はこの機会に済ませてしまいましょう。

PC1台で自由なライフスタイルを実現する無料メルマガ

RELATED POST
『ブログ×外注化』で月40万円を稼ぎ、独立起業するための思考や情報を学ぶメールマガジン
無料登録はコチラ
ブログで月40万円を稼ぎ、自由なライフスタイル目指す無料メルマガ
登録はコチラ