DNS Prefetchを検証するためのページをChrome Developer Toolsで確認したPerformance図。 CSSたちが遅延しており、そのCall Treeを確認すると、Prefetchを入れるためのJavaScriptが依存関係を持ってしまい、遅延しています。pic.twitter.com/TJwWc53ueE
loading="lazy"は、Chromeでしか対応しておらず、decoding="async"は、ほとんどのブラウザで対応済みです。loading="lazy"を勧める意義はありません。Safariも対応済みです。
-
-
Native LazyloadでJavaScriptで画像の遅延読み込みをさせると、そのJavaScriptの実行処理が遅延要因となり、且つ、画像の読み込みがそのJavaScriptによって止められるため、実際は表示が遅延します。
-
scriptのasync/deferは、ページ上での処理の依存関係を考えて選択する必要があり、deferにすればいいわけではありません。type="module"でのコントロール関係が抜けてるのはどうかと思います。
- 2 more replies
New conversation -