【簡単】loading=”lazy”の実装方法

この記事は約2分で読めます。

loading="lazy"実装方法 今まで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 ただ、使われているテーマやプラグインによっては反映されない場合もありますので、注意してください。