Autoptimizeとは
![Autoptimizeプラグイン](https://shirokuma-folder.com/wp-content/uploads/2020/06/autoptimize.png)
Autoptimizeは、画像やJavaScript・CSS・HTMLを最適化(※)できるプラグインです。
最適化とは、最も適した状態にすること、つまり
画像の最適化は「圧縮・軽量化」「遅延読み込み」、
コード(JavaScript・CSS・HTML)の最適化は「コードの縮小」をさします。
画像やコードを最適化することで、サイトの表示速度・パフォーマンス改善の効果を期待できます。
Autoptimizeのメリット・デメリットを知ろう
Autoptimizeのメリット
- サイトの表示速度・パフォーマンス改善
- サイト訪問者の直帰率・離脱率の減少
Autoptimizeのデメリット
- WordPressのテーマによっては、相性問題が起こる可能性がある
- レイアウトが崩れる場合がある
- スクリプトが動作しなくなる可能性がある
Autoptimizeをインストールしよう
Autoptimizeのインストール手順は次の通りです。
Autoptimize」を入力し、インストールを行います。
![Autoptimizeをインストール](https://shirokuma-folder.com/wp-content/uploads/2020/06/autoptimize-install.png)
インストール後は、「有効化」しておきましょう。
![Autoptimizeを有効化](https://shirokuma-folder.com/wp-content/uploads/2020/06/autoptimize-activation.png)
Autoptimizeのおすすめ設定
当ブログでも使用している、Autoptimizeの設定内容をご紹介します。
Autoptimizeの設定は、WordPressの管理画面から「設定」→「Autoptimize」と進んでいきます。
![WordPressの管理画面から「設定」→「Autoptimize」と進む](https://shirokuma-folder.com/wp-content/uploads/2020/06/from-setting-autoptimize.png)
JS、CSS&HTMLの設定
「JS、CSS&HTML」タブを選択すると、「JavaScript、CSS、HTML」それぞれのオプション設定を行う画面が表示されるので、順番に確認していきます。
![Autoptimizeの「JS、CSS&HTML」タブを選択](https://shirokuma-folder.com/wp-content/uploads/2020/06/autoptimize-code-tab.png)
JavaScriptオプションの設定
「JavaScriptコードの最適化」、「JSファイルを連結する」のチェックをオンにします。
![AutoptimizeのJavaScriptオプション設定画面](https://shirokuma-folder.com/wp-content/uploads/2020/06/autoptimize-js.png)
スクリプトが動作しなくなった場合は、チェックを外すようにしましょう。
CSSオプションの設定
「CSSコードの最適化」、「CSSファイルを連結する」、「インラインのCSSを連結」のチェックをオンにします。
![AutoptimizeのCSSオプション設定画面](https://shirokuma-folder.com/wp-content/uploads/2020/06/autoptimize-css.png)
HTMLオプションの設定
「HTMLコードを最適化」のチェックをオンにします。
![AutoptimizeのHTMLオプション設定画面](https://shirokuma-folder.com/wp-content/uploads/2020/06/autoptimize-html.png)
JavaScript・CSS・HTMLの設定を終えたら、「変更を保存してキャッシュを削除」を選択します。
![JavaScript・CSS・HTMLの設定を終えたら、「変更を保存してキャッシュを削除」を選択](https://shirokuma-folder.com/wp-content/uploads/2020/06/autoptimize-save-changes-and-clear-cache.png)
画像最適化の設定
「画像」タブを選択すると、「画像最適化、遅延読み込み」の設定を行う画面が表示されるので、確認していきます。
![Autoptimizeの「画像」タブを選択](https://shirokuma-folder.com/wp-content/uploads/2020/06/autoptimize-image-tab.png)
当ブログでは、「Lazy-load images(画像遅延読み込み)」のみ有効化しています。(WordPressテーマ【THE THOR(ザ・トール)】にも遅延読み込み機能がありますが、比較してAutoptimizeの方が効果があった為)
![Autoptimizeの画像最適化設定画面](https://shirokuma-folder.com/wp-content/uploads/2020/06/autoptimize-image.png)
当ブログでは、画像最適化プラグインとして「EWWW Image Optimizer」を利用している為、有効化しておりませんが、画像最適化プラグインを未使用であれば、「画像を最適化」を有効化することをおすすめします。
[sitecard subtitle=関連記事 url=https://shirokuma-folder.com/ewww-image-optimizer target=]
【THE THOR(ザ・トール)】利用時の注意点
当ブログでは、WordPressテーマ【THE THOR(ザ・トール)】を使用しているのですが、Autooptimize使用後に画像が真っ黒になってしまう現象が出たので、対処法をご紹介します。
![Autooptimize使用後に画像が真っ黒になった状態](https://shirokuma-folder.com/wp-content/uploads/2020/06/image-black.png)
画像が真っ黒になった時の対処法
WordPress管理画面のメニューから、(1)「外観」→(2)「カスタマイズ」→(3)「SEO設定[THE]」→(4)「img非同期読み込み設定」へと進みます。
![【THE THOR(ザ・トール)】のimg非同期読み込み設定へと進む](https://shirokuma-folder.com/wp-content/uploads/2020/07/image-asynchronous-loading-setting.png)
「imgファイルを非同期読み込みにする」をオフにして、公開します。
![「imgファイルを非同期読み込みにする」をオフにする](https://shirokuma-folder.com/wp-content/uploads/2020/07/asynchronous-loading-of-image-file-off.png)
画像が正常に表示されているか、確認しましょう。
![Autoptimize使用中に真っ黒だった画像が元に戻った](https://shirokuma-folder.com/wp-content/uploads/2020/07/normal-image.png)
サイト表示速度が改善されない場合
Autoptimizeを設定しても、サイト表示速度があまり変わらない場合、以下の記事も合わせて確認してみましょう。
PageSpeed Insightsの低いモバイルスコア改善!Google Adsense遅延読み込みが鍵
画像を自動で圧縮・軽量・最適化して、サイトを高速表示するプラグイン
EWWW Image Optimizerのおすすめ設定とWebPの使い方
PageSpeed Insightsで「キー リクエストのプリロード」が出たら…
キー リクエストのプリロードとは?改善方法とコード記述内容を紹介
さいごに
Googleによると、モバイルページの直帰率として、サイトの読み込み完了時間1秒に対し、3秒かかると32%、5秒で90%、6秒で106%、10秒で123%、直帰率が増加すると公開された情報があります。
![グーグルによるモバイルページ表示速度と直帰率の関係性の表](https://shirokuma-folder.com/wp-content/uploads/2020/06/page-load-time.png)
出典:Find out how you stack up to new industry benchmarks for mobile page speed
コメント