WordPress高速化プラグインAutoptimizeの設定方法!CSS JavaScript 画像を最適化!

ワードプレスプラグイン Autoptimizeの導入サムネイル画像

ウェブサイトの表示速度を高速化してユーザの直帰率を下げる事は、Google検索の上位表示に欠かせない指標の一つとなりますが、ソースコードを圧縮、遅延読み込みをしてWordPressサイトの読み込みを早くするプラグインのAutoptimizeをご紹介します。

ウェブサイトの表示速度が重要な理由とは?

Google発表のスピードアップデート 秒数ごとの離脱率
ウェブサイトの読み込み速度が遅すぎると、ただ重いだけのサイトなのか障害が発生しているのか分からずに、読み込み途中でブラウザバックをしたり、読み込みを止めてしまうユーザーが意外と多いそうです。
2018年のGoogleによれば、読み込み時間が1~3秒の場合は32%、1〜5秒の場合は90%、1〜6秒の場合は106%、1〜10秒の場合は123%も離脱率が上昇するというデータを公表しており、読み込み速度はSEOの面でも重要なPV数に影響してしまうのです。

また、Googleは、表示速度の遅いホームページに低い評価を与えるアルゴリズム「スピードアップデート」を2018年に実施して、ユーザーの離脱率に影響するだけではなく、Google検索の検索順位にも影響を与えてしまうようになりました。

モバイル端末に最適化されているAMP(Accelerated Mobile Pages)に対応したウェブサイトを優先的に検索ランキングの上位に上げるアルゴリズムは廃止されていますが、依然としてウェブサイトの読み込み速度は検索順位に影響はしているのです。

ウェブサイトの表示速度が低下する原因

ウェブサイトの読み込み速度が低下する主な原因は、Googleアドセンス広告やYouTubeの動画プレーヤー、Googleマップである場合が多いのですが、他にもFacebookやX(旧Twitter)のポスト埋め込みなど、JavaScriptを使用した機能がほとんどを占めています。
Word Pressに直接写真や動画をアップロードした場合は、ファイルサイズ次第で読み込みが重くなる原因にもなってしまいますが、元々ファイルサイズを小さくしてから表示していたり、WebPに対応をしていた状態であれば、そこから改善される表示速度は微々たるものです。
画像や動画は手動で改善できるとして、主に外部から情報を読み込む埋め込みコンテンツに手を加えれば、AMPに対応をしていなくてもPageSpeed Insightsで95点以上の高スコアを取る事ができるのです。

正確にはそれ以外にも色々とやって95点以上を達成しているのですが、今回真っ先にインストールをしたプラグインAutoptimizeについてご紹介していきましょう。

サーバー標準の高速化機能をOFFに

エックスサーバーのXPagespeedを全て無効にする設定
当サイトは、エックスサーバーを使用して運営をしているのですが、標準でKUSANAGIやエックスアクセラレータなどの高速化機能を搭載していて、速さと安定性に定評があるレンタルサーバーなのです。
その高速化機能の一つであるXPageSpeedというWebサイト最適化機能があるのですが、Google社により開発された拡張モジュール「PageSpeed Module」をもとに開発をしているようです。
記事中の画像・CSS・JavaScriptなどのファイルを圧縮してデータ転送量を削減してくれますが、JavaScriptの遅延読み込みで不具合が発生したり、プラグインを使用して表示している画像には効かない事もあるので、この機能を全てオフにいたしました。

つまり、エックスサーバーの標準機能であるXPageSpeedを全てオフにした代替機能としてAutoptimizeプラグインが必要になったのですが、ワードプレスプラグインを入れすぎるとサイトが重くなるという一般論を無視して、逆にスコアが上がってしまったので、このプラグインをご紹介する事になりました。

Autoptimizeのインストール

WordPressプラグイン Autoptimizeのインストール
Autoptimizeをインストールした後の機能の重複による干渉を避けるために、画像、CSS、JSの遅延読み込みや圧縮を行うプラグインや機能、キャッシュ機能などを全て無効にしておきます。

ワードプレスのプラグイン追加で、「Autoptimize」と検索するか、Autoptimizeの公式ページからダウンロードをして、プラグインのアップロードからファイルを選択してインストールをした後に、プラグインを有効化します。

この時点で不具合が発生していなければ先に進めても問題はないのですが、念のためにウェブページの表示崩れや不具合が無いかをチェックしておきましょう。

Autoptimizeの設定

JavaScript オプション

Autoptimize JavaScriptオプションの設定

JavaScriptオプションは、JavaScript コードの最適化して読み込みを早くする機能の他、「JSファイルを連結」または「連結しないで遅延」のどちらかを選択する事ができます。

