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

「Blink LazyLoad」と呼ばれるChromeの新機能は、表示領域外の画像やiframe要素のロードを遅延させることで、Webページのパフォーマンスを大幅に向上させます。

LazyLoadは今まではJavaScriptを使用していましたが、ブラウザのネイティブな機能として、imgやiframe要素にlazyload属性を加えるだけで簡単に利用できます。
「Blink LazyLoad」の機能と使い方、注意点を紹介します。

サイトのキャプチャ

A Native Lazy Load for the Web

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

「Blink LazyLoad」の機能

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

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

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

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

lazyload属性は、どの要素を遅延ロードにすべきかを指定することができます。重要度の低いコンテンツとして、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によるパフォーマンスの効果を慎重に計測しています。

LazyLoadの有効化

この機能はChrome 70で実装が予定されており、現時点ではChrome Canaryでのみ利用可能です。アドレスバーに下記の文字を入力し、各機能を有効にします。

  • chrome://flags/#enable-lazy-image-loading
  • chrome://flags/#enable-lazy-frame-loading

Chromeでは「chrome://flags」と入力すると、フラグを有効にすることができます。

参考資料

終わりに

これから先もWebでビジターを迎え入れるにあたって、ブラウザとコネクティビティとユーザエクスペリエンスの複雑さをようやく理解し始めたばかりである、ということを私は実感しています。

sponsors

top of page

©2018 coliss