loading=”lazy”の実装方法を解説！

これまでJavaScriptを用いて画像の遅延読み込みを行っていましたが、Google Chromeが「loading="lazy"」をサポートしたことにより、今後はこの方法を用います。

今回は、「loading="lazy"」の使用方法について詳しく解説します。

imgタグだけでなく、iframeタグにも対応していますので、YouTubeやGoogle Maps等にも「loading="lazy"」を記載することで遅延読み込みを行うことが可能です。

loading属性にはその他にも

があり、用途次第で設定を変更することが可能です。

2021年5月に実施された「Core Web Vitals（コア ウェブ バイタル）」では、ページの表示速度が大きく重視されています。

PageSpeed Insightsの評価項目の一つ、「オフスクリーン画像の遅延読み込み」においては、「loading="lazy"」を適用することで改善し、結果的に表示速度も向上します。/p>

自社のウェブサイトやページをPageSpeed Insightsで評価し、「オフスクリーン画像の遅延読み込み」の項目で問題が指摘された場合には、「loading="lazy"」の適用を試みてみてください。