WordPressでサイトの表示速度を早めようと思った時に活躍するのが、今回ご紹介する「Autoptimize」というプラグインです。
Autoptimizeを使うことで、サイトを構成しているHTML/CSSやJavaScriptファイルの容量を圧縮したり、読み込みを最適化してくれます。
Webサイトの表示速度を改善することはSEO上も重要とされています。
Autoptimizeは「PageSpeed Insights」でページのスピード測定をした際に、改善案として出てくる「レンダリングを妨げるリソースの除外」という項目の結果改善に貢献します。
今回はこのAutoptimizeの概要と使い方、設定方法、うまくいかない場合の対処方法について解説します。基本的な設定は５分もかからず簡単ですので是非試してスコアアップを目指してみてください！
Autoptimizeで出来ること
WordPressプラグイン「Autoptimize」の主な機能は次の通り。
- HTML/CSS、JavaScriptファイルの圧縮
- 画像の最適化と遅延読み込み
- Googleフォントや絵文字の最適化
そもそもAutoptimizeは「Auto（自動） + Optimize（最適化）」からくる造語かと思われます。
要は「自動でファイルを最適化してサイトの読み込み早くしてあげますよ～」っていうプラグインなわけですね。
逆に言えば、コードをいじって自分で最適化できるだけの知識や経験をお持ちの方にとっては不要なプラグインです。
しかし一般的に見ればその難易度は高く面倒な作業でもあるので、ほとんどの人にとっておすすめできるプラグインのひとつになります。
なお、同じ開発元の「Async JavaScript」というプラグインで、JavaScriptの遅延読み込みも可能となるので合わせて使うと良いでしょう。
Autoptimizeの使い方と設定方法
それではAutoptimizeの設定について見ていきます。
Autoptimizeはコードの読み込みに影響を与え、サイトの表示がおかしくなる場合があります。念のため設定する前にバックアップを取ることを推奨します。
Autoptimizeのインストール
まず、お使いのWordPressにプラグイン「Autoptimize」をインストールしてください。
プラグインの見た目はこんな感じです。
インストールして有効化すると、WordPress管理画面メニューの「設定」の中に「Autoptimize」が出てくると思いますので、こちらから設定を進めます。
設定画面に進むと「JS, CSS & HTML」「画像」「クリティカルCSS」「追加」「さらに最適化！」の５つのタブがあります。
このうち、「クリティカルCSS」と「さらに最適化！」は別サービスへの誘導なので、解説を省略します。
JS, CSS ＆ HTML
まず「JS, CSS & HTML」からメインとなる設定をしていきましょう。
上から順にみていきます。
まず「JavaScriptオプション」ですが、チェックする項目は「JavaScriptコードの最適化」と「JSファイルを連結する」の２か所でOK。
「JavaScriptコードの最適化」にチェックを入れれば、「JSファイルを連結する」はデフォルトでチェックが入っていると思います。プラグイン側の推奨設定ということでしょう。
その他の項目は、ちゃんと意味が分かって意図がハッキリしている場合にのみ設定しましょう。
「エラーなどでうまくいかなかったときの対処法」で後述しますが「<head>内へJavaScriptを強制」や「try-catchで囲む」の項目はサイトがうまく表示されなかったときに試します。
「CSSオプション」も「CSSコードを最適化」にチェックを入れれば「CSSファイルを連結する」と「インラインのCSSも連結」にチェックが入っていると思うのでこの３つでOKです。
さらに上級者は、「CSSのインライン化と遅延」にチェックを入れて、ページのAbove the foldで表示される部分のCSSのみを抽出して貼り付けると、該当CSSのインライン化が可能です。これはファーストビューのみCSSを先に読み込む設定となり、さらにCSSを最適な状態にします。
そこまで重要性が高いわけでもないので、何言ってるか分からん…と言う場合はスルーしてください。
次に「HTMLオプション」ですが、こちらは「HTMLコードを最適化」のみチェックを入れましょう。
コメントは元となるコードから消えるわけではないようなので、基本的にチェックは不要です。
※「CDNオプション」はCDNを利用していて、外部サーバーから読み込んだコードを最適化させたい場合のみURLを入力してください。上級者向けなので解説は省略します。
「その他オプション」はデフォルトのまま全チェックでOKです。
ここまでで基本的な設定は完了です。他のタブに移る前に「変更の保存とキャッシュの削除」をクリックして設定を保存しましょう。
画像
続いて画像の設定です。
画像設定では、「画像の遅延読み込み（Lasy-load）」にチェックを入れ、変更を保存します。
ただし、この設定をしない方がいい場合もあります。
というのも、画像の遅延読み込み（Lasy-load）は、テーマによっては初めから設定項目が付いていたり、別の画像最適化プラグインなどで設定してしまっている場合があるのです。
もし当プラグイン以外で設定を行っていた場合には、バッティングして逆に読み込みが遅くなってしまうなどうまく機能しない場合もあるので注意が必要です。
画像の設定が必要かどうかは人によるのでお使いのテーマやプラグインで既に同様の設定されていないか確認してください。
また、「画像を最適化」の項目は不要かと思われます。
現状では画像の最適化に関しては「EWWW Image Optimizerr」や「Compress JPEG ＆PNG images」などのプラグインで対応したほうがいいでしょう。
この項目に記載のある「WebP（ウェッピー）」や「AVIF」は次世代の画像形式で、データ量が軽く高速表示に向いているため徐々に導入は考えるべきですが、この設定によって必ずしも早くなるとは言い切れません。
ラピン既に画像圧縮済みの当サイトで試してみたところ、スピードテストのスコアは悪くなり、体感的にも画像表示のみ遅くなったように感じました。
これは画像データ自体は軽くなっても、ShortpixelのグローバルCDNを使うためにリクエストへの応答速度が伸びていることが原因だと考えられます。
お使いのレンタルサーバーやアクセス数との兼ね合いもあるかと思うので、試してみる価値はあります。が、このプラグインでやらなくてもいいかも…と言うのが正直なところです。
設定してみる場合は上の画像を参考にやってみてください。
追加
最後に追加の設定を見ておきましょう。
ここでチェックを付けておきたいのは「絵文字の削除」の項目です。
もしサイト内で絵文字を使うことがないならチェックをしておきましょう。
それから、Googleフォントを利用しているのであれば、廃止予定とはなっていますが「webfont.jsで非同期にフォントを結合して読み込む。」にチェックを入れることをおすすめします。
そもそもの話ですが、Webフォントは使いすぎるとサイトが重くなる一因となります。表示速度にこだわるのであれば、そもそもWebフォントの使用を控えるか、使っても少しのフォントに留めるようにした方がいいでしょう。
Autoptimizeでどれくらいの速度改善が見られたか
設定の解説は以上になりますが、
「実際どれくらい速くなったの？」
と思う方もいると思うので、当サイトでのテスト結果を開示します。
一応設定前と設定後でざっくり10回ずつほどテストしましたが、スピードテストは毎回同じスコアが出るわけではないので、参考程度に見てください。
結果から言うと、モバイルは平均70→85、パソコンは90→95くらいの改善が見られました。
モバイルも何回かに１回は９０点を超えるくらいになりました。
SEOに関してはスコアはあくまで表示速度という要素の一つでしかないわけで、点数にこだわり過ぎてしまうのは考えものかなという風にも感じます。
しかし、ユーザビリティを損なわずにここまで点数に寄与するのであれば、Autoptimizeは有用なプラグインと言えるのではないでしょうか。
エラーなどでうまくいかなかったときの対処法
Autoptimizeを利用すると、テーマの相性や使っている機能の関係などによって、うまくサイトが表示されないなどの不具合が生じる可能性があります。
そんな時に見直したい設定を紹介します。
どの設定が原因か特定するため、一気にやるのではなくひとつずつ試してみてください。
キャッシュをクリアしてみる
うまく表示されないのは、プラグインのせいではなくてキャッシュが原因の可能性もあります。
管理画面上部のバーに表示されるAutoptimizeの「キャッシュを削除」という箇所があるので、こちらをクリックして表示が直っていないか確認してみましょう。
Lasy-load設定を外す
画像の項目で説明した、画像読み込み遅延の設定を外してみます。もしかしたらテーマや他のプラグインで既に設定されている可能性があるためです。
JavaScriptオプションの見直し
サイトの動き部分がおかしい場合は、JavaScriptが原因となっていることが多いので「JavaScriptオプション」の設定を変えてみましょう。
<head>内へJavaScriptを強制
JavaScriptを早い段階で読み込む設定です。
レンダリングを妨げることにはなってしまいますが、コードの早い段階で読み込むことで不具合が解消する場合があります。
try-catchで囲む
try-catchとはプログラム処理中に例外が発生した時に行う処理のことです。この設定によりエラーが直る可能性があります。
原因となってそうなファイルが特定できる場合
もしサイトの表示の仕方などから、原因となってそうなファイルを特定できる場合には、最適化するファイルを除外することができます。
JavaScriptであればJavaScriptオプションの「Autoptimize からスクリプトを除外」に、CSSであればCSS オプションの「Autoptimize から CSS を除外」に原因と思われるファイルを追加してください。
もしくは、事前読み込みすることによって解決するかもしれません。
「追加」タブに、「リクエストの事前読み込み（上級者向け）」という項目があるのでファイルのURLを記入して、問題が解決しないか試してみましょう。
除外されたファイルを最小化しない
その他オプションの「除外されたCSSファイルとJSファイルを最小化」の部分のチェックを外すことで、問題が解決する場合があります。
それでもうまくいかない場合
まず、「JavaScriptコードの最適化」のチェックを外すことで、表示が正常に戻るか確認してみてください。
もしこれで直るようであれば、JavaScriptのファイルが悪さをしていることになるので、JavaScriptの最適化をしないという選択もできます。
JavaScriptでなければ、同様に「CSS コードを最適化」「HTML コードを最適化」でもチェックを外して試してみます。
基本的な考えとして、他の条件を変えずにひとつひとつ可能性のある設定を無効化していくことで、何が原因なのかを特定できる場合が多いです。
それでもうまくいかない場合は、利用しているテーマとプラグインとの相性が悪かったり、他のプラグインと干渉を起こしている可能性があります。
そのため、当プラグインに依存しない代替手段を考えましょう。
Autoptimizeのプラグインを無効化することで元に戻るかと思いますが、もし無効化してもおかしいままであればバックアップデータを利用して復旧させてください。
まとめ：Autoptimizeでサイトの高速化を！
Autoptimizeの説明と設定方法については以上となります。
これでスピードテストのスコアがいくらか改善されたのではないでしょうか。
さらに「レンダリングを妨げるリソースの除外」の項目で、.jsファイルがある場合には、「Async Javascript」というプラグインが役に立つかもしれません。合わせて利用を検討してみてくださいね！
