JavaScriptファイルの読み込み時間を短縮する
JavaScriptファイルの読み込み時間を短縮する方法を、自分なりに整理しました。
- もともとのファイルサイズを小さくする
- 無駄な処理を書かない
- コメントや空白を取り除く「圧縮」加工をする
- 転送時のファイルサイズを小さくする
- ファイルを転送しなくてもよくする
「読み込み時間」が、下記の絵のどの範囲を指しているか整理していないので、キャッシュの話を一緒に考えると混乱します。なので、以降では「もともとのファイルサイズを小さくする」について書きます。
無駄な処理を書かない
遊びですし、動けば何でもOKなスタンスなので、「無駄な処理を書くな」といわれても一朝一夕では無理です。
コメントや空白を取り除く「圧縮」加工をする
以下のツールが紹介されています。これなら自分にもできそうなので試してみます。
結果、ファイルサイズは以下のようになりました。コメント書きまくりだったので、だいぶ圧縮効果が出ています。
圧縮ツール | ファイルサイズ(byte) |
---|---|
デフォルト | 3,819 |
YUI Compressor | 1,170 |
packer | 1,534 |
効果測定
圧縮したファイルに置き換えて、再度、パフォーマンス測定ツールを実行します。「Page Speed」的には、まだダメみたいです。