昔書いた社内ブログ記事です。

どうも（ｐ・ω・ｑ）

最近この本を読みました。とてもいい本でした！

ハイパフォーマンスWebサイト ―高速サイトを実現する14のルール Steve Souders,スティーブサウダーズオライリージャパン発売日：2008-04-11

Webサイトを高速化するときに、私たちエンジニアは
サーバとかデータベースとかバックエンド側のことを考えがちですが、
じつはフロントエンドの方を改善するほうが低コスト＆高パフォーマンスであることと、
その方法がまとめられた本でした。

フロントエンドの方がすきな私にとっては嬉しいハナシ！（ｐゞεσｑ）

ほんとにそんなに早くなるの？って人は、このグラフを見てみてください。

一昔前のYahoo!ページへアクセスしたときに、
HTMLファイルやその他のファイルをDLするのにかかっていた時間だそうです。

縦に並んでいるのは、そのWebサイト内に埋め込まれたファイル。
横はそれぞれのファイルを取得し始めてから取得完了するまでの時間の長さです。

一度に取得できるファイルには制限があるので、順々に取得されていっています。

＜参考＞
Pingdom Tools（私はこういう計測にこれ使っています）
http://tools.pingdom.com/fpt/

一番最初に呼ばれるHTMLファイルは、
例えばPHPとかデータベースを使って動的に生成している部分です。

PHPのコードの書き方や、SQL文の書き方が悪くてサイトが重くなっても、
それが主に影響するのはこのたった5％の部分です。

（平均的にはだいたい20％くらいがHTMLファイルの取得に当たるそうですが。）

それよりも残りのファイルを取得する速さを半分に縮めたら、
サイト全体の表示スピードがぐーんと上がると思いませんか。

っていう主旨です。

もちろんバックエンド側の最適化も必要ですが、
フロントエンド側でもたくさんできることがあるんですよ！！っていう。

結構軽んじられがちなんだけど！！

この著者はYahoo!のサイトを最適化した人で、
Webサイトのパフォーマンス測定ツール、YSlowを作成した人でもあります。

この本ではWebサイトを速くするための14個のルールを上げて解説しています。

ルール1　HTTPリクエストの数を減らそう!
ルール2　CDNを使おう!
ルール3　Expiresヘッダーを追加しよう!
ルール4　コンポーネントを圧縮しよう!
ルール5　CSSは上に!
ルール6　scriptは下に!
ルール7　CSSのExpression()は使わない!
ルール8　JavaScriptとCSSは外部ファイルに!
ルール9　DNS Lookupsを減らそう!
ルール10　コードのサイズを圧縮する!
ルール11　リダイレクトを避けよう!
ルール12　スクリプトの重複に気をつける!
ルール13　ETagを正しく設定する!
ルール14　Ajaxをキャッシュ可能にする

この中からいくつか紹介しようと思いますが、
私の解説じゃぁわかりにくいって人は、このサイトを参考にしてみてください。

数年前の記事なので14番目のルール（Ajaxのキャッシュ）はありませんが、
Yahoo!の公式記事を翻訳したとのことなので信頼できると思います。

＜参考＞
Webサイトの高速化フロントエンドのパフォーマンスの重要性 (Yahoo! developer netoworkより翻訳) | 株式会社インターオフィス
 http://www.inter-office.co.jp/contents/177/

ルール1 HTTPリクエストの数を減らそう!

CSSへのリンクを減らす。
なるべく1つのファイルにCSSをまとめる。

JavaScriptへのリンクを減らす。
なるべく1つのファイルにJavaScriptをまとめる。

画像へのリンクを減らす。
なるべく1つのファイルに画像をまとめる。

・・・。

最後ので「何言っちゃってるの？」って思った人はこれを見てください。

Googleの検索結果画面のロゴを右クリックして保存すると、これです。
なんかよくわからない部品がたくさんありますよね。

「CSSスプライト」というテクニックをどうぞ！（｀・ω・´）

＜参考＞
CSSスプライトで画像を円滑に表示させる | Webクリエイターボックス
 http://www.webcreatorbox.com/tech/css-sprite/

CSSスプライトを作るためのジェネレータまとめ | IDEA*IDEA
http://www.ideaxidea.com/archives/2010/09/css_sprite_generator.html

画像のリンクを減らす方法はもう1つあります。

画像のデータをテキストで表示して、タグやCSSの中に埋め込んじゃう方法です。

「URIスキーム」もお持ち帰りください！（｀・ω・´）

＜参考＞
データURIスキーム | MOL
http://t32k.com/mol/2010/04/data-uri-scheme/

Image To Data URI Convertor - webSemantics（URIスキーム作成サイト）
http://websemantics.co.uk/online_tools/image_to_data_uri_convertor/

ルール5 CSSは上に! & ルール6 scriptは下に!

これはホント、見て取れるくらい変わります。

先にScriptを読み込ませると、
画面の表示が始まらないので一瞬真っ白な画面が出ちゃいます。

＜参考＞
なぜCSSは先でJavaScriptは後に読み込ませることが推奨されるのか ≪ cyano
http://www.onflow.jp/cyano/archives/143

ルール10 コードのサイズを圧縮する!

いらないスペースやコメントを削除する「縮小化」と
ファイルそのものを圧縮する「gzip」があります。

私の場合、縮小化でファイルサイズがだいたい4分の3くらいになります。
gzipと組み合わせるともっと節約できるみたいです。

＜参考＞
Minify Javascript Online / Online JavaScript Packer（JavaScriptの縮小化サイト）
http://jscompress.com/

CSS Minify!! - ありんく tech-tools（CSSの縮小化サイト）
http://www.alink.co.jp/tools/css_minify/?#css_minify_result

ちなみに画像の圧縮もするとよいです。

見た目をほとんど変えずにファイルサイズを小さくすることができます。

＜参考＞
Yahoo! Smush.it!
http://www.smushit.com/ysmush.it/

ルール12 スクリプトの重複に気をつける!

同じJavaScriptと二度読みこまない！
読み込む順番に気をつける！

WordPressだとwp_enqueue_scriptっていう関数がありますね。

ま　さ　か　直　接　<script>　タ　グ　を　書　い　て　い　ま　せ　ん　よ　ね　！　？　笑

この関数を使えば、適切な場所で、適切な順番で、重複しないように、
JavaScriptを読み込んでくれます。

できればWordPressじゃなくても、これと同じような関数を作って
JavaScriptのファイル管理をしなさいよってことですねー。

＜参考＞
テーマでwp_enqueue_scriptを使う ≪ Waviaei
http://waviaei.com/2009/05/15/using-wp-enqueue-script-in-themes/

+++

簡単ですが、こんなところです。

参考のためのところどころにリンクを貼りましたが、
ぜひ本の方も読んでみてくださいねー。

もっともっといろいろなテクニックが載っています。

私は続編を読もうと思います。
jQueryやAjaxなど最近のテーマを解説しているらしいです。

続・ハイパフォーマンスWebサイト ―ウェブ高速化のベストプラクティス
Steve Souders 武舎広幸

それではまた。