Autoptimizeとは？設定方法と使い方・不具合の対処法を解説！
サイト表示速度が遅いとユーザーの直帰率が上がるだけでなく、Googleからの評価も下がってSEOに影響をおよぼしかねません。WordPressで作成したサイトの表示速度を向上させるには、Autoptimizeというプラグインの導入がおすすめです。
Autoptimizeは、インストールして設定を行なうだけで、簡単にサイト表示速度の高速化を図れます。この記事では、WordPressのプラグイン「Autoptimize」の機能やインストール・設定方法にくわえて、不具合が発生したときの対処法などについて紹介します。
1. Autoptimizeとは？機能・役割
Autoptimize（オートプティマイズ）とは、WordPress（ワードプレス）のソースコードを圧縮するプラグインです。WordPressを用いたサイト運営では、プラグインの追加やレイアウトの変更によってソースコードが増えます。ソースコードの増加は、ページの読み込み遅延や利便性を低下させる原因の1つです。
Autoptimizeによって最適化できるのは、HTMLやCSS、JavaScript、画像が挙げられます。ソースコードを圧縮するには、WordPressの基幹を担うテーマファイルを直接編集するのも方法の1つです。コストをかけずに簡単な設定でソースコードを圧縮できるのが、Autoptimizeの魅力と言えるでしょう。
導入しやすいと言われるAutoptimizeも、WordPressのテーマや既存のプラグインとの相性によっては不具合を起こす場合があります。Autoptimizeを導入する前に、設定方法や不具合への対処方法をあらかじめ知っておくと安心です。
2. Autoptimizeでサイトの表示速度を上げるメリット
検索エンジンで上位表示を目指すSEOにおいて、サイトの表示速度は重要なポイントの1つです。2017年のGoogleの報告では、ページ表示速度が1秒から3秒に落ちると、顧客が他ページを見ずに離脱する「直帰率」が32%増加します。さらに表示に3秒以上かかるモバイルページでは、53%もの顧客が離脱したという報告もありました。
出典：Think with Google「Find Out How You Stack Up to New Industry Benchmarks for Mobile Page Speed」
反対に言えば、サイト表示速度の高速化を図れば、直帰率の軽減といったメリットがあるということです。ここでは、Autoptimizeを活用してサイトの表示速度を上げるメリットを紹介します。
2-1. 顧客満足度が上がる
顧客がサイトに訪問する目的は、企業や商品・サービスの情報収集にくわえて、悩みの解決方法を知ることなどです。サイトの表示速度が遅いと、顧客はストレスや不満を感じてサイトから離脱しやすくなります。
表示速度が速ければ顧客はスムーズに情報収集でき、結果的に顧客満足度向上につながる点がAutoptimizeを利用するメリットです。表示速度の速いサイトにおいては、顧客の滞在時間が長くなる傾向にあり、より多くのサービスや商品を知ってもらう機会が増えます。
2-2. CV向上につながる
サイトを用いたマーケティングにおいて、CV（コンバージョン）は重要な指標の1つです。資料請求や会員登録、商品購入など設定する目標は異なっていても、高速表示はCV達成率に大きく影響します。
特に商品購入を目的としたECサイトであれば、顧客は明確な購入意欲を持ち、他サイトに掲載されている商品と比較検討しているケースも少なくありません。商品画像・商品説明の充実度や価格、配送スピードなどを比較する上で、表示速度の遅いサイトは候補から外される可能性も考えられます。スムーズに必要な情報を得られるサイトは、顧客からの信頼にもつながりやすいでしょう。
CV向上を目指すのであれば、定期的なサイト表示速度の測定と改善は欠かせません。
2-3. 検索順位とアクセスの向上が狙える
検索エンジンにサイトが掲載されるには、クローラーと呼ばれるロボットがサイトを巡回して「検索結果に表示して問題ないサイト」と判断する必要があります。サイトの表示速度が極端に遅い場合は、クローラーが検索エンジンへの掲載を認めない恐れもあるでしょう。
サイト表示速度の高速化は、SEOの一環としてサイト運営に欠かせない施策です。代表的な検索エンジンであるGoogleも、顧客に快適かつ高品質な体験の提供を重視しています。表示速度を上げてユーザビリティを向上させると、検索順位の上位化やアクセス増加などの効果が期待できます。
3. Autoptimizeを利用するデメリット
Autoptimizeは無料で使用できる非常に便利なプラグインですが、不具合を起こしやすい点がデメリットです。使用しているWordPressテーマやプラグインとの相性によって、レイアウト崩れや画像が表示されないといった不具合が生じる可能性も否定できません。
すでにHTMLやCSS、JavaScriptなどを最適化するWordPressテーマやプラグインを用いている場合は、重複を避ける設定が必要です。WordPressテーマやプラグイン側の設定項目も1つずつ確認し、同種の高速化機能や最適化機能はどちらか片方だけを有効化しましょう。
Autoptimizeを導入する前に、WordPressテーマに備わっている機能や導入済みのプラグインの機能を再度確認することをおすすめします。
4. Autoptimizeのインストール・設定方法
Autoptimizeの設定は、必要な項目を順番に有効化していくだけです。手順は比較的簡単ですが、それぞれの項目内容を理解しながら設定することがポイントになります。項目内容を理解しておくと、不具合が生じた際に迅速に対応できるでしょう。
ここでは、Autoptimizeの設定手順と各項目の設定方法を紹介します。
4-1. Autoptimizeのインストールと設定
まずは、使用しているWordPressテーマにAutoptimizeプラグインをインストールします。WordPress管理画面から「プラグイン」を選び「新規追加」をクリック後、画面右上のプラグイン検索窓に「Autoptimize」と入力しましょう。
Autoptimizeが出てきたら、「今すぐインストール」ボタンをクリックします。インストールが完了したら、「有効化」をクリックすると初期設定は完了です。
4-2. JavaScript・CSS＆HTMLの設定
ダッシュボードの「設定」から「Autoptimize」をクリックすると、Autoptimizeの設定画面が開きます。はじめに「JS、CSS＆HTML」タブで、表示速度に大きくかかわる部分の設定を行ないましょう。各項目の最適化設定は、以下の通りです。
・JavaScriptオプション
「JavaScriptコードの最適化」にチェックを入れた後「JSファイルを連結する」か「連結しないで遅延」のどちらかにチェックを入れます。
デフォルトで「JSファイルを連結する」にチェックが入っているなら、そのままで問題ありません。HTTP/2通信対応のサーバーを用いている場合は、ファイルを分割読み込みする「連結しないで遅延」を選んだほうが、読み込みが速いと言われています。
・CSSオプション
「CSSコードを最適化」「CSSファイルを連結する」「インラインのCSSも連結」の3項目にチェックを入れましょう。
・HTMLオプション
「HTMLコードを最適化」のみチェックを入れます。HTMLコードを圧縮化できるメリットはありますが、改行がなくなってレイアウトが崩れる可能性があるため注意が必要です。
最下部にある「変更の保存とキャッシュの削除」をクリックした後は、サイト表示を確認しましょう。
4-3. 画像の設定
「画像」タブをクリックし、「画像最適化」の設定画面を開きます。「画像を最適化」では、見た目に影響を与えない程度に画質を落として、画像の読み込み速度を向上させられます。「画像の遅延読み込み（Lazy-load）を利用」では、ファーストビュー以外の画像をスクロール時に読み込ませて、ページ表示速度向上を図ることが可能です。
「画像を最適化」と「画像の遅延読み込み（Lazy-load）を利用」の2項目にチェックを入れて「変更を保存」をクリックしましょう。画像圧縮プラグインである「EWWW Image Optimizer」を導入している場合は、機能の重複を避けるためチェックは不要です。
4-4. Critical CSSの設定
Critical CSS（クリティカルCSS）は、サイトの表示速度を改善する有料機能です。ブラウザがCSSを読み込み表示する処理を「レンダリング」と呼びます。
Critical CSSは、レンダリングブロックの改善により、表示速度の遅延解消が可能です。レンダリングブロックとは、画面表示にかかわる処理速度が重いために表示速度が遅延することを言います。通常、Critical CSSに関しては、特に設定を変更する必要はありません。
4-5. 追加の設定
「追加」のタブでは、さらに細かい設定が可能です。それぞれの項目の設定方法を紹介します。
・Googleフォント
代表的なWordPressテーマはWebフォントを使用しているため、Googleフォントはあまり使用されません。今後もGoogleフォントを使用する予定がない場合は「Googleフォントの削除」にチェックを入れましょう。
・絵文字の削除
サイトに絵文字を表示させるか設定できる項目です。絵文字を使う予定がない場合は「絵文字の削除」にチェックを入れましょう。
・静的リソースからクエリ文字列を削除
チェックを入れる必要のない項目です。
・サードパーティのドメインに事前接続
読み込みに時間がかかるFacebookやTwitter、Googleアナリティクスといった外部との通信を事前に行なう設定です。通常はチェックを入れる必要はありません。
・リクエストの事前読み込み
優先して事前に読み込みたいファイルを設定できる項目です。ページ表示速度にほとんど影響しないため、チェックを入れる必要はありません。
ページ下部にある「変更を保存」をクリックすると、設定完了です。
5. Autoptimizeで不具合が発生したときの対処法
Autoptimizeの設定を進めると、WordPressのテーマや既存プラグインとの相性によって不具合が起こるケースがあります。ここでは、変更内容が表示されなかったり、レイアウトが崩れたりするなど、よくある不具合への対処法を紹介します。
不具合が生じた場合は、無理にAutoptimizeの設定を行なわず、関係する項目の設定を無効化して運用するのもおすすめです。
5-1. 変更内容が反映されない
WordPressの変更内容が反映されないおもな原因には、キャッシュが挙げられます。キャッシュとは、過去に閲覧したページのデータを保存し、次に表示する際の読み込みを速くする仕組みです。Autoptimizeは、「JavaScript」や「CSS」のキャッシュを生成するため、キャッシュ量が多くなる傾向があります。
キャッシュが蓄積すると古いページが表示され、変更内容が反映されない、画像の読み込みが遅いといった不具合が起こりかねません。
対処法は、管理画面上部に表示されている「Autoptimize」から「キャッシュを削除」をクリックするだけです。キャッシュ削除後は、不具合が生じていたページを再度表示し、不具合が解消されているか確認しましょう。
5-2. 画像が表示されない
Autoptimizeの導入で画像が表示されなくなった場合は、JavaScriptの影響が考えられます。まずは「JavaScriptコードの最適化」のチェックを外し、不具合が解消されているか確認しましょう。解消を確認できたら「JavaScriptコードの最適化」にくわえて「JSファイルを連結する」と「<head>内へJavaScriptを強制」にもチェックを入れます。
JavaScriptの設定変更で改善されないときは、「CSSコードの最適化」のチェックを外してみましょう。不具合が解消された場合は、CSSに原因があったと考えられます。不具合の原因を切り分けるため、1項目ずつ確認していくのが重要です。
5-3. サイトの表示が崩れている
サイトの表示が崩れるのも、JavaScriptやCSSに問題があると考えられます。「5-2. 画像が表示されない」と同様に、まずは「JavaScriptコードの最適化」のチェックを外して表示崩れの有無を確認しましょう。
不具合が解消された場合は、JavaScriptの最適化を有効にしつつ不具合を解消する方法を試します。「JavaScriptコードの最適化」と「JSファイルを連結する」「<head>内へJavaScriptを強制」にチェックを入れ、問題なく表示されていればOKです。
JavaScriptで不具合が解消されない場合は、「CSSコードの最適化」のチェックを外し、サイト表示を確認します。不具合が解消できるのであれば、CSSの設定は一旦無効化したまま運用しましょう。
6. Autoptimizeでパフォーマンスが改善したか確認する方法
ページの表示に3秒以上かかると訪問者の過半数が離脱するデータから、ページの表示速度は3秒以内にするのが理想です。Googleも、表示速度を検索順位の判断材料とすると公表しています。
Autoptimizeの導入でパフォーマンスが改善したか確認するためには、比較できるよう導入前のパフォーマンスを把握しておくのが重要です。最後にパフォーマンスやサイトの改善点を把握するのに役立つツールを紹介します。
6-1. Google Analytics
Google Analyticsで作成したトラッキングIDをWordPressに設置すると、URLを打ち込む手間なくサイト内の全ページの速度測定やアクセス解析が可能です。WordPressテーマ内にトラッキングID入力欄がある場合も多く、簡単に連携できます。「All in One SEO Pack」や「Google Analytics for WordPress」などのプラグインで連携するのもおすすめです。
サイトの表示速度は、左側メニューの「行動」→「サイトの速度」→「サマリー」で確認できます。平均より遅い場合は赤、速い場合は緑で表示といったように、視覚的に分かりやすいのが魅力です。ページごとに速度を確認したいときは「ページ速度」から確認できます。
6-2. Google Page Speed Insights
Google Page Speed Insightsは、URLを入力するだけでモバイルとPCそれぞれのパフォーマンスを測定するツールです。速度は100点満点で表示され、50点未満の場合は「速度が遅い」と判断されます。測定結果は曜日や時間帯などに左右されるため、同じページを異なる条件で複数回測定するのがおすすめです。
修正が必要な項目や改善方法まで提示してくれる機能が備わっており、サイト運営の経験が浅い方でも取り組みやすいのが魅力と言えるでしょう。
6-3. WebPageTest
WebPageTestは、世界中のさまざまな場所や通信環境、端末などからの接続を想定した疑似テストが可能なツールです。サイトの表示速度は秒数で確認できます。仮想環境で計測することにより、Autoptimize導入前後の変化を一定条件で比較できるのが魅力です。
無料アカウントを作成して「Start a … Test!」メニューから「Site Performance」を選択しましょう。「Advanced Configuration」から「Test Location」や「Browser」などを選択します。「First view and repeat view」にチェックを入れて「START TEST」をクリックしてしばらく待つと測定結果が出ます。測定結果はURLで共有できるため、管理者が複数いる場合にも便利です。
6-4. Lighthouse
Lighthouseは、無料で提供されているGoogle Chrome拡張機能を指します。
ChromeウェブストアでLighthouseを追加して「拡張機能を追加」をクリックするだけで簡単に導入可能です。分析したいサイトを表示し、ブラウザ右上にあるオレンジ色の灯台マークから「Generate report」ボタンをクリックすると分析が始まります。
表示速度や検索エンジンに対して適した設計になっているか、モバイルでのUIなど5項目の測定が可能です。100点満点のスコア表示で達成度を確認できます。
まとめ
WordPressで作成したサイトの表示速度が遅い場合は、プラグインの「Autoptimize」を導入しましょう。Autoptimizeは、簡単な設定だけでHTML・CSS・JavaScript・画像を最適化して、サイト表示速度を高速化できます。
サイト表示速度アップは、ユーザビリティ向上だけでなくGoogleからの高評価につながり、SEO観点からも必須の施策です。WordPressテーマや導入済みのプラグインとの相性によっては不具合を起こすこともあるため、デメリットや不具合の対処法を理解した上で導入を検討しましょう。
