コラム
Lazy Load(遅延ロード)は導入するべき?しないべき?
- ホームページ制作・トラスティーシステムズ・トップページ
- コラム
- スタッフによるプロ情報ブログ
- Lazy Load(遅延ロード)は導入するべき?しないべき?
Lazy Load(遅延ロード)は導入するべき?しないべき?
【2021年9月追記】
こちらに掲載している情報が古くなりましたので、改めて追記させていただきました。
●Lazy Load(遅延ロード)が、ブラウザの標準機能で使えるようになりました。
HTMLというウェブページを作成する言語があるのですが、HTML内に「loading="lazy"」を
追記することで非常に簡単に実装できます。
「画像(img要素)」や「ウェブサイトに埋め込むGoogleマップなど(iframe要素)」で使用できます。

ブラウザの標準機能で実装するため、
画像がGooglebotに認識されないという心配もありません。
Googleも推奨している方法ですので、積極的に使用して問題なさそうです。
●但し、2021年9月時点でIEとSafariは未対応。Firefoxはimg要素のみ対応。
IEは、2022年6月にサポート終了予定ですので、あまり気にしなくていいと思います。
Safariの方は、iOS版も含めて未対応ですので、iPhoneユーザーの割合を考えると、ちょっと悩ましいところです。
但し、今後サポートされることは間違いなさそうですので、実装だけしておくのはアリだと思います。
ブラウザの対応状況はこちら
Can I use(Lazy loading via attribute for images & iframes)
すべてのブラウザで対応するには、まだJavaScriptライブラリを利用することになりそうですが、
近い将来、ブラウザ標準機能で安心してLazy Load(遅延ロード)が実装できそうですね。
=============================================================
以下は、2017年2月に投稿した内容です。
=============================================================
先日、流行のインフルエンザに感染しました、デザイン・コーディング担当の牧野です。
みなさま、手洗いうがいの徹底と、人の多いところではマスクをするなどの対策をお忘れなく!
周りの人に感染させて、迷惑掛けてしまうのが、本当に辛いので気を付けましょう。
移しちゃった人、ごめんなさい…。
さて、今回はLazy Load(遅延ロード)についてお話したいと思います。

●Lazy Load(遅延ロード)って何?
ウェブページを開いた時、通常はそのページ内にある画像すべてを読み込むことになります。
長いページだと下へスクロールしないと見えない部分の画像まで、すべて読み込んでしまいます。
Lazy Load(遅延ロード)は、ページを開いた時にすべての画像を読み込むのではなく、
ページをスクロールして画像が画面に入った時に読み込むテクニックです。
なぜそんなことをするのか?
ずばり、ページの表示速度を向上させるためです!
必要な画像だけを随時読み込むことで、ページの読み込み時間が減少し、また転送量の節約にもなるため、モバイル環境においては特にメリットが大きいです。
前回のブログでも少し触れたのですが、ページの表示速度は、SEO対策において、とても重要な要素のひとつです。
●Lazy Load(遅延ロード)のデメリット
とても優れたテクニックで、エンドユーザーにとっても非常にメリットのあるLazy Load(遅延ロード)ですが、ひとつ気になることがあります。
現在、ほとんどの方がGoogleまたはYahoo!の検索を利用されると思いますが、星の数ほどあるウェブページの情報は、Googlebotというインターネット上を巡回するプログラムによって、日々収集されています。
人が、1ページずつ目視で確認していたら、キリが無いですもんね…。
Googlebotが集めてきた情報を元に、検索結果が決まったりしますので、Googlebotは、とても重要な存在と言えます。
ところがLazy Load(遅延ロード)を使用すると、Googlebotが適切に画像を認識出来ない可能性がある、といった情報がありました。
理由は少し専門的になりますので割愛しますが、Googlebotも完ぺきではないということです。
ただ、Googlebotが適切に画像を認識出来ない可能性については、情報が少し古く、Googlebotは、日々進化し続けていますので、現在は恐らくほとんど認識しているようです。
●メリット・デメリットを踏まえて、どうするべきか?
Lazy Load(遅延ロード)を使用した画像のほとんどを、恐らくGooglebotは認識している…。
この「恐らく」がとても気になりますね。
100パーセントと言い切れない以上、弊社では、Lazy Load(遅延ロード)をノリノリでご提案する事は無いかと思います。(現段階では!)
ただし、1ページの中に大量の画像を表示させていたり、ページの表示速度を出来るだけ早くしたい、といったご要望があった場合などは、Lazy Load(遅延ロード)をご提案することはあります。
今回は、Lazy Load(遅延ロード)を例に挙げてみましたが、日進月歩のウェブ制作業界では、他にも様々な技術が日々生み出されております。
そういった優れた技術のメリット・デメリットを把握し、弊社の制作ポリシーと照らし合わせて天秤に掛け、お客様にご提案するかどうか決定しています。
もし何か気になる技術や、質問などがございましたらお気軽にお尋ねください。
お客様にとって本当に適したものか判断し、少し先を見たご提案をさせていただきます。
こちらに掲載している情報が古くなりましたので、改めて追記させていただきました。
●Lazy Load(遅延ロード)が、ブラウザの標準機能で使えるようになりました。
HTMLというウェブページを作成する言語があるのですが、HTML内に「loading="lazy"」を
追記することで非常に簡単に実装できます。
「画像(img要素)」や「ウェブサイトに埋め込むGoogleマップなど(iframe要素)」で使用できます。

