ワードプレス

ワードプレスの表示速度を高速化するプラグインAutoptimizeは簡単なのに効果絶大!設定方法も。

Autoptimize

サイトの表示速度向上はユーザーの利便性も高まるし、SEO対策としても非常に大事と言われています。

簡単に表示速度を改善できると噂のプラグインAutoptimizeを試してみたところ効果てきめんでした。
改善結果や使い方をご紹介です。

スポンサーリンク

ワードプレスの表示速度をアップしたい

私は普段ワードプレスでブログを書いています。
1年ほど前にもワードプレスを高速化する方法を検証しました。
そのときの話がこちら。

しかしこの頃、

ねこ
ねこさん
最近またサイトの表示が遅い気がする…

とふと思い、サイトの表示速度がわかる
PageSpeed Insights
の点数を確認してみました。
PageSpeed Insightsはこちら

結果、
パソコン画面では81点というなかなかの数字だったのですが、
モバイルがなんと24点…。
Autoptimize
赤文字で書かれています。
超遅いですよこのサイト。
とのこと。

ねこ
ねこさん
いつのまにこんな遅くなったんだ…

と恐れおののきつつも早急な改善を試みました。

高速化の方法をいろいろ調べて試してみたところ、効果的だったのがAutoptimizeというプラグインです。

Autoptimizeの効果

まずはAutoptimizeのプラグインを使用した結果をご覧ください。
以下の結果は、ひとまずプラグインの最低限のチェックを入れた場合です。

サイトの表示速度の計測は先ほどと同じ、
PageSpeed Insights
を使いました。

【Before】

プラグインAutoptimize導入前の結果です。
■パソコン:81点
とりあえず及第点です。
Autoptimize

■モバイル:24点
先ほども上げましたが、かなり遅い数字です。
Autoptimize

【After】

■パソコン:91点
プラグイン導入前より10ポイントUP!
Autoptimize

■モバイル:45点
まさかの倍速になりました!
まだまだ低い数字ですが、Autoptimizeの効果はあったようです。
Autoptimize

Autoptimizeとは?


倍速までに改善できたプラグインAutoptimizeとは何者なのでしょうか。

サイトのページを開くとき、裏ではサーバに保存したHTMLなどのコードをパソコンがダウンロードし、そのコードを読み込むことで画面上に表示しています。

AutoptimizeプラグインはHTMLやCSS、JavaScriptなどのコードの無駄な部分を省いて最適化します。
その結果、データが圧縮され、ページを開くときのダウンロードを早くすることができる。
という仕組みです。

私は例えばフキダシの設定のように、普段プラグインを入れる代わりにStyle.cssなどに自己流で書いています。
そのため、CSSを圧縮して効率化する効果が高いのかもしれません。

【関連記事】
ワードプレスの会話風吹き出しをcssで作ってみた① プラグインなしでコピペでOK

プラグインAutoptimizeの設定方法

プラグインのAutoptimizeを使えば、簡単にコードを圧縮できます。

Autoptimizeをインストール

まずはAutoptimizeをインストールします。
一般的なプラグインのインストールと同じ手順です。

ワードプレスの管理画面メニューから、
「プラグイン」⇒「新規追加」画面で、「Autoptimize」を検索します。

「今すぐインストール」⇒「有効化」でインストール完了。
Autoptimize

スポンサーリンク

Autoptimizeの設定

Autoptimizeプラグインを有効化後、
ワードプレスの管理画面メニューの「設定」からAutoptimizeの設定を行います。

チェックボックスに少なくとも三回チェックするだけで作業完了となりますよ。

JavaScriptオプションの設定


■JavaScript コードの最適化
JavaScriptを最適化の対象にするか選べます。
チェックします。

■Aggregate JS-files?
インストール時からチェックが入っています。
初期設定のままでかまいません。

■インラインの JS を連結
どちらでもかまいません。
私の場合、チェックを入れると
モバイルが45→46に1UPしました。
Autoptimize

■ 内へ JavaScript を強制
JavaScriptエラーが発生した場合、チェックします。

■Autoptimize からスクリプトを除外:
初期設定のままでOKです。

■try-catch の折り返しを追加
JavaScriptエラーが発生した場合、チェックします。

CSSオプションの設定


■CSSコードを最適化
CSSを最適化の対象にするか選べます。
チェックします。

■Aggregate CSS-files?
インストール時からチェックが入っています。
初期設定のままでかまいません。

■インラインの CSS を連結
HTML内のCSSと連結します。
どちらでもかまいません。
私の場合、チェックを入れると
モバイルが45→39に6DOWNしたので外しました。
Autoptimize

■データを生成 : 画像を URI 化
画像をURI 化します。
どちらでも構いません。
私の場合、チェックを入れると
モバイルが45→43に2DOWNしたのでチェックを外しました。
Autoptimize

■CSS のインライン化と遅延
CSSを遅延読込します。
チェックしません。

■すべての CSS をインライン化
すべての CSS を最適化の対象にするか選べます。
どちらでも構いません。

■Autoptimize から CSS を除外
初期設定のままでOKです。

HTMLオプションの設定


■HTML コードを最適化
HTMLを最適化の対象にするか選べます。
チェックします。

■HTML コメントを残す
HTMLに書かれたコメントを最適化の対象にするか選べます。
コメントとは、HTML内ので挟まれた構文です。
どちらでも構いませんが、コメントが多い場合はチェックを外すほうが早くなります。

設定完了

最後に、
『変更を保存してキャッシュを削除』をクリックすれば設定完了です。

「追加」項目の設定

番外編として、
Google フォントを使用していない場合、追加タブも合わせて設定します。
「googleフォントの削除」にチェックを入れます。
Autoptimize

私の場合、チェックを入れると
モバイルが45→46に1UPしました。

注意点

他に導入済みのプラグインとの相性によっては、不具合が発生することもあるようです。
その場合はチェックを一つずつ外してみて不具合が治るか様子を見ましょう。

さらに、使用しているテンプレート等によっても最適な設定は異なります。
上の例のように、自分の最適なパターンは様々です。
チェックを付けたり外したりすることで表示速度が変わりますよ。

まとめ

Autoptimizeプラグインによる表示速度の高速化を試みました。
最終的に、

■パソコン
 81→92
■モバイル
 24→48
まで改善できました。

テンプレートによってはどれにチェックを付ければよいかが異なるのが少し面倒くさいです。
しかし、表示速度が遅いと離脱率が高まる傾向にあります。

自分がサイト巡回しているときも、表示速度が遅いと

ねこ
ねこさん
もういいや、次行こっ

てなりますもんね。
そうならないためにも少しの手間は惜しまないで頑張りましょう。

設定方法自体はシンプルなので表示速度を高速化したい方にはおススメですよ。

スポンサーリンク
動画配信サービスのおすすめ「U-NEXT」!

最近パソコンの息抜きに動画配信サービスを見るのにハマっています。

何社か無料トライアルを試した中でのおススメは「U-NEXT」。

U-NEXTは最新作の作品も多数あります。
映画だけでなくコミックや本の配信が多いのも嬉しいところ。

600円分のポイントもつく31日間無料トライアルを実施中です。
アナと雪の女王2などは有料配信ですが、600円分のポイントを使って見れるお得感も。

【31日間無料トライアル中】
U-NEXT