Chromeに標準搭載？Lazy Loadとは何か
今回、Google Chromeに今後搭載されると噂されているLazy Loadについて調べてみました。
そもそもChromeには通常のChromeの他に、試験運用版のChrome Canaryというバージョンがあるのをご存知でしょうか。
このChrome Canaryはα版のような位置付けで、通常版では搭載されていない機能を試験的に先行搭載しています。
このCanary版で動作に問題がなかった機能がさらに他の開発環境で動作確認が行われ、最終的に問題がなければ通常版にも搭載されるという流れになっているようです。
つまりこのCanary版では最新の機能を試せるということですね。
公式サイトにもあるようにこのCanaryは毎日のように更新が行われていて、動作が不安定な場合があるようなのでその点だけ注意が必要です。
そしてそのCanary版に搭載され、話題になっている機能があります。
それがLazy Load機能です。
Lazy Loadという機能そのものについては以前からあるテクニックでしたが、その機能をサイト側で特別な構築を行わずともChromeが標準機能として自動で行ってくれるようになるということで一部で話題になっています。
では、そもそもLazy Loadとは何でしょうか？
Lazy Loadとは
Lazy Loadとはその名の通り、
Lazy Loading = 遅延読み込み
というWebページ上の画像やその他コンテンツを遅れて表示させるテクニックです。
主にWebページの表示速度の向上やパフォーマンス改善のために使用されるテクニックで、ページ上の画像などを一括でダウンロード、表示させるのではなくユーザーの見ている範囲に応じて、適切なタイミングで段階的にダウンロード、表示を行います。
Lazy Loadを行うメリットとして以下が挙げられます。
通信量の節約
一般的なLazy Loadが使用されていないWebページではページの初期表示の際に全てのコンテンツのダウンロードを行います。
ですが、皆さんも経験があるかと思いますがWebページを上から下まで確実に表示させるかといえばそうではありません。
ページの途中で求めている内容と異なればページを最後まで見られることはありませんし、全ての情報が必要であるかといえばそうではないはずです。
そんな少し訪れたサイトで大量の画像を一括ダウンロードしていたらユーザーとしては迷惑でしかありません。
特にスマートフォンが普及し、モバイル通信でのページ訪問が多くなっている昨今では通信量の増加は死活問題です。
表示速度の向上
上記でも述べましたが、段階的にコンテンツを表示させることで、一度に画像をロードする必要がないのでページの初期表示の高速化が期待できます。
離脱率の低下
これは表示速度の向上とほぼ同意になりますが、サイト訪問時の表示速度が遅くユーザーがなかなか操作できないWebページは一般的にサイトの離脱率が上がるとされています。
おそらく初期表示がいつまでも完了しないページにイライラしたという経験はみなさんも一度はあるのではないでしょうか。
そのため初期表示が早く、段階的なロードで最後までストレスなく表示できることはページの内容を全て見てもらえることに繋がります。
実装方法
通常、サイト側でLazy Loadを実装する場合は何らかのJavascriptやjQueryプラグインの使用が必要です。
以下、主要なプラグインとデモです。
-
jQuery Lazy Load
https://github.com/tuupola/jquery_lazyload
-
Layzr.js
https://github.com/callmecavs/layzr.js
-
Echo.js
https://github.com/toddmotto/echo
このようにLazy Loadを実装するにはこれらのプラグインを利用する必要があります。
それぞれに実装方法や機能に差はありますが、デモがあるものはページの表示がスムーズであることが分かります。
デメリット
Lazy Loadにはデメリットもあります。
それはSEOの面で不利になるかもしれないということです。
画像をユーザーの表示に合わせて段階的に遅延表示させるので、Botが画像を判定できない場合があるからということです。
対策としていくつか方法があるようですが、総じて一手間を加えなくてはいけないことに変わりはありません。
ChromeのLazy Load
そして今回Chrome Canaryに試験的に搭載されたLazy Loadはこれらサイト側でプラグインを追加するなどの実装も必要なく、またSEOの観点から見てももちろんChromeが勝手にLazy Loadを行ってくれるため問題ありません。
サイト側では何もせずとも様々なメリットを得ることできるのです。
現在、Lazy Loadを行うタイミングやLazy Loadを行う画像の種類などについて試験が行われているようですが、サイト側で明示的にLazy Loadを制御することもできるようです。
指定は簡単で、各タグに
lazyload="on"
lazyload="off"
lazyload="auto"
を追加するだけです。
まとめ
今回は、簡単ですが今後Google Chromeに追加させるかもしれない「Lazy Load」についての紹介でした。
Chromeが自動でやってくれるようになれば、今まで以上に意識することは少なくなるかもしれませんが、ユーザーの使い勝手を向上させるためにどうしたら良いかという観点で、Lazy Loadやその他Chrome Canaryの新機能などについて注目してみても良いかもしれません。
参考
https://coliss.com/articles/build-websites/operation/work/native-lazy-load-for-chrome.html
