画像遅延ローディング属性「loading=”lazy”」がHTML標準化されていたので試してみた

ブログ画像神之塔エンドロシ

2 Comments

mochi

mochi  

To ぼっちんさん

こんばんは。ぼっちんさん (^^)/
実りのないネタに釣られていただきありがとうございます(笑)

僕も、ChromeでLazyload実装されるという話を聞いてから結構経っているのに、なかなかそれに関する話題を目にすることがなかったので、今回ちょっと調べてみたのがキッカケです。

するとHTML標準化やらFirefoxでも対応しているやら、意外に普及に向けての取り組みが進んでたりしてビックリ!! そして効果を確認してみてガッカリ…(笑)

「Lazysizes」を知らなければ、まぁこんなものかな?と感じていたのかもしれませんが、実際に「Lazysizes」を導入している身とすれば、逆に「Lazysizes」の素晴らしさを再認識してしまう結果となりました。

100匹のニャンコ画像のサンプルサイトは、HTML読み込み時点で初回の「Initial connection」に時間を取られ過ぎていたり、画像取得での「Stalled」の時間が長いので、サイトのサーバーならびに画像が保存されているサーバー自体に課題がありそうです。

「遊び心が全くない」というのは標準化を目指すという意味では仕方がないようにも思えます。

hoverのようなCSS疑似クラスを新たに設けるなどすれば「Lazysizes」のような演出も可能なのでは?と思うと、ちょっと残念なところはあります。
ただあまり複雑な事をやらせようとすると、ブラウザによって差が出やすくなる(現時点で既に出ていますが…)要因にもなりますので、「Lazysizes」とは違うものと割り切って考えた方が良いかもしれません。

またその方が「Lazysizes」を導入している甲斐があると、前向きにとらえています(笑)

2020/06/19 (Fri) 22:27 |  REPLY |   

ぼっちん  

食いつきました(笑)

mochiさん、おはようございます ^^
こういう記事だと直ぐに食いつく私です(爆)

私も「Chorome70でLazyloadがブラウザ実装される」と報じられるようになった頃より「早く全ブラウザレベルで画像遅延読み込みを始めんかい!」っと、念を送って来た中の1人なんですよね(笑)
ところが、Chorome70では実装されず「なんだよぉ、この~!」と憤慨して (^_^; アハハ…
バージョンが進むごとに注視し続けて来たんですけど (^^ゞポリポリ

で、今のこの Chrome 83 でも「う~ん、なんだかねぇ(笑)」と、私の勝手な望みとは大きくかけ離れた総合効果に「Lazysizesの方がずっとマシ(笑)」と言う今現在での結論なんですよね。

100匹のニャンコ画像のサンプルサイトを Chrome 83 のDevToolsで「iPhone X 375×812 Network Fast 3G」の設定で計測すると、結果はなんと 「DOMContentLoaded: 1.17 s Load: 2.97 s」のびっくりするような「遅さ」です(笑)
私の今までのテスト経験的感覚では、このサンプルサイト位の要素でしたら「DOMContentLoaded: 680 ms Load: 1.33 s」位になってくれないと……
「えっ? ファーストビュー 12枚のこんな小さな容量の画像なのにこんな結果?」と、ちょっとキョトンとしてしまっております(笑)
そうそう、私のiPhone X画面では12枚が読み込まれております。
もっとも、これらのサンプル画像は軽量化が行われているフシがなくて、また外部からの直リンク読み込みですから、正しい実測サンプルにはなり得ない要素もありますしね(笑)

あれ? サンプル画像の所在先ドメインは http で、サンプル画像ディレクトリだけ https の様子で、ちょっと不思議な構図ですね。

そして、Lazysizesのような「ふわ~っと現れる視覚効果を持たせる」とか、読み込み開始位置を設定するオプションがないとか等の「遊び心が全くない(笑)」ことも「う~ん、使いにくいよね~」と感じてしまうんです。
まぁ、Lazysizesを使い慣れてしまっているからの「感覚的相違」なんでしょうけど (^^ゞポリポリ

ブラウザレベルでの画像遅延読み込みが、Lazysizesを総合的に越える日って来るんですかね?(笑)

2020/06/19 (Fri) 09:36 | EDIT |  REPLY |   

Post a comment