[ 解決済 ] 【機能追加要望】CLSスコアの改善

[所信浩]

■ 利用テーマとバージョン : Lightning Pro + Fort 2021/3/4時点の最新バージョン

■ 質問内容：
Core web vitalのCLSスコアが非常に悪くて、改善したいと考えています。
VectorさんのWebサイトや制作事例のWebサイトもCLSスコアがよくないです。そのため、CLSスコアが悪いのはテーマに起因していると思われます。

GoogleアルゴリズムでCore web vitalが重要になるということもあるので、CLSスコアが改善されるようにアップデートしていただければ幸いです。

[石川＠Vektor,Inc.]

Lightningのご利用ありがとうございます。株式会社ベクトルの石川と申します。
ご意見ありがとうございます。
すぐには対応できませんが今後の検討課題とさせていただきます。

今後ともLightningをよろしくお願いいたします。

[所信浩]

石川様

ご返信ありがとうございます。今後、ご対応いただけることを期待しています。
よろしくお願いいたします。

[対馬 俊彦]

横からすみません。

私の作業用サイトで検証してみたところ、
CLS スコアの数値を上げている主な原因はスライドショーであることがわかりました。
(すでにお気づきだったかもしれませんが…)

スライドが1枚だけのサイトであればスライドショーは不要なので、
スライドショーを Outer ブロックに置き換えてスコア測定してみたところ、
以下のような劇的な改善を図ることができました。

サイト1. https://lightning-fort.hp1.work/
Lightning 標準のスライドショーでスライドを1枚表示しています。
CLS スコア 0.274

サイト2. https://lightning-variety.hp1.work/
Lightning 標準のスライドショーを非表示にして、Outer ブロックを配置してあります。
CLS スコア 0

所信浩様のサイトもスライドが1枚だけなので、お試しいただくとよいと思います。

[所信浩]

対馬様

お世話になります。所です。
大変有意義なアドバイスありがとうございます。
スライドショーは必要なかったので、非表示にするとトップページはCLSスコアが大幅に改善されました。

他のページはまだまだスコアが悪いのですが、サイドバーの固定設定もCLSスコアによくないみたいでした。引き続きCLSスコアの改善について調査してみます。

ありがとうございました。

[momo]

私も参考になりました。
ありがとうございます。

[対馬 俊彦]

スライドが1枚だけのサイトであればスライドショーは不要なので

と書きましたが、スライドショーが必要なケースの方が多いと思いますので、
スライドショーを使ったトップページで Cumulative Layout Shift (CLS) スコアを
改善できるかどうかやってみました。

■■■ 結論 ■■■

CLS スコアを大幅に改善することができました。

■■■ CLS スコアが悪くなる理由 ■■■

トップページが表示され始めたときにはスライドショーがまだ表示されていなくて、
その後にスライドショーが割り込んで表示されるような動きをするために、
最初に表示されたコンテンツが下方向にシフトしてしまう (Layout Shift が発生する)。

添付画像をご覧ください。

■■■ Layout Shift が発生しないための対策 ■■■

img 要素の height 指定と同じように、
CSS でスライドショーの高さを指定(確保)すればよい。

■■■ 具体的な対策手順 ■■■

スライドショーの高さは画面幅に応じて変動しますので、
固定数値による指定はできません。

そこで、トップページの [カスタム CSS] に以下の行を追加しました。

@media (min-width: 768px) {
.carousel { height: calc( ( 100vw - 20px ) * ( 600 / 1900 ) + 1px ); }
}
@media (max-width: 767px) {
.carousel { height: calc( 100vw * ( 500 / 1000 ) + 1px ); }
}

• パソコン用の 20px はスクロールバーの幅です。
  ブラウザーによってこの幅は違いますので、余裕を持って 20px にしました。
  このためスライドの下がわずかに欠けることがありますが、誰もそのことに気がつかないと思います。
• 600 / 1900 はパソコン用のスライド画像のピクセルサイズです。
  500 / 1000 はモバイル用のスライド画像のピクセルサイズです。
• 最後の + 1px は border-bottom の分です。

■■■ 改善された CLS スコア ■■■

検証用サイト https://lightning-fort.hp1.work/ で上記の対策を行った結果、
CLS スコアを以下のように大幅に改善できました。

【モバイル】0.367 ⇒ 0.026
【パソコン】0.255 ⇒ 0.054

Attachments:

You must be logged in to view attached files.

[投稿者]

投稿