3G回線で何秒かかりますか?手軽に回線速度をかえて表示ができるChrome DevToolsのPerformanceパネルを使ってみよう!

回線は速いほうがいいですよね!でも、すべての人が速い回線ではないとなると、今みているページってどのくらいで表示されるんだろう?自分が作ったページはどのくらいかな?

通常はあまり意識されないかもしれませんが、「このページ、なかなか表示されないね?」と聞くとドキッとするWebデザイナーさんも多いと思います。WebデザイナーさんやWebエンジニアさんは、たいていの人は高速回線でインターネットを利用しているケースが多く、遅い回線での表示がそもそもできないのです。

DevToolsのPerformanceパネルなら、擬似的に3G回線が体感できる!

2018-02-08-chrome-performance01.jpgDevToolsのPerformanceパネル。さまざまな情報が細かく計測されています。

ChromeのDevToolsにある「Performanceパネル」を利用しましょう。擬似的に回線速度を選ぶことができます。選べるネットワークは、以下の4つです。

  1. Online・・・設定なし(通常)
  2. Fast 3G・・・擬似的に高速な3G回線
  3. Slow 3G・・・擬似的に低速な3G回線
  4. Offline・・・???

まずはFast 3Gで試してみましょう。というのも、Slow 3Gは本当に遅くて、とても時間がかかってしまいます。

また、自分で設定を追加することもできます。低速な128Kbpsやプラチナバンドなど、自分に必要な設定を追加すれば、納品チェック時に大いに役立つでしょう。

ちょっと試す場合は、設定を変更しておこう

2018-02-08-chrome-performance02.jpgこの3つを設定変更すると、かなり処理が速くなります。人前で使う時はオススメ。

かなり高機能なパネルですので、そのまま利用するとかなり時間がかかります。「ちょっと調べてみたい」という程度でしたら、設定を変更しておきましょう。

  1. Screenshots のチェックボックスをOFF
  2. Disable JavaScript samples のチェックボックスをOFF
  3. Enable advanced paint instrumentation(slow) のチェックボックスをOFF

とくにScreenshotsは重いです。でも、これ楽しいというかわかりやすいです。

Screenshotsで経過時間ごとの表示が確認できる

2018-02-08-chrome-performance03.jpgYahoo! JapanをPCで計測したところ。トップページの描画が段階的にみれます。

ms(ミリ秒)で計測されていて、ところどころスクリーンショットをとってくれます。どの段階でどこまで表示されているか、が確認できるので、パラパラ漫画のような感じで眺められます。やっぱり表示が遅いのは外部広告系のJSですかね。外部ネットワークだし、パーソナライズまでしているので、ほかのコンテンツよりは表示に時間がかかってそうです。

高速表示には画像最適化が最も効果あり

ページで利用されるファイルのうち、容量が重いのは画像とフォントです。フォントは変更されることがほとんどないので、キャッシュしちゃいましょう。でも、画像は日々更新され増えていきます。スマホのカメラも解像度上がっていますし、容量も増えています。

LightFileは、SSIMという画像評価指数を元に、キレイで軽い画像に処理します。1つのパラメータで一括処理するのではなく、複数枚の処理画像を作成し、その中でキレイで軽い画像を選ぶ機能があります。なので、「この画像だけずいぶん劣化してる...」ということもないのです!

JPGの最適化は、LightFile Core | 画像の最適化でページ表示を高速に!

JPGの最適化は、LightFile Core | 画像の最適化でページ表示を高速に!

自動でJPEGファイルを容量削減し、表示の高速化/転送量の削減を実現します。

サーバで処理するので、サイト全体をまるまる画像最適化できちゃいます!

最後に

ChromeのDevToolsは本当に高機能です。ほかにもDevToolsのNetworkパネルについて記事を書いているのであわせてどうぞ!

ツールを上手く使って、品質を上げていきましょう!では!

前へ

カンタンに今みているページの表示時間計測ができる!Chrome拡張機能「Page Load Time」はDevToolsよりもお手軽で使いやすい!

次へ

Ranklet活用ブログ(6):Ranklet追加機能のご要望ランキングについて