最近、JavaScriptの遅延読み込みって、本当にSEOにいいのかなって、ぼーっと考えてて…。みんな「速くなるから良い」って言うけど、本当かなって。 🤔
速いサイトが好かれるのは、まあ、わかる。Googleも「Core Web Vitals」とか言って、ページの表示速度とか安定性をランキングの要因にしてるしね。 でも、やり方によっては、逆効果になることもあるんじゃないかな、って思うんだ。
そもそも遅延読み込みってなんだっけ？
一言でいうと、「今すぐ必要ないものは、後で読み込む」っていう考え方だね。 例えば、長いページの一番下にある画像とか。ページを開いた瞬間には見えてないんだから、スクロールしてそこまで近づいたら読み込むようにすれば、最初の表示は速くなるよね、っていう理屈。
画像だけじゃなくて、特定の機能を持つJavaScriptの塊とか、動画とか、何でも後回しにできるものは対象になる。 これで、最初の読み込みデータ量が減って、体感速度が上がる。ユーザーにとっても、サーバーにとっても、まあ、いいことだよね。
で、なんでSEOに関係あるの？
これが「Core Web Vitals」に直結するからなんだよね。 Googleが気にするのは主に３つ。
- LCP (Largest Contentful Paint): 画面の中で一番大きいコンテンツ（だいたいヒーロー画像とか）が表示されるまでの時間。 遅延読み込みで、関係ないものの読み込みを後回しにすれば、このメインコンテンツの表示を邪魔しないから、LCPが改善することがある。
- INP (Interaction to Next Paint): ユーザーがクリックとかしてから、画面が反応するまでの時間。 重いJavaScriptの処理を遅らせることで、メインスレッドがブロックされにくくなって、反応が良くなる可能性がある。
- CLS (Cumulative Layout Shift): 読み込み途中で広告とか画像が出てきて、レイアウトがガタってずれるやつ。あれの度合い。 これは…遅延読み込みで逆に悪化することもあるから、注意が必要なポイント。後で話すね。
要するに、正しく使えば、Googleが「良いサイト」と判断する指標を改善できる可能性がある、ってこと。 だからみんな「SEOに効く」って言うんだね。
でも、Googleにはどう見えてるんだろう…ここが一番大事かも
ここがちょっとした罠だと思うんだ。Googleのクローラー（Googlebot）って、僕ら人間みたいにページを「見る」わけじゃない。 まずHTMLのコードをざっと読んで、後からJavaScriptを実行して「レンダリング」っていう作業をする、二段階のプロセスを踏むことがあるんだ。
つまり、最初の段階で読み込まれないコンテンツは、Googleにすぐ認識されない可能性があるってこと。 もし遅延読み込みさせてるのが、そのページの超重要なキーワードが入った文章だったら…？ Googleは最初、そのコンテンツがないものとしてページを評価しちゃうかもしれない。これは怖いよね。 😥
あと、Googlebotは人間みたいに丁寧にスクロールしてくれない。 だから「スクロールしたら表示」っていう仕組みがうまく作動しなくて、結局コンテンツが読み込まれず、Googleに無視されちゃうっていう最悪のシナリオもあり得る。
だから、「何を」「どうやって」遅延させるかが、すごく重要になるんだと思う。
実装するときの注意点（失敗しないために）
じゃあ、どうすればいいのか。いくつか方法があるけど、個人的に気をつけてることをまとめてみた。
実装方法の比較と、個人的な感想
実装方法はいくつかあるけど、大きく分けると「ネイティブ（ブラウザ機能）」か「JavaScriptライブラリ」を使うか、だね。
| 実装方法 | やりやすさ | 個人的なコメント |
|---|---|---|
loading="lazy" 属性 |
すごく簡単 | |
| JavaScript (Intersection Observer API) | ちょっと面倒 | 「要素が画面に入ったら」を監視するAPI。 これを使えば、画像だけじゃなく、広告とかコメント欄とか、いろんなものを遅延させられる。自由度が高い分、ちゃんとテストしないと動かないとか、バグとか、まあ…色々ある。 |
| CMSのプラグイン | まあまあ簡単 | WordPressならプラグイン入れるだけ、みたいな。 中身は大体JavaScriptライブラリを使ってる。楽だけど、プラグイン同士がケンカしたり、思った通りに動かなかったりすることも。結局は中身を少し理解しないとダメかも。 |
絶対にやっちゃダメなのは、LCPになる要素…つまり、ページのメイン画像を遅延読み込みすること。 それやると、LCPのスコアが悪化して本末転倒だからね。あと、画像のwidthとheightを指定し忘れると、読み込まれた瞬間にレイアウトがガタガタになってCLSが悪化する。これもよくある失敗。
この辺の話は、海外の技術ブログ（web.devとか）でも、日本の解説サイトでも、口を酸っぱくして言われてることだね。 基本だけど、一番大事なことなんだと思う。
結局、どうするのがいいんだろうね
ここまで考えてみると、遅延読み込みは「諸刃の剣」って感じがするな…。
個人的には、画像がたくさんあるメディアサイトやECサイトなら、積極的にやる価値はあると思う。 でも、コーポレートサイトみたいな、そんなに長くないページで無理にやっても、効果は薄いし、むしろ実装ミスのリスクのほうが大きいかもしれない。
まずは、loading="lazy" を、ファーストビュー「以外」の画像にだけ設定してみる。 それでPageSpeed Insightsとかでスコアを見てみて、効果があるならそれで十分じゃないかな。JavaScriptでゴリゴリやるのは、それから考えても遅くないと思う。
結局は、ユーザーにとって表示が速くなって、Googleにもコンテンツがちゃんと伝われば、それでいいんだよね。技術に振り回されないようにしないと。うん。
みんなは遅延読み込み、どうしてる？何か気をつけてることとかあったら、教えてほしいな。💬
