こんにちは。ニコニコQセクションのHajime-san(GitHub)です。 本稿では、HTMLのloading属性の仕様とブラウザの実装を解いていきます。これにより、ブラウザからのコンテンツ配信の最適化を支える判断材料の1つとなれば幸いです。 執筆の動機 筆者が開発に携わっているサービスであるニコニコオーディションが間接的に利用している社内ファミリーサービスについて、ふと自分のスマートフォンで見てみたところページの初期表示に時間がかかるように感じました。 オーディションシステムはiframe要素によって社内ファミリーサービスなどに専用のUIを埋め込むことが可能になっており、iframe要素のloading属性を用いた「遅延読み込み」(以下、遅延読み込みはloading属性によるもの)が効果的なのではないかと考えました。 まずは、実際にloading="lazy"を適用して読み込みが後回し
![仕様と実装から読み解くHTMLのloading属性 - dwango on GitHub](https://cdn-ak-scissors.b.st-hatena.com/image/square/a84ca322bd76002eaeae849dd8fc6bde5964c6cb/height=288;version=1;width=512/https%3A%2F%2Fdwango.github.io%2Fimages%2Fhtml-loading-attribute%2Fthumb.webp)