ホーム > 役立つ知識と情報 > Autoptimizeの有効な使い方と設定方法をご紹介!
DVDFabオールインワン
DVDFabオールインワン
25-In-1 AI搭載のDVD / Blu-ray / 4K UHD / ビデオ編集・変換ソルーション
StreamFab オールインワン
StreamFab オールインワン
1000+のサイトから映画やアニメを無制限にダウンロードできます!
PlayerFab オールインワン
PlayerFab オールインワン
ローカルビデオ、DVD/Blu-ray/UHDディスク、ストリーミング動画を再生できる

Autoptimizeの有効な使い方と設定方法をご紹介!

2021-11-30 / Ryo

Webサイトを閲覧しようと思ったときに、ページの読み込みが遅いとイライラしてしまうでしょう。通信環境の悪い場所や、速度の出ないところであれば尚更です。今やネット通信は4G回線が主流となり、Webサイトの表記が遅いというのは、通信のせいではありません。サイト側の問題で有ることの方が多くなっています。そこで今回の記事では、Webの表示に関わるコードを最適化してくれるプラグイン「Autoptimize」について、詳しく解説していきましょう。

Autoptimizeとは

Autoptimizeは複数のコードを簡単に圧縮、軽量、最適化してくれるWordPress専用のプラグインです。以下のような機能を備えています。

  • CSSの軽量、最適化
  • HTMLの軽量、最適化
  • Java Scriptの軽量、最適化
  • 画像読み込みの変更(遅延読み込みなど)

WordPressは簡単にWebサイトが作れるツールとして人気です。しかしサイトが重くなってしまうことも多く、ただ作成しただけではWeb表示に時間がかかってしまうことがあります。そこでAutoptimizeなどのプラグインを使用することで、表示速度を高速化させているのです。

WordPress(ワードプレス)ってなに?

WordPressとはCMS(コンテンツ・マネジメント・システム)のことで、ブログ型のWebサイトを提供するサーバー導入型ソフトウェアのことです。自身で準備したサーバーに直接インストールすることで、簡単にブログを作成できるようになります。これまでのWebサイトよりもハードルが下がり、簡単にサイトを作ることができるようになったためWordPressは世界中で圧倒的な人気を誇っています。

また、WordPress以外にもDrupal、Joomla!、Ghost、Movable Typeなどがサーバー導入型のCMSを行なっています。またWebサービスではBlogger、Tumblr、note、livedoor、はてなブログなどもあります。

WordPressが人気の理由

WordPressは世界中のWebサイトで約4割のシェアを持っており、数あるCMSの中でも圧倒的な人気を誇っています。なぜWordPressが人気なのか、それは以下の理由があります。

SEOに強い

検索エンジンにヒットさせるために必要なSEO対策ですが、WordPressは検索エンジンの最適化が優秀です。類似記事や連載記事との連携で検索エンジンの高評価と高順位に繋がりやすく、SEOに非常に強いCMSと言えるでしょう。

テーマ、プラグイン数が多い

利用者が多いため、おしゃれなテーマや便利なプラグインが非常に多いというメリットがあります。初心者が簡単にWebサイトを作れるといっても、いきなり多くな機能を使いこなすのは困難です。そういった時に有効なプラグインやテーマを使うことで、簡単にプロ並みのWebサイトを作れるのです

WordPressの情報が多い

利用者が多いことでトラブル対策やノウハウなどを公開している人が多く、簡単に情報を集められやすいというメリットがあります。また開発者向けに内部構造を解説したマニュアルなども公開されており、やり方次第では好きなWebサイトを作成可能です。こうした理由から多くの人に人気があります。

Autoptimizeの導入方法

ここでは実際に「Autoptimize」を導入して使う方法を解説していきましょう。WordPress専用のプラグインとなるので、インストール前にはかならず「WordPress」を準備しておいてください。※このプラグインは単体でインストールすることはできません。

Autoptimizeのインストール

