このブログはGoogleの無料ブログ「Blogger」にて、外部テーマの「Vaster2」を使用して書いています。先日「サーチコンソール」というGoogleのツールで「CLSに関する問題」というメッセージが出ていました。ちなみにここで紹介する事は「Vaster2」テーマ使用時でスマホ向けサイトに現れる事象について書いています。今のところPC向けサイトでは、エラーが出ていません。
ステータスには “不良” ではなく “改善が必要” となっていたので早急に対処しなくてはいけない問題では無いのですが、結局は修正しなくてはいけないと思うので、原因を探って対処していきたいと思います。
まず「CLSに関する問題」の “CLS” というのは、“Cumulative Layout Shift” の事で簡単にいうとサイトのレイアウトについて “問題があります” という事でした。具体的にはサイトが表示される際に画像やメニュー画面などが遅れて読込まれるときに、全体のレイアウトが “Shift(位置が変わる)” してしまう事が問題視されていています。
実際このブログで使っている「Vaster2」のテーマでは、上の図のようなレイアウトの動きを問題だと指摘していると思われます。ページ読込時に赤枠で囲んだ部分の「グローバルメニュー」が一瞬だけ開くのですが、この機能のためにそれ以下に表示される青枠で囲んだ全体のレイアウトが押し下げられて表示されてしまいます。この事が「CLSに関する問題」として指摘されていると推測しました。
その対策方法として、読込時に「グローバルメニュー」を一瞬開く機能を停止する事にしました。方法はテーマのHTMLに追記変更する事で対処します。変更内容はテーマHTMLから以下の項目を探し、赤字のタグを追加する事で可能です。その際は必ずバックアップを取ってから行ってください。
「/* レスポンシブデザイン------ */ 」と記載された項目の「.grobal-navi{width:auto;}」に「display: none;」を追記して「.grobal-navi{width:auto; display: none;}」とする。
以上の変更で「グローバルメニュー」の内容を、ページの読込毎に開かなくなりました。これで解決すればよいのですが、この対策の気がかりなことは “display: none;” タグが検索エンジンから低評価を受ける可能性があるという事ですね。閲覧者の視覚上で見えなくするタグはサイト訪問者に不利益でフェアでは無いと捉えられるんです。
今回の「CLSに関する問題」も閲覧中にレイアウトが動くと、訪問者が間違えて広告やリンクをクリックしてしまって不利益だという事で設けられた基準だと思います。これからはコンテンツの内容だけでなく、閲覧者の視点や使いやすさを考えたサイトが評価を受けやすくなるのでしょうね。
