1. Home
  2. コンピュータ
  3. ブラウザ
  4. Chromeの新機能Blink LazyLoadを有効にして表示を高速化しよう!
AmazonAmazon クレジットカードAmazon DashAmazon PrimeAmazon.co.jpAmazon
プライムデーセールがスタート!Amazon Echoシリーズが最大60%Offで大幅値引き!

プライムデーセールがスタート!Amazon Echoシリーズが最大60%Offで大幅値引き!

15日から始まったAmazonプライムデーセールですが、EchoシリーズやKindle、FireTVなどのAmazonデバイスが大幅値下げされています。中でもおすすめなのがAlexaを搭載するス...

超!A&G+がEchoシリーズで再生可能に!Amazon Alexaが再生に対応!

超!A&G+がEchoシリーズで再生可能に!Amazon Alexaが再生に対応!

文化放送が運営しているアニラジ専門のインターネットラジオである超!A&G+(ちょう!エーアンドジープラス)がAmazon Alexaに対応しました。これによりスマートスピーカ...

Amazon Prime VideoでChromecastへのキャストが可能に!

Amazon Prime VideoでChromecastへのキャストが可能に!

ついに7月10日よりAmazonプライムビデオでChromecastへのキャストが可能になりました。Amazonプライムビデオのアプリをアップデートすることで、Chromecastへのキャストボ...

Chromeで拡張機能なしでページ全体のスクリーンショットを撮る方法!

Chromeで拡張機能なしでページ全体のスクリーンショットを撮る方法!

みなさんはサイトのページ全体をキャプチャしてスクリーンショットを撮りたい時はどうしていますか?よくある手法としては拡張機能を入れてスクリーンショットを撮るという...

AOMEI BackupperでSSD&HDDを定期的に丸ごとバックアップしよう!

AOMEI BackupperでSSD&HDDを定期的に丸ごとバックアップしよう!

最近のPCではシステムドライブとしてSSDが採用されているのは当たり前の時代になりましたが、みなさんバックアップはしっかり取っていますか?SSDはHDDと比較しても非常に...

デュエルリンクスの最新情報が読めるアンテナを作りました!検索機能も大幅アップデート!

デュエルリンクスの最新情報が読めるアンテナを作りました!検索機能も大幅アップデート!

先日、遊戯王デュエルリンクスのカード検索サイトであるDuelLinks.netを公開しましたが、追加機能としていくつかのアップデートを行ったので、こちらにまとめておきます。...

クランプ式USBハブのORICO 4PORTS CLIP HUB MH4PU-U3を使ってみた!

クランプ式USBハブのORICO 4PORTS CLIP HUB MH4PU-U3を使ってみた!

今回紹介するのはクランプ式(クリップ式)のUSB3.0の4ポートハブであるORICO MH4PU-U3です。このUSBハブが普通のUSBハブとは違うのが、パソコン、液晶モニター、PCデスクな...

Amazon Music Unlimitedが4か月99円で音楽聴き放題‎のキャンペーンを実施中!

Amazon Music Unlimitedが4か月99円で音楽聴き放題‎のキャンペーンを実施中!

現在Amazonが提供する音楽定額配信サービスであるAmazon Music Unlimitedが4ヶ月99円で聴き放題となるキャンペーンを期間限定で実施中です。キャンペーンの期間は2019年7月...

nasneの出荷が近日終了!後継機の予定なしの発表を受けて品薄に!?

nasneの出荷が近日終了!後継機の予定なしの発表を受けて品薄に!?

2012年から発売しているSONYのネットワークレコーダーの「nasne」がついに近日出荷が終了するとのアナウンスがされました。nasneとプレイステーション、スマートフォンをつ...

NetaGear RSS News

Now Loading

Article

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

コンピュータ > ブラウザ 
Blink_LazyLoad_000.png

Webページを閲覧していて気になるのはその表示速度ですが、今回は簡単にChromeの表示速度を上げる方法を紹介したいと思います。それがChromeの新機能であるBlink LazyLoadです。このBlink LazyLoadはまだテスト段階であり正式に実装されるかわかりませんが、現段階でもchrome://flagsから設定が可能となっています。

この方法はPCでもスマホでも使うことが可能ですが、回線が弱いモバイル環境のほうがその恩恵を受けられるので、ぜひスマホユーザーの方は試してみてください。Chromeで簡単な設定するだけで日々のストレスが軽減できます。

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


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

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

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は実現できなかったわけです。

<img src="images/dammy.png" class="lazy" data-src="images/example.png">

GIF形式1x1透過画像dataurl
data:image/gif;base64,R0lGODlhAQABAGAAACH5BAEKAP8ALAAAAAABAAEAAAgEAP8FBAA7

PNG形式1x1透過画像dataurl
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQI12NgYAAAAAMAASDVlMcAAAAASUVORK5CYII=

Blink LazyLoad


Blink LazyLoad


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

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

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


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

chrome://flags

Blink_LazyLoad_004.png
「lazy」と入力します。

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

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

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

Blink LazyLoadの効果検証!


Blink_LazyLoad_001.png

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

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

速度比較


Blink_LazyLoad_002.png

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



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

 1回目2回目3回目4回目5回目平均
Android 4G Normal4.214.954.064.244.424.45
Android 4G Blink2.593.072.672.292.872.77
PC Normal2.512.72.932.552.722.67
PC Blink1.951.782.082.182.282.05


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

今回の個人的感想




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

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

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

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

Related article

COMMENT TO THIS ENTRY

Most Popular

Now loading...

Social Links

Sponsored Link

Popular Article

Access Ranking

Now Loading...

当ブログにリンクしていているサイトの中でアクセス数の多いサイト上位15位が表示されます。今ならリンクするだけで簡単に上位に表示されます。