ウェブサイトの読み込み速度を測定するPageSpeed Insightsで、主要コンテンツの表示時間（LCP）2.5秒以内を目標に、モバイルで95点以上、デスクトップで100点を記録した際に活用した、無料で使用できるワードプレス（WordPress）の高速化プラグインをご紹介します！
ウェブサイトの表示速度が重要な理由とは？
ウェブサイトの読み込み速度が遅すぎると、単に表示が重いサイトなのか、それとも何らかの障害が発生しているのか分からず、読み込み途中でブラウザバックをしたり、読み込みを中止したりするユーザーも意外と多いそうです。
2017年に公表されたGoogleとSOASTAによる調査では、ページの読み込み時間が1秒から3秒に延びると直帰する確率が32%、1秒から5秒では90%、1秒から6秒では106%、1秒から10秒では123%上昇するというデータが示されており、読み込み速度の低下はユーザーの離脱率を高め、ウェブサイトのPV数にも影響を与える可能性があるのです。
また、Googleは2018年7月に、モバイル検索のランキング要素としてページの読み込み速度を考慮する「スピードアップデート」を実施しました。これは、特に読み込み速度が遅い一部のページを対象としたもので、表示速度が遅いからといって必ず検索順位が下がるわけではありませんが、ユーザーの離脱率だけでなく、Google検索の検索順位にも影響する可能性があるということです。
かつては、読み込み速度の速いAMP対応ページがGoogle検索のモバイル版トップニュースに掲載されるための条件となっていましたが、2021年にその要件は撤廃されました。ただし、AMPへの対応自体が検索順位を直接引き上げる要素だったわけではなく、現在もウェブサイトの表示速度を含むページエクスペリエンスは、検索評価に関係する要素の一つとなっています。
ウェブサイトの表示速度が低下する原因
ウェブサイトの読み込み速度が低下する主な原因として、Googleアドセンス広告やYouTubeの動画プレーヤー、Googleマップなどが挙げられますが、他にもFacebookやX（旧Twitter）のポスト埋め込みなど、外部から情報を取得するコンテンツが表示速度に大きく影響する場合があります。
WordPressに直接写真や動画をアップロードしている場合は、それらのファイルサイズも読み込み速度が低下する原因となりますが、もともと画像を適切なサイズに圧縮していたり、WebP形式に変換していたりするのであれば、画像の最適化だけで得られる改善効果は比較的小さくなることもあります。
画像のWebP変換は手動でも対応できるため、主に外部から情報を読み込む埋め込みコンテンツの読み込み方法を改善することで、AMPに対応していなくてもPageSpeed Insightsで95点以上の高スコアを目指すことができるのです。
正確には、それ以外にもいろいろと対策を行っているのですが、実際に95点以上を記録するまでに行ったことや、インストールしたWordPress高速化プラグインについてご紹介していきましょう。
画像をWebPに変換してサイズを圧縮
画像をWebP形式に変換したり、ファイルサイズを圧縮したりするプラグインもあるのですが、余計なプラグインをインストールして管理するものを増やしたくなかったことから、画像をダウンロードして写真編集ソフトでWebP形式に変換し、再アップロードする方法を選びました。
画像最適化プラグインを使用したからといって、必ずしもページを表示するたびに重いPHP処理が発生するわけではありませんが、今回はプラグインに頼らず、手動で画像のファイルサイズを削減することにしたのです。
それに伴って記事内のHTMLコードも書き換えなければいけなかったのですが、もともと分かりやすいファイル名を付けていたので、手動で書き換えを行っても、それほど日数はかかりませんでした。
同じ記事で使用する写真であれば、ファイル名の先頭を統一したり、分かりやすい代替テキストやタイトルを設定しておいたりすると、後から画像を修正したり、ファイルを差し替えたりする際にもとても便利なのです。
サーバー標準の高速化機能をOFFに
当サイトはエックスサーバーを使用して運営しているのですが、KUSANAGIの技術を活用した高速化環境やエックスアクセラレータなどの機能を備えており、速さと安定性に定評のあるレンタルサーバーです。
その高速化機能の一つに、Googleが開発した拡張モジュール「PageSpeed Module」をもとにした、XPageSpeedというウェブサイト最適化機能があります。
記事内の画像やCSS、JavaScriptなどを最適化してデータ転送量を削減してくれる便利な機能なのですが、JavaScriptの遅延読み込みによって不具合が発生したり、プラグインで表示している画像には最適化が効かない場合があったりしたため、当サイトではXPageSpeedの機能をすべてオフにいたしました。
アドセンス広告のスクリプトコードを<head>内に
割とこれをやっている方は多いと思いますが、Googleアドセンス広告の<script async src=”https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-〇〇〇” crossorigin=”anonymous”></script>を<head>内に挿入して、記事やウィジェットには<ins class=”adsbygoogle”～から先の広告ユニット用コードのみを設置するという方法があります。
これによって、記事内に複数の広告を設置していても、共通のJavaScriptファイルをページ内で重複して読み込ませる必要がなくなるため、無駄な読み込みを減らすことができます。
広告ユニットごとに必要なコードはそのまま残しながら、共通のスクリプトを1ページにつき1回だけ読み込ませるようにする方法で、当サイトでも効果を感じられた対策の一つでした。
Autoptimizeプラグインの導入で高速化
XPageSpeedの機能をすべて停止したことで、これまで利用していたJavaScriptやCSS、画像などの最適化機能が使えなくなってしまったわけですが、無料で使用できるAutoptimizeプラグインを導入したところ、ウェブサイトの表示速度を高速化できただけでなく、不安定だったファーストビューの表示も改善することができたのです。
特に、XPageSpeedのJavaScript遅延読み込みによって発生していた、ハンバーガーメニューが開けなくなる問題も解消し、YouTubeやGoogleマップを埋め込んでいない記事では、PageSpeed Insightsのモバイル測定でも90点台が出るようになりました。
Autoptimizeには、JavaScriptやCSSの圧縮・最適化に加えて、ページの初期表示に必要なCSSを優先的に読み込ませ、レンダリングを妨げるリソースの影響を軽減するための設定も用意されています。
そのため、WordPressサイトの表示速度を改善しながら、ファーストビューの表示やメニューの動作を安定させたい場合にも便利なプラグインで、少なくとも当サイトの環境では、XPageSpeedを使用していたときよりも安定して動作するようになりました。
Flying ScriptsでJavaScriptを遅延読み込み
Flying Scriptsは、Googleアドセンス広告やGoogleマップで使用される外部スクリプト、Facebookの記事埋め込みなどに関係するJavaScriptの実行を遅延させることで、ウェブページの初期表示を高速化できるプラグインです。
JavaScriptコードに含まれるキーワードを指定して、ユーザーの操作があるまで実行を遅らせたり、操作が行われなかった場合に実行するまでの時間を設定したりできるため、比較的簡単な設定でWordPressサイトの高速化を図ることができます。
ただし、遅延の対象となるのは指定したJavaScriptであり、Googleマップなどのiframeそのものを直接遅延読み込みする機能ではないため、埋め込みコンテンツの仕組みに応じて設定する必要があります。
特に、Googleアドセンスの自動広告をオンにして収益を獲得しているウェブサイト運営者にとっては、広告関連のJavaScriptが初期表示に与える負荷を抑える方法の一つとしておすすめしたいプラグインです。ただし、広告の表示や読み込みタイミングにも影響する可能性があるため、導入後は正常に広告が表示されているかを確認することが大切です。
WP YouTube Lyteでサムネイル表示後にプレーヤー読み込み
YouTubeの動画プレーヤーを記事に埋め込んでいるウェブサイトには、WP YouTube Lyteというプラグインがおすすめです。
WordPressにはiframeの遅延読み込み機能が標準で備わっているのですが、プラグインの組み合わせによっては遅延読み込みがうまく機能せず、ウェブサイト全体の読み込み速度にも影響が出てしまうことがあります。
このプラグインを導入することで、最初からYouTubeの動画プレーヤーを読み込む代わりにサムネイル画像を表示し、ユーザーがサムネイルをクリックした段階で初めてYouTubeのプレーヤーを読み込ませることができるようになります。
さらに、設定によってはYouTube動画のサムネイルを使用中のサーバーにキャッシュすることも可能なので、ページを表示するたびにYouTube側へサムネイル画像を取得しに行く必要がなくなり、読み込み時間や通信量の削減にもつながります。
特に、YouTube動画を複数埋め込んでいるページでは効果が期待でき、Flying ScriptsでJavaScriptの読み込みを遅延させる方法と組み合わせることで、外部コンテンツによる負荷をさらに軽減することができます。
WordPressでYouTubeの埋め込み動画を高速化したい場合には、Flying Scriptsとセットで導入するのもおすすめです！
モバイルで95点以上、デスクトップで100点も可能！
サーバーキャッシュやブラウザキャッシュと共に、エックスサーバーのXアクセラレータをオンにしておくことも表示速度の改善には効果的で、当サイトではこれらの機能を活用しながら、今回ご紹介したプラグインを導入することで、PageSpeed Insightsのモバイル測定で95点以上、デスクトップでは100点を記録できるようになりました。
ただし、PageSpeed Insightsのスコアはサーバーの応答速度やページの構成、通信環境、測定時の条件などによって変動するため、同じプラグインを導入したすべてのウェブサイトで、必ず95点以上や100点を取れるというわけではありません。
特にAutoptimize・Flying Scripts・WP YouTube Lyteの3つは、当サイトの環境で大幅な速度向上を実感できたWordPress高速化プラグインですので、Googleアドセンスで収益を得ている方や、YouTubeクリエイターとして活動しながらウェブサイトも運営している管理者には、特におすすめしたい組み合わせです。
広告や動画の埋め込み機能を維持しながら、ウェブサイトの表示速度を改善して快適な閲覧環境を整えたい方は、ぜひ参考にしてみてください。
Youtubeチャンネルでは、日本国内各地の美しい四季の風景、ネイチャービデオ、花火大会やイベント・お祭り等、クリスマスイルミネーションや夜景、星景タイムラプス映像、Vlog、飛行機や新幹線などの乗り物等の映像をライブラリー化し、世界各地に発信しております。
また、不定期で花火大会やイベントのライブ配信も実施中！
下のYouTubeアイコンからチャンネルを表示していただき、チャンネル登録後に通知をオンにしていただくとライブ配信の通知が受け取れます！
もちろん動画URLや埋め込みタグを使用したウェブサイトへの埋め込みやSNSでのシェアもOKです！
この記事へのコメントはありません。