Webサイトの表示高速化

ソーシャルボタンやプラグインをいくつか読み込むようになるとサイトの表示に時間がかかると顕著に感じるようになります。

なんであのサイトはあんなにコンテンツとか広告、画像が豊富なのにあんなにサクサク動いているのだろうか？と思うことは最初はないですけど、そのうち思うようになります。

そして気づきます。ホームページの表示を高速化させる方法があることに・・・

ページ読み込みスピードを計測する

ページの読み込みのスピードを計測してくれるサイトは探せばたくさんありますが、そのうちの１つが以下のサイトです。

計測したいサイトのURLを打ち込むとロードまでに何秒かかるかを計測してくれます。ドロップダウンで確認したいブラウザを選ぶこともできます。

続いて誰もが使っているアドオン、Firebugですね。

アドオンですので、ブラウザの拡張機能として使用することができます。IEで入れれるかどうかは調べたことがないので不明ですが、Firefoxはメニューバーのツール→アドオン→アドオン入手より、Chromeは初期画面右下のウェブストアより入れます。

Firebugはスクリプト実行時のエラーを返してくれるのでjavascriptを多用するサイトを作成するのには非常によくつかわれます。Firebugは他にも色々機能があり、そのうちの一つが表示スピード計測機能なわけです。

Firebug起動後、ネットタブを有効化し、ページを読み込むと下のほうに計測時間が表示されます。

中央下の転送量のカッコはキャッシュ量を示しています。初めて訪れるサイトはブラウザのキャッシュが全くありませんので読み込みに時間がかかりますが、2回目訪れる際はブラウザがHTMLやCSSの情報をキャッシュしておいてくれているのでキャッシュされていない情報だけをサーバーから取り出す分読み込み時間が大分減ります。キャッシュ前とキャッシュ後の読み込みスピード比べると2倍近くの差がでます。

ステータスの200OKというのは、HTTP/1.1 200 OKのことでそのファイルがレスポンスされたというサーバーからの情報（みたいな感じ？）、304notModifiedはキャッシュを使用したってことです。

一度キャッシュをしてしまうとキャッシュをしていない時の表示スピードはどうすれば測定できるのかと思いますが、これには2つの方法があって、1つはキャッシュをブラウザのオプション的な画面（Firefoxはオプション→詳細、Chromeは設定→履歴、IEはインターネットオプション）から削除する方法、もう1つはCtrl＋F5で強制リロードを行う方法です。

F5はただのリロードですが、Ctrl＋F5は強制リロードとしてキャッシュを読み込まずに表示させる方法です。

＋のところを押すとで隠れている画面としてヘッダ情報を見ることができます。とはいえ、ヘッダ情報を見るのははLive HTTP headerというアドオンがいいと思います。

ページ読み込みスピードを改善する

計測ページで測定しただけではほかのサイトより早いか遅いか、更新する前より早いか遅いかしかわからないし、どうすれば早くなるのかを教えてくれるわけでもありません。

そこで、速度とそれに対する改善案を提示してくれるPage speed insightの出番です。

開発元はGoogleですのでChromeのウェブストアよりインストール可能です。「page speed」のようなキーワードで検索してみてください。

IEはわかりませんがFirefoxにも入れることができます。Firefoxの場合はブラウザのアドオン入手から入手できませんので、GoogleDeveloperのサイトからXpi形式でDLしたあと、ファイルからアドオン追加にて追加します。

実は、アドオンとして組み込まなくてもGoogleのサイト上で直接計測もできます。

pagespeedのアドオンを起動（chromeはツール→デベロッパーツールより）してURLを入れて計測をしてみると、

のように診断結果と対処法がでてきます。

ブラウザのキャッシュを活用する

静的リソースの HTTP ヘッダー内で、有効期日や最大経過時間を設定すると、ブラウザが以前にダウンロードしたリソースをネットワークからではなくローカルディスクから読み込むようになりますと出ているはず。

キャッシュの有効期限を長く設定するためには、apacheのmod_expiresモジュールを使用してhttpd.confを書き換える作業が必要だ。

自分のサーバーがこれに対応しているかどうかは聞いてみないとわからないかも？？（安いところだとだめかも？）

.htaccessファイルは自PC内で作ることはできないので、適当なファイルを作ってサーバーにアップしてから名前変更で作成するのが普通です。開くのはもちろんテキストエディタ。置く場所は適用させたい最上位のディレクトリ、すべてのサイトに適用させるならindex.htmlと同じ階層に置けばよい。

こいつに、

<ifModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1800 seconds"
ExpiresByType text/html "access plus 604800 seconds"
ExpiresByType image/gif "access plus 2592000 seconds"
ExpiresByType image/jpg "access plus 2592000 seconds"
ExpiresByType image/jpeg "access plus 2592000 seconds"
ExpiresByType image/png "access plus 2592000 seconds"
ExpiresByType image/x-icon "access plus 2592000 seconds"
ExpiresByType text/css "access plus 604800 seconds"
ExpiresByType text/javascript "access plus 216000 seconds"
ExpiresByType text/php "access plus 216000 seconds"
ExpiresByType text/ruby "access plus 216000 seconds"
ExpiresByType application/pdf "access plus 2592000 seconds"
ExpiresByType application/x-javascript "access plus 216000 seconds"
ExpiresByType application/x-shockwave-flash "access plus 216000 seconds"
</ifModule>

のようにキャッシュしておく時間を記述する。最近はGoogleがExpires を 1 週間以上にしろとうるさいんで期間は１ｗ以上か。 if～はもしmod_expiresというモジュールがあったらっていう記述だが、この文はなくても動く。

ただし、これをやると頻繁にファイルを更新したりするときに古いキャッシュがいつまでも読み込まれてしまって不具合の原因になるので、そういうときは、バージョン番号を付けるとよい。

<link rel=”stylesheet” type=”text/css” href=”style.css?1” />

？に続く文字列がそれで、これを付けたとしてもブラウザはstyle.cssを読み込むきちんと読み込んでくれます。つまりこのクエリ文字列は無視されます（PHPとかだとGET情報とかになる）ので異なる文字列を記述してもブラウザは？の前のファイルをきちんと読み込んでくれます。

しかし、クエリ番号が１だったり２だったり異なる番号であったときには別ファイルと認識するので古いキャッシュを使わずまた別の新しいキャッシュを取得します。

圧縮を有効にする

gzip や deflate を使用してリソースを圧縮することで、ネットワークで送信されるバイト数を減らすことができます。とでているはず。

gzip圧縮というのはzipとかlzhとかそういうやつと同じ圧縮形式のこと（拡張子は.gz）。この記述のgzipとdeflateはモジュールのことを示してるのかな。

これに対応しているかどうかを調べる簡単な方法は、HTTPヘッダ情報を確認すること。（Live Http header）

最初はブラウザの情報です。図ではFirefox18がgzipやdeflateを受け取ることができるよということになります。

するとブラウザからのリクエストを受信したサーバーがgzipファイルを返せる場合はgzipに圧縮して、ブラウザへ返送、ブラウザはgzipを展開して表示するという流れになります。

で、このgzipに圧縮→返送の流れには、ぱっと調べた感じだと（たぶん）3パターンあるみたいです。

1つ目はApache1.x系を使用しているサーバー用。これは自分のレンタルサーバーのApacheのバージョンを調べてみてもらってからになりますね。Apache1.x系はmod_gzipというモジュールを使用して圧縮します。以下を.htaccessファイルに記述するだけ。

<ifModule mod_gzip.c>
  mod_gzip_on Yes
  mod_gzip_dechunk Yes
  mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
  mod_gzip_item_include handler ^cgi-script$
  mod_gzip_item_include mime ^text/.*
  mod_gzip_item_include mime ^application/x-javascript.*
  mod_gzip_item_exclude mime ^image/.*
  mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>

2つ目はApache2.x系を使用しているサーバー用。mod_deflateモジュールを使ってもっとシンプルに記述できます。

<ifModule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript application/x-javascript
</ifModule>

3つ目は、上の2つがサーバーで圧縮してくれる方法に対して、自分でgzipに圧縮したファイルをアップロードするパターン。lhazとかで圧縮する感じ。解凍に対応していないブラウザもあるだろうから圧縮してないファイルもアップしておくのかな？（よくわからない。。。）

RewriteEngine on
RewriteCond %{HTTP:Accept-Encoding} gzip
RewriteCond %{REQUEST_FILENAME} !\.gz$
RewriteCond %{REQUEST_FILENAME}\.gz -s
RewriteRule .+ %{REQUEST_URI}.gz
<files *.html.gz>
AddType "text/html;charset=utf-8" .gz
</files>
<files *.js.gz>
AddType "text/javascript;charset=utf-8" .gz
</files>
<files *.css.gz>
AddType "text/css" .gz
</files>
AddEncoding x-gzip .gz

どの方法であったとしても、CSSやjsファイルに.gzのような拡張子を付けてlink relで読み込む必要はないです。

詳しくは、下記サイト（一部引用元）を見てください。

CSSスプライトに画像をまとめる

CSSスプライトを利用して複数の画像を1枚にまとめて、cssのbackground-positionプロパティで移動させながら表示させることで、複数枚の画像を読み込む必要がなくなるのと画像サイズを抑えることができるため速度の向上が見込める。

