2021 GIANT ESCAPE LAB. » 未分類 » CLS(Cumulative Layout Shift) 改善

125
Core Web Vitalsの1つである画像の読み込みを遅らせてブログ、サイトの表示速度を疑似高速化するlazysizes等の遅延表示機能によって発生する表示レイアウトのズレを数値化したCLS(Cumulative Layout Shift)の改善方法を紹介



文字サイズ調整



PageSpeed InsightsでCLSを確認

CLS改善方法
CLSはCore Web Vitals(コアウェブバイタル)として新たに登場した検索順位に影響のあるLCP、FID、CLSの3つの指標の内の1つ。 Googleサーチコンソールにある「ウェブに関する主な指標」で確認すると、対策されていないブログは「不良」もしくは「改善が必要」のオンパレードで、無料ブログの当FC2ブログはPC、モバイル共に全ての記事ページが不良の判定。 スクリーンショットはCLS改善後のものもありますのでご了承下さい(´・ω・`)

CLS 改善方法
不良と判定されたCLSを改善するのに使用するのはPageSpeed Insights。 適当なページURLを入力してモバイルのラボデータを確認すると、表示画面のレイアウトのズレを数値化したCLS(累積レイアウト変更)の値と、レンダリング中のスクリーンショットが確認できます。 ラボデータはあくまでファーストビュー(最初の画面)内だけで合格、不合格を判定している数値なので、実際にページをスクロールさせていけばより悪い(高い)数値が出ます

CLS 改善 方法
CLS改善

(´・ω・)_/ lazysizes(画像の遅延表示機能)の影響で実際にどこがズレるか分かるPageSpeed Insightsでのレンダリング中の画像表示直前直後を並べたスクリーンショットがこちら。 画像はlazysizesによって遅延表示されるため、先に軽量ダミー画像とテキストが表示され、遅れてメインの画像が表示されます。 2つの画面を比較すると、先に表示されたテキストがメイン画像の表示と同時に少し上にズレます。 これがコアウェブバイタルのCLSとして計測されている最初に表示された位置からズレるレイアウトの移動で、ユーザーの誤クリックを誘発したり、不快に感じる要素なのでCLS(Cumulative Layout Shift)を改善してねと言うのがGoogleサーチコンソールからの警告

CLS 改善
(´・ω・)_/ レイアウトがズレる原因を探ってCLSを改善すべく、試しに画像を表示する直前の画面に90度回転させた同じ画像を合成してみると、アスペクト比(縦横の比率)4:3の画像の横幅だったものが、高さ部分にピッタリ収まります。 従って、lazysizes(画像遅延機能)等を使用すると画像の横幅を基準にブラウザが画像を表示するためのスペースをアスペクト比1:1で確保してしまう事がレイアウトがズレる原因と判明

CLSの改善方法

CLS改善方法
PageSpeed InsightsでのモバイルのCLSの算出方法は分かりませんが、PCでのCLSの数値はおよそ0.025前後。 これはアスペクト比4:3の画像を1:1の画像表示スペースとして確保すると不足する25%分と考えると、CLSの値とほぼ一致します。 試しに3:2の画像に入れ替えると0.033前後に変わるので、画像表示スペースをアスペクト比1:1で確保しないように何らかの方法で画像の高さ情報をブラウザに伝える事がCLSの改善方法になります

<a href="画像URL" target=”_blank” rel=”noopener”><img class="lazyload" src="軽量ダミー画像URL" data-src="画像URL" alt="画像説明" width="画像の幅"></a>
(´・ω・)_/ Chrome標準機能となったloading="lazy"ではなく、lazysizes、lazyload等で画像の遅延表示をしている場合のSEOを考慮したFC2ブログの画像表示部分の中身は大体こんな感じ。 画像の表示サイズはwidth(画像の幅)しか指定されていません

<a href="画像URL" target=”_blank” rel=”noopener”><img class="lazyload" src="軽量ダミー画像URL" data-src="画像URL" alt="画像説明" width="画像の幅" height="画像の高さ"></a>
不足していたheight(画像の高さ)を追加してレイアウトがズレるかどうかPageSpeed Insightsで検査してみましたが、CLSは改善せず数値も一切変わらず

<a href="画像URL" target=”_blank” rel=”noopener”><img class="lazyload" src="ダミー画像URL" data-src="画像URL" alt="画像説明" style="width:画像の幅px;height:画像の高さpx"></a>
続いてamazonのバナー等に使用されているstyleで画像の幅と高さを指定

CLS 改善方法
CLS(Cumulative Layout Shift)が改善され、レンダリング中のスクリーンショットでもテキストが画像の表示と同時に上にズレる事なく、累積レイアウト変更もゼロになりましたが、画像がおかしな事に

CLS 改善 方法
CLS改善

(´・ω・)_/ 正常にアスペクト比4:3で表示されている右の画像と比較すると、styleでheight(画像の高さ)を指定した左の画像は横幅だけ縮小されたアスペクト比1:1の歪んだ画像としてレンダリングされてしまい、CLSが改善するも完全な失敗。 となると、画像がレンダリングされていない段階でアスペクト比を維持しておく必要があるので、テンプレートのCSSに以下を追加

.asp {
width:100%;
height:0;
position:relative;
overflow:hidden
}

.asp img {
width:100%;
height:100%;
top:0;
left:0;
object-fit:cover;
object-position:center;
position:absolute
}
(´・ω・)_/ アスペクト比関係と分かるようにaspとしていますが、aspectでも何でも任意の文字でOK

<div style="max-width:画像表示幅px"><div class="asp"style="padding-bottom:calc(3/4*100%)"><a href="画像URL"><img class="lazyload"src="軽量ダミー画像URL"data-src="画像URL"alt="画像説明"></a></div></div>
(´・ω・)_/ 記事内の画像幅はmax-widthで指定するのでこれまで使用していたwidth="画像の幅"部分は削除し、前後を上記の通り2つの<div>で囲んで追記。 アスペクト比4:3の画像なので3/4と指定していますが、3:2なら2/3。 16:9なら9/16。 スクリーンショット等の場合はアスペクト比が一定ではないので約分するか、素直に元画像の幅と高さを入れます

(´・ω・)っ コピペはこちら

CLS 改善
PageSpeed InsightsでCLSの改善とアスペクト比が維持されているかテストすると、CLS(累積レイアウト変更)は改善してゼロ

CLS改善方法
CLS 改善方法

画像が表示される直前のスペースも4:3のアスペクト比で確保され、遅れて表示された画像もアスペクト比4:3で問題無くレンダリング(目の錯覚で画像表示前のテキスト部分が若干上にあるように見えています)


Web Vitals Crome拡張でCLSの最終チェック

CLS 改善 方法
上記はあくまでPageSpeed Insightsでファーストビュー内のCLSを測定しただけのラボデータ。 Googleサーチコンソール内のウェブに関する主な指標にある

  • CLS に関する問題: 0.25 超
  • CLS に関する問題: 0.1 超

を合格するには実際のCLSの測定に必要なGoogle Chromeでブログページを閲覧した訪問者からのデータが必要になりますが、自身で閲覧したデータでも問題ないので、CLSの最終チェック用にCore Web Vitalsを測定できるCrome拡張を導入します

CLS改善
インストールするとGoogle Chromeメニューバー右端にCrome拡張の四角いアイコンが出現するので、あとはCLSを改善したページをスクロールしていく事でリアルタイムにCLSを含むCore Web Vitalsの3つの指標

  • LCP(Largest Contentful Paint)
  • FID(First Input Delay)
  • CLS(Cumulative Layout Shift)

を全て計測可能

CLS 改善
導入したWeb Vitals Chrome拡張でページ下部までスクロールしてリアルタイムにCLSをチェックした結果、CLS(Cumulative Layout Shift)は0.000とレイアウトのズレは計測されず、四角いアイコンは合格範囲内の0.1以下である事を示すグリーンに。 0.001と出る場合もありますがおそらく誤差で、レイアウトがズレると予想していたページのロード中に超高速でスクロールさせても問題なく、リアルタイムでのCLSも改善した事を確認

CLS改善方法
比較対象としてCLS改善済みらしいワードプレスのブログをロード中に超高速スクロールさせてみたところ、アイコンがCLSの不良とされる0.25超を示すレッド判定になる事から、FC2ブログに導入したCLSの改善方法はかなり優秀と判明。 ページをロード中に超高速で下までスクロールさせるのは、目的部分がページ下部にあるか、本文を読まずにコメントエリアへ進むための閲覧スピード。 CLSの改善が不完全なサイトは、こうした嫌がらせ的な高速スクロールによってすぐには合格しない可能性があります(´・ω・`)

