Autoptimizeの設定方法|画像・コード最適化でサイト表示速度改善

当ページのリンクには広告が含まれています。
悩めるクマ

サイトの表示速度が遅く感じる時って、どんな対策を行えば良いかな?

しろくま

画像やJavaScript・CSS・HTMLの最適化を行っていないなら、「Autoptimize」というプラグインで、サイトのパフォーマンスを向上できますよ。

悩めるクマ

Autoptimizeについて、知りたいです!

しろくま

Autoptimizeの「豊富な機能、メリット・デメリット、おすすめ設定」を詳しくご紹介しますね。

目次

Autoptimizeとは

Autoptimizeプラグイン

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

最適化とは?

最適化とは、最も適した状態にすること

つまり、画像の最適化は「圧縮・軽量化」「遅延読み込み」

コード(JavaScript・CSS・HTML)の最適化は「コードの縮小」をさします。

画像やコードを最適化することで、サイトの表示速度・パフォーマンス改善の効果を期待できます。

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

Autoptimizeのメリット

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

Autoptimizeのデメリット

  • WordPressのテーマによっては、相性問題が起こる可能性がある
  • レイアウトが崩れる場合がある
  • スクリプトが動作しなくなる可能性がある
しろくま

Autoptimizeのメリット・デメリットがわかったところで、次はインストールを行いましょう。

Autoptimizeをインストールしよう

WordPressテーマ「SWELL」をお使いの方は、非推奨のプラグインとなっています。

Autoptimizeのインストール手順は次の通りです。

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

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」を利用している為、有効化しておりませんが、画像最適化プラグインを未使用であれば、「画像を最適化」を有効化することをおすすめします。

しろくま

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

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

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

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

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

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

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

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

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

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

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

サイト表示速度が改善されない場合

Autoptimizeを設定しても、サイト表示速度があまり変わらない場合、以下の記事も合わせて確認してみましょう。

サイト表示速度が遅いのは、アドセンスが原因かも!?
 PageSpeed Insightsの低いモバイルスコア改善!Google Adsense遅延読み込みが鍵

画像を自動で圧縮・軽量・最適化して、サイトを高速表示するプラグイン
 EWWW Image Optimizerのおすすめ設定とWebPの使い方

PageSpeed Insightsで「キー リクエストのプリロード」が出たら…
 キー リクエストのプリロードとは?改善方法とコード記述内容を紹介

さいごに

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

グーグルによるモバイルページ表示速度と直帰率の関係性の表
出典:Find out how you stack up to new industry benchmarks for mobile page speed
悩めるクマ

「サイトが遅い」と、どんなに良いサイトや記事も見てもらえないんだね。

しろくま

サイトの表示速度が遅いと、ユーザーがストレスを感じることから、直帰率や離脱率に大きく影響するので、改善する取り組みをしっかり行いましょう。

よかったらシェアしてね!

コメント

コメントする

目次