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

今までJavaScriptを用いて画像の遅延をおこなっていましたが、Google Chromeより「loading=”lazy”」がサポートされた為、loading=”lazy”の使い方に関して解説していきます。

loading=”lazy”をimgタグ内に記載するだけで、遅延をおこなうことができます。

imgタグだけではなく、iframeタグにも反応するので、YouTubeやGoogle Mapsにもloading=”lazy”を記載することで遅延することができます。

loading属性にはその他にも

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

Core Web Vitals（コア ウェブ バイタル）が2021年5月におこなわれた中で、ページの表示速度は大きく関係してきます。

PageSpeed Insightsの項目でも「オフスクリーン画像の遅延読み込み」という項目があり、loading=”lazy”をおこなうことで改善され、表示速度も上がってきます。

PageSpeed Insightsで自社サイト、自社ページを確認し、「オフスクリーン画像の遅延読み込み」の項目に該当する画像があれば、loading=”lazy”を試してみてください。