【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（遅延ロード）を例に挙げてみましたが、日進月歩のウェブ制作業界では、他にも様々な技術が日々生み出されております。

そういった優れた技術のメリット・デメリットを把握し、弊社の制作ポリシーと照らし合わせて天秤に掛け、お客様にご提案するかどうか決定しています。

もし何か気になる技術や、質問などがございましたらお気軽にお尋ねください。
お客様にとって本当に適したものか判断し、少し先を見たご提案をさせていただきます。