LazyLoad」と呼ばれるChromeの新機能は、表示領域外の画像やiframe要素のロードを遅延させることで、Webページのパフォーマンスを大幅に向上させます。LazyLoadは今まではJavaScriptを使用していましたが、ブラウザのネイティブな機能として、imgやiframe要素にlazyload属性を加えるだけで簡単に利用できます。LazyLoad」の機能と使い方、注意点を紹介します。Web下記は各ポイントを意訳したものです。※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。重要度の低いコンテンツを遅延させて表示させることは、パフォーマンスを大幅に向上させると考えられています。LazyLoad」を使用すると、ページがロードされる際に自動的に最適化が実行されます。画像要素とiframe要素は、重要度を評価するために解析されます。重要ではないと評価された場合、遅延されるか、まったくロードされません。遅延された要素は、ユーザーが近くのエリアまでスクロールした場合にのみロードされます。要素がロードされるまでは、空のプレースホルダーイメージが表示されます。Googleのドキュメントには、興味深い仕様がいくつかありますLazyLoadは、LazyImagesとLazyFramesという2つの異なるメカニズムで構成されています。ユーザーがスクロールして指定したピクセル数内に近づくと、遅延された画像要素とiframe要素がロードされます。ピクセル数は3つの要因に基づいて変化します。画像がブラウザの表示領域のすぐ下までくると、画像の最初の数バイトをロードし、画像のサイズを確定する要求を出します。このサイズは、プレースホルダーイメージを作成するために使用されます。lazyload属性は、どの要素を遅延ロードにすべきかを指定することができます。重要度の低いコンテンツとして、iframe要素のコードを見てましょう。lazyload="on"></iframe>lazyload属性の値は、3つです。onコンテンツを表示できるようになるまで、このリソースの取得を遅延します。offこのリソースの取得を即座に実行します。autoブラウザに依存(lazyload属性を使用しないのと同じ効果)。Policyの仕組みと同様に)、LazyLoad機能をオプトイン・オプトアウトできるようにする仕組みを提供しています。このポリシーについてはマージされていないものがいくつかあります。これらのページ最適化が既存のサイトと互換性の問題を起こすかどうかを判断することは困難です。サードパーティのiframeは、広告や解析や認証などの目的で数多く使用されています。重要度の高いiframeのロードを遅らせたり、ロードしないということはありません。ユーザーがそれまでにスクロールしないからです。予期せぬ影響を与える可能性もあります。onLoadをトリガーに画像やiframeがロードさせている場合にも問題が発生する可能性があります。これらの自動最適化は、ユーザーに大きな問題を起こすことなく、Chromeのレンダリング速度を効率的に向上させることができます。Googleの開発チームでは、LazyLoadによるパフォーマンスの効果を慎重に計測しています。Canaryでのみ利用可能です。アドレスバーに下記の文字を入力し、各機能を有効にします。chrome://flags/#enable-lazy-image-loadingchrome://flags/#enable-lazy-frame-loadingChromeでは「chrome://flags」と入力すると、フラグを有効にすることができます。monitoring終わりにこれから先もWebでビジターを迎え入れるにあたって、ブラウザとコネクティビティとユーザエクスペリエンスの複雑さをようやく理解し始めたばかりである、ということを私は実感しています。