Chromeの新機能がすごい便利！imgやiframeにlazyload属性を加えるだけでLazyLoad対応に

Post on:2018年9月3日

「Blink LazyLoad」の機能

重要度の低いコンテンツを遅延させて表示させることは、パフォーマンスを大幅に向上させると考えられています。「Blink LazyLoad」を使用すると、ページがロードされる際に自動的に最適化が実行されます。

画像要素とiframe要素は、重要度を評価するために解析されます。
重要ではないと評価された場合、遅延されるか、まったくロードされません。
- 遅延された要素は、ユーザーが近くのエリアまでスクロールした場合にのみロードされます。
- 要素がロードされるまでは、空のプレースホルダーイメージが表示されます。

Googleのドキュメントには、興味深い仕様がいくつかあります

LazyLoadは、LazyImagesとLazyFramesという2つの異なるメカニズムで構成されています。
ユーザーがスクロールして指定したピクセル数内に近づくと、遅延された画像要素とiframe要素がロードされます。ピクセル数は3つの要因に基づいて変化します。
- 画像、またはiframeの場合
- Data Saverが有効、または無効の場合
- connection typeが有効の場合
画像がブラウザの表示領域のすぐ下までくると、画像の最初の数バイトをロードし、画像のサイズを確定する要求を出します。このサイズは、プレースホルダーイメージを作成するために使用されます。

lazyload属性は、どの要素を遅延ロードにすべきかを指定することができます。重要度の低いコンテンツとして、iframe要素のコードを見てましょう。

<iframe src="ads.html" lazyload="on"></iframe>

1	<iframe src="ads.html" lazyload="on"></iframe>

lazyload属性の値は、3つです。

on

コンテンツを表示できるようになるまで、このリソースの取得を遅延します。
off

このリソースの取得を即座に実行します。
auto

ブラウザに依存（lazyload属性を使用しないのと同じ効果）。

セキュアなLazyLoadのポリシー

「Feature Policy: lazyload」では、オーサーがドメインごとに（Content Security Policyの仕組みと同様に）、LazyLoad機能をオプトイン・オプトアウトできるようにする仕組みを提供しています。このポリシーについてはマージされていないものがいくつかあります。
参考: Explainer for 'lazyload' policy

後方互換性

現時点では、これらのページ最適化が既存のサイトと互換性の問題を起こすかどうかを判断することは困難です。

例えばサードパーティのiframeは、広告や解析や認証などの目的で数多く使用されています。重要度の高いiframeのロードを遅らせたり、ロードしないということはありません。なぜなら、ユーザーがそれまでにスクロールしないからです。しかし、予期せぬ影響を与える可能性もあります。また、onLoadをトリガーに画像やiframeがロードさせている場合にも問題が発生する可能性があります。

これらの自動最適化は、ユーザーに大きな問題を起こすことなく、Chromeのレンダリング速度を効率的に向上させることができます。Googleの開発チームでは、LazyLoadによるパフォーマンスの効果を慎重に計測しています。