JavaScriptは特に表示の不具合を発生させてしまいやすい設定内容になりますので、ウェブサイトの表示に不具合が無いか確認しながら、PageSpeed insightsで速度を確認し、設定を進めていくようにしましょう。
当ウェブサイトでは、表示速度が速く不具合が無い設定となった「JavaScript コードの最適化」と「JSファイルを連結」にチェックを入れていますが、「連結しないで遅延」はTBT(Total Blocking Time)が遅くなってしまったので不採用にしております。

CSSオプションの設定

Autoptimize CSSオプションの設定

通常は改行やスペースを入れてCSSを読みやすい状態にしておりますが、htmlコメントを省いたり改行を無くしてしまって、読み込みを早くしてしまう設定がCSSオプションです。
JSと同様に不具合が無いかチェックをしながら設定をしていかなければいけないのですが、CSSの記述確認などを行う時以外は、CSSが全て繋がっていても特に問題はありませんので、当サイトでは「CSSコードを最適化」「CSS ファイルを連結」「インラインの CSS も連結」の3つにチェックを入れて高速化しています。
ソースコードを読むと、数100行にもおよぶコードが40行以内に収まるぐらいに改行を取り除いてしまうので、修正やチェックをする必要がある時にはCSSコードの最適化からチェックを外して読みやすい状態にする必要はあります。

HTMLオプションの設定

Autoptimize htmlオプション設定
上の2つに比べると影響力は少なく不具合が発生する確率も低い設定項目となりますので、「HTML コードを最適化」「インラインの JS/CSS も最小化」にチェックを入れて有効化しています。
その下にCDNオプションという設定項目もありますが、こちらはCDNを導入していない限りは使う事もない設定項目で、その下には何個のファイルがどこにキャッシュされているかの情報を表示している項目もあります。


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

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

上3つを設定した時に不具合が発生したら、チェックを外したり入れたりすることで解消される事もあるオプション設定です。
特に何も起こらなかったので、この設定はデフォルトのままにしていますが、挙動が悪くてアンインストールを検討するようになった時の最後の手段として、設定をしてみるのが良いでしょう。

画像最適化の設定

Autoptimize 画像最適化の設定

CDN(Contents Delivery Network)を利用していない場合は、画像の遅延読み込み(Lazy-load)を可能とする設定のみの内容となります。
WordPress標準でもLazy-loadが搭載されていますが、テーマやサーバーの仕様によっては無効化されていたり、相性が悪い場合もあるので、もしAutoptimizeの画像遅延読み込みの方が良かったら有効にしておくのが良いでしょう。
ファーストビューを表示する際のレンダリングブロックを避けるために、2枚目からの遅延読み込みにデフォルトで設定されていたので、そのまま画像の遅延読み込み(Lazy-load)にチェックをいれたのみの設定にしています。

追加の自動最適化の設定

Autoptimize 追加の自動最適化の設定

元々使用していなかったGoogleフォントや絵文字を削除する項目にだけチェックを入れて、他は何もいじりませんでした。
preconnectやpreloadを設定できる項目もあるのですが、Flying Scriptsで遅延読み込みの設定をするのが大半なのと、むしろ、ここに何も設定しない方が全体的なパフォーマンスが良かったので、あえて入れておりません。


PageSpeed Insightsのスコア比較

WordPressサイト用プラグインAutoptimizeを設定する前後で、PageSpeed Insightsのスコアを比較してみました。

Autoptimize設定前

Autoptimize設定前のPageSpeed Insightsのスコア
Autoptimize設定前のスコアは58点で、TBT(Total Blocking Time)とLCP(Large Contentful Paint)で大きな時間を要しているのが分かるかと思います。
当ウェブサイトではアドセンス広告の手動広告と自動広告の両方を設定しているので、広告をいじらない限りは大幅なスコア上昇は見込めないのですが、PageSpeed Insightsでは50点以上のスコアが出ていました。

Autoptimize設定後

Autoptimize設定後のPageSpeed Insightsのスコア
TBT(Total Blocking Time)を半分以下に、LCP(Large Contentful Paint)を2.5秒以内に収められた事で、非AMPページとしてはそこそこ悪くない71点を取る事ができました。
主にアドセンス広告が悪さをしている状態なので、その対策をしない事には90点以上を取るのは難しいかと思いますが、Autoptimize導入前のスコアと比較すると大幅なスコアアップを達成できたのではないかと思います。

Autoptimize導入のまとめ

  1. ウィジェットや関連記事の画像にも遅延読み込みは有効
  2. ウェブページの大きな表示崩れや機能停止も無く動作が安定したまま高速化が可能
  3. プラグインが増える事による読み込みの遅延が無く、確実にスコアアップする
  4. PreloadやPreconnectも設定可能

PRO版を導入すればCDNも使えるようになってさらに高速化できる可能性があるプラグインですが、他の無料版プラグインと組み合わせてさらなるスコアアップも出来ているので、レンタルサーバー標準の高速化機能に不満がある方は、Autoptimizeの導入を検討してみるのも良いと思います。


YouTubeチャンネルバナー

