Web高速化・軽量化メモ
Webサイトを高速化するための個人的なノウハウをドバッと。
今や3秒ルールすら甘いので。
現状を把握する
まず、現在のサイトがどの程度重いのか、何を解決するべきかを調べる。
Google PageSpeed Insights
https://developers.google.com/speed/pagespeed/insights
公開中のURLから解決策をダイレクトに出してくれる。
まずは大雑把にここで調べる。
Firefoxプラグイン「YSlow」
https://addons.mozilla.org/ja/firefox/addon/yslow/
さらに具体的にファイル単位でどうすべきかを出してくれる。
対応すべき項目は大体決まっており、主な内容は下記。
- HTTPリクエスト減らせ
- gzip圧縮しろ
- ブラウザキャッシュ使え
- 画像サイズ削減しろ
- HTML/CSS/JSを縮小化しろ
- CSS/JSの読み込み順序を最適化しろ
計測サービスの値をオールAにするのは不可能なので、あくまで目安。
Firebugの「ネット」タブでスピード計測し、2秒以内であれば良し、1秒以内ならベストと考えて良いと思います。
HTTPリクエスト削減
ブロードバンド化でファイル単体の読み込みがすぐ済むようになった現在、体感的にスピードを落とす原因はHTTPリクエストの多さにあります。
画像のほか、CSSファイル、JSファイルなど、開いているHTML以外のあらゆるファイルを読み込むことがHTTPリクエストになるため、要するに読み込むファイルを減らせということ。
- 画像のスプライト化
- CSS/JSファイルの結合
CSS/JSファイルの結合は実際にやるとファイル・ソースのメンテナンス性が無くなるので、システムレベルで結合&ミニマイズができればベスト。
gzip圧縮、ブラウザキャッシュ
これだけで転送量が40~50%前後は余裕で削減される。作業工数に対しての効果が最大級の対策。
ただしサーバの設定やシステムによっては使えない場合もあるので、導入はケースバイケース。
http://dogmap.jp/2010/04/20/wordpress-htaccess/
上記はWP用のhtaccessの記述ですが、「# BEGIN WordPress」以外の記述はWP以外でも有用です。
またキャッシュを残す仕組みになるので、修正時のキャッシュ対策も必須になります。
画像サイズ削減
透過PNGの需要が増したことで最近はフルカラーPNGを使うのが主流になっていますが、GIFを使うべき画像はGIFの方が軽いので使い分けましょう。
JPEGに関しては下記サービスが異常にサイズを落としてくれるので、大きい写真を多用する場合などは利用も検討してください。
http://www.jpegmini.com/
HTML/CSS/JSの縮小化
改行や無駄なスペース、コメントの削除をする。
ここはHTTPリクエスト削減にも近いですが、実際に触れるソースに施すとメンテナンス性が無くなるため、改行・コメントの一括除去ができるシステムを使うと便利です。
WPなら自分は「Head Cleaner」「WP Minify」というプラグインを併用してます。
CSS/JSの読み込み順序
<head>内でCSS・JS・CSS、のような読み方をせず、CSSを先に全て読み、次にJSを読むという流れ。ファイル結合ができていればあまり気にする必要はなくなる。
また<head>内で読む必要のないJSは</body>直前の最下部で読み込むようにする。
<head>内に書かれたものは、それらが全てロードされるまでページの表示が行われないため、オンロードでの動作に関係ないJSは<head>の外に出した方が良いため。
筆者について
- ゲームとジョジョを愛するファミッ子世代。好きな言葉は「機能美」。
公私ともにWebサービスを作る系男子。
最近の投稿
- 運用2017.03.03nginxのkusanagiにLet’sEncryptをかけてるとiOSで表示されない問題の解決
- 運用2016.07.22分かりにくい「クリエイティブコモンズ」をシンプルに言うと
- WordPress2016.07.12新しいWordPress「Calypso」を試した
- Design2016.03.09Win10アプリのデザインガイドラインが素晴らしい