CLS

[CSS] AdSense広告のCLSを改善した とりあえずのメモ

[CSS] AdSense広告のCLSを改善した

AdSense広告の読込み途中で画面ズレが生じるので、あらかじめ高さを設定するようにしました。/** 広告のCLS 改善 * */.ad-auto .ad-wrap, .ad-area .ad-wrap{ min-height:280px;}@media screen and (max-width: 480px){ .ad-auto .ad-wrap, .ad-area .ad-wrap{ min-height:calc(83vw); }}このCSSコードでは、ウェブサイト上...
2023.07.03 2024.06.22
とりあえずのメモホームページ運用
[Cocoon] カルーセル使用時のCLSを改善するために高さを計算した（calc, vw） とりあえずのメモ

[Cocoon] カルーセル使用時のCLSを改善するために高さを計算した（calc, vw）

PageSpeed Insightsで計測したときに、CLS（Cumulative Layout Shift）が「0.33（不良）」になるのが気になっていました。主な原因は、トップページで表示しているカルーセルです。CSSの calc() を使って、画面の幅からカルーセルの高さを計算することで、CLSを 0 に改善できました。カルーセルがCLSに悪影響しているCLS（画面ズレ）が起こるのは、トップページにある「カルーセル」が原因です。確かに、サイトの表示を見てみると、一度 広...
2023.07.03 2023.07.04
とりあえずのメモホームページ運用
Googleのカスタム検索ボックスの遅延表示によるガタツキをなくしたい【CLS】 インターネット小話

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

PCでページを表示したときに、サイドバーの検索バーが遅れて表示されて、画面がズレるのが気になります。遅延表示による画面のガタツキ検索バーには、Googleのカスタム検索を利用しています。サイドバーの検索ボックスの遅延表示でズレるこのように、ウェブページの画面が、後から表示される要素によってズレることを「CLS（Cumulative Layout Shift：累積的な割付の変移）」といいます。div要素のheight属性ではうまくいかずスクリプトが非同期処理で読み込まれるので、...
2021.03.22 2023.07.17
インターネット小話ニッチな話題ホームページ運用