Youtubeチャンネルでは、日本国内各地の美しい四季の風景、ネイチャービデオ、花火大会やイベント・お祭り等、クリスマスイルミネーションや夜景、星景タイムラプス映像、Vlog、飛行機や新幹線などの乗り物等の映像をライブラリー化し、世界各地に発信しております。
また、不定期で花火大会やイベントのライブ配信も実施中!
下のYouTubeアイコンからチャンネルを表示していただき、チャンネル登録後に通知をオンにしていただくとライブ配信の通知が受け取れます!
もちろん動画URLや埋め込みタグを使用したウェブサイトへの埋め込みやSNSでのシェアもOKです!

最新の更新情報を受け取れる各種SNSを運営中!フォローや登録はこちら!


X Postをタップして、@jvcameratravelを付けたまま記事をX(旧・Twitter)でシェアをすると、弊社運営のXアカウントにてあなたのポストをリポストするアカウント拡散キャンペーンを行っています。
不要な時は@jvcameratravelは外してね!

関連記事

  1. Ultimate XML Sitemaps Generator for Googleのインストール

    動画と写真のXMLサイトマップ作成プラグイン!Google XML Sitemaps Generator Pro

  2. 閉鎖したサブドメインのWordPressサイトから新サブドメインに301リダイレクトする方法 サムネイル画像

    閉鎖したサブドメインのWordPressサイトから新サブドメインに301リダイレクトする方法

  3. Xサーバーの高速化設定ページのサムネイル

    エックスサーバーの高速化設定!レンタルサーバーのパフォーマンス向上で快適に!

  4. 肘をつき悩む女性 [モデル:Lala*]

    WordPressでブログを書き始めて1か月目から11ヶ月目のアクセス数と収益、SEO対策や記事の書き方も!

  5. Flying Scriptsで高速化する前後のPagespeed Insightsのスコア比較

    WordPress高速化プラグインFlying Scripts|重いアドセンス等のJavaScript遅延読み込み

  6. オプション設定で添付ファイル自動生成ページが有効化になっている

    画像がサーチコンソールで未登録!WordPressメディア添付ファイルページを無効化する方法

  7. WP YouTube Lyteの設定方法サムネイル画像

    YouTubeのサムネイルをキャッシュするWordPress高速化プラグインWP YouTube Lyte

  8. Googleサーチコンソールへの登録

    Googleサーチコンソールで検索登録してSEO対策!XMLサイトマップの送信と使用方法

  9. WordPressサイトのレイアウト崩れ修復方法

    WordPress管理画面のレイアウト崩れ修正方法!原因はレンタルサーバーの高速化機能

  10. 重いプラグインを減らしてWordPressサイトを高速化!読み込みを快適にして直帰率を下げるのがオススメ!

    重いプラグインを減らしてWordPressサイトを高速化!読み込みを快適にして直帰率を下げるのがオススメ!

  11. WordPressサイトの記事をXでシェアした時にカードを大きく表示する方法

    WordPressサイトの記事をX(旧Twitter)でシェアした時にカードを大きく表示する方法

  12. サーチコンソールのエラー

    Word PressのXMLサイトマップ作成プラグイン!Sitemap Pro by BestWebSoftで確実にインデックス登録!

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

  1. EXPO2025ブルーインパルス大阪・関西万博フライトの演目

    EXPO2025 ブルーインパルス 大阪・関西万博の展示飛…

  2. 栃木県那須郡那須町 駐車場から眺める殺生石園地全景の景色

    九尾の狐の那須伝説が残る国指定名勝「殺生石」|栃…

  3. SOFT99 ディグロス 鬼黒 タイヤワックスのパッケージ

    自然な黒艶で美しく保護!SOFT99の水性タイヤワック…

  4. 楽天モバイル×富士ソフト ポケットWi-Fi FS050W

    楽天モバイルをWi-Fi専用で使用!富士ソフトのモバイ…

  5. ザハトラーFSB8へのHaoge Tie Down Short Threadedノブ取り付け風景

    短くて激安!ザハトラービデオ三脚雲台用ボールクラ…

  6. DHLの国際配送で日本に届くまでの荷物追跡履歴

    DHLで荷物を国際発送・受け取り 到着日数や荷物の追…

  7. 尺玉のド迫力を体感!三条夏まつり大花火大会 | 新潟県三条市

    三条夏まつりは2025年7月25日から開催!26日に花火大…

  8. 宮城県登米市 伊豆沼はすまつり

    遊覧船で蓮の花を観賞!伊豆沼・内沼はすまつり開催 …

  9. 2023年 大曲の花火 全国花火競技大会 大会提供花火

    大曲全国花火競技大会は2025年8月30日に開催!有料観…

  10. 2023年 神明の花火 グランドフィナーレ

    神明の花火は2025年8月7日に開催!有料観覧席も販売…

楽天トラベルのバナー画像

よく読まれている人気記事ランキング




Amazonトップページバナー
楽天モバイルアフィリエイト

記事内の目次