CLS(Cumulative Layout Shift)を改善するべくimgタグにwidthとheight属性を追加して、Loading画像を用意したのに、まだ目視でレイアウトのズレが発生していました。 1stビューのコンテンツにCSSがレンダリング直後には効いていないために発生していることが原因でした。 なんでCSSが効かないかといいますと、WEB表示速度改善の対策で、CSSの一部を遅延読み込みさせていたことが原因です。 ↑この時にやった対策がね、CLSの足かせになるとは思いもよらなかったですね。 CLSの発生個所 CSSをインライン化してCLSをなくす CSSの遅延読み込みを行う要素を見直して、ファーストビューに使われるCSSはもちろん、共通で使うCSSをすべてインライン化しました。 外部読み込みしてるCSSを全部インライン化してやろうかと思ったんですけど、そうすると無駄なCSSの読み

コアWEBバイタルの1つであるCLS(コンテンツのズレ)を改善する方法を解説。 imgタグにwidthとheightを指定したのですが、それでもズレが発生。 なぜかを突き詰めたらLazy Loadの画像が原因でした。 それも修正する方法！ 公開日： 2020-08-30 00:44:24 最終更新日： 2022-06-29 04:03:00 商品リンクにアフィリエイト広告を利用しています CLS対応と高速表示でPageSpeed Insightsと Google Search Consoleのウェブに関する主な指標を改善 Webマスター必須のツール。「Googleサーチコンソール」にあらたな指標が加わり、ユーザーにとって快適なWEBサイトの指標が増えました。 コアウェブバイタルと呼ばれ、「LCP」「FID」「CLS」という3つの指標が登場。 サイトに色々と手を加えて、この指標を改善させるべ