今までJavaScriptを用いて画像の遅延をおこなっていましたが、Google Chromeより「loading=”lazy”」が実装された為、loading=”lazy”の使い方に関して解説していきます。
実装方法
<img src="○○.jp" alt="○○" loading="lazy">
loading=”lazy”を<img />タグ内に記載するだけで、遅延をおこなうことができます。 <img>タグだけではなく、<iframe>タグにも反応するので、YouTubeやGoogle Mapsにもloading=”lazy”を記載することで遅延することができます。 loading属性にはその他にも
- loading=”eager” 遅延を設定せず、従来通りの読み込み方法
- loading=”auto” ブラウザによって遅延するかどうかを判断
があり、用途次第で設定を変更することが可能です。
SEOとの関係性は？
Core Web Vitals（コア ウェブ バイタル）が2021年に控えている中で、ページの表示速度は大きく関係してきます。 PageSpeed Insightsの項目でも「オフスクリーン画像の遅延読み込み」という項目があり、loading=”lazy”をおこなうことで改善され、表示速度も上がってきます。 PageSpeed Insights ページの表示に時間がかかると悩まれている方はPageSpeed Insightsでページを調べ、「オフスクリーン画像の遅延読み込み」の項目に該当する画像があれば、loading=”lazy”を試してみてください。 WordPressの方はインストールするだけで自動で反映されるプラグインをGoogleが公開しています。 Native Lazyload ただ、使われているテーマやプラグインによっては反映されない場合もありますので、注意してください。
