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

*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>

新着情報

その他
動画を全画面で表示するやり方 (VK Video Block Pro)
VK Video Block Pro の動画を全画面で表示するやり方New!!
その他
RSS Antenna で外部サイトのカスタム投稿タイプのフィードを表示New!!
Lightning G3
Lightning の投稿一覧で日付をタイトルの上に表示するやり方
VK Blocks Pro
グリッドカラムとカバーブロックを使った写真のレイアウト例
VK Blocks Pro
投稿リストを Instagram 風にカスタマイズ
Lightning G3
Lightning G3 Pro Unit 限定のニッチなプラグインを作ってみた

カルーセル

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