CLS(Cumulative Layout Shift )の原因確認と改善方法は？avif jpg 変換 一括

今回はCLSについて、原因と改善策を解説します。

CLSとはWebサイトの健全性・使いやすさを示す重要な指標です。

優れたユーザー エクスペリエンスを提供するためには、ページの CLS(Cumulative Layout Shift )を 0.1 以下に維持する必要があります。

検索順位の要因に組み込まれることをGoogleは発表しています。つまりSEOに関係してきます。

いくらページエクスペリエンスが優れていても、コンテンツが優れたページを上回ることはありません。ただし、関連性が同程度のページが多数存在する場合の検索ランキングにおいては、このページ エクスペリエンスが一段と重要になります。

引用：Google Developers

[ad2]

CLS(Cumulative Layout Shift )とは

視覚的な安定性を測定するための指標です。優れたユーザー エクスペリエンスを提供するためには、ページの CLS(Cumulative Layout Shift )を 0.1 以下に維持する必要があります。視覚的な安定性を測定するための指標です。

[ad2]

CLSが低下する原因

CLS低下原因

CLSが低下する要因として、次のような原因が考えられます。

ページを読み込みだしてから、初めに文字が表示され、遅れて画像が表示されることで文字(テキストテキスト…)の位置がズレてしまいます。

みなさんも経験したことがあるかと思いますが、これがレイアウトシフトと呼ばれる現象で、表示されているコンテンツのレイアウトがズレることを指します。

・広告（Google Adsenceなど）

・その他JavaScriptによって動的に挿入される要素

・フォントファイルが適用されることによるずれ

・サイズの指定がされていない画像や広告が埋め込まれている

・JavaScriptによってコンテンツが動的に埋め込まれている

・Webフォントの読み込み

私の場合はインスタグラムが原因となっていたようです、

確認方法

PageSpeed Insights

改善方法：Chrome Dev ToolsのLighthouseで簡単に調べる

Lighthouseとは

Google Chrome 60からデベロッパーツールのAuditsタブからLighthouseが簡単に実行できるようになっているので使い方を見ていくことができます。

Chrome89で日本語化されています。

Lighthouseとはウェブページの品質改善の指針を「パフォーマンス」、「PWA」、「アクセシビリティ」、「ベストプラクティス」、「SEO」点でチェックしてくれるツールとなります。

なにがパフォーマンスが悪いとわかります。

「WebP や AVIF などの画像形式は、一般的に PNG や JPEG より圧縮率が高く、ダウンロード時間やデータ消費量が抑えられます」と表示されました。

Google Search Console

Google Search Consoleを導入していれば、エクスペリエンスのウェブに関する主な指標からチェックすこともできます。

改善方法

CLS改善方法

画像は常にwidth要素とheight要素でサイズを指定

cssアスクペクト比率を使って画像が表示される前から予定する画像領域を確保することも有効です。

style.cssなどに追加してみてください。下記は例です。

CSS トランジションを対処

滑らかな表示がしたい場合に transition を使っていることもあります。

これを使っていると後から遅れてレイアウトが変更されるのでひっかかってしまう．

広告表示領域を予約する

広告の表示範囲を指定することも、画像と同じで有効的です。

しかし、広告を最大サイズで予約をすると空白ができる可能性があり、結果的にユーザーに違和感を与えることに繋がってしまいますので注意が必要です。

Webフォントの使用を最小限に抑える

Webフォントとは、あらかじめWebサーバー上に置かれているフォントデータのことで、インターネット上で配布されているフォントデータ自体を読み込んで利用します。

ユーザー側の閲覧環境に影響されず、サイトの製作者が意図したとおりのデザインで閲覧してもらえるというメリットがあります。

次世代フォーマットでの画像の配信（.webp）など

Webサイトで使用されている画像はJPG、GIF、PNGなどが一般的です。

しかしGoogle PageSpeed Insightsでは、JPEG 2000、JPEG XR、WebP などの画像フォーマットの使用が、ページの表示速度向上に繋がると推奨されます。

WebPは、Googleが開発している静止画フォーマットがおすすめです。一括で変換できるプラグインがあります。

ファイルの拡張子は「.webp」となります。JPEGやPNGをそれぞれ30％程度圧縮できるといわれています。

まとめ

対策の方法はLighthouseやPageSpeed Insightsで何が原因であるのかしっかりとつかむことがあります。CLSが改善されたと思ったら別の指標が悪くなることもあります。

あわせて読みたい

Microsoft Clarityとは？使い方を解説！デメリットは！ 『Microsoft Clarityの設定方法と使い方』を解説していきます。 無料なのが信じられないほど高機能なヒートマップツールです。Clarityでできることとして第一に、ヒート…

関連記事:

ヒートマップ分析『Clarity』で離脱率（スクロール率やクリック率）確認や改善するには？ Microsoft Clarityとは？使い方を解説！デメリットは！ 【WEBサイト】ヒートマップ仕組み？ 使い方や分析方法の統計を色でみる？ クロスブラウザチェックのツールは？マルチブラウザ対応！メリット！試験項目方法の対応 ドメインエイジ（年齢）とは？調べ方！SEO効果!ドメインチェッカーでドメイン取得日がわかる！Whoislookup確認！ シミラーウェブSimilarWebとは？使えない？キーワード分析！無料での使い方！信頼性は？見方は？分析方法を紹介