CLS 改善方法
Googleサーチコンソール内のウェブに関する主な指標から更に進んだ先にあるページURLをクリックすると、訪問者がGoogle Chromeで実際に閲覧した際のCLSのデータを集めたCLS(集計値)が表示されます

CLS 改善 方法
ページを閲覧した際のCLSを日々集計した数値なので、当FC2ブログは4日前後で0.01づつCLS(集計値)が下がって行き、レイアウトが一切ズレていない事を証明する最高値の0.00に達するまでおよそ1ヵ月程でした

CLS改善
サーチコンソールのウェブに関する主な指標のグラフでもCLSが全記事良好に改善した事を確認。 このCore Web VitalsのLCP、FID、CLSの集計値。 基本的にChrome拡張のWeb Vitalsをインストールしていない閲覧者のデータで改善が進んでいくため、Web Vitals Crome拡張はコアウェブバイタルの計測データを可視化するだけのCrome拡張。 Core Web Vitals(コアウェブバイタル)の計測データ含め、Google Chromeは裏で検索履歴や個人情報等いろいろなデータを日々許可なくデータセンターに送り続けているので、普段は別のブラウザを使い、Chromeを使用するのはこういったチェックが必要な時くらいに控えておいた方が賢明です

SSL化(https化)から始まり、レスポンシブデザイン(スマホでもPCでも同じように表示されるテンプレート)、Lazyload(画像の遅延表示)、Core Web Vitalsと、ワードプレスならともかく、無料のFC2ブログ、ライブドアブログ、アメブロ等は膨大な改善作業を度々求められる近年。 永遠に続きそうな気配なので、ブログを続けていく方はHTMLやCSSだけでも勉強して生き残れるようになりましょう(´・ω・`)

この記事をチェックした人はこんな記事もチェックしています

コメント

非公開コメント

いつもこちらにもご訪問いただき有難うございます!

ブログなどの表示設定を細かく調整するのって私には非常に難しくて@@;いろいろ出来る方は尊敬です^^;♪
有料ドメインが11月末で切れるので、今までの中身を他所に移動中です。いろいろこだわれればもっと充実させられるのになあと思いつつそこまでの技術がないので、単なるコピペに終わっております…(汗)。

Re: いつもこちらにもご訪問いただき有難うございます!

畑かぶらさんコメントありがとうございます。 ブログ始めた当初は右も左も分かりませんでしたが、手始めにテンプレートのCSSにある数字を少し変更して、ブログのどこに変化があるのかプレビューで確認 ↔ 変更の繰り返しでしたので、チャレンジし続けるのが大事と思います。 基本的には調べてコピペ。 ダメな所や好みでなければ改良です ^^;