Web制作時に便利!! 「CLSに関する問題」のズレをアニメーションで表示するWeb『Layout Shift GIF Generator』

PageSpeed InsightsのWebの問題、
「CLSに関する問題」の実際のズレを可視化できる
Web制作に便利過ぎるWebサービス。
実際のズレをアニメーションで表示、問題解決に繋がります。

リンク先

Layout Shift GIF Generator リンク先はこちらから

使い方

使い方は簡単でまずは調べたいページのURLを入力します。
次にMOBILE、DESKTOPで調べたい環境を選択します。
選択が出来たらGENERATEボタンをクリックします。

しばらくするとCLSのズレ部分がアニメーションで表示されます。
実際のWebページの画面でどの部分がどのようにズレるのかが分かりやすくなります。
私の場合、あれこれとこのブログの高速化をしていてCLSに関する問題が発生するようになりました。
私の場合はサイドバー部分のWidthプロパティが後から読み込まれてる為に
Content部分全体がズレて読み込まれているようです。
画面上部にはCLSのスコアも表示されます。

CLSが0.1以上になるとアニメーションされる枠がオレンジ色となり警告になります。
この場合はすぐに対処が必要となってきます。

あれこれと調整、修正をしてCLS 0.000と全くズレない状態となりました。
PageSpeed Insightsでも場所の確認は出来ますが、どこがどのようにズレているのか
という動きまでは見えないので、このWebサービスでアニメーションで表示してくれるのは
解決まで早くなります。

実際にアニメーションで表示されている所を動画にしてみました。
すごい分かりやすいですよね。
CLSに関する問題を早く解決できそうなWeb制作に便利なWebサービスです。