iPhoneやAndroidなどのモバイル端末でウェブサイトを表示した際に、スクロールが一定時間できなくなったり、引っかかってしまったりする症状について、ウェブサイト管理者向けに原因と対処方法をご紹介します。
JavaScriptやCSSの最適化が原因かと思いましたが、結論から言うと、今回のWordPressサイトで発生したスクロールの不具合は、Googleアドセンスの自動広告が原因でした。
WordPressのモバイル表示でスクロールが止まる症状について
通常はパソコンを使用してWordPressサイトの作成や編集をしているため、意外とモバイル表示の不具合に気づかない事も多いのですが、以前、モバイル端末でハンバーガーメニューが正常に機能しなかったトラブルに続き、今度は特定のモバイル対応ページで一定時間スクロールができなくなるトラブルが発生してしまいました。
以前のハンバーガーメニューが機能しなくなったトラブルは、XPageSpeedのJavaScriptの遅延読み込みを無効化する事で解消しているのですが、今回のスクロールの不具合は、AutoptimizeやFlying Scripts、WP YouTube LyteなどのWordPressサイト最適化プラグインを複数インストールした後に発生してしまいました。
モバイル端末でスクロールができなくなる原因を特定するために、まずはインストールしたプラグインを1つずつ無効化して、原因の切り分け作業を行っていきます。
原因の切り分け1 Autoptimize
全ての最適化機能を無効化したXPageSpeedの代わりとして、WordPressプラグインのAutoptimizeをインストールしていました。
JavaScriptファイルの連結や読み込み方法の最適化の他、CSSの連結、画像の遅延読み込みなどを行ってウェブサイトの表示速度を高速化するプラグインなのですが、今回の不具合を引き起こしそうな機能として真っ先に思いついたのがこれです。
特にファーストビューで不具合を起こす可能性があるJavaScriptの最適化機能をオフにしても症状は変わらず、プラグインを完全に無効化してもスクロールの不具合は解消しなかったため、Autoptimizeは今回のトラブルとは無関係だと判断しました。
当ウェブサイトのテーマはXPageSpeedとの相性があまり良くなかったのですが、同様の最適化機能を有するAutoptimizeとは相性が良かったようです。
原因の切り分け2 Flying Scripts
ウェブページを開いた際に、指定したJavaScriptの読み込みや実行を一時的に遅延させる事で、表示速度を高速化できるプラグインがFlying Scriptsです。
GoogleマップやFacebookなど、ページの初期表示で読み込む必要がないJavaScriptの他、ページの読み込みを遅くする大きな要因となっているGoogleアドセンスの広告関連スクリプトを4秒間遅延させる設定にしていました。
このプラグイン自体は優秀で、PageSpeed Insightsのパフォーマンススコアで96点以上を取れるようになるまでにインストールしたプラグインの中では、最も大きな効果がありました。
Googleアドセンスの広告関連スクリプトを4秒間遅延させる設定に問題があったのかと思いましたが、Flying Scriptsを無効化してもスクロールの不具合は解消しなかったため、こちらも原因ではありませんでした。
原因の切り分け3 WP YouTube Lyte
WP YouTube Lyteは、読み込みが重いYouTubeの埋め込み動画プレーヤーを軽量な表示に置き換え、動画の再生時までプレーヤー本体の読み込みを遅延させる事で、ページの表示速度を高速化できるプラグインです。
また、設定によってYouTube動画のサムネイルをサーバーにキャッシュする事もできます。
今回のスクロールの不具合とは全く関係がないと思っていましたが、念のため無効化してみたところ、案の定こちらも症状に変化はなく、原因ではありませんでした。
結局、何が原因だったのだろうと考えていたところ、これらのプラグインをインストールしたのと同じ時期に、Googleアドセンスの自動広告を有効化していた事を思い出しました。
アドセンスの自動広告を表示してはいけないエリアがあった！
WordPressサイトの最適化プラグインをインストールしてから、PageSpeed Insightsで95点以上を取る事ができるページが多かったため、調子に乗ってGoogleアドセンスの自動広告を有効化していた事をすっかり忘れていたのです。
投稿記事（post）では問題なくスクロールできるのに、トップページやカテゴリページなどの特定のページではスクロールができなくなっていた原因は、どうやらここにあったようです！
ヘッダーバー周辺の自動広告の表示エリアを除外したページと、除外していないページで、スクロールができたりできなかったりしていたのです。
そこで、Googleアドセンスの自動広告設定からヘッダーバー周辺やタイトル上の広告表示エリアを全て除外し、ファーストビューに広告が割り込まないように設定を変更したところ、モバイル端末でスクロールができなくなる問題が解消しました。
ヘッダー周辺に自動広告が挿入される事で、ページの表示やスクロール処理に何らかの影響が出ていた可能性がありますが、具体的にどの処理が原因だったのかまでは特定できていません。
今回のように、WordPressのモバイル表示でスクロールが止まる、引っかかるなどの不具合は、JavaScriptやCSSの最適化プラグインだけでなく、Googleアドセンスの自動広告の表示位置が関係している場合もあります。
ウェブサイトの内部構造を変更したり、新しいプラグインをインストールしたり、自動広告の設定を変更した後は、パソコンとモバイルの両方の端末で動作を確認し、スクロールやメニューの操作などに異常がないかチェックしておくと、快適に閲覧できるウェブサイトを維持しやすくなるでしょう。
Youtubeチャンネルでは、日本国内各地の美しい四季の風景、ネイチャービデオ、花火大会やイベント・お祭り等、クリスマスイルミネーションや夜景、星景タイムラプス映像、Vlog、飛行機や新幹線などの乗り物等の映像をライブラリー化し、世界各地に発信しております。
また、不定期で花火大会やイベントのライブ配信も実施中！
下のYouTubeアイコンからチャンネルを表示していただき、チャンネル登録後に通知をオンにしていただくとライブ配信の通知が受け取れます！
もちろん動画URLや埋め込みタグを使用したウェブサイトへの埋め込みやSNSでのシェアもOKです！
この記事へのコメントはありません。