lazyloadのせいでCLSのスコアが悪くなる。注意点と改善方法

公開日：2024.05.02

最終更新日:2024/05/08

このページにたどりついているということは、lazyloadの設定をしていたり、CLSスコアの改善をはかっていることかと思います。

ということは、WEBの全くの素人というわけじゃなくある程度自分でソースをいじれる人達でしょう。

先日弊社クライアントからの質問で「徹底的にCore Web Vitalsのスコアアップの施策をしているけど、CLSのスコアがどうしても上がらないから見てほしい」というものがありました。

このページを見ている方なら詳しく説明しなくてもお分かりかと思いますが、Googleのスピードインサイトで計測する例のヤツです。

そのなかでCLSとはウェブページの安定性。簡単に言うとページを開いてからガタガタとページが動いていかないようにしようというものです。

例えば、ページが表示された後に画像が表示されるとその分ページの他の箇所の位置がずれるわけです。

広告が入ったページなどでどこかをクリックしようとしたら、あとから広告が表示されてきてクリックの位置がずれてしまった。みたいな経験があるひとも多いでしょう。

なんだったらそれを狙って広告の表示位置を「ダウンロード」のクリックボタン周辺に置く人もいるくらいですからね。

こういうのはユーザーにとって良くないからやめてね！こういうことが無いサイトの方が良いサイトだとGoogleは認識してるよ。というものですね。

Contents

lazyloadのせいでCLSスコアが落ちていた

該当のページを見てみると全部の画像にlazyloadが設定されていました。lazyload自体はCLSの守備範囲ではありませんが画像の遅延読み込み自体は良いことです。画面に表示していない領域の画像は読み込みませんのでその分速度は速くなります。

しかしここに大きな落とし穴がありました。

良かれと思って全部の画像にlazyloadを設定していたのです。

lazyloadはその領域が表示される際に画像が表示されるというものです。

ページを開いた瞬間に表示されるファーストビューにこれを設定してしまうと、本来一番最初に表示されないといけない画像なのに遅延の動作が入ってしまいます。

するとその画像がずれたタイミングで表示されることになり、CLSのスコアが落ちてしまいます。

ページの表示速度を上げるためにはファーストビューの画像はlazyどころか速攻で読み込む必要があります。

なので、lazyloadを設定しないだけでなく、プリロードを使って先に読み込ますようにします。

ページの<head></head>の中に以下のようなコードを書きます。

abcのところにはファーストビューで表示される画像のパスを入れます。

いかがでしたでしょうか？

該当のお客さんもこうしたウェブの事には非常に詳しい方でしたが、思わぬところで手詰まりになってしまっておりました。

同じようなことで悩んでいる方にこの記事が届くと良いなと思います。

written by 中島泰良