WEBを高速化するための改善策

Shingo Takahashi — Fri, 02 Oct 2015 15:33:45 +0900

WEBの高速化を考慮すべき理由を前回のWEBに関する情報にて書きましたが、

今回は、前回告知しました通り、実際の改善策に関してご紹介します。

皆さん、こんにちは。

業務コンサルタントの高橋です。

WEBの高速化を考慮すべき理由に関しては前回の記事をご覧いただくとして、

早速、WEBを高速化するための改善策をご紹介していきます。

１．スタイルシート（CSS）の不要な部分を削除する

WEBを改修しているうちに、以前は使っていたが今は使用していないセレクタが

あったりします。それを見つけて該当箇所を削除します。

これを行うことによってCSSファイルのサイズを小さくしてあげます。

Chromeブラウザーを使っている方は、デベロッパーツールの中にAuditsという

タブがありますので、それを走らせることで確認できます。

デザインなどのお仕事をされている方は別として、画像は少々品質を落としても

パッと見はわからないくらいであれば問題ないはずです。

であれば、少々画像のファイルサイズをコンパクトにしてあげれば良いです。

私は画像を使用する都度コンパクトにしています。

ちなみに、TinyPNGとういウェブツールを使わせてもらっています。

例えば、style.css、common.cssなど、複数のスタイルシートを読み込ませている

場合、それぞれをロードしにいく分ロスがあります。

これはJavaScriptにも同じことが言えますので、JavaScriptも１つにまとめて

しまう方が良いです。

また、他のCSSを読み込むのに＠importを使うのは、スピードのことを考えると避けた方が

良いです。

＠importで指示されたところから別のファイルを参照しますので、それがロスです。

html・JavaScript・css、どれも余分なスペースや改行が入っていることが多いです。

それもファイルサイズが大きくなっている要因の１つ。

ですので、その余分なスペースや改行をなくしてしまうのが一番効率がいいわけです。

しかし、手動でやっていると大変手間がかかってしまうので、私は圧縮してくれる

ウェブツールを使って圧縮しています。

Online JavaScript/CSS CompressorやHTML Minifierというウェブサイトで、

貼り付けてボタンをクリックするだけで圧縮してくれます。

まずは第一段階として、各ファイルサイズをコンパクトにすることをお話ししました。

これだけでも違ってきますので、是非試してみてください。