スマホHPを読み込む際の表示のずれ(CLS)を解消します

CLSって何？Googleの新エラーについて解説します」と題してCLS（Cumulative Layout Shift）について説明しています。CLSの改善方法や表示高速化サービスについても触れており、ホームページ運営者にとって参考になる情報です。

先日、ある方からご相談をいただきました。

Googleのサーチコンソールで

 ・CLS に関する問題: 0.25 超（モバイル）

というエラーが表示されていたので、これを改善してほしい。

という内容でした。
そもそも CLS とは何なのでしょうか？

 

CLSとは

たとえば、スマホでホームページを見ている時に、リンクをタップしようとしたら、いきなり表示場所がずれて、思ったのと違う箇所をタップしたことはないでしょうか？

私は頻繁にあります（特に広告がらみで）。

たとえば、スマホであるページを開いた時にこんな文章が表示されて、【ここをタップ！】というリンクをタップしようと思いました。

┏━━━━━━━┓
┃　あいうえお　┃
┃　かきくけこ　┃
┃　さしすせそ　┃
┃　たちつてと　┃
┃　　　　　　　┃
┃ここをタップ！┃
┃￣￣￣￣￣￣￣┃
┃　　　　　　　┃
┗━━━━━━━┛

ところがタップする寸前、文章の途中に画像が読み込まれたせいで【ここをタップ！】というリンクは画面の下に押しやられて、スクロールしないと見えなくなってしまいました。

┏━━━━━━━┓
┃　あいうえお　┃
┃　かきくけこ　┃
┃┌─────┐┃
┃│　　　　　│┃
┃│　画像　　│┃
┃│　　　　　│┃
┃└─────┘┃
┃　さしすせそ　┃
┗━━━━━━━┛
│　たちつてと　│
│　　　　　　　│
│ここをタップ！│
│￣￣￣￣￣￣￣│

上記のように、ホームページで画像やYoutube動画、広告などを読み込む前と後とで、表示がずれてしまう度合いをCLS と呼んでいます。

CSL は「Cumulative Layout Shift」の略で、「累積した表示のずれ」と訳すのが良さそうです。

 

画像や動画を読み込むたびにページの表示がずれていくのは、ホームページの見やすさを大きく損ねます。

そのため、Googleが CLS の数値が0.25より大きくなっているページには、改善するようサーチコンソールで警告し始めました。

このCLSの数値は、2021年5月6月中旬から検索順位を決める要素の１つになる予定です。

ページの内容などに比べれば重要度は低そうですが、スマホで見やすいページ作りをしておくのは、お客様にとって良い事です。

 

CLSを改善するためにすべきこと

画像や動画、広告などには、できる限り「高さと幅」を指定しておきましょう。

スタイルシートで画像などの高さと幅を指定できるようになったので、ここ10年くらいは画像タグなどに

＜img src="**" height="300" width="600">

のように、高さと幅を直に書き込む必要がなくなっていました。

しかし、画像タグに高さと幅を書いておくと、画像を読み込む前から

「ここにこのサイズの画像を読み込むから場所を空けておいてね」

という事ができるようになります。

なお、パソコン・タブレット・スマホで、表示させる画像の高さと幅が違う場合もありますが、縦横比さえ合っていれば、サイズが違っていても問題ありません。

いちいち「iPadだと何ピクセルで、iPhoneXだと何ピクセルで」などと計算する必要はありませんのでご安心ください。

 

これらの作業は、Googleが用意してくれている「PageSpeed Insights」でCLSの数値を測りながら行なう必要があります。

• 自力で行なうのは難しそうだ
• CLS以外にも表示が遅いのが気になる

などの場合は、当会でHP表示高速化サービスを行なっております。

CLSの改善も表示高速化の一部として承りますので、お気軽にご相談ください。

ホームページを見る人に余計なストレスを与えないというのは、地味ですが重要なことです。

• 表示速度が遅い
• 問い合わせやメニューが分かりにくい
• 文字が小さい、行間が狭い
• 動画や音声が勝手に再生される

などの不便や迷惑を我慢しながら読み進めてくれる方は多くありません。

せっかく自社HPまでアクセスしてくれた方のために、快適に読み進めていただけるようにしておきましょう。

そのために必要な助力は惜しみません。
まずはお問い合わせください。