lazyloadのせいでCLSのスコアが悪くなる。注意点と改善方法
公開日：
最終更新日:2024/05/08
このページにたどりついているということは、lazyloadの設定をしていたり、CLSスコアの改善をはかっていることかと思います。
ということは、WEBの全くの素人というわけじゃなくある程度自分でソースをいじれる人達でしょう。
先日弊社クライアントからの質問で「徹底的にCore Web Vitalsのスコアアップの施策をしているけど、CLSのスコアがどうしても上がらないから見てほしい」というものがありました。
このページを見ている方なら詳しく説明しなくてもお分かりかと思いますが、Googleのスピードインサイトで計測する例のヤツです。
そのなかでCLSとはウェブページの安定性。簡単に言うとページを開いてからガタガタとページが動いていかないようにしようというものです。
例えば、ページが表示された後に画像が表示されるとその分ページの他の箇所の位置がずれるわけです。
広告が入ったページなどでどこかをクリックしようとしたら、あとから広告が表示されてきてクリックの位置がずれてしまった。みたいな経験があるひとも多いでしょう。
なんだったらそれを狙って広告の表示位置を「ダウンロード」のクリックボタン周辺に置く人もいるくらいですからね。
こういうのはユーザーにとって良くないからやめてね！こういうことが無いサイトの方が良いサイトだとGoogleは認識してるよ。というものですね。
Contents
lazyloadのせいでCLSスコアが落ちていた
該当のページを見てみると全部の画像にlazyloadが設定されていました。lazyload自体はCLSの守備範囲ではありませんが画像の遅延読み込み自体は良いことです。画面に表示していない領域の画像は読み込みませんのでその分速度は速くなります。
しかしここに大きな落とし穴がありました。
良かれと思って全部の画像にlazyloadを設定していたのです。
ファーストビューの画像にはlazyloadを設定しないで！
lazyloadはその領域が表示される際に画像が表示されるというものです。
ページを開いた瞬間に表示されるファーストビューにこれを設定してしまうと、本来一番最初に表示されないといけない画像なのに遅延の動作が入ってしまいます。
するとその画像がずれたタイミングで表示されることになり、CLSのスコアが落ちてしまいます。
ファーストビューの画像はむしろ先に読み込んで！
ページの表示速度を上げるためにはファーストビューの画像はlazyどころか速攻で読み込む必要があります。
なので、lazyloadを設定しないだけでなく、プリロードを使って先に読み込ますようにします。
preloadの記述方法
ページの<head></head>の中に以下のようなコードを書きます。
- <link rel=”preload” href=”/images/abc.png” as=”image”>
abcのところにはファーストビューで表示される画像のパスを入れます。
まとめ
- lazyloadはファーストビューの画像には設定しない
- ファーストビューの画像は逆にpreloadを使って先に読み込む
いかがでしたでしょうか？
該当のお客さんもこうしたウェブの事には非常に詳しい方でしたが、思わぬところで手詰まりになってしまっておりました。
同じようなことで悩んでいる方にこの記事が届くと良いなと思います。
Categorised in: SEO | 検索エンジン対策, ホームページ制作
