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

VWSとは フォーラム バグ報告と提案 [ 解決済 ] 【機能追加要望】CLSスコアの改善

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

タグ: 

7件の投稿を表示中 - 1 - 7件目 (全7件中)
  • 投稿者
    投稿
  • #49047

    所信浩
    参加者

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

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

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

    #49048

    石川@Vektor,Inc.
    キーマスター

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

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

    #49049

    所信浩
    参加者

    石川様

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

    #49073

    対馬 俊彦
    参加者

    横からすみません。

    私の作業用サイトで検証してみたところ、
    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枚だけなので、お試しいただくとよいと思います。

    #49087

    所信浩
    参加者

    対馬様

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

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

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

    #49089

    momo
    参加者

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

    #49114

    対馬 俊彦
    参加者

    スライドが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.
7件の投稿を表示中 - 1 - 7件目 (全7件中)
  • このトピックに返信するにはログインが必要です。