Google検索ボックス表示遅延がCLSを悪くしている件

Google検索ボックス表示遅延がCLSを悪くしている件

Google検索ボックス表示遅延がCLSを悪くしている件

SEO「Core Web Vitals」指標の一つであるCLSは、表示後の要素の移動(ズレ)を図る指標です。

Google検索ボックスは読み込みに時間が掛かるので、先に表示された要素が押し出されてズレが生じます。

CLS解消のポイントは、最初から表示領域を確保しておく事です。表示枠に対してCSSで高さを入れておけば、最初から領域を確保できるので表示位置がズレません。

えるぺぐWEBサイトのUXが下がっている

実はこのえるぺぐBlogサイト(以下:当ブログ)は、PC版ページのページエクスペリエンスが下がったままです。

CLSの数値がほぼ全ページ0.13~0.18台になっています。

本記事はこのCLS数値に対してさらにおこなった、検証・改善策の覚書となります。

Googleの検索ボックスが、CLS数値を悪くしているのではという仮説を立てています。

以前から低かったページエクスペリエンスの数値

当ブログのページエクスペリエンス値は、元々かなり低い状態でした。

モバイル版はともかく、PCページについては全ページに対して「改善が必要」という評価が続いていました。

Google Search Consoleデータ

改善が必要となっているのは「CLSに関する問題が0.1超(パソコン)」の欄です。

各ページのCLS数値一覧

これらはグループ化で評価されており、いずれも0.13~0.18の数値が出たままです。

CLSとは

まずCLSについて今一度おさらいしておきます。

CLSは「Core Web Vitals」の3要素のうちの一つです。

Core Web Vitalsのおさらい

「Core Web Vitals」とは、訪問ユーザーに与える実際の体験結果「ユーザーエクスペリエンス(以下:UX)」を数値化したものです。

この数値が理想値に近いほどUXが高いとされ、検索順位に大きな影響を与えるとされています。

つまりSEOに有効に働くわけですね。

3つの指標

以下の3要素がメインであり、その数値を簡単に測定する事ができるようになっています。

LCP…ページ読込に掛かる時間
CLS…レイアウトのずれの度合い
FID…ユーザーアクションに対する反応時間

この中で当ブログが引っかかっているのは、CLSの要素です。

つまりページのレンダリング中に、既に表示された要素が「ずれる度合い」を指しています。

要素位置が後からずれる様子

後の要素が先にレンダリングされるために位置がずれる状態

ユーザーの目線やカーソル位置が変わる事はできるだけ避けるべきという考え方です。

一度CLS改善にトライ済み

実は以前の記事で、このCLSに関する修正・および検証をしています。

結果としてはimgタグにwidthとheightの数値を入れる事で、CLS数値の改善ができました。

しかし実は、改善後の数値も0.18~0.24付近にとどまっていた訳です。

良好 改善が必要 不良
LCP 2.5 秒未満 4 秒以下 4 秒を超える
FID 100 ミリ秒未満 300 ミリ秒以下 300 ミリ秒を超える
CLS 0.1 未満 0.25 以下 0.25 を超える

CLSの数値に関して言えば、0.1未満が「良好」、0.25以下は「改善が必要」、0.25超だと「不良」という扱いです。

前回の記事を書いたのが2020年末ですから、現在はこのCLSが大きく影響しているはずです。

CLSが原因で順位が下がっている可能性も大いにあります。

そこで今回はさらなる数値改善へ向けて、さらなる検証・対策を実施していきます。

原因の特定

前回、画像の縦横サイズ(width・heightの数値)をきちんと入れる修正対応を取りました。

今回はさらに細かいところ(前回漏れていた画像)まできちんとサイズを指定しています。

そこで一度検証を掛けてみたのですが、CLS数値は改善されませんでした。

共通パーツ部分に原因がある可能性

先程も説明した通り、依然としてPCページのCLSは全滅の状態です。

よくよく見ると各ページごとにCLS数値に差はありますが、大半がグループ化されています。

これは全ページ同じ部分に、レイアウトのずれが起きている可能性を指しています。

SSIインクルーディングを採用

当ブログはWordpressではなくHTML+CSSサイトです。

ナビ部分や右袖メニュー部分などはSSIを使って共通パーツを使い回しています。

.htaccessに「.shtml」の記述を入れる事で、様々なファイルをhtmlソース中に読み込めるようにしている訳です。

大変便利な機能なので、よく重宝しています。

Google検索ボックスが後から表示される

共通パーツである右袖メニュー部分も、このSSIで動いています。

メニュー最上段にはGoogle広告枠があり、その下にGoogle検索ボックス欄を設けています。

このGoogle検索ボックスの下に、メニューコンテンツ等が続く形ですね。

そこでこの共通パーツ部分の表示をよく観察してみました。

先に表示された要素が下にずれる

F5を何度か押してページを更新してみると、このGoogle検索ボックスが微妙に遅れて表示されるのに気づきました。

F5を押した直後のレイアウト位置

F5を押した瞬間、実は検索ボックスではなくその下にある画像(オーナー画像)の方が先に表示されます。

検索ボックスが後から表示される事で写真が下に下がる様子

直後に検索ボックスが表示される事で、既に表示されているオーナー画像が下に下がるのがわかります。

