Autoptimizeで【画像・JS・CSS・HTML】を最適化設定してサイトを高速表示しよう

 
くろくま
サイトの表示速度が遅く感じるんだけど、どんな対策を行えば良いかな?
 
しろくま
画像やJavaScript・CSS・HTMLの最適化を行っていないなら、「Autoptimize」というプラグインを使って、サイトのパフォーマンスを向上できますよ。
 
くろくま
一つのプラグインに色んな機能が備わっているんだね。
 
しろくま
「Autoptimize」のメリット・デメリット、おすすめ設定をご紹介していきます。
スポンサーリンク

Autoptimizeとは

Autoptimizeは、画像やJavaScript・CSS・HTMLを最適化できるプラグインです。

画像だと「圧縮・軽量化」や「遅延読み込み」、JavaScript・CSS・HTMLだと「コードの縮小」に対応しているので、サイトの表示速度・パフォーマンス改善に効果が期待できます。

Autoptimizeのメリット・デメリットを知ろう

Autoptimizeのメリット

  • サイトの表示速度・パフォーマンス改善
  • サイト訪問者の直帰率・離脱率の減少

Autoptimizeのデメリット

  • WordPressのテーマによっては、相性問題が起こる可能性がある
  • レイアウトが崩れる場合がある
  • スクリプトが動作しなくなる可能性がある
 
しろくま
Autoptimizeのメリット・デメリットがわかったところで、次はインストールを行いましょう。

Autoptimizeのインストール

WordPressの管理画面から「プラグイン」→「新規追加」→キーワード欄に「
Autoptimize」を入力し、インストールを行います。

Autoptimizeをインストール

インストール後は、「有効化」しておきましょう。

Autoptimizeを有効化
 
しろくま
次は、Autoptimizeのおすすめ設定を紹介します。

Autoptimizeのおすすめ設定

Autoptimizeの設定を行うには、WordPressの管理画面から「設定」→「Autoptimize」と進んでいきます。

WordPressの管理画面から「設定」→「Autoptimize」と進む

JS、CSS&HTMLの設定

「JS、CSS&HTML」タブを選択すると、「JavaScript、CSS、HTML」それぞれのオプション設定を行う画面が表示されるので、順番に確認していきます。

Autoptimizeの「JS、CSS&HTML」タブを選択

JavaScriptオプションの設定

「JavaScriptコードの最適化」、「JSファイルを連結する」のチェックをオンにします。

AutoptimizeのJavaScriptオプション設定画面
 
しろくま
インラインでJavaScriptを記述している場合は、「インラインのJSを連結」をオンにするのも効果があります。
スクリプトが動作しなくなった場合は、チェックを外すようにしましょう。

CSSオプションの設定

「CSSコードの最適化」、「CSSファイルを連結する」、「インラインのCSSを連結」のチェックをオンにします。

AutoptimizeのCSSオプション設定画面
 
しろくま
レイアウトが崩れてしまった場合は、チェックを外すようにしましょう。

HTMLオプションの設定

「HTMLコードを最適化」のチェックをオンにします。

AutoptimizeのHTMLオプション設定画面

JavaScript・CSS・HTMLの設定を終えたら、「変更を保存してキャッシュを削除」を選択します。

JavaScript・CSS・HTMLの設定を終えたら、「変更を保存してキャッシュを削除」を選択

画像最適化の設定

「画像」タブを選択すると、「画像最適化、遅延読み込み」の設定を行う画面が表示されるので、確認していきます。

Autoptimizeの「画像」タブを選択

当ブログでは、「Lazy-load images?(画像遅延読み込み)」のみ有効化しています。(WordPressテーマ【THE THOR(ザ・トール)】にも遅延読み込み機能がありますが、比較してAutoptimizeの方が効果がありそうだった為)

Autoptimizeの画像最適化設定画面

当ブログでは、画像最適化プラグインとして「EWWW Image Optimizer」を利用している為、有効化しておりませんが、このようなプラグインを未使用であれば、「画像を最適化」を有効化されることをおすすめします。

関連記事

 くろくま サイトの表示速度を改善するのに、画像を軽量化したいんだけど、おすすめのプラグインを教えてください。   しろくま 「EWWW Image Optimizer」というプラグインを使えば、画像を自動[…]

 
しろくま
WordPressテーマや利用しているプラグインによって、機能が重複しないよう気を付けましょう。

【THE THOR(ザ・トール)】利用時の注意点

当ブログでは、WordPressテーマ【THE THOR(ザ・トール)】を使用しているのですが、Autooptimize使用後に画像が真っ黒になってしまう現象が出たので、対処法をご紹介します。

Autooptimize使用後に画像が真っ黒になった状態

画像が真っ黒になった時の対処法

WordPress管理画面のメニューから、(1)「外観」→(2)「カスタマイズ」→(3)「SEO設定[THE]」→(4)「img非同期読み込み設定」へと進みます。

【THE THOR(ザ・トール)】のimg非同期読み込み設定へと進む

「imgファイルを非同期読み込みにする」をオフにして、公開します。

「imgファイルを非同期読み込みにする」をオフにする

画像が正常に表示されているか、確認しましょう。

Autoptimize使用中に真っ黒だった画像が元に戻った

さいごに

Googleによると、モバイルページの直帰率として、サイトの読み込み完了時間1秒に対し、3秒かかると32%、5秒で90%、6秒で106%、10秒で123%、直帰率が増加すると公開された情報があります。

グーグルによるモバイルページ表示速度と直帰率の関係性の表

出典:Find out how you stack up to new industry benchmarks for mobile page speed
 
くろくま
「サイトが遅い」と、どんなに良いサイトや記事も見てもらえないんだね。
 
しろくま
サイトの表示速度が遅いと、ユーザーがストレスを感じることから、直帰率や離脱率に大きく影響するので、改善する取り組みをしっかり行いましょう。

スポンサーリンク
しろくまフォルダの最新情報をチェック!