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

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

前回の記事はこちら⇒WEBの高速化を考慮すべき理由

ロケットスタート

皆さん、こんにちは。

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

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

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

1.スタイルシート(CSS)の不要な部分を削除する

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

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

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

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

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

2.画像のファイルサイズを小さくする

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

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

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

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

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

TinyPNG のサイトはこちら

3.CSSやJavaScriptのファイルを1つにする

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

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

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

しまう方が良いです。

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

良いです。

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

4.html・JavaScript・CSSを圧縮する

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

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

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

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

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

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

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

Online JavaScript/CSS Compressor のサイトはこちら

HTML Minifier のサイトはこちら

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

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

    この記事が参考になりましたらシェアしてください

    この記事を書いた人

    • 業務コンサルタント高橋進伍
    • 1968年生 愛知県名古屋市出身 会計・給与・販売購買在庫・税金系などの業務システムを製造・販売する某上場企業の出身で、会計・IT・WEBを中心とした業務改善などを行う業務コンサルタント
    • 中小企業庁『ミラサポ』登録専門家/あいち産業振興機構登録専門家/名古屋産業振興公社登録専門家
    • (Publisher:TRILOGYFORCE.COM)

    Sponsored

    関連記事

    Comments

    " data-numposts="5">

    コメントを残す

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

    お問い合わせ

    お悩み・問題・課題を今すぐご相談ください。お問い合わせはこちら

    ページのトップへ戻る