作り方

【2022年最新】Autoptimizeの設定方法と使い方

Autoptimizeは、WordPressのソースコードを最適化してページの高速化を図ることができるプラグインです。

今回はAutoptimizeの設定方法と使い方について、初心者にも分かりやすく解説していきます。

Autoptimizeとは

Autotimizeは、WordPressを構成するHTMLやCSS、JavaScriptの最適化を目的としたプラグインです。

  • 複数のファイルを結合して圧縮
  • HTMLやCSS、JavaScriptから不要な改行やスペースを削除

上記の機能により、ページの表示速度の改善を無料かつ簡単に行なうことができます。

Autoptimizeのデメリットとは

Autoptimizeは、使用テーマや他プラグインとの干渉によって不具合を起こしてしまう可能性があります。

すでにHTMLやCSS、JavaScriptの最適化がなされている場合は、高速化の対策が重複しないような設定にすることが必要です。

記事の後半では、Autoptimizeの設定によってエラーが発生してしまったときの対策法も紹介しています。

プラグイン適用前後の表示速度比較

30記事を投入しているブログを対象に、Autoptimizeの設定前後でページ表示速度を比較しました。あくまで参考値としてご覧ください。

環境

  • WordPressバージョン:5.9.2
  • WordPressテーマ:AFFINGER6
  • レンタルサーバー:エックスサーバー

PageSpeed Insightでの計測

Googleが提供するページ表示速度の計測ツール「PageSpeed Insights」での計測結果(携帯電話)は以下の通りです。

Autoptimizeなし
Autoptimizeあり

「レンダリングを妨げるリソースの除外」が0.8sから0.3sに下がっており、表示速度の改善効果が認められます。

GTmetrixでの計測

サイト速度テストツール「GTmetrix」での計測結果は以下の通りでした。

Autoptimizeなし
Autoptimizeあり

Autoptimizeのインストール方法

ダッシュボード→プラグイン→新規追加

検索窓に「Autoptimize」と入力し、該当するプラグインの「今すぐインストール」を選択後、「有効化」ボタンをクリックします。

Autoptimizeの設定方法と使い方

Autoptimizeの各種設定は以下の箇所から行います。

ダッシュボード→設定→Autoptimize

①JavaScript・CSS・HTMLの最適化

1.JavaScriptオプション

  • JavaScriptコードの最適化
    チェックを入れる
  • JSファイルを連結
    チェックを外す
  • 連結しないで遅延
    チェックを入れる

2.CSSオプション

  • CSSコードを最適化
    チェックを入れる
  • CSSファイルを連結
    チェックを外す
  • レンダリングブロックしているCSSを除去
    チェックを外す

3.HTMLオプション

  • HTMLコードを最適化
    チェックを入れる

すべての設定が完了したら、ページ最下部の「変更の保存とキャッシュを削除」と書かれたボタンをクリックしましょう。

②画像最適化

  • 画像の遅延読み込み(Lazy-load)を利用
    チェックを入れる

画像の遅延読み込みは、画面領域内の画像を読み込み、領域外の画像はスクロール時に読み込むようにする仕組みのことです。

画面のスクロール位置によって必要な画像のみを取得するので、ページ表示の高速化が期待できます。

設定後は「変更を保存」を忘れずにクリックしておきましょう。

③追加の自動最適化

  • Googleフォント
    「結合とヘッダーで遅延リンクを選択」にチェックを入れる
    ※Googleフォントが不要であれば、「Googleフォントの削除」にチェックを入れることでさらに高速化が期待できる
  • 絵文字の削除
    チェックを入れる

「第三者コードの影響を抑えてください」の解決方法

Autoptimizeの「追加」項目に簡単な設定を加えると、PageSpeed Insightsでの計測時に表示される「第三者コードの影響を抑えてください」という警告を解決できます。

第三者コードのリンク先を確認する

PageSpeed Insightsにアクセスし、計測したいブログURLを入力後、「分析」をクリックします。

「パフォーマンス分析を行っています」と表示され、スコアの測定が開始されます。

計測を終えたら、ページを下にスクロールしていきましょう。

