Autoptimizeの設定方法と使い方|HTML、CSS、JavaScriptを縮小して高速化できるWordPressプラグイン

WordPressのサイト表示速度は、SEO的にも影響があるということはもうご存知ですよね?

サイトの表示速度を無料で診断できるツールはいろいろありますが、Googleが提供している「PageSpeed Insights」で以下表示があったらぜひこの記事は参考になると思います。

  • スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する
  • JavaScript を縮小する
  • HTML を縮小する
  • CSS を縮小する

実は、このサイト「fujimotoyousuke.com」も、上記項目が「修正が必要」「修正を考慮」と警告されていました。

ですから、不必要なプラグインを削除したり、テーマを変更したり、いろいろして、ファイルの縮小プラグインも幾つか使っていましたが、「Autoptimize」を導入してみました。

その結果ですが、

pagespeed

と、「CSSを縮小する」、「HTMLを縮小する」、「Javascriptを縮小する」については、合格に。

「スクロールせずに見えるコンテンツのレンダリングをブロックしているJavaScript/CSSを排除する」は修正を考慮と、このように改善できました。

 

またPageSpeedのスコアですが、

after2

と、ここまで改善することができました。

改善前は

before1

だったので、モバイルは13ポイント、PCは14ポイント改善できました。

この改善施策の中でも、「HTML、CSS、JavaScriptを縮小するプラグイン」の「Autoptimize」が効果があったように思います。

今回は、WordPressプラグインAutoptimize設定方法と使い方を紹介します。ぜひサイトの表示速度を速くしたい方はチェックしてください。

Autoptimizeとは

公式プラグインディレクトリ「Autoptimize」

Autoptimizeとは、HTML、CSS、JavaScriptを縮小してくれるプラグインです。これと似ているプラグインはHead Cleanerというプラグインが有名ですが、以前わたしの環境で、表示が崩れ、JavaScriptが動かなくなったりしたのでHead Cleanerはやめました。

ただAutoptimizeも、表示が崩れたり、予想外の挙動を起こすことが充分考えられます。サーバ環境やWordPressのテーマなどでも違ってきますので、プラグインを使う時はローカル環境でテストしたり、バックアップしてから設定してください。

ちなみにこのサイトは、サーバは「エックスサーバ」で、テーマは「stork」を子テーマ化しています。

Autoptimizeインストール

%e3%83%97%e3%83%a9%e3%82%b0%e3%82%a4%e3%83%b3%e3%82%92%e8%bf%bd%e5%8a%a0

管理画面左メニューの「プラグイン」を選択し「新規追加」をクリックしてから、右上の検索窓で「Autoptimize」と入力します。そうすると上写真のような画面になるので、「今すぐインストール」をクリックし、そのまま「有効化」してください。

Autoptimizeの設定

管理画面左メニューの「設定」の中に「Autoptimize」が新たに追加されます。その「Autoptimize」をクリックしてください。

この画面で設定をしていきます。

HTML Options

html-options

HTML Optionsは、二つともチェックを入れます。

 

JavaScript Options

javascript-options

JavaScript Optionsは、一番上の「Optimize JavaScript Code?」にだけチェックを入れます。

もし設定後、レイアウトが崩れたり、普段と違う挙動になってしまった場合は、このJavaScriptが影響している可能性が高いので、チェックをすべて外してみてください。

 

CSS Options

css-options

CSS Optionsは、1番目と4番目の「Optimize CSS Code?」と「Also aggregate inline CSS?」にチェックを入れます。

 

CDN Options

cdn-options

CDN Optionsは、このままにしておきます。

 

Cache Info

cacheinfo

Cache Infoは一番下の「Save aggregated script/css as static files?」にチェックを入れておきます。

 

autoptimize-options-fujimotoyousuke-com-wordpress

そして最後に、「Save Changes and Empty Cache」をクリックします。これで設定は終わりです。

まとめ Autoptimize の設定方法や使い方

Autoptimizeを設定したら、さっそくサイトの表示速度をチェックしてみてください。

わたしはさきほど紹介したとおり、Googleの「PageSpeed Insights」で、

  • JavaScript を縮小する
  • HTML を縮小する
  • CSS を縮小する

合格基準になり、

  • スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する

正を考慮基準になりました。

 

またGTmetrixでも、

gtmetrixa

このようにAランクになりましたし、ページの読み込みが5.1秒から2.1秒にすることができました。

無料で使えるツール 『GTmetrix』でWordPressサイトをスピードアップする方法

2016.10.23

みなさんもサイト表示速度をチェックしてみてください。この記事がみなさんのサイト表示速度を改善するために、「Autoptimize」を導入して良かった!と思っていただけたら嬉しいです。

EWWW Image Optimizerの設定方法と使い方|サイト表示速度スピードアップのWordPressプラグイン

2016.10.24

W3 Total Cacheの設定方法と使い方|PCもスマホもキャッシュするWordPressプラグイン

2016.10.25

またサイト表示速度を改善するためにやったことはこちらも参考にしてみてください。

WordPressにはプラグインがたくさんあります。

おすすめプラグインは、こちらで紹介していますのでチェックしてみてください。
→厳選おすすめプラグイン

【保存版】WordPressのおすすめプラグイン2017年版

2017.01.01

コメントを残す

メールアドレスが公開されることはありません。