原因の究明も深追いもしていないので、こういう事例があるのだなーぐらいで読んでいただけると幸いです。
先日、カラーミーショップの簡易パフォーマンス改善を承り、画像の属性抜けを１つ１つ修正していました。
言わずもがなですが、img要素にwidth、height指定がなければCore Web VitalでCLSの問題が出がちですし、ファーストビュー以外の画像にはloading=lazyを指定してあげた方が良いです。
そして、トップページには上部にSlick.jsを用いた画像スライダーが配置されており、一度に複数枚表示するタイプでしたのでdecoding=asyncを指定することにしました。
カルーセルが消えた…?
画像の指定がすべて終わって表示を確認すると、おや不思議。トップに表示されるはずのスライダーがありません。
devツールで確認してみると、img要素は存在するもののなぜかheight:0 になっています。
decoding指定をやめてみると、きちんと表示され事なきを得ました。
ということは、デコードされる前の状態でslickが動作したため、要素の無い状態でカルーセルを作ってしまった => height: 0 ということでしょうか。憶測でしかありませんが。
CSSによるheight指定があれば防げたかも
限られた予算と時間 & 自分はslick.jsを使うことがない（大体swiper使う）、 ので追及しませんでしたが、CSSで予めカルーセルアイテムのサイズを指定しておけば、decodingありでも問題なく表示できたんじゃないかと予想されます。
css1行でできる、slick.jsのパフォーマンス改善
以前書いたブログのご紹介ですが、slick.jsに関してはcssを1行書き加えるだけで大きくパフォーマンスを改善することができます。
ご興味がありましたらご参考になさってください。 → 「css一行でできるCLS改善（slick.jsの場合）」
