おはようございます。くろねこです。
このブログ(「くろねこ自由気ままな日記」)を始め、この春で4年を迎えました。
ここまで、続けられたのも皆様のような読者がいてくれたことが、すごく大きな要因です。
あらためて、ありがとうございます。これからもよろしくお願いします。
今回の記事は、当サイトで発生した CLSに関する問題に関する記事で、この問題を解決しております。その時の記事です。
読者が増えると励みに
当初、ブログに関する知識はほとんど無い状態でのスタートでしたが、記事の投稿のほか、ランキングへの参加や広告の掲載、サイトのカスタマイズなどを経て現在に至ってます。
そうなると、やはり気になるのが、どのくらい訪問者がいるのか? です。所謂、ページビュー(PV)の数値を増やそうと、Google Search Console (以下、Search Console)で記事の登録やサイトの定期的な評価をするようになりました。
もちろん、もっとも重要なことは、「記事の質」です。これは、これまでもこれからも、さまざまなことがらを投稿させていただきます。
いつからか
しかし、いつの頃からか、Search Consoleで「clsに関する問題」が報告されるようになりました。
しかし、くろねこは「そのうちに、改善されるだろう」と放置してました。
が、この問題の対象サイトは減るどころか記事を投稿するとともに増えていきます。
何度か対応を検討しましたが、解決策を見つけることができず、問題指摘箇所(記事数)は180前後まて膨れ上がりました。
この時点で気合い入れて対応していればよかったのですが。。。
そして、この問題、放置しすぎて、いつから発生したのか? がわからなくなってしまいました。
くろねこは何をしでかしたのだろう?
発生しているサイトはPCサイトのみです。モバイルでは起きてません。
当ブログサイトはレスポンシブデザインです。(ブログ開設当初より)
何が起きてる?
CLSとは、ページ読み込み中にUIが縦方向にずれて表示される現象のことです。
その現象でユーザーが予期せぬ操作をしてしまったり、ページの閲覧を妨げるような場合にステータスが不良になります。(参考:「Cumulative Layout Shift (CLS)」)
要するに、記事を表示する際に、記事の先頭にある画像の高さが決まっていないために、データの再ロードが発生する らしい。。。
対処としては画像の高さを固定の高さにすることらしい
このサイトでは、adsense のディスプレイ広告を配置しており、どうやら、この広告が悪さをしていると判断できます。
しかし、どうやって、高さを固定化すればよいのか?
この段階で集中が切れて解決策に至っていないのです。
この状態で、しばらく放置していました。
このままではマズイ
やはり、問題にしっかり向き合い、解決しなければと思いました。
この問題は、記事データのローディングで遅延が発生するですが、体感的に感じるのか? と言うレベル(くろねこの感覚)ネットが遅いのと区別がつきません。
う~ん どうなんでしょう・・・
ただ、「改善が必要」と指摘されているのは、どうも気持ちが悪いですね。
ということで、対応する時間(日時と所要時間)を決め対応することとしました。
対応日時は、4/29 昭和の日 9:00 スタート!
所要時間は、5時間 (ランチをはさみ15:00まで)
なお、結果はすぐに確認できるわけではなく、10日間前後かかるらしい(←これが一番のネック)
対応日当日
グーグルセンセで解決策を検索します。
当初、広告画像の高さを固定化する方法で探してましたが、講釈が多く具体的な解決策を見つけられません。
やはり、今日もだめかと思いましたが、ついにこれはと思う情報を見つけました。
その解決方法は
サイドバーの最上部に広告を表示するというものでした。
この方法で、広告画素の高さを固定化できるのか?
その仕組みは記載されていなかったので、半信半疑のような認識でしたが、一応、キープ!
その後、結局、「これだ!」というのがなく、
ダメ元で、サイドバー最上部に広告を設定することとしました。
設定は非常に簡単で数分で完了です。
時刻は12:40でした。ここでランチにして、対応作業は終了としました。
あとは、Search Consoleで確認できるのは、5/10頃になります。
しばらく待ちですね。
結果発表
あれから、10日以上経過しました。
日付は、5/11です。
Search Consoleで状況確認します。
解消です!
半信半疑でしたが、効果ありました!
エラーが減り始めてから数日程度で、改善が必要な記事はゼロになりました(喜)
おわりに
長かった旅の終着駅に到着した感じです。
今思えば、広告表示位置があまり良くないとの判断で調整してから、この問題は起きたのではと思ってます。
当時、いろいろなことでくろねこの心は不安定で集中力が大きく欠落していた頃
いろいろなことで溢れそうな毎日
Search Console の評価結果まで気が回らず、問題発生を認識したときには、自分が何をしでかしたのか? すら覚えてませんでした。
問題は早期発見、早期対処に限りますね。
そして、集中して対応する時間を確保するのが良いですね。(当たり前ですね)
最後に、解決の糸口となったサイトを紹介したいところですが、情報が残っておらず、履歴からも追いかけられない状況です。ごめんなさい。
記憶の限りでは、
これが解決策ですと断定していなかった内容だったと思います。
それでは
ここまで、ご覧いただき、ありがとうございました。