{ "componentChunkName": "component---src-templates-blog-post-jsx", "path": "/post/benchmark-of-lazy-frame-loading/", "result": {"data":{"site":{"siteMetadata":{"title":"WEB EGG","author":"Leko - CTO at Yuimedi"}},"markdownRemark":{"id":"b77a9223-3388-5770-9d7b-f5ead4ae243d","excerpt":"Lazy load はよく知られた web サイトの高速化テクニックの１つですが、自前で lazy load を実装したりライブラリを使う必要がなくなる未来が実現しつつあります。 Chrome のレンダリングエンジンBlinkが 画像や iframe の LazyLoad…","html":"

Lazy load はよく知られた web サイトの高速化テクニックの１つですが、自前で lazy load を実装したりライブラリを使う必要がなくなる未来が実現しつつあります。
\nChrome のレンダリングエンジンBlinkが 画像や iframe の LazyLoad を試験的に実装しました。\n仕様はこちらに詳しく書かれています。記事を公開した時点ではフラグを有効にすることで利用できるようになっていました。

\n

Chrome Blink についての説明は多くの参考になる記事があるので、そちらを参照してください。

\n
\n

— ブラウザの機能として Chrome が Lazy Load をサポートするかも。SEO と相性が悪い Lazy Load が不要になるか？ | 海外 SEO 情報ブログ

\n
\n
\n

— Chrome の新機能 Blink LazyLoad の要点と注意点 – PSYENCE:MEDIA

\n
\n
\n

— img 要素と iframe 要素の lazyload 属性 - EagleLand

\n
\n

当記事では「では実際にどれくらい速度改善されるのか？」を実験してみたので、その結果をまとめます。

\n

lazy frame loading を有効にする

\n

chrome://flags/#enable-lazy-frame-loading から設定できます。この設定を有効にすると、明示的に OFF にしない限り自動的に iframe の LazyLoad が有効になります。

\n

蛇足ですが画像については lazy image loading という別のフラグになっているのでご注意ください。

\n

明示的に LazyLoad を off にする

\n

lazyload=\"off\"という属性を iframe に付与すると、LazyLoad が無効になり従来通りの挙動になります。ベンチマークついでに試してみましたが期待通りに動きました。

\n

ベンチマーク

\n

ベンチマークに使用した記事はこちらです。

\n
\n

— Gatsby の記事に oEmbed 準拠のコンテンツを埋め込めるようにした | WEB EGG

\n
\n

上記の記事は iframe が４つ登場します。
\n当ブログは iframe の LazyLoad を実装してないため記事の表示した時点から画面外にある iframe のロードが走ってしまいます。

\n

計測方法は、

\n\n

なお計測に利用した環境は以下のとおりです。

\n\n

ネットワークがともなうベンチマークは回線やマシンの調子によって激しく差異が出るので、絶対値ではなくあくまでフラグの有無による相対値で比較をします。

\n

ベンチマーク結果

\n

LazyLoad を無効のまま表示した結果がこちらです。\n\n \n \n \n \n \n \n \n \n

\n

LazyLoad を有効にしたときの結果がこちらです。\n\n \n \n \n \n \n \n \n \n

\n

上記の画像を表形式でまとめたものがこちらです。

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
#defaultLazyload
Requests12019
transferred2.6MB259KB
DOMContentLoaded691ms610ms
Load11.05s1.15s
Finish11.08s1.16s
\n

リクエストの本数は 1/6 まで減少し、Load の時間は約 10 倍早くなりました。
\nフラグが無効のままでもファーストビューが表示されるまでの時間はそれほど違わないのですが、その後にずーっと通信中の表示が出ていました。\nLazyLoad を有効にすると、ページを下にスクロールしていくと徐々に iframe の中身がロードされるようになります。テザリング程度の回線速度でも該当要素までスクロールしたときに描画は完了しており、表示が遅延してる感じもありませんでした。

\n

当ブログでの対応

\n

iframe は毎回登場するのもでもないので、（主要ブラウザが対応し切るまで何年かかるか分かりませんが）オレオレ LazyLoad は実装せず待つことにしました。\n画像に関しては Gaysby プラグインを使ってると勝手に有効になっちゃうのでオレオレ LazyLoad を使うようにしています。

\n

さいごに

\n

ぜひフラグを有効にして快適な表示を体験してみてください。
\n利用者としては嬉しい限りですが、このフラグがデフォルトで有効になった日にはアクセス解析提供してる会社さんは大変そうな予感がします。

\n

iframe といえばソーシャルボタンも多くが iframe で提供されています。表示が遅くなるので当ブログは付けてませんが、このあたりも劇的にパフォーマンス改善されるポイントになると思います。

","timeToRead":5,"frontmatter":{"title":"ChromeのBlink LazyLoadを有効にしたらページのロード時間が約10倍早くなった","tags":["JavaScript","Google Chrome"],"date":"January 12, 2019","featuredImage":null}}},"pageContext":{"slug":"/benchmark-of-lazy-frame-loading/","previous":{"fields":{"slug":"/gatsby-remark-discoverable-oembed/"},"frontmatter":{"title":"Gatsbyの記事にoEmbed準拠のコンテンツを埋め込めるようにした","tags":["JavaScript","Gatsby","oEmbed","AST","remark"]}},"next":{"fields":{"slug":"/code-reading-of-deno-boot-process/"},"frontmatter":{"title":"Dive into Deno：プロセス起動からTypeScriptが実行されるまで","tags":["JavaScript","TypeScript","Rust","Deno"]}}}}, "staticQueryHashes": ["2585454260","2954598359"]}