Chromeの新機能Blink LazyLoadを有効にして表示を高速化しよう！

なぜChromeの表示速度が上がるのか？

なぜ表示速度が上がるのかというとlazyloadと呼ばれる遅延ロード技術を使っているからです。lazyloadはWeb開発者には耳馴染みのある有名な手法ですが、まずは古くから使われてるLazyLoadについて軽く説明したいと思います。

ここからは少しだけ技術的な話をするので、そんなのどうでもいいからとにかく設定を有効にしたいという人はChromeでBlink LazyLoadを有効にする方法！へ飛んでください。

LazyLoadとは

LazyLoadとは、htmlとjavascriptを使い画像を遅延ロードするための技術です。通常ChromeなどのブラウザはWebページにアクセスした際に、htmlを分析してページ内にある画像のimg要素があればすべてダウンロードするように動作します。つまり重い画像が沢山あればあるほどダウンロード時間がかかるわけです。ですが、LazyLoadは画像の読み込み意図的にストップさせて画像を読み込ませません。そしてページをスクロールして画像を表示する直前に画像をダウンロードして読み込むように動作します。つまり表示する際に必要な部分の画像を動的に読み込み、それ以外の画面外の画像はダウンロードしないわけです。

これによって初回のレンダリング時に不必要な画像はダウンロードされず、最低限の画像だけしか読み込まないことで表示速度が大幅に上がります。

このLazyLoadは画像が多ければ多いほど、初回レンダリング時のダウンロードが減らせるので、画像の多いサイトにはものすごい効果があります。逆に画像の少ないサイトには効果が薄くなります。ですが、私が以前に制作した画像を一切使わずにデザインしたサイトであるNegaGearのように画像を完全に使わないというサイトはあまりありませんので、大抵のサイトでは大小は違えど高速化の効果が出ると思います。

ちなみに参考までに従来のLazyLoadの実装方法も説明しておきます。サイト製作者がhtml内に、ブラウザには1x1などの軽量なダミー画像またはbase64 dataurlと動的ロードしたい画像をdata-srcなどとimgタグ内に記述して、ページスクロールによって画像の位置に近づいた際にjavascriptでsrcの中身をdata-srcに入れ替えることで遅延ロードさせて動作させていました。つまり今まではサイト製作者が面倒な実装したページでないとLazyLoadは実現できなかったわけです。

Blink LazyLoad

ここまではLazyLoadの説明でした。ここからはBlink LazyLoadについて説明したいと思います。Blink LazyLoadを簡単に説明すると、今までサイト製作者が苦労して実装していたLazyLoadをChromeがブラウザとしてネイティブでサポートしたわけです。Blink LazyLoadでは従来のLazyLoadのように、サイト運営者はタグの書き換えやjavascriptの配置などのそんな面倒な実装は一切必要ありませんし、閲覧ユーザーがBlink LazyLoadの設定を有効にするだけ使えるのです。これはサイト製作者にとってもサイト閲覧ユーザーにもメリットしかない、まさに神機能なのです！

この機能が正式に実装されて普及すれば画面外の無駄な画像のダウンロードも減りますし、モバイルユーザにとっては通信データ容量も減るのでありがたいことだらけだと思います。サイト運営者側としても無駄なトラフィックが減ることはいいことですし、サーバーの負荷も減らせますのでメリットは多いと思います。

ちなみにここまで画像の話ばかりですが、Blink LazyLoadではimg以外にもiframeも遅延ロードできます。iframeはYoutubeをサイト内に埋め込む際などにも使用されており、Youtubeの動画をたくさん貼り付けているブログなどではiframeが遅延ロードできることで、ファーストビューの速度が大幅に向上できます。

ChromeでBlink LazyLoadを有効にする方法！

Chromeのアドレスバーに以下のurlを入力します。

chrome://flags

「lazy」と入力します。

「Enable lazy image loading」と「Enable lazy frame loading」をEnableに設定します。

「RELAUNCH NOW」を押してブラウザを再起動すれば設定完了です。

※この機能はまだ正式に実装されてはいない機能なので、何か表示の際に不具合などもあるかもしれません。

Blink LazyLoadの効果検証！

Blink LazyLoadの効果はあるのかという検証を行いと思います。まずその前に本当に遅延ロードしているのかを開発者ツールを見つつ、試してみました。通常ではアクセス時にたくさんの画像がロードされていますが、Blink LazyLoadでは画像のファイルサイズが2.2KBになっており、ダミー画像が読み込まれているようです。オリジナル画像の読み込まれていないことがわかりました。

その後Networktタブを見つつ、スマホでスクロールするとそれに合わせて画像が遅延してダウンロードされていることがわかりました。しっかりBlink LazyLoadが動作しているようです。

速度比較

では実際にBlink LazyLoadがどれくらいの効果が出るのかについて実験してみたいと思います。実験は速度を正確に測るためにAndroidスマホをPCに接続して、開発者ツールでキャッシュを無効にした上でページを更新してロードにかかるまでの時間を計測します。開発者ツールのNetworkタブで赤いラインが出るまでの時間です。

速度比較は光回線でPCを使って計測したパターンと、回線速度が光回線より遅いモバイル回線を使ってスマホで速度を計測してみました。計測ページは私の記事で最も画像数の多い記事(PNG画像が70個以上)を利用しました。

結果としては平均的にBlink LazyLoadを有効にしたほうが読み込み時間が短縮されています。今回は画像の多い記事で検証してみたのでかなり効果が出ました。Androidで4G回線を使った場合で平均で1.5秒以上高速化しました。PCは光回線を使用しているのでそこまでは差が出ませんでしたが、0.5秒以上高速化できました。ファストビューが高速化されたことで体感速度的にもかなり早くなってる気がします。特に理由がなければ使わないと損なレベルだと思います。

今回の個人的感想＆まとめ

今回はChromeの新機能であるBlink LazyLoadの紹介でした。Blink LazyLoadは閲覧ユーザーにもサイト制作者にもメリットばかりですし、もっと広まってもいいと思いますね。ネットワーク転送量も減らせますし、正式に採用されてばWebのトラフィック全体で相当な効果が期待できそうです。正直なところもっと早くChromeがネイティブでサポートしてくれてても良かった機能なように感じます。

私もこのサイトでは記事外の画像はLazyLoadで遅延ロードを実装していますが、記事ないのはタグの置き換えが面倒すぎてやっていません。FC2ブログでは記事内の画像のLazyLoadはあまりにも手間がかかりすぎるので・・・。

最近では回線速度が高速化しているので、昔のように画像が重くて表示が遅いというのはあまりないかもしれませんが、モバイルの場合はまだ遅いと感じる場面はあったりするので、どちらかといえばPCよりスマホユーザーにとってありがたい機能です。やはり人が多い場所や混み合う時間帯では回線速度が遅くなることが多いですし、そういう場面でも遅延ロードならファーストビューの表示速度を上げて、体感速度的にも良くなると思います。

簡単に設定できるのでぜひBlink LazyLoadを活用してみてはいかがでしょうか？