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

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

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

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

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

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のスコア比較

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を運営中!フォローや登録はこちら!


関連記事

  1. Google サーチコンソール サイトマップ送信

    WordPressでブログ開設して1ヶ月目の記事数、アクセス数や収益は?

  2. 内部検索スパム サーチコンソールの未登録件数

    目障りなSEO To66.Asia 内部検索スパムをRobots.txtでブロック!意地でもクロール禁止にしたい!

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

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

  4. WordPressでブログ記事を書いて5か月目 157記事のPV数や収益を公開!

    WordPressでブログ記事を書いて5か月目 157記事のPV数や収益を公開!

  5. XサーバーのXPageSpeedの設定

    TCD GENSENのヘッダーバー検索機能が使えなくなったけど対処法を発見!WordPressサイトのトラブル!

  6. WordPress6.5とXアクセラレータの不具合

    WordPress 6.5 Redinaアップデート!XアクセラレータVer.2で504の不具合

  7. WordPressでブログ記事を書いて4か月目 137記事のPV数や収益などを公開!

    WordPressでブログ記事を書いて4か月目 137記事のPV数や収益などを公開!

  8. udinra sitemap proの購入

    Udinra Sitemap pro|WordPress画像・動画サイトマップ作成プラグインの使用方法

  9. WordPressで記事を書いて3か月目 100記事のPV数やアドセンス収益を公開!

    WordPressで記事を書いて3か月目 100記事のPV数やアドセンス収益を公開!

  10. WordPress ブログ記事を書き始めて8ヶ月目のアクセス数や収益は?

    WordPress ブログ記事を書き始めて8ヶ月目のアクセス数や収益は?

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

    WordPress高速化 アドセンス自動広告等のJavaScriptを読み飛ばすプラグインFlying Scripts

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

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

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

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

  1. BIUBLE 自動車用ジャンプスターターMサイズを補機バッテリーに接続

    BIUBLEジャンプスターター | 自動車のバッテリー上り…

  2. 本荘川まつり花火大会|6,000発の花火が彩る由利本荘花火大会の一つ|秋田県由利本荘市

    子吉川を彩る第72回本荘川まつり花火大会は、2024年7…

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

    神明の花火は2024年8月7日に開催!有料観覧席は残り…

  4. 2022年 わたりふるさと夏まつり花火大会のミュージックワイドスターマインの写真

    鳥の海公園で壮大な花火が楽しめる! わたりふるさと…

  5. 田瀬湖湖水まつり 水・空中花火大会

    田瀬湖湖水まつり 水・空中花火大会は、2024年7月27…

  6. ぎおん柏崎まつり海の大花火大会 尺玉100発一斉打上げ

    ぎおん柏崎まつり海の大花火大会を2024年7月26日に開…

  7. 新潟県上越市 高田城址公園観蓮会

    東洋一のハスの花の名所 高田城址公園観蓮会は、2024…

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

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

  9. レーザーショーと花火が楽しめる2023年 忍野八海祭りの花火大会を観覧してきた! | 山梨県忍野村

    レーザーショーとの競演!忍野八海祭り花火大会は、2…

  10. 能代港疫病退散サプライズ花火

    能代の花火は2024年7月20日に開催!東北唯一の正3尺…

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

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




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