スプライト画像を作るには、1つにまとめたい画像をまとめて圧縮ソフトでzip形式に圧縮して1MB以下にしたら、下記のサイトに飛んでアップロード→作成ボタンを押すと、画像のみならずCSSまで生成される。

CSS Sprite Generator

すごいすごいと思ってスプライト画像を作ってみていざ適用させてみようとすると、ただの背景として使って上に文字があるケースならいけるんですが、画像だけの場合、aタグの間にimgがなくなって幅も高さも０になってしまうじゃん？ということになる。

そこで、aとimgを使ったボタンみたいに利用するときのケースとして、下記サイトのようにaの中にはすべて同じ画像を入れて、widthを指定してはみ出た部分をhiddenしてmarginで画像を移動させるという方法もある。

背景画像を使わずにCSSスプライトをする方法

スプライトした画像をさらにPunyPNGで圧縮（150kbまで）すればもっとサイズが縮まります。

PunyPNG

Googleが薦めてくるPNG圧縮ツールにOptiPNGてのがあり、DL後、解凍し、exeファイルに圧縮したいPNG画像をドラッグするだけで簡単に圧縮してくれる。

PunyPNGのproバージョンとくらべてみたら、白黒画像の圧縮は大差なし、カラー画像はPunyPNGの圧勝だった。月500円でPunyPNGの方がいいのか。

CSSとjQueryの高速化

CSSの高速化

クラスよりもIDを使う：スタイルを指定したい要素が一つだけであればクラスでなくIDを使用したほうが高速になる。

セレクタの解釈は右から左へ：スタイルシートの「#z1 img.z2 {}」のような書き方は#z1→img.z2の順序ではなく、img.z2→#z1の順に探し効率が悪いので、「img.z2 {}」に直す。

とにかく、「div h2 p」とか子孫がだらだら長くなるにつれて動作が遅くなる。あまりに長いようなら、あえてクラスを振ってクラスで指定したほうが効率が良いこともある。（クラス振りすぎとの按分で）

IDとクラスの前の要素名は不要：「div#z1」は、「#z1」にすると早くなる。ただしクラスの場合においてのみ、jQueryでセレクタ指定するとに「.z1」とすると逆に遅くなるので、css上ではよいが、jQueryで使う場合は「div.z1」にすることに注意する。

jQueryの高速化

jQueryにおいて、同じセレクタを多数回用いるときは、変数に格納してしまって、変数を記述したほうが高速である。

$(function(){
	$("p#z4").click(function(){
	$("div#z5 img:not(:animated)").fadeIn("slow");
	});
	$("p#z4").click(function(){
	$("div#z5 img:not(:animated)").fadeOut("slow");
	});
});

上記は、p#z4がかぶってるから、何度も呼び出す時間を短縮するために変数に格納してから使用する。

$(function(){
	var z4 = $("p#z4");
	var z5 = $("#z5 img:not(:animated)");
	z4.click(function(){
	z5.fadeIn("slow");
	});
	z4.click(function(){
	z5.fadeOut("slow");
	});
});

みたいな感じにすれば高速になる。

また、主語が同じであれば、メソッドチェーンを使ったほうが高速になる。

$(function(){
	var z4 = $("p#z4");
	var z5 = $("#z5 img:not(:animated)");
	z4.click(function(){
	z5.fadeIn("slow")
	.fadeOut("slow");
	});
});

その他簡単なの

CDNを使う

コンテンツデリバリーネットワークと呼ばれるネットワークです。jQueryとかのライブラリを自分でどこかのフォルダにおいて呼び出すよりも、GoogleDeveloperから読み込んだほうが高速だよというやつ。

画像にサイズを指定する

画像にはCSSかHTMLのwidth=""でサイズを指定するとリサイズという無駄な作業が減り、あらかじめブラウザがそのサイズの領域を確保してくれるため表示速度が向上します。

スタイルシートは先頭に、スクリプトは最後に

cssファイルはhead内に置くが、jsファイルは/bodyの直前に置いたほうがページロードが早くなるというもの。ただし、表示に関係したり、タグを定義したりするようなjsファイルは先頭に置いたりする。

html5.jsはhtml5のタグをIE8以下でも認識してくれる外部スクリプトだけど、これはHTML5の専用タグであるnavとかsectionより後に置いたらダメだし、jQueryのjsファイルもそれを使って動かすjsファイルよりも前に置く必要があります。

その他たくさんの方法がWebparkさんの記事でまとめられています。ここに記述した内容の一部はこちら及びそのリンク先から引用させていただきました。

コメントor補足情報orご指摘あればをお願いします。

<< 前のページ
次のページ >>