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