1. WordPressの管理画面を開き、左側にある「プラグイン」をクリックして、「Autoptimize」をクリックしてください(またはhttps://ja.wordpress.org/plugins/autoptimize/からダウンロード)。

Autoptimizeのインストール

2. インストールが完了したら、「Autoptimize」の「有効化」をクリックしておきましょう。

Autoptimizeのインストール

3. 有効化が完了したら、設定欄に「Autoptimize」が追加されているか確認して完了です。

Autoptimizeのインストール

Autoptimizeの設定方法

インストールが完了したら、「Autoptimize」各コードの設定を行います。コードを知らない人には何のことかわからないかもしれませんが、手順どおりにやってもらえればコードの最適化が完了するので問題ありません

Java Scriptの設定

1. Autoptimizeの設定画面から「JS,CSS &HTML」のタブをクリックして「JavaScriptオプション」を開きます。

2. ウィンドウ内に表示されている「JavaScriptコードの最適化」と「Aggregate J S-files?」にチェックを入れます。

Java Scriptの設定

この設定をすることで、JavaScriptコードを圧縮最適化する設定が完了します。設定完了後にエラーやフリーズなどの不具合が見られた場合は、「

内へ JavaScript を強制」と「try-catch の折り返しを追加」にチェックを入れてみましょう。

※ただしこの項目をチェックすると、「head内にJavaScriptをすべて移動する」ことになるので、読み込みが遅くなってしまう可能性があります。あまりおすすめはできません。最終的な手段として考えておいた方がよいでしょう。

CSSの設定

1. 「JS,CSS &HTML」から「CSSオプション」を開きます。

2. 「CSS コードを最適化」「Aggregate CSS-files?」「インラインの CSS を連結」の3つにチェックを入れます。 

CSSの設定

これで複数の余分な余白や改行を無くしCSSファイルを集結して、HTML内にCSSを連結させられます

HTMLの設定方法

1.  「JS,CSS &HTML」から「HTMLオプション」を開き、「HTMLコードを最適化」にチェックを入れます。

HTMLの設定方法

これでHTMLの余分な空白や改行を省略して軽量化可能になります。HTMLファイルをそのまま残したい場合は「HTMLコメントを残す」にチェックを入れておきましょう。

その他のオプションの設定

1. 「その他のオプション」から「連結されたスクリプト / CSS を静的ファイルとして保存」と「Minify excluded CSS and JS files?」にチェックを入れます。

CSSの設定

Webサイト内にログイン機能がある場合は、「ログイン中のユーザーも最適化しますか?」にチェックを入れてみましょう。これで連結されたCSSと JSが静的ファイルとして保存されるようになります

imagesの設定

「images」の設定を行うことで画像の読み込みを遅らせ、Webサイトの読み込みを高速化させられます。パフォーマンスに問題ない場合は設定する必要がないのでスルーしましょう。

1. 「JS,CSS &HTML」の隣にある「images」タブをクリックしてウィンドウを開きます。

2.  「Lazy-load images?」にチェックを入れます。

imagesの設定

これで画像の読み込みを遅延させる設定が完了しました。この方法だとすべての画像を遅延させて読み込むため、先に読み込ませたい画像がある場合は下記の設定を行なってください。※「Lazy-load exclusions」の枠内に「クラス名」「ファイル名」を記入する

追加タブの設定

1. 「images」タブの隣にある「追加タブ」をクリックしてウィンドウを開きます。

2. 「Google Font」内にある「webfont.js で非同期にフォントを結合して読み込む」にチェックを入れ、「絵文字を削除」にもチェックします。

追加タブの設定」

これで絵文字やフォントの読み込みが高速化されます。※「さらに最適化!」については、有料機能になるため、設定の必要はありません。

Autoptimizeを利用するにあたって注意すべき点

Autoptimizeを利用するにあたって注意すべき点

Autoptimizeを使うことで、Webサイトを簡単に高速化することが可能です。しかしテーマによっては表示がおかしくなってしまったり、予期せぬエラーなどが起こってしまう場合があります。そうしたトラブルを回避するためにも、Autoptimizeを使うためにはいくつかのことに注意しておく必要があります。

複数のページを表示するサイトの場合

AutoptimizeのCSSオプションである「Aggregate CSS-files?」は、1ページごとに集約したCSSキャッシュが一つのファイルとして扱われる仕様です。ブラウザ側のファイルキャッシュとは別にキャッシュが生成されていきます。その結果ページ数の多いサイトでは通信量が増えるといったデメリットが生じてしまうのです。また通信量が増えると読み込みにも時間がかかってしまうため、「CSSコードを最適化」のみにチェックして対策する必要があります。

CDNで外部ファイルを読み込んでいる場合

CDNを使って外部ファイルを読み込んでいる場合はAutoptimizeを使うことで、逆にページ表示が遅くなってしまう可能性があります。CDNを使っているサイトではAutoptimizeを使う場合は「CDNオプション」から「CDNベースURL」を入力して、負荷を軽減する方法もあります。こちらを利用してみましょう。

CDNで外部ファイルを読み込んでいる場合

まとめ

Autoptimizeは各コードを圧縮して、軽量化させる有能なプラグインです。その仕様から状況によっては表示速度を低下させる可能性もあります。Autoptimizeを使いたいと考えている場合は、他に干渉してしまうプラグインや方法を利用していないか確認してから、使用するようにしてください。