スポンサーリンク
スポンサーリンク

Googleのカスタム検索ボックスの遅延表示によるガタツキをなくしたい【CLS】

PCでページを表示したときに、サイドバーの検索バーが遅れて表示されて、画面がズレるのが気になります。

スポンサーリンク

遅延表示による画面のガタツキ

検索バーには、Googleのカスタム検索を利用しています。

サイドバーの検索ボックスの遅延表示でズレる
サイドバーの検索ボックスの遅延表示でズレる

このように、ウェブページの画面が、後から表示される要素によってズレることを「CLS(Cumulative Layout Shift:累積的な割付の変移)」といいます。

div要素のheight属性ではうまくいかず

スクリプトが非同期処理で読み込まれるので、読み込みが完了すると、div要素(gcse-searchbox-only)に検索バーが埋め込まれます。

ウィジェットのカスタムHTMLのコード
ウィジェットのカスタムHTMLのコード

このタイミングのずれで、表示がガタついています。

上記に見えるようにdiv要素に直接 高さを指定していたのですが、うまくいっていません。

styleタグで指定したらうまくいった

styleからブロックの高さを指定したところ、ちゃんと余白にすることができました。

サイドバーの検索ボックスの遅延表示でもズレない
サイドバーの検索ボックスの遅延表示でもズレない
<div class="gcse-searchbox-only"></div>

<script async src="https://cse.google.com/cse.js?cx=XXXXXXXXXXXXXXXX"></script>

<style>
	.gcse-searchbox-only {
		display: block;
		height: 60px;
	}
</style>
QRコードを読み込むと、関連記事を確認できます。
タイトルとURLをコピーしました