ウェブサイトの表示速度を高速化してユーザーの離脱率を下げる事は、快適な閲覧環境を提供するだけでなく、Google検索のSEO対策においても重要な要素の一つとなります。今回は、JavaScriptやCSSなどのソースコードを圧縮・最適化し、WordPressサイトの読み込みを高速化するプラグイン「Autoptimize」の設定方法と、実際に導入した際の効果をご紹介します。
ウェブサイトの表示速度が重要な理由とは？
ウェブサイトの読み込み速度が遅すぎると、ただ重いだけのサイトなのか、何らかの障害が発生しているのか分からず、読み込み途中でブラウザバックをしたり、ページの読み込みを止めてしまうユーザーが意外と多いそうです。
2017年に公表されたGoogleとSOASTAによる調査では、モバイルページの読み込み時間が1秒から3秒に増えると直帰する確率が32%、1秒から5秒では90%、1秒から6秒では106%、1秒から10秒では123%も増加するというデータが示されており、読み込み速度はユーザーの離脱率だけでなく、PV数にも影響してしまうのです。
また、Googleは2018年7月に、モバイル検索のランキング要因としてページの表示速度を考慮する「スピードアップデート」を導入しました。これは特に読み込み速度が遅いページを対象としたもので、検索順位はコンテンツの関連性なども含めて総合的に判断されますが、表示速度がユーザーの利便性だけでなく、Google検索の評価にも関係するようになりました。
モバイル端末での高速表示を目的としたAMP(Accelerated Mobile Pages)は、Google検索のランキングで直接優遇される要因ではなく、2021年にはGoogle検索のトップニュースへの掲載についてもAMPへの対応が必須ではなくなりましたが、依然としてウェブサイトの読み込み速度やページの使いやすさは重要な評価要素となっています。
ウェブサイトの表示速度が低下する原因
ウェブサイトの読み込み速度が低下する原因として、Googleアドセンス広告やYouTubeの動画プレーヤー、Googleマップなどの埋め込みコンテンツが挙げられますが、他にもFacebookやX(旧Twitter)のポスト埋め込みなど、JavaScriptを使用した外部サービスが表示速度に大きく影響する場合があります。
WordPressに直接写真や動画をアップロードした場合は、ファイルサイズ次第で読み込みが重くなる原因にもなってしまいますが、元々ファイルサイズを小さくしてから掲載していたり、WebP形式の画像を使用していたりする場合は、画像の圧縮だけでは大幅な改善が見込めない事もあります。
画像や動画は手動で軽量化できるとして、主に外部から情報を読み込む埋め込みコンテンツやJavaScript、CSSなどの読み込み方法を最適化すれば、AMPに対応していなくてもPageSpeed Insightsで95点以上の高スコアを取る事は可能なのです。
正確には、それ以外にも色々と高速化対策を行って95点以上を達成しているのですが、今回はWordPressサイトの表示速度改善を目的として、真っ先にインストールしたプラグイン「Autoptimize」についてご紹介していきましょう。
サーバー標準の高速化機能をOFFに
当サイトはエックスサーバーを使用して運営しているのですが、標準でKUSANAGIやエックスアクセラレータなどの高速化機能を搭載しており、速さと安定性に定評があるレンタルサーバーなのです。
その高速化機能の一つにXPageSpeedというウェブサイト最適化機能があるのですが、こちらはGoogle社が開発した拡張モジュール「PageSpeed Module」をもとに、エックスサーバーが独自に開発したものです。
記事中の画像・CSS・JavaScriptなどのファイルを圧縮してデータ転送量を削減したり、ファイルをまとめて通信回数を減らしたりする機能ですが、JavaScriptなどの最適化によって不具合が発生したり、プラグインを使用して表示している一部のコンテンツでは期待した効果が得られなかったりする事もあるため、今回はこの機能を全てオフにしました。
つまり、エックスサーバーの標準機能であるXPageSpeedを全てオフにした代わりに、Autoptimizeプラグインを使用して最適化を行う事にしたのですが、WordPressプラグインを入れすぎるとサイトが重くなるという一般論に反して、実際にはPageSpeed Insightsのスコアが上がってしまったので、このプラグインをご紹介する事になりました。
Autoptimizeのインストール
Autoptimizeをインストールした後に、機能の重複による干渉が発生するのを避けるため、画像・CSS・JavaScriptの遅延読み込みや圧縮を行う他のプラグインやサーバー機能などは、事前に無効化しておきます。
キャッシュ機能についても、不具合が発生した場合に原因を切り分けられるよう、必要に応じて一時的に無効化しておくと良いでしょう。ただし、Autoptimizeは主にHTML・CSS・JavaScriptなどを最適化するプラグインなので、ページキャッシュ機能を必ずしも無効にする必要はありません。
WordPressのプラグイン追加画面で「Autoptimize」と検索するか、Autoptimizeの公式ページからダウンロードし、プラグインのアップロードからファイルを選択してインストールした後に、プラグインを有効化します。
この時点で不具合が発生していなければ先に進めても問題ありませんが、念のため、ウェブページの表示崩れや機能の不具合が無いかをチェックしておきましょう。
Autoptimizeの設定
JavaScript オプション
JavaScriptオプションでは、JavaScriptコードを最適化して読み込みを早くする機能の他、「JSファイルを連結」または「連結しないで遅延」のどちらかを選択する事ができます。
JavaScriptは特に表示や動作の不具合を発生させやすい設定項目になりますので、ウェブサイトの表示に問題が無いか確認しながら、PageSpeed Insightsで読み込み速度を測定して設定を進めていくようにしましょう。
当ウェブサイトでは、表示速度が速く、不具合も発生しなかった「JavaScript コードの最適化」と「JSファイルを連結」にチェックを入れていますが、「連結しないで遅延」については、TBT(Total Blocking Time)の数値が悪化してしまったので不採用にしています。
CSSオプションの設定
通常は改行やスペースを入れてCSSを読みやすい状態にしていますが、不要なコメントや改行、空白などを取り除いてファイルサイズを小さくし、読み込みを早くする設定がCSSオプションです。
JavaScriptと同様に、不具合が無いかチェックしながら設定を進める必要がありますが、CSSの記述内容を直接確認する時以外は、コードが圧縮されていてもウェブサイトの表示には問題ありませんので、当サイトでは「CSSコードを最適化」「CSS ファイルを連結」「インラインの CSS も連結」の3つにチェックを入れて高速化しています。
実際にブラウザで出力されたソースコードを確認すると、数百行にも及ぶコードが40行以内に収まるほど改行などが取り除かれているので、最適化後のCSSを確認しにくい場合は、一時的に「CSSコードを最適化」からチェックを外して、読みやすい状態に戻す方法もあります。
なお、AutoptimizeによるCSSの最適化は、基本的に配信されるコードに対して行われるため、元のCSSファイルそのものが書き換えられるわけではありません。
HTMLオプションの設定
上の2つに比べると表示速度への影響は比較的小さく、不具合が発生する可能性も低い設定項目となりますので、「HTML コードを最適化」「インラインの JS/CSS も最小化」にチェックを入れて有効化しています。
その下にはCDNオプションという設定項目もありますが、こちらはCDNを利用する場合に設定する項目なので、CDNを導入していない当サイトでは使用していません。
さらに、その下には最適化されたファイルが何個あり、どこにキャッシュされているかなどの情報を表示する項目もあります。
その他のオプションの設定
上の3つの項目を設定した際に不具合が発生した場合は、こちらのオプションのチェックを外したり入れたりする事で、問題が解消される場合もあります。
当サイトでは特に何も起こらなかったので、この設定はデフォルトのままにしていますが、動作に問題が発生してアンインストールを検討するようになった場合には、原因の切り分けや改善方法の一つとして、こちらの設定も確認してみると良いでしょう。
画像最適化の設定
画像最適化用のCDNサービスを利用していない当サイトでは、画像の遅延読み込み(Lazy-load)を有効にする設定のみを行っています。
WordPressには標準でLazy-load機能が搭載されていますが、テーマやプラグインの仕様によっては適用されていなかったり、相性が悪かったりする場合もあるので、Autoptimizeの画像遅延読み込みの方が良好な結果になるのであれば、こちらを有効にしておくのも良いでしょう。
ただし、ファーストビューに表示される画像まで遅延読み込みの対象にしてしまうと、LCP(Largest Contentful Paint)が悪化する場合もあるため、ページの先頭付近にある画像の読み込み方法には注意が必要です。
当サイトでは、設定画面で先頭の画像を遅延読み込みの対象から除外する設定が初期状態で適用されていたので、そのまま「画像の遅延読み込み(Lazy-load)」にチェックを入れたのみの設定にしています。
追加の自動最適化の設定
元々使用していなかったGoogleフォントや、WordPressの絵文字表示に使用するスクリプトなどを削除する項目にだけチェックを入れて、他は何も変更しませんでした。
preconnectやpreloadを設定できる項目もあるのですが、JavaScriptの遅延読み込みについてはFlying Scriptsで設定するものが大半だった事に加え、むしろ、ここに何も設定しない方が全体的なパフォーマンスが良かったので、あえて設定しておりません。
PageSpeed Insightsのスコア比較
WordPressサイト高速化プラグイン「Autoptimize」を設定する前後で、GoogleのPageSpeed Insightsを使用して表示速度のスコアを比較してみました。
Autoptimize設定前
Autoptimize設定前のスコアは58点で、TBT(Total Blocking Time)とLCP(Largest Contentful Paint)で大きな時間を要しているのが分かるかと思います。
当ウェブサイトではGoogleアドセンス広告の手動広告と自動広告の両方を設定しているので、広告の読み込み方法を改善しない限りは大幅なスコア上昇を見込むのが難しい状態でしたが、それでもPageSpeed Insightsでは50点以上のスコアが出ていました。
Autoptimize設定後
TBT(Total Blocking Time)を半分以下に短縮し、LCP(Largest Contentful Paint)を2.5秒以内に収められた事で、非AMPページとしてはそこそこ悪くない71点を取る事ができました。
主にGoogleアドセンス広告の読み込みがスコアに影響している状態なので、その対策をしない事には90点以上を取るのは難しいかと思いますが、Autoptimize導入前の58点と比較すると13点も上昇しており、今回の設定変更によって十分な高速化効果を確認できたのではないかと思います。
ただし、PageSpeed Insightsのスコアは測定時の通信状況や外部コンテンツの読み込み状態によっても変動するため、設定を変更する際は複数回測定し、表示崩れなどの不具合が発生していないかも含めて確認する事が重要です。
Autoptimize導入のまとめ
- ウィジェットや関連記事の画像にも遅延読み込みを適用できる
- 適切に設定すれば、ウェブページの大きな表示崩れや機能停止を起こさず、動作が安定した状態で高速化できる
- プラグインを追加しても読み込み速度が悪化せず、当サイトではPageSpeed Insightsのスコアが58点から71点に改善した
- PreloadやPreconnectの設定にも対応している
PRO版を導入すればCDNなどの追加機能も利用できるようになり、さらに高速化できる可能性がありますが、当サイトでは無料版のAutoptimizeと他の無料プラグインを組み合わせる事で、さらなるスコアアップも実現できています。
JavaScriptやCSSの最適化、画像の遅延読み込みなどを細かく設定できる便利なプラグインなので、レンタルサーバー標準の高速化機能に不満がある方や、WordPressサイトの表示速度を改善したい方は、Autoptimizeの導入を検討してみるのも良いと思います。
Youtubeチャンネルでは、日本国内各地の美しい四季の風景、ネイチャービデオ、花火大会やイベント・お祭り等、クリスマスイルミネーションや夜景、星景タイムラプス映像、Vlog、飛行機や新幹線などの乗り物等の映像をライブラリー化し、世界各地に発信しております。
また、不定期で花火大会やイベントのライブ配信も実施中！
下のYouTubeアイコンからチャンネルを表示していただき、チャンネル登録後に通知をオンにしていただくとライブ配信の通知が受け取れます！
もちろん動画URLや埋め込みタグを使用したウェブサイトへの埋め込みやSNSでのシェアもOKです！
この記事へのコメントはありません。