1. Home
  2. コンピュータ
  3. ブラウザ
  4. Chromeの新機能Blink LazyLoadを有効にして表示を高速化しよう!
AmazonAmazon クレジットカードAmazon DashAmazon PrimeAmazon.co.jpAmazon
VEGAS Pro 17発売記念で最大92%Offのキャンペーンを実施中!

VEGAS Pro 17発売記念で最大92%Offのキャンペーンを実施中!

現在ソースネクストでは、VEGAS Proの新バージョンとなるVEGAS Pro 17の発売を記念して、VEGAS製品を大幅に値引きするスーパーチャンスのキャンペーンを実施しており、最大...

Lecone Qi 10Wワイヤレス充電台&紫外線UV除菌器を使ってみた!(30%Offクーポンあり)

Lecone Qi 10Wワイヤレス充電台&紫外線UV除菌器を使ってみた!(30%Offクーポンあり)

今回紹介するのはLeconeのQiワイヤレス充電台&紫外線UV除菌器です。置くだけでスマホなどを簡単に充電できるQiワイヤレス充電器とボックスの中に入れたスマホや小物などを...

Samsung Galaxy A80がフラッシュセールで激安!さらに66ドル安くなるクーポンあり!

Samsung Galaxy A80がフラッシュセールで激安!さらに66ドル安くなるクーポンあり!

今回はSamsung Galaxy A80の激安情報とクーポンについて紹介します。ただいま、GearBestでは、Samsung Galaxy A80 4G Phablet 8GB RAM 128GB ROM Original International V...

MOTOROLA Moto Zのバッテリーを自分で交換してみました!

MOTOROLA Moto Zのバッテリーを自分で交換してみました!

私の愛用しているモトローラ製のスマホのMoto Zなんですが、購入して2年も経たずにバッテリーが異常で100%まで充電しても5分くらいで落ちるというくらいヘタってしまったの...

AliExpressでスマホのバッテリーを激安で輸入してみました!

AliExpressでスマホのバッテリーを激安で輸入してみました!

最近スマホのバッテリーの調子が悪くて、100%まで充電しても5分くらいで電源が落ちてしまうようになってしまいました。交換用バッテリーをamazonなどで探していたのですが...

Leconeの5in1機能モバイルバッテリー付きUSB扇風機を使ってみた!(クーポンコードあり)

Leconeの5in1機能モバイルバッテリー付きUSB扇風機を使ってみた!(クーポンコードあり)

今回はLeconeの5in1機能 モバイルバッテリー付きUSB扇風機を紹介したいと思います。この5in1機能とは5つの機能がありモバイルバッテリー、携帯扇風機、卓上扇風機、スマホ...

合計230ドル!?8個のソフトウェアを無料でゲットできるキャンペーン!

合計230ドル!?8個のソフトウェアを無料でゲットできるキャンペーン!

現在WonderFoxとFotoJet、Auslogics、WiseCleaner、Epubor、Iris、DoYourData、PCWinSoftの8社が協力して、8つのソフトウェアのライセンスを無料でプレゼントする新学期キ...

VirtualBoxにElementaryOSをインストールしよう!

VirtualBoxにElementaryOSをインストールしよう!

前回の記事のOracle VM VirtualBoxで仮想マシン環境を構築しよう!ではVirtualBoxをインストールして仮想マシンを作れる状態までやりました。そこで今回はその続きで実際に...

Oracle VM VirtualBoxで仮想マシン環境を構築しよう!

Oracle VM VirtualBoxで仮想マシン環境を構築しよう!

今回はOracle VM VirtualBoxを使ってelementary OSの仮想マシン環境を構築したいと思います。Linuxなどの他のOSを使いたい時に、物理マシンにインストールするというのもあ...

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位が表示されます。今ならリンクするだけで簡単に上位に表示されます。