弊社のお客様のwebサイトでは、画像データにはLazy Loadを使っています。

画像がスマホの画面に表示されたときにだけ、サーバーへ画像を取りに行くという仕組みです。ページの上部しか見ないユーザーもいますが、そのようなユーザーへは、スマホの画面に表示されていない下部の画像データの送信を減らし、ユーザーのギガの節約になっています。

と同時に、運営側としてもデータ送出料金を減らせることができますから、双方にとってwin winなしくみです。

一方imgタグの実装が長くなってしまうという欠点もあります。具体的には下記のようなコードになります。

<img data-src="https://example.com/post_img/2022/02/pl1SraOFlNEzGNB_pE7gm_4.jpeg" class="comment_img lazyload loaded" width="100%" alt="image01" data-ll-status="loaded" src="https://example.com/post_img/2022/02/pl1SraOFlNEzGNB_pE7gm_4.jpeg">

Lazy LoadはJavaScriptで起動するのですが、googlebotがもしかしたらそれを理解しないと困りますし、一部JavaScriptを切っているユーザーもいるので、このようにLazy Loadで使うdata-srcに加えて、通常のsrcにもurlを記述しています。

しかし、最近のブラウザではimgタグの「loading=”lazy”」と加えるだけでLazy Loadとして機能するようになっています。ただ、safariで未対応でした。safariさん、頑張って！

2022/2/4現在、対応するブラウザを確認するサイトでは、SafariはOSXとiOSともに未対応の赤です。ただ注釈2で、iOS13.4以降、「Not supported by default,but can be enabled」となっています。

デフォルトではサポートしていないが、機能はするということです。

iOSでしたら、設定 > Safari > 詳細 > Exxpermental Features
ここで「Lazy iframe loading」や「Lazy image loading」をonすると機能するということでした。

というわけで、現時点ではもう少し様子見ですが、safariが対応してくれれば、

<img src="https://example.com/post_img/2022/02/pl1SraOFlNEzGNB_pE7gm_4.jpeg" class="comment_img lazyload loaded" width="100%" alt="images01" loading="lazy">

このように、imgタグの文字数が短くなりす。また、JavaScriptも読み込まなくて済みます。もちろんgooglebotでも問題ないです。

以上です。