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

2021/04/08
loading=”lazy”の実装方法を解説!
  • ホームページの表示速度が遅い
  • SEO対策を強化したい

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

実装方法

<img src="○○.jp" alt="○○" loading="lazy" width="100" height="100">

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

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

loading属性にはその他にも

  • loading=”eager” 遅延を設定せず、従来通りの読み込み方法
  • loading=”auto” ブラウザによって遅延するかどうかを判断

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

SEOとの関係性は?

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

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

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

株式会社リアライズ

株式会社リアライズ

SEO対策に必要な機能や設定がされたホームページを制作しており、多種多様な業種のホームページ制作実績が1,000社以上あります。
SEO検定1級やライティング検定1級、ウェブ解析士などの資格取得者が在籍し、集客・求人に関する課題を解決しています。

会社概要

この記事のタイトルとURLをコピーする

関連記事