これが決定版じゃね？とってもお手軽Webページ高速化の方法とツール

サイトの表示は速ければ速いほうがいいですよね。

Googleは表示速度が0.5秒遅くなっただけで、検索数が20％減少、 Amazonは表示速度が0.1秒遅れただけで、売上が1％下がるといいます。

GoogleがSEOの条件に表示速度を採用したという話も聞きます。 『速い = ユーザーの使い勝手が良い』に繋がりますもんね。 そりゃGoogleだって、使い勝手の良いサイトを上位に表示させたいはずです。

というわけで、ページ高速化の方法をまとめてみました。 それぞれ便利なツールも紹介してますので、よろしくどうぞ。

画像を最適化する

・色数の多いもの（写真など）はJPG、色数の少ないもの（イラストなど）はPNGかGIF。 ・一般的にGIFよりもPNGの方がファイルサイズは小さくなる。 ・PhotoShopで書き出す際は「Web用に保存」を使う。（不要なメタデータなどを削除してくれる） ・書き出しレベル100は意味が無い。（ファイルサイズが大きいだけで、画質はさほど変わらない） ・webpなんつー拡張子があるらしい。 などがありますね。 画像を最適化して使うことでファイルサイズを抑えて、表示速度を速くすることができます。

【 画像最適化に便利なツール 】

■ JPEGmini jpgのファイルサイズを圧縮してくれるツールです。画質の劣化がほとんどありません。（英語サイト）

■ ImageAlpha Mac用のアプリですが、PNGをかなり圧縮できます。（英語サイト）

使い方はこちら

PNG画像のファイルサイズが1/3に！PNG画像を超軽量化する「ImageAlpha」

画像はサイズを指定する

imgタグのwidth、height属性を入れるってことですね。 ブラウザが表示の為に必要なサイズを予め計算できるので、速くなります。

HTTPリクエストを減らす

たとえば、CSSSpriteと呼ばれるやつです。 サイト上で使用する画像を一つのファイルにまとめて、1回の呼び出しで済むようにします。 YouTubeやAmazonなどトラフィックの大きなサイトは軒並み採用していますね。

[YouTubeのCSSSprite]

[AmazonのCSSSprite]

それぞれ、画像をひとつにまとめてリクエストを1回にしています。

あとは、複数あるCSSやJavaScriptのファイルをまとめてあげるのも効果的ですね。

【 HTTPリクエストを減らすのに便利なツール 】

■ CSS Sprite Generator 画像を一式Zipにしてアップロードすると、ひとつのファイルにまとめてくれます。

CSSは上に、JavaScriptは下に『まとめて』記述する

CSSはサイトの描画に必要なものなので、先に読み込ませることで、表示を速くします。 表示だけでも速くして、ユーザーにストレスを感じさせないようにしようということですね。 JavaScriptは目に見えるの部分ではないので、後回しでいいんです。

JavaScriptなどは圧縮する。

JavaScriptファイルに入っている、改行やコメントアウトなど、不要な箇所を削除してファイルサイズを減らします。 さらにgzip圧縮でファイルサイズはぐっと減らせます。

ウェブサイトをgzip圧縮で高速化する

Webサイトの.htaccessをいじってGZIP圧縮を使う

【 JavaScriptなどの圧縮に使えるツール 】

■ compressor JavaScriptやCSSなどの不要なタグを削除して圧縮してくれるツールです。（英語サイト）

CSSのセレクターは短く書く

CSSでスタイルを指定するときは、 [html]div#logo[/html] よりも [html]#logo[/html]

としたほうが速いです。 短く指定してあげましょう。

サイトをチェックする

最後にサイトの表示速度などをチェックするツールをご紹介します。

■ webwait 表示速度をチェックしてくれるツールです。（英語サイト）

使い方はこちら

【目指せ3秒以下！】ブログの表示速度をチェックできる『WebWait』を使ってみる

■ ページ表示のどこに時間がかかったかチェックするブックマークレット Web担当者Forumで紹介されていたブックマークレットです。

■ PageSpeed Insights (by Google) Chromeのプラグインです。 サイトを解析し、改善方法を提案してくれます。

使い方はこちら

ついに出た！Chrome版「Page Speed」の使い方

まとめ

GoogleやAmazonの例でもあるように、ほんの少しの表示速度の違いで、サイトの目的達成に大きな差が出ます。 便利なツールや無料で使えるサービスなんかも増えてきて、ある程度のものは簡単に作れる世の中です。 こういった細かな気遣いが出来ることがクオリティに繋がってくるんじゃないかと思います。 できるところからやっていきましょう。

ハイパフォーマンスWebサイト ―高速サイトを実現する14のルール