Autoptimizeプラグインの設定方法や不具合時の対処法を解説
WordPressサイトでページの読み込みを改善する方法として、HTMLなどのコードを縮小するAutoptimizeプラグインがあります。無料で活用でき多機能な面が特徴ですが、設定方法によっては多くの不具合を起こす可能性もあるプラグインです。
Autoptimizeとは
Autoptimizeとは、WordPressサイトのコードを縮小し、最適化を行うためのプラグインです。無料でありながら多くの機能が備わっており、ページの読み込み速度を速められる点が強みとなります。
通常のWordPressサイトであれば、運営している中でプラグインを増やしたりレイアウトをカスタマイズしたりと、コードが徐々に増えてしまうでしょう。コードが増えるとページの読み込みが遅くなり、なかなか表示されないなど利便性の低下につながります。
そのためページの読み込みを速めるAutoptimizeプラグインは重要な役割をもち、WordPressのサイト運営には必要不可欠な要素となります。ここでは、Autoptimizeの機能について解説していきます。
Autoptimizeの機能
プラグインを実装しコードの縮小を行うにあたって、さまざまな項目の機能を活用できます。
Autoptimizeの主な機能
- Google フォントの改善
- HTMLやCSSコードの改善・連結
- CSSやJavaScriptコードの遅延読み込み
- 画像のURL化・最適化
- 画像の遅延読み込み
- 除外設定
他にも細かい設定を行うことができ、WordPressサイトを長年運営している上級者にも有効活用できるプラグインです。
Autoptimizeを導入するメリット
Autoptimizeプラグインは誰もが活用できること以外にも、最終的にSEOに効果的なこともメリットです。検索順位を左右するSEOはどのWordPressサイトにも重要なため、Autoptimizeプラグインの実装はサイトの規模を問わずにおすすめできます。
ここではAutoptimizeを実装した際のメリットについて、詳しく解説していきます。
知識や経験無しでコードを縮小できる
Autoptimizeプラグインの最大のメリットは、専門的な知識や経験無しでもコードを縮小できることです。
仮にプラグインを活用せずにコードを縮小する場合、テーマファイルを直接編集する必要があります。HTML・CSS・JavaScriptをはじめ、さまざまなプログラミング言語に精通している必要や、デザインが崩れないように微調整を行うなどのスキルは必須です。
調べながら行うことも可能ですが、かなりの時間を要するでしょう。また不具合が発生した場合の対処は簡単ではなく、コーディングの慣れが問われます。
そのため時間をかけずに設定できるAutoptimizeプラグインは扱いやすく、サイトを公開しはじめた運営者にもおすすめできるプラグインです。
サイトの表示速度が速まりSEOに効果的
Autoptimizeプラグインの目的はコードの縮小を行うことですが、最終的にSEOにも効果があります。
なぜならコードの縮小によってサイトの表示速度が速まり、検索エンジンからの評価が高まるからです。
SEOとは検索エンジン最適化を意味し、検索順位を決定している検索エンジンに向けた対策を指します。仮に検索エンジンからの評価が悪ければ、検索結果で上位に表示できません。
そのためSEOは多くのWordPressサイトにとって重要となり、効果的な対策を行えるAutoptimizeプラグインは実装するメリットが多いといえるでしょう。
Autoptimizeを導入するデメリット
Autoptimizeプラグインは詳細な設定を行えるメリットがある反面、サイトによっては不具合を起こしやすいことがデメリットです。また同様の機能をもつプラグインやWordPressテーマを利用している場合には、重複を避けるなどの対処が必要になります。
ここでは、Autoptimizeを実装した際のデメリットについて詳しく解説していきます。
すでに高速化機能があると不具合を起こしやすい
Autoptimizeプラグインを実装する際、すでに高速化機能を加えているWordPressサイトは不具合が起こりやすくなります。
そのためAutoptimizeプラグインを実装したからといってページの表示が速くなることはなく、むしろ遅くなってしまうこともあるでしょう。
Autoptimizeと同じような機能をもつプラグインは重複が分かりやすいですが、WordPressテーマによっても同様の機能をもつ場合があります。
気づかぬ間に最適化が行われていることもあるため、Autoptimizeプラグインの実装時には機能面の重複には注意をしましょう。
基本的にページの高速化機能をもつプラグインは一つに絞ることをおすすめします。
設定の方法によって不具合を起こしやすい
Autoptimizeプラグインは魅力的な機能が多く優秀なプラグインですが、正しく設定しないと不具合が起こりやすいことはデメリットです。
またWordPressサイトによって不具合が発生する条件が異なる点にも、注意をしなければいけません。
サイトAでは問題なく機能しているが、まったく同じ設定をサイトBにしても正常に機能しないことがあります。
そのため、すべてのサイトに共通する設定がないことを覚えておきましょう。不具合を事前に予想することも難しいため、設定する際は項目ごとに確認することが重要です。
Autoptimizeの設定方法
設定方法は必要な項目を有効化するだけのため、比較的簡単に行なえます。ただし項目内容だけでは理解できない部分もあるため、不明点は具体的な機能を確認するようにしましょう。設定は以下の手順になります。
- 「Autoptimize」をインストール
- JS,CSS & HTMLのタブ設定
- 画像タブ設定
- その他のタブ設定
各々、解説していきます。
「Autoptimize」をインストール
設定を行うまえに「Autoptimize」をインストールし、有効化を行いましょう。インストールは以下の手順です。
- WordPress管理画面の「プラグイン」から「新規追加」を選択
- 右上の検索窓から「Autoptimize」を検索し「インストール」を選択
- インストール後に「有効化」をクリック
インストールの確認を行うには、WordPress管理画面の「設定」を選択します。
設定欄に「Autoptimize」が表示されていれば、無事にインストール完了です。
JS,CSS,HTMLのタブ設定
Autoptimizeプラグインでは、最も重要な「JS,CSS,HTML」タブの設定から行いましょう。
WordPress管理画面の「設定」をクリックし「Autoptimize」を選択すると、「JS,CSS,HTML」タブが表示されます。
ここでは「JS,CSS,HTML」タブについて詳しく解説していきます。
JavaScriptオプション
「JS,CSS,HTML」タブでは、まずJavaScriptのオプション設定から行います。機能ごとにチェックボックスが設けられているため、有効化要したい項目のみにチェックを加えましょう。
- JSファイルの連結を行う
- インラインJSの連結を行う
- JavaScriptを最適にする
- 内へ JavaScript を強制する
- スクリプトを除外
おすすめは「JavaScriptを最適にする」と「JSファイルの連結を行う」の有効化です。JavaScriptコードの縮小に直結する設定のため、不具合が起こらない限りは選択するようにしましょう。
もしも不具合が起こってしまう場合は、他の項目から正常に動作する項目を選択すると効果的です。
CSS オプション
JavaScriptのオプション設定を行った後は、CSSのオプションを設定しましょう。設定できる項目は以下のとおりです。
- CSSのインライン化と遅延
- CSSのを最適・連結
- プラグインからCSSを除外
- インラインのCSSの連結を行う
- データを生成・画像をURL化する
- すべてのCSSをインライン化
おすすめは「CSSのを最適・連結」の有効化です。CSSのオプション設定では、他のプラグインとの組み合わせ次第でレイアウトが崩れやすくなります。WordPressサイトによって不具合の起こりやすい項目は異なるため、JavaScript同様に確認しながら設定をしましょう。
HTML オプション
続いて設定する項目が、HTMLのオプションです。HTMLのオプションはシンブルな設定となり、有効化できる項目は以下の2つです。
- HTMLを最適にする
- HTMLのコメントを残す
HTMLのオプションでは「HTMLのを最適にする」を有効化しましょう。HTML・CSSを同様に、コードを縮小するには欠かせない項目となります。
コメントは残さない設定でもWordPressサイトに影響がないため、選択しなくても問題ありません。
その他オプション
「JS,CSS,HTML」タブ内の最後に行う設定が、その他のオプションです。設定できる項目は以下のとおりです。
- 連結されたスクリプト・CSSを静的ファイルとして保存
- 除外されたCSS・JSファイルを最小にする
- 404フォールバックの使用
- ログイン状態の編集者、管理者を最適にする
その他のオプションでは「連結されたスクリプト・CSSを静的ファイルとして保存」と「除外されたCSS・JSファイルを最小にする」を有効化しましょう。
もしもログイン機能があるWordPressサイトの場合は「ログイン状態の編集者、管理者を最適にする」も効果的なため、有効化をおすすめします。
画像タブ設定
つぎに「画像」タブの設定を行います。Autoptimizにある「JS,CSS,HTML」タブ右の「画像」を選択しましょう。設定できる項目は以下のとおりです。
- 画像を最適にする
- 画像の遅延読み込み (Lazy-load) を利用
- 遅延読み込みの除外
- 指定枚数目から遅延読み込み
「画像」タブでは「画像の遅延読み込み (Lazy-load) を利用」のみを有効化します。Lazy-loadとはユーザーが表示している画面内の画像に限定して読み込み、その他の画像は表示されるまで読み込みを遅延させる仕組みのことです。
通常はユーザーがページにアクセスした際、すべての画像ファイルを読み込んでから表示する流れとなります。しかしすべてのページの読み込みには時間がかかるため、Lazy-loadを利用すればページの表示速度を速めることが可能です。
仮にLazy-loadを適用させたくない画像ファイルがある場合は、「遅延読み込みの除外」にファイル名を入力しましょう。設定された画像ファイルは、通常通りユーザーのアクセスとともに表示されます。
その他のタブ設定
最後にAutoptimizeの残りのタブを設定していきます。
「JS,CSS,HTML」と「画像」タブの他には、以下のタブが設定可能です。
- クリティカルCSS:設定項目なし
- 追加:絵文字・Googleフォントを最適にする
- さらに最適化!:設定項目なし(有料機能)
その他のタブで特別に重要な設定はありませんが、WordPressサイトによっては「追加」タブは重要になります。絵文字・Googleフォントを最適にする項目のため、該当する場合は有効化しましょう。
逆に何も該当しない場合には、少しでもサイトの処理速度を速めるために「Googleフォントの削除」を選択することがおすすめです。
サイトにとって不要なものを設定しないことが、プラグインに負担をかけず効果的な活用につながります。
Autoptimizeが正常に機能しないときの対処法
プラグインを設定していると変更内容が表示されないことや、レイアウトが崩れてしまうことがあります。原因はWordPressサイトによっても異なりますが、サイトとの相性が悪いことを示しているため、無理に設定しないように注意をしましょう。
ここでは、Autoptimizeが正常に機能しないときの対処法について、詳しく解説していきます。
変更内容が反映されない
Autoptimizeの設定でよくあるケースが、設定した内容や変更した内容が反映されないことです。
反映されない理由の多くはキャッシュが原因となります。Autoptimizeはユーザーがアクセスした際のファイルを縮小し、キャッシュとして一時的に保存する仕組みです。
そのため閲覧数の多いWordPressサイトであればキャッシュ量が多くなり、最終的に読み込みが遅くなってしまうでしょう。したがって変更内容が反映されない場合は、キャッシュの削除がおすすめの対処法になります。
レイアウトが崩れている
Autoptimizeは正常に設定が行なえていない場合、サイトデザインが崩れてしまうため注意が必要です。
レイアウトを正常に戻すためには、設定した項目を無効化しましょう。基本的にはサイトのレイアウトを設計するCSSか、サイトに動きをつけるJavaScriptの最適化を無効にすると改善されます。
またサイトデザインが崩れていることは、WordPressテーマや他のプラグインによって影響を受けている可能性が高いです。そのため無理に設定せず、無効化した状態での運用をおすすめします。
画像が表示されない
プラグインの導入によって画像が表示されない場合は、JavaScriptの影響が大きいです。
そのため、まずはJavaScriptの最適化を無効化し確認しましょう。JavaScriptで改善されない場合は、CSSも同様に最適化を無効化し確認します。
基本的にはJavaScriptかCSSで対処できますが、なかには別の項目が原因の場合もあるため、一項目ずつの確認が重要です。