実際は一瞬の事ですのでよく見ていないとわかりませんが、CLS上は大きな差となる訳です。

Google検索ボックスの読込

Google広告枠はHTMLソース内に埋め込みもしますが、SSIのパーツ内にも記述しています。

広告枠は一度埋め込みすれば最初から領域が空けられているので、コンテンツ部分が毎回下にずれる様な事はない様です。

どうも広告枠とは違う仕組みの様ですので、なぜGoogle検索ボックスでこのような事が起きるのか原因を探ってみました。

Google検索ボックスのレンダリングに時間が掛かる

まず予測できるのは、「Google検索ボックス自体のレンダリングに時間が掛かる」事です。

検索ボックスはGoogle広告枠と違い、設置時にまとまった量のソース表示がされます。

検索ボックスの表示コード

検索ボックスは非同期処理でスクリプトを読み込み、それが完了した時点で検索バーが埋め込まれる仕組みです。

<script async src=\"https://cse.google.com/cse.js?cx=d2953301973be6a22\"></script> <div class=\"gcse-search\"></div>

最上部にスクリプトが入っているのがわかります。

コード自体は2行なのですが、実際の出力時にはHTMLソースが展開される訳です。

出力時のソース

検索ボックス部分のHTMLソース

非同期処理による読み込みがあるので、下の要素(オーナー画像)がどうしても先に表示されてしまうのですね。

これが原因だとすれば、無策のままだと下の要素の位置がズレてしまいます。

SSI読込でタイムラグが出ている可能性

もう一つ、「検索ボックスをSSIに埋め込むとタイムラグが出る事」も考えられます。

現在この検索ボックスは、SSIを使ってページ右袖に表示している状態です。

これをHTML上に直接埋め込めば、下の要素が先にレンダリングされずに済むかも知れないという仮説です。

これはGoogle検索ボックスを直接、HTMLソース上に埋め込んでみるしかありませんね。

検索ボックスを一番下に移動

一番簡単なのは、共通パーツの一番下にボックスを移動させる事です。

一番下であればその下には何もない訳ですから、要素ズレを心配する必要がありません。

※もちろん検索ボックスが一番下に移動した訳ですから、使いにくくはなりますね。

これで一度CLSの検証を掛けてみます。

もしこれで数値が改善するようであれば、まさにこの検索ボックス表示によるズレが原因だった事が立証されます。

検索ボックスを適切な位置に置きたい場合

検索ボックスは本来、右袖の一番上にあってもおかしくない重要な機能です。

いくら検証のためとは言え、一番下に検索ボックスを置いたままでは使いにくいですよね。

しかしボックスの下に要素が来るとそれが先にレンダリングされ、CLSが悪くなります。

最初から領域を確保しておく

対応策とすれば、HTMLソース上に検索ボックスの高さ分を最初から指定しておく事でしょう。

要は最初から、ボックスが入る領域を確保しておけばよいのです。

詳しくは一番下の章で解説しています。

SSIから外して直接記述

そしてもう一つは、Google検索ボックスのソースを直接HTMLソース上に埋め込む事です。

直接ソース上に埋め込めば、SSIの要素が入ってもズレる事は無いのではという仮説です。

これで数値が改善すれば、Google検索ボックスはSSIで読み込まずに直接ソースに記述するべきとなるでしょう。

SSIの限界か

共通パーツから離れるので、いざボックス位置の変更をしたいとなると手間が掛かります。

しかしCLS数値が保てないのであれば、SSIパーツの中に含める事はできせん。

仮にSSIから外す事で数値が良くなる様であれば、これはSSIの利用が限界に来た事を意味すると思っています。

結論:検索ボックスの表示領域を事前確保

検証しつつ色々調べた結果、Google検索ボックス自体の読込遅延がズレに影響している事がわかりました。

検索ボックスパーツの一番下に置くと、その分確かにCLS数値は改善されました。

さらにSSIから外して直接HTMLソースに記述しても、表時のズレは変わらず起きる事がわかりました。

SSIのせいではなかった事になりますね。

CSSやHTMLソース上に高さを入れておく

これに対する唯一の解決策は、最初から表示領域を確保する事です。

検索ボックスコードをタグで囲む

Googleの検索ボックスのコード自体を、divタグで囲みましょう。

<div class="searchbox"> <script async src=\"https://cse.google.com/cse.js?cx=d2953301973be6a22\"></script> <div class=\"gcse-search\"></div> </div>

その囲んだ外枠クラス(.searchbox)に対して、CSSで高さを指定する訳ですね。

そうすれば読込される前に領域が確保されるので、ズレる事はないはずです。

確実に高さを反映させたいならページhead部分に直接CSSを書くか、divタグにheight="120"等の指定を入れる事です。

headタグ内CSS

<style> .searchbox { display: block; height: 120px; //最終的に表示されるに充分な高さにする事 } </style>

キモは表示領域の確保

CLS対応の一番のキモは、領域の確保です。

Google検索ボックスの表示にどれだけ時間が掛かろうと、表示がずれなければCLS数値は上がりません。

パーツの一番上に設置していても、最初から必要な高さを確保していれば下の要素がズレる事は無いのです。

BLOGにGoogle検索ボックスを利用している人は、表示領域(高さ)を確保するようにしましょう。

この記事をシェアする

一押し人気コーナー紹介

SEOカテゴリの関連記事