「第三者コードの影響を抑えてください」と書かれた項目から、「メインスレッドのブロック時間」が0msを超えているリンクを参照します。

第三者コードの青文字リンクを右クリックし、「リンクのアドレスをコピー」を選択します。

該当する第三者コードのリンク先を、以下の箇所に貼り付けます。複数ある場合は半角のカンマ「,」で区切ります。

  • サードパーティのドメインに事前接続(上級者向け)
    第三者コードの影響があるリンク先を入力

あくまで参考程度にはなりますが、僕は以下のコードを設定しています。

https://marketingplatform.google.com/about/tag-manager/,https://developers.google.com/speed/libraries/,https://www.google.com/analytics/analytics/

設定後は「変更を保存」を忘れずにクリックしておきましょう。

Autoptimize設定後に不具合が発生した場合

表示や変更が変更されない

Autoptimizeを有効化すると、キャッシュ(Webページのデータなどを一時的に保存しておく技術のこと)が自動生成され、サーバー上に保存されます。

キャッシュはページの高速化に効果的な技術と言えますが、古いキャッシュデータが残ったままだと、ページの更新や設定が反映されないという不具合が発生してしまいます。

古いキャッシュファイルをクリアするには、WordPressダッシュボードの上部メニュー「Autoptimize」にカーソルを当て、「CSS/JSキャッシュ消去」をクリックしましょう。

頻繁にキャッシュクリアを行うとサーバーへ負担がかかるため、記事を投稿、もしくは更新したときや、各種設定の変更後などのタイミングで行うと良いでしょう。

表示が崩れる・画像が表示されない

表示が崩れてしまう場合は、JavaScriptやCSSの圧縮が原因です。不具合が発生してしまった場合は、以下の方法で解決しましょう。

1.JavaScriptコードの最適化をオフに

ダッシュボード→設定→Autoptimize→JS、CSS&HTML

「JavaScriptコードの最適化」のチェックを外し、「変更を保存」をクリック後、改めて表示を確認してみましょう。

症状が改善されている場合は「JavaScriptコードの最適化」が原因だったということですね。

以下の設定であれば、JavaScriptコードの最適化を有効化しつつ、不具合を回避できる可能性があります。

  • JavaScriptコードの最適化
    チェックを入れる
  • JSファイルを連結
    チェックを入れる
  • <head>内へJavaScriptを強制
    チェックを入れる

設定後は「変更を保存」をクリックし、正常に表示されているか確認してください。

上記の設定でも不具合が発生するようであれば、「JavaScriptコードの最適化」のチェックを外しましょう。

2.CSSコードを最適化をオフ

ダッシュボード→設定→Autoptimize→JS、CSS&HTML

「CSSコードを最適化」のチェックを外し、「変更を保存」をクリック後、表示を確認します。

上記の設定で不具合が解消された場合は「CSSコードを最適化」のチェックを外して設定を完了させましょう。

まとめ

Autoptimizeはページの表示速度を改善するために有効なプラグインです。

レイアウトが崩れてしまう、画像が表示されないなどの不具合が発生してしまった場合は、「JavaScriptコードの最適化」あるいは「CSSコードを最適化」のチェックを外して、再度ページ表示を確認するようにしましょう。

さらにページの高速化を目指したい方は、キャッシュ作成によるサイト高速化ができるWP Fastest Cacheとの併用も検討すると良いでしょう。ただし、設定内容がプラグイン間で重複しないよう注意が必要です。

あめぎ
僕はAutoptimizeとWP Fastest Cacheを併用して使ってるよ

【2022年最新】WP Fastest Cacheの設定方法と使い方

【2022年最新】WP Fastest Cacheの設定方法と使い方

続きを見る

キャッシュプラグインの比較検証!表示速度の改善におすすめなのは?

キャッシュプラグインの比較検証!表示速度の改善におすすめなのは?

続きを見る

  • この記事を書いた人

あめぎ

29歳|ブログの始め方や書き方、収益化などのノウハウを初心者にも分かりやすく解説|15年間の宗教の束縛→いじめ→ブログで人生が好転→1年でブログ収益30万円達成→PTSDとうつ病の療養中

詳細プロフィール

-作り方