ブラウザの標準機能で実装するため、
画像がGooglebotに認識されないという心配もありません。
Googleも推奨している方法ですので、積極的に使用して問題なさそうです。
●但し、2021年9月時点でIEとSafariは未対応。Firefoxはimg要素のみ対応。
IEは、2022年6月にサポート終了予定ですので、あまり気にしなくていいと思います。
Safariの方は、iOS版も含めて未対応ですので、iPhoneユーザーの割合を考えると、ちょっと悩ましいところです。
但し、今後サポートされることは間違いなさそうですので、実装だけしておくのはアリだと思います。
ブラウザの対応状況はこちら
Can I use(Lazy loading via attribute for images & iframes)
すべてのブラウザで対応するには、まだJavaScriptライブラリを利用することになりそうですが、
近い将来、ブラウザ標準機能で安心してLazy Load(遅延ロード)が実装できそうですね。
=============================================================
以下は、2017年2月に投稿した内容です。
=============================================================
先日、流行のインフルエンザに感染しました、デザイン・コーディング担当の牧野です。
みなさま、手洗いうがいの徹底と、人の多いところではマスクをするなどの対策をお忘れなく!
周りの人に感染させて、迷惑掛けてしまうのが、本当に辛いので気を付けましょう。
移しちゃった人、ごめんなさい…。
さて、今回はLazy Load(遅延ロード)についてお話したいと思います。

●Lazy Load(遅延ロード)って何?
ウェブページを開いた時、通常はそのページ内にある画像すべてを読み込むことになります。
長いページだと下へスクロールしないと見えない部分の画像まで、すべて読み込んでしまいます。
Lazy Load(遅延ロード)は、ページを開いた時にすべての画像を読み込むのではなく、
ページをスクロールして画像が画面に入った時に読み込むテクニックです。
なぜそんなことをするのか?
ずばり、ページの表示速度を向上させるためです!
必要な画像だけを随時読み込むことで、ページの読み込み時間が減少し、また転送量の節約にもなるため、モバイル環境においては特にメリットが大きいです。
前回のブログでも少し触れたのですが、ページの表示速度は、SEO対策において、とても重要な要素のひとつです。
●Lazy Load(遅延ロード)のデメリット
とても優れたテクニックで、エンドユーザーにとっても非常にメリットのあるLazy Load(遅延ロード)ですが、ひとつ気になることがあります。
現在、ほとんどの方がGoogleまたはYahoo!の検索を利用されると思いますが、星の数ほどあるウェブページの情報は、Googlebotというインターネット上を巡回するプログラムによって、日々収集されています。
人が、1ページずつ目視で確認していたら、キリが無いですもんね…。
Googlebotが集めてきた情報を元に、検索結果が決まったりしますので、Googlebotは、とても重要な存在と言えます。
ところがLazy Load(遅延ロード)を使用すると、Googlebotが適切に画像を認識出来ない可能性がある、といった情報がありました。
理由は少し専門的になりますので割愛しますが、Googlebotも完ぺきではないということです。
ただ、Googlebotが適切に画像を認識出来ない可能性については、情報が少し古く、Googlebotは、日々進化し続けていますので、現在は恐らくほとんど認識しているようです。
●メリット・デメリットを踏まえて、どうするべきか?
Lazy Load(遅延ロード)を使用した画像のほとんどを、恐らくGooglebotは認識している…。
この「恐らく」がとても気になりますね。
100パーセントと言い切れない以上、弊社では、Lazy Load(遅延ロード)をノリノリでご提案する事は無いかと思います。(現段階では!)
ただし、1ページの中に大量の画像を表示させていたり、ページの表示速度を出来るだけ早くしたい、といったご要望があった場合などは、Lazy Load(遅延ロード)をご提案することはあります。
今回は、Lazy Load(遅延ロード)を例に挙げてみましたが、日進月歩のウェブ制作業界では、他にも様々な技術が日々生み出されております。
そういった優れた技術のメリット・デメリットを把握し、弊社の制作ポリシーと照らし合わせて天秤に掛け、お客様にご提案するかどうか決定しています。
もし何か気になる技術や、質問などがございましたらお気軽にお尋ねください。
お客様にとって本当に適したものか判断し、少し先を見たご提案をさせていただきます。
2017年02月17日現在の情報となります