ウェブページのパフォーマンス測定

技術者視点のユーザビリティ考 - 第30回 JavaScriptの動作を軽くするための工夫:ITproを読みました。JavaScriptの動作を軽くするための工夫には、大きく分けて以下のようなものがあるそうです。

  • JavaScriptファイルの読み込み時間を短縮する
  • 実行のタイミングなどを工夫して体感速度を上げる
  • JavaScript自体の処理速度を上げる工夫をする

前後しますが、パフォーマンス測定ツール「Page Speed」の測定結果をみたことが、本エントリを書くきっかけとなっています。(気が向いたら…)次回以降で、以下のチェック結果に対する手段について深堀りしたいと思います。

測定結果は以下のとおり。測定対象のウェブページは、以前のエントリでJavaScriptCSSを書いて遊んだページです。

各項目をクリックすると、詳細が表示されます。

Enable gzip compression

Compressing the following resources with gzip could reduce their transfer size by about two thirds (~3.4kB).
# 以下のリソースをgzipで圧縮すると、転送量を約3分の2減らすことができるでしょう。

    * Compressing http://ubuntu-vm/requestData.js could save ~2.5kB.
    * Compressing http://ubuntu-vm/style.css could save ~890 bytes.

Leverage browser caching

The following resources are missing a cache expiration. Resources that do not specify an expiration may not be cached by browsers. Specify an expiration at least one month in the future for resources that should be cached, and an expiration in the past for resources that should not be cached:
# 以下のリソースはキャッシュの有効期限が指定されていません。
# キャッシュの有効期限を指定しないリソースは、ブラウザによってキャッシュされないかもしれません。
# キャッシュされるべきリソースには少なくとも1カ月先のキャッシュの有効期限を指定し、そうでないリソースには過去に有効期限を指定します。

    * http://ubuntu-vm/requestData.js
    * http://ubuntu-vm/style.css

Favicons should have an expiration at least one month in the future:
# Faviconsには、少なくとも1カ月のキャッシュの有効期限を指定した方がよいでしょう。