スクロール パフォーマンスを高める受動的なリスナーが使用されています：PageSpeed Insights対策ガイド

7 min 8 views

Webサイトの表示速度を改善するために、PageSpeed Insightsなどのツールを使っている方なら、「スクロール パフォーマンスを高める受動的なリスナーが使用されていません」という指摘を見たことがあるのではないでしょうか。

この記事では、この問題の根本的な原因から具体的な解決方法まで、初心者の方にもわかりやすく詳しく解説します。表示速度の改善は現代のWebサイト運営において欠かせない要素ですので、一緒に学んでいきましょう。

目次

スクロール パフォーマンスを高める受動的なリスナーとは何か

基本的な仕組みの理解

まず、「受動的なリスナー（Passive Event Listener）」について理解しましょう。Webサイトでは、ユーザーがスクロールしたり、タッチしたりする際に、JavaScriptがそのイベントを検知して処理を実行します。

従来のイベントリスナーでは、スクロールが発生した際に、「preventDefault()」という関数が呼ばれる可能性があるかどうかを毎回確認する必要がありました。この確認作業が、スクロール時のパフォーマンスを低下させる原因となっていたんです。

受動的なリスナーの役割

受動的なリスナーは、事前に「このイベントリスナー内ではpreventDefault()を呼びません」ということをブラウザに伝える仕組みです。これにより、ブラウザは確認処理をスキップでき、スクロールがよりスムーズになります。

つまり、「passive: true」を指定することで、スクロール処理とJavaScriptの処理を並行して実行できるようになり、結果的にスクロール時の待ち時間がなくなるというわけです。

PageSpeed Insightsで指摘される理由

診断結果の詳細

PageSpeed Insightsでこの問題が指摘される際、以下のようなメッセージが表示されます：

「スクロール パフォーマンスを高める受動的なリスナーが使用されていません」
「ページのスクロール パフォーマンスを高めるには、touch および wheel イベント リスナーを ‘passive’ として指定することをご検討ください」

この指摘は、主に以下のファイルで発生することが多いです：

  • comment-reply.min.js（WordPress標準のコメント返信機能）
  • jquery.min.js（jQuery本体）
  • その他のプラグインやテーマのJavaScriptファイル

WordPressサイトに多い理由

特にWordPressサイトでこの問題が頻繁に発生するのは、WordPressのコアファイルや多くのプラグインが、まだ受動的なリスナーに対応していないためです。2021年頃から問題が認識されているにも関わらず、現在でも完全には解決されていません。

問題の特定方法

Chrome DevToolsを使った問題箇所の特定

まず、どのファイルが問題を引き起こしているかを特定しましょう。Chromeブラウザで問題のあるページを開き、以下の手順で確認できます：

  1. キーボードで「Ctrl + Shift + I」を押してDevToolsを開く
  2. 「Console」タブを選択
  3. 「Violation」で始まる警告メッセージを確認
  4. ファイル名とエラー箇所をクリックして詳細を表示

これで、具体的にどのファイルのどの行が問題になっているかがわかります。

PageSpeed Insightsでの確認

PageSpeed Insightsの診断結果では、「ソース」の部分に問題のあるファイル名が表示されます。複数のファイルが関係している場合もあるので、すべてチェックしておきましょう。

具体的な解決方法

comment-reply.min.jsの修正

最も一般的な問題であるcomment-reply.min.jsの修正方法を説明します。このファイルは「/wp-includes/js/comment-reply.min.js」にあります。

修正前のコード例

I.addEventListener("touchstart", l);

修正後のコード例

I.addEventListener("touchstart", l, { passive: true });

ファイル内で「touchstart」を検索し、該当するaddEventListenerの第3引数に「{ passive: true }」を追加します。通常、2箇所程度の修正が必要です。

jQuery.min.jsの修正

jQuery本体の修正は少し複雑です。以下のコードをjQueryファイルの最後に追加する方法が効果的です：

jQuery.event.special.touchstart={setup:function(e,t,s){t.includes("noPreventDefault")?this.addEventListener("touchstart",s,{passive:!1}):this.addEventListener("touchstart",s,{passive:!0})}},jQuery.event.special.touchmove={setup:function(e,t,s){t.includes("noPreventDefault")?this.addEventListener("touchmove",s,{passive:!1}):this.addEventListener("touchmove",s,{passive:!0})}},jQuery.event.special.wheel={setup:function(e,t,s){this.addEventListener("wheel",s,{passive:!0})}},jQuery.event.special.mousewheel={setup:function(e,t,s){this.addEventListener("mousewheel",s,{passive:!0})}};

このコードは、touchstart、touchmove、wheel、mousewheelなどのイベントに対してpassive: trueを自動的に適用します。

古いブラウザへの対応

より確実な対応をするために、古いブラウザでも動作するコードを使用することをお勧めします：

var supportsPassive = false;
try {
  var opts = Object.defineProperty({}, 'passive', {
    get: function() {
      supportsPassive = true;
    }
  });
  window.addEventListener("testPassive", null, opts);
  window.removeEventListener("testPassive", null, opts);
} catch (e) {}

// 使用例
element.addEventListener("touchstart", handler, supportsPassive ? {passive: true} : false);

WordPressでの対応方法

comment-reply.jsの読み込み停止

コメント機能を使用していない場合は、comment-reply.jsの読み込みを停止するのが最も簡単な解決方法です。functions.phpに以下のコードを追加します：

