働く若者
働く若者
働く若者
ロゴマーク

*1 画像を読み込んでからスライダーを表示すればこの問題をクリアできる。以下の coverflow をエフェクトにしたスライダーでその方法を使っている。

Swiper によるスライダー ~ エフェクト coverflow

スコア測定結果 (5回の平均)

スコア測定結果 (5回の平均)

モバイルは【6】、パソコンは【3】が最もよいスコアが出ている。
Google のモバイルファーストに合わせるならば、【6】のやり方がいいと思う。

モバイルは【6】、パソコンは【3】が最もよいスコアが出ている。

結論

スコア向上のためには以下のことをするのがよい。

  • WebP 画像を使う。
  • スライダーのコンテナの高さを指定する。
  • スライダーでは img タグの width/height の指定はしなくてよい。

追記:さらなるスコア改善

@media (max-width: 991px) {
#site-header { height: 59px; }
}

上記の CSS を追加してヘッダーの高さを指定したら、CLS が改善されて https://lightning-g3.hp1.work/swiper-slider-6/ のモバイルのスコアで 100点 が出るようになりました。

CLS が改善されてモバイルのスコアで 100点 が出るようになりました。

画像の出し分け

スライドのHTMLソースを以下のように記述して画面幅によって画像を出し分けている。

<picture>
  <source type="image/webp" media="(min-width: 641px)" srcset="https://lightning-g3.hp1.work/wp-content/uploads/2021/04/1.webp">
  <source type="image/webp" media="(min-width: 401px)" srcset="https://lightning-g3.hp1.work/wp-content/uploads/2021/04/1s.webp">
  <source type="image/webp" srcset="https://lightning-g3.hp1.work/wp-content/uploads/2021/04/1ss.webp">
  <source type="image/jpeg" media="(min-width: 641px)" srcset="https://lightning-g3.hp1.work/wp-content/uploads/2021/04/1.jpg">
  <source type="image/jpeg" media="(min-width: 401px)" srcset="https://lightning-g3.hp1.work/wp-content/uploads/2021/04/1s.jpg">
  <img src="https://lightning-g3.hp1.work/wp-content/uploads/2021/04/1ss.jpg" alt="働く若者">
</picture>

カルーセルのHTMLソースを以下のように記述して画面幅によって画像を出し分けている。

<picture>
  <source type="image/webp" media="(min-width: 401px)" srcset="https://lightning-g3.hp1.work/wp-content/uploads/2021/04/1s.webp">
  <source type="image/webp" srcset="https://lightning-g3.hp1.work/wp-content/uploads/2021/04/1ss.webp">
  <source type="image/jpeg" media="(min-width: 401px)" srcset="https://lightning-g3.hp1.work/wp-content/uploads/2021/04/1s.jpg">
  <img src="https://lightning-g3.hp1.work/wp-content/uploads/2021/04/1ss.jpg" alt="働く若者">
</picture>

新着情報

カスタマイズ
ヘッダーのボタンをクリックすると検索窓が開くカスタマイズ例New!!
Lightning G3
[ 解決済 ] ページ内リンクの動作New!!
その他
データベース接続確立エラーが起きています
カスタマイズ
グローバルナビメニューのお問い合わせだけスタイルを変えてみました③
VK Blocks Pro
アイコンメニュー 横並び・縦並び (VK パターンライブラリ)
カスタマイズ
商品画像を使用したメガメニューのカスタマイズ事例③

カルーセル

働く若者
働く若者
働く若者
働く若者
働く若者
働く若者