slick.jsで画像のカルーセルをつくるとき、decoding属性があると表示されなかった話

原因の究明も深追いもしていないので、こういう事例があるのだなーぐらいで読んでいただけると幸いです。

先日、カラーミーショップの簡易パフォーマンス改善を承り、画像の属性抜けを１つ１つ修正していました。

言わずもがなですが、img要素にwidth、height指定がなければCore Web VitalでCLSの問題が出がちですし、ファーストビュー以外の画像にはloading=lazyを指定してあげた方が良いです。

そして、トップページには上部にSlick.jsを用いた画像スライダーが配置されており、一度に複数枚表示するタイプでしたのでdecoding=asyncを指定することにしました。

TOC

カルーセルが消えた…?

画像の指定がすべて終わって表示を確認すると、おや不思議。トップに表示されるはずのスライダーがありません。

開発者モードで確認してみると、img要素は存在するもののなぜかheight:0 になっています。

decoding指定をやめてみると、きちんと表示され事なきを得ました。

ということは、デコードされる前の状態でslickが動作したため、要素の無い状態でカルーセルを作ってしまった => height: 0 ということでしょうか。憶測でしかありませんが。

限られた予算と時間 & 自分はslick.jsを使うことがない（大体Swiper使う）、ので深く追及する必要はないと判断しましたが、CSSで予めカルーセルアイテムのサイズを指定しておけば、decodingありでも問題なく表示できたんじゃないかと予想されます。

以前書いたブログのご紹介ですが、slick.jsに関してはcssを1行書き加えるだけで大きくパフォーマンスを改善することができます。

ご興味がありましたらご参考になさってください。　