JavaScriptファイルの読み込み時間を短縮する

JavaScriptファイルの読み込み時間を短縮する方法を、自分なりに整理しました。

  • もともとのファイルサイズを小さくする
    • 無駄な処理を書かない
    • コメントや空白を取り除く「圧縮」加工をする
  • 転送時のファイルサイズを小さくする
  • ファイルを転送しなくてもよくする

「読み込み時間」が、下記の絵のどの範囲を指しているか整理していないので、キャッシュの話を一緒に考えると混乱します。なので、以降では「もともとのファイルサイズを小さくする」について書きます。


無駄な処理を書かない

遊びですし、動けば何でもOKなスタンスなので、「無駄な処理を書くな」といわれても一朝一夕では無理です。

コメントや空白を取り除く「圧縮」加工をする

以下のツールが紹介されています。これなら自分にもできそうなので試してみます。


結果、ファイルサイズは以下のようになりました。コメント書きまくりだったので、だいぶ圧縮効果が出ています。

圧縮ツール ファイルサイズ(byte)
デフォルト 3,819
YUI Compressor 1,170
packer 1,534

効果測定

圧縮したファイルに置き換えて、再度、パフォーマンス測定ツールを実行します。「Page Speed」的には、まだダメみたいです。