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

*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 Blocks Pro
VK Blocks Pro 1.49.0 の新機能「カスタムブロックスタイル設定」New!!
VK Blocks Pro
カスタマイズ
投稿リストのカスタマイズ例 (VK Blocks Pro)
Lightning G3
フルサイズのアイキャッチ画像を投稿のページヘッダー背景画像に使うには
VK Blocks Pro
カスタマイズ
投稿リスト「テキスト1カラム」に抜粋を表示したカスタマイズ例
VK Blocks Pro
VK Blocks Pro 1.48.0 の新機能「カスタム書式設定」が超便利ですご過ぎる
VK Blocks Pro
VK Blocks Pro の投稿リストの先頭の投稿を大きく表示したカスタマイズ例

カルーセル

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