サイトスピード

Autoptimizeの設定方法とメリットを解説|プラグイン

WordPressで作ったウェブサイトを運営しているなら、プラグインを導入するだけで表示速度を改善できる場合があります。Autoptimizeもそのひとつです。

この記事では、Autoptimizeを使って得られる5つのことについて解説していきます。サイトスピードを改善する具体的な方法を知りたい方にはおすすめです。

この記事を読んでほしい人
  1.  WordPressでウェブサイトを作っている人
  2.  サイトスピードを改善したい人

なお、「なぜ、サイトスピードが重要なのか?」について知りたい方は、次の記事もご覧ください。

サイトスピード 画像
サイトスピードを改善すべき3つの理由と4つの方法を紹介! ウェブサイトを利用する際に、読み込み時間が長いとイライラしますよね……。インターネットが当たり前になった現代では、通信速度が遅いだけで...

Autoptimizeを設定して得られる4つのこと

Autoptimizeとは、表示速度の改善に役立つコードの圧縮や画像の遅滞読込などの機能を実装できるプラグインです。

ベルギー出身のフランク・グーセンスというエンジニアによって開発されたもので、現在では100万以上のウェブサイトで使用されています

より具体的には、Autoptimizeを使うと、次の4つのメリットを得ることができます。

  • メリット1 HTML、JavaScript、CSSファイルを圧縮できる
  • メリット2 画像ファイルにLazy Loadを実装できる
  • メリット3 絵文字を自動で削除できる
  • メリット4 フォントに反映されるコードを削除できる

これらはウェブサイトのスピードを上げるために役立つものです。

5分で終わる簡単な設定方法と注意点

それでは、Autoptimizeの設定方法について4つのステップから説明していきます。

ステップ1 インストール・有効化

まずは、WordPressの管理画面から新規追加で「Autoptimize」と検索すると、以下の画像のようなデザインのものが出てくるので、そちらをインストールしましょう

プラグインの新規追加でAutoptimizeを検索した結果

インストールが完了したら、有効化のボタンを押して設定画面に移動します。

なお、すべてのプラグインを導入する際に注意すべきことですが、現在のWordPressのバージョンとの互換性を必ず確認しておきましょう

ステップ2 JavaScript・CSS・HTMLの最適化

続いて、JavaScript・CSS・HTMLの最適化に関する設定を行います。WordPressの管理画面にある設定からAutoptimizeをクリックすると、次のような画面が出てきます。

JavaScriptの設定画面

まずは、JavaScriptオプションですが、「JavaScriptコード最適化」と「Aggregate JS-file」「このAutoptimizeオプションをチェックすると、HTMLのCSSを連結します」の3つにチェックをいれてください。これによって、サイト内のJavaScriptファイルが圧縮されてデータ容量が最適化されます。

CSSオプションの設定画面

次に、CSSオプションです。これらの設定を完了すると、CSSファイルの転送量を圧縮できます

チェックすべき項目としては、「CSSコードを最適化、Aggregate all linked CSS-files、このAutoptimizeオプションをチェックするとHTMLのCSSを連結します」の3点です

その次に、HTMLオプションでは「HTMLコードを最適化」にチェックしましょう。以上で基本設定は終了です。

なお、CDN オプション、キャッシュ情報、その他オプションについてはデフォルトのままで問題ありません

ステップ3 画像の遅滞読込を導入する場合

続いて、Autoptimizeで画像の遅滞読込を導入する設定について説明します。

画像の遅滞読込とは、通称「Lazy Load」と呼ばれており、ユーザーが最初に見る画像を優先的に表示させることでサイトスピードを改善する仕組みのことを指します

AutoptimizeでLazy Loadを実装するには、設定画面のImagesを選択して、「Image lazy-loading will delay the loading of non-visible images to allow the browser to optimally load all resources for the “above the fold”-page first.」にチェックを付けてください

レイジーロードの設定に関する画像

なお、すでに Lazy Load 系のプラグインを実装している場合、こちらのチェックは外してください。重複することによって、エラーが発生する可能性があります。

なお、Lazy Loadについて詳しく知りたい方は、こちらの記事をご覧ください!

アイキャッチ画像
a3 Lazy Loadの設定方法|遅滞読み込みでサイトを高速化 Google botは、Lazy Loadが適用されたデータを読み込むことができないといわれています。すなわち、SEOに悪影響があるか...
Lazy Loadの使い方 アイキャッチ
Lazy Loadの使い方【WordPressの利用者必見】画像データの圧縮、キャッシュ機能の追加、不要なCSSの削除以外にも、Lazy Load(レイジーロード)というサイトスピードを改善する方法があります。Lazyは英語で「動きがのろい」という意味なので、ウェブサイトの表示速度を上げる技術と関係ないように思えますが、有効な改善策のひとつです。この記事では、Lazy Loadの概要と使い方について解説していきます。遅滞読込を活用してウェブサイトの表示速度を改善したい方の参考になれば幸いです。...

ステップ4 絵文字とフォントを最適化する

絵文字やフォントのデザインも一定のデータ転送量が発生するので、ウェブサイトの表示速度を遅くする原因です。

Autoptimizeでは、ページに表示される文字のデータを変化させるコードと絵文字のデータを削除することでサイトパフォーマンスを向上させることができます。

具体的には、「Googleフォントの削除」と「WordPress コア絵文字のインライン CSS、インラインJavaScript、およびその他の自動化されていないJavaScriptファイルを削除します」にチェックを入れましょう。

絵文字とフォントの設定画面

もし、ウェブサイトの文字を丸文字や角文字などのデザインにしている場合は、そのままにするをチェックしてください。

プラグインの相性には注意!

WordPressには無料とは思えないほど便利なプラグインがたくさんあります。

ただし、ウェブサイトのテーマや他のプラグインと相性が悪くて、デザインが崩れたり、今まで使えた機能が止まったりと問題が発生することも少なくありません。

Autoptimizeを導入したときは必ずウェブサイトがおかしくなっていないかを必ず確認しましょう!

ABOUT ME
PENDELION編集部
PENDELION編集部はライター・構成担当・編集担当・グロースハッカーから成り立っています。専属のライターさんが執筆した記事に関しては、希望がある場合にのみプロフィールを掲載します。