1. Home
  2. コンピュータ
  3. ブラウザ
  4. Chromeの新機能Blink LazyLoadを有効にして表示を高速化しよう!
AmazonAmazon クレジットカードAmazon DashAmazon PrimeAmazon.co.jpAmazon
MySQLでONLY_FULL_GROUP_BYのエラーが出たときの対策!

MySQLでONLY_FULL_GROUP_BYのエラーが出たときの対策!

先日のサーバー移転の際にMySQLのバージョンを5.7にしたのですが、ONLY_FULL_GROUP_BYのエラーが出てしまい、今までのソースコードでは正常に動作しなくなってしまいました...

サーバーメンテナンスのお知らせ!(2019/05/24~25)

サーバーメンテナンスのお知らせ!(2019/05/24~25)

いつもShopDDおよびNetaGearをご利用いただきありがとうございます。2019年5月24日(金)、5月25日(土)2時AM2:00~AM:6:00頃にサーバーの移転及びメンテナンスを行います。作...

Loctekのガス圧式 液晶モニターアーム D8を使ってみた!

Loctekのガス圧式 液晶モニターアーム D8を使ってみた!

今回紹介するのはLoctek製のガススプリング式(ガス圧式)の液晶モニターアーム D8です。ガススプリング式を採用しており通常の固定式の液晶モニターアームと比較すると、移...

ギガビット対応のLANケーブル延長コネクターを買ってみた!

ギガビット対応のLANケーブル延長コネクターを買ってみた!

先日の記事でダイソーで売っているLANケーブル延長コネクターを購入しましたが、せっかく最大1Gbpsのフレッツ光ネクスト ギガファミリー・スマートタイプを契約しているの...

日本未発売の薄型背面バッテリーmoto modsの「moto power pack」を買ってみた!

日本未発売の薄型背面バッテリーmoto modsの「moto power pack」を買ってみた!

ちょっと前の記事で日本未発売で日本に発送できない商品を購入する方法の例として、Xボーダーを利用して日本未発売の超薄型背面バッテリーmoto modsの「moto power pack」...

HTML+CSSで3D空間を表現した「CSS FPS」がすごい!

HTML+CSSで3D空間を表現した「CSS FPS」がすごい!

今回紹介するのはHTMLとCSSを使ってFPSゲームなどでよくあるような3D空間を表現した技術デモサイトである「CSS FPS」のサイトを紹介したいと思います。HTML+CSSで表現でき...

YouTubeのチャンネル&動画分析ツールの「NoxInfluencer」で分析しよう!

YouTubeのチャンネル&動画分析ツールの「NoxInfluencer」で分析しよう!

今回紹介するのは、YouTubeのチャンネル分析が可能なマーケティングツールである「NoxInfluencer」です。NoxInfluencerを使うことでYouTubeチャンネルランキング、比較、タ...

動画変換やダウンロード、画面録画などが可能なマルチな動画ソフト「VideoProc」!

動画変換やダウンロード、画面録画などが可能なマルチな動画ソフト「VideoProc」!

先日からGWプレゼントキャンペーンでライセンスコードをプレゼントされていたVideoProcですが、今回はそのVideoProcを実際に使ってみたのでレビューを書きたいと思います。...

Vegas Proの手ブレ補正機能の効果を検証してみました!

Vegas Proの手ブレ補正機能の効果を検証してみました!

先日86%オフのキャンペーンで購入したプロ用動画編集ソフトのVegas Proですが、今回はそのVegas Proを使って手ブレしている動画にVegas手ブレ補正プラグインを使って手ブレ...

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