slick.jsとPageSpeed Insightsのどうのこうの。
「レイアウトが大きく変わらないようにする」とは
PageSpeed Insightsの改善項目の一つ。
原因箇所のスクショが合わせて貼られてる。
例えば重くて大判な画像を貼ってたとして、読み込みから表示まで時間が掛かるわけで。画像のロード中は高さが0→表示完了時に画像分ページの長さが増える、コンテンツの位置が画像の高さ分ずれる。「レイアウトが大きく変わらないようにする」ではそういうのを指摘してる。ハッシュタグ付リンクとかでページ中腹からスタートしたときにズレたり、地味に影響してくる。
これとslick.jsが絡むとちょっとだるい。
slick.jsのだるさ、対策
slick.jsの反映まで画像が縦並びになったり、縦並びを対策しても表示まで高さが0だったり、PageSpeedInsight以前に視覚的にもストレスだったりする。
画像を軽量化させて完了までを早くするだけでは対策にならなかったし、限界がある。
じゃあどうするか。
他責にしやがる
slick.jsのせいでずれ込んでるのに、判定はslick.jsの下の要素が原因として挙げるケースがある。
半端に高速化が為されて視覚的によくわからん場合、調査がだるくてとてもよろしくない。
入れ子にしてやっていく
youtubeの埋め込みをレスポンシブにする感じで、ラッピング要素でサイズを指定してしまう。
横：縦が2：1のスライダーだったとして。
<div class="wrap">
<div class="slider">
︙
</div>
</div>こう。
.wrap{
width: 100%;
height: 0;
padding-top: 50%;
position: relative;
}
.slider{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}slick.jsが表示されてなくても領域は確保できる。なのでズレない。読み込み中の無の代わりに背景に薄い色を置くだけでも割りとマシになる、個人的に。
これを仕込みつつ、画像を軽量化させて完了までを早くするなど。
スライダーの縦横比が横を1としたときに縦が割り切れる数値だったら良いんだけど、画像のアス比なり、ページ幅いっぱいに設置して左右ちら見せにするなりでめんどくさい感じになるようだったら切り上げてちょっと長めにしておけば基本的には問題ない。上下に隙間なくピッチリはめ込みたい場合はラッピング要素だけでなくslick.js側の調整も頑張ることになる。
slick.jsは控えたほうがいいかもしんない
ユーザー補助の項目で、.slick-trackやらを対象にしてARIA関係の指摘が入る。
slick.js側で出力する項目なので、追っかけで中身をいじれない。本体をカスタマイズしなきゃいけない可能性が出てくる。CDNだと無理だし、バージョンアップに対応できないのもしんどい。点数を稼ぎたかったら別の手段を取ったほうがいいかも。
コメント