// comment-reply.min.jsの読み込みを停止
function stop_comment_reply_js(){
    wp_deregister_script('comment-reply');
}
add_action('wp_footer','stop_comment_reply_js');

条件分岐での対応

将来的にコメント機能を使用する可能性がある場合は、条件分岐を使用した対応がおすすめです：

function conditional_comment_reply_js(){
  if ((is_single() && comments_open() && get_option('thread_comments'))){
    wp_enqueue_script('comment-reply');
  }else{
    wp_deregister_script('comment-reply');
  }
}
add_action('wp_footer','conditional_comment_reply_js');

プラグインを使用した解決方法

専用プラグインの活用

技術的な修正が難しい場合は、専用のプラグインを使用する方法もあります。ただし、プラグインの追加はサイトの表示速度に影響を与える可能性があるため、慎重に選択しましょう。

キャッシュプラグインとの併用

WP RocketやAutoptimizeなどのキャッシュプラグインを使用している場合は、JavaScriptの最適化設定と合わせて調整する必要があります。

表示速度改善のその他のポイント

画像の最適化

受動的なリスナーの問題を解決した後は、他の表示速度改善施策にも取り組みましょう。特に画像の最適化は効果が高く、以下の点に注意してください：

  • 適切な画像フォーマットの選択（WebP形式の活用）
  • 画像サイズの最適化
  • 遅延読み込み（Lazy Loading）の実装
  • レスポンシブ画像の使用

JavaScriptとCSSの最適化

JavaScriptとCSSファイルの最適化も重要です：

  • 不要なプラグインの削除
  • ファイルの圧縮（Minify）
  • クリティカルCSSの インライン化
  • 使用していないJavaScriptの削除

サーバーサイドの最適化

サーバーの性能も表示速度に大きく影響します。高性能なレンタルサーバーの選択や、CDN（Content Delivery Network）の活用を検討しましょう。

高速化における注意点

バックアップの重要性

コアファイルを修正する際は、必ずバックアップを取得してから作業を行いましょう。万が一の際に、すぐに元の状態に戻せるようにしておくことが大切です。

WordPressアップデートの影響

wp-includesフォルダ内のファイルを修正した場合、WordPressのアップデート時に変更が上書きされてしまいます。アップデート後は再度修正が必要になることを覚えておきましょう。

サイト機能への影響確認

修正後は、必ずサイトの各機能が正常に動作するかテストしましょう。特に、以下の項目は重点的にチェックしてください：

  • コメント機能
  • お問い合わせフォーム
  • ショッピングカート
  • スクロール関連の機能

効果の測定方法

PageSpeed Insightsでの確認

修正後は、PageSpeed Insightsで再度測定を行い、指摘が解消されているかを確認しましょう。スコアの向上も期待できます。

実際のユーザー体験の確認

ツールでの測定だけでなく、実際に様々なデバイスでサイトを閲覧し、スクロール時の体感速度を確認することも大切です。

landinghubでの表示速度改善

このような細かな技術的な修正が難しい場合や、より包括的な表示速度改善を求める場合は、専門的なサービスの活用も検討しましょう。

landinghubでは、表示速度の改善に特化したサービスを提供しており、技術的な知識がない方でも簡単に高速化を実現できます。受動的なリスナーの問題はもちろん、その他の表示速度に関する問題も総合的に解決できるため、効率的にサイトのパフォーマンスを向上させることが可能です。

よくある質問

Q: 修正後にサイトが表示されなくなった場合はどうすればいいですか？

A: 事前に取得しておいたバックアップファイルを使用して、修正前の状態に戻してください。その後、修正内容を再度確認して、慎重に作業を行いましょう。

Q: WordPress以外のサイトでも同じ修正方法で対応できますか？

A: 基本的な原理は同じですが、使用しているCMSやフレームワークによって具体的な修正方法は異なります。該当するJavaScriptファイルを特定し、同様の修正を行ってください。

Q: この修正によってどの程度の速度改善が期待できますか？

A: 効果はサイトの構成や他の要因によって異なりますが、一般的には1-10点程度のPageSpeed Insightsスコア向上が期待できます。より重要なのは、ユーザーのスクロール体験の改善です。

まとめ

「スクロール パフォーマンスを高める受動的なリスナーが使用されていません」という問題は、現代のWebサイトにおいて避けて通れない課題の一つです。

技術的には複雑に見えますが、基本的な原理を理解し、適切な手順で修正を行えば、確実に解決できる問題です。ただし、コアファイルの修正を伴うため、必ずバックアップを取得し、慎重に作業を進めることが大切です。

また、この問題の解決は表示速度改善の一部に過ぎません。画像の最適化、サーバーの性能向上、不要なプラグインの削除など、総合的なアプローチが必要です。

技術的な修正が困難な場合は、専門的なサービスの活用も検討しましょう。landinghubのような専門サービスを利用することで、より効率的かつ包括的な表示速度改善が可能になります。

Webサイトの表示速度は、ユーザーエクスペリエンスとSEOの両方に大きな影響を与えます。今回紹介した方法を活用して、より快適で高速なWebサイトを目指しましょう。

<PREV
過大なネットワーク ペイロードの回避とは？PageSpeed Insights対策
NEXT>
「document.write() は使用されていません」の警告が出る理由と対処法は？
関連記事

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です