生活情報オンライン

ソフトウェアエンジニアが役立つ情報を発信します。

あなたのサイトは重い!HTMLのファイル読み込み時間を確認する方法

先日の記事でHTMLファイルではjsファイルを読み込むことが出来ると記載しました。 


読むこむと重くなるんじゃないの?と疑問に思われた方もいるかもしれません。今回はその読み込む速度はどんなものなのかということを確認していきます。

 

この確認方法を身に着ければ、今後ユーザー目線でのWebサイト作りが出来ることになるでしょう。日本人はWebサイトに関してはせっかちだとGoogleさんも言ってましたからね。読み込みに時間がかかると、そのサイトを見ないで帰っちゃう傾向が強いんだそうです。

 

HTMLがファイル読み込みする際の速度を確認する方法

では、さっそく確認方法を解説していきます。簡単3ステップです。

 

1.HTMLファイルを開く

計測したいHTMLファイルをChromeで開いてください。今回の確認にはChrome(クローム)を使用します。

 

2.デベロッパーツールを開く

デベロッパーツールを開いてください。開き方の詳細はこちらの記事にあります→簡単・正確に、サイドバーのサイズを変更する方法

 

3.Networkタブを選択

デベロッパーツールを開いたらNetworkタブを選択してください。選択したらF5で更新です。

 

するとTimeの項目に読み込み時間が表示されたことでしょう。下の図は first.js、second.js、third.js をHTMLファイルが読み込んだときのものです。それぞれ1Mbyte、2Mbyte、3Mbyteとして作成しておきました。

 

f:id:somegoro:20160528165310p:plain

 

ちなみに、1Mbyte ぴったりのファイルを作りたいとか言うときにはコマンドプロンプトを使って作成すると便利です。

 

コマンドプロンプトで次のようにして作成してみてください。

fsutil file createnew <ファイル名> <サイズ>

 

ファイル名は自由に指定できます。サイズは10進数でbyte単位です。(1Mbyteのときは2の10乗。2Mbyteのときは2の20乗。3Mbyteのときは2の30乗。)