Webサイトの高速化・軽量化に使えるTips・参考記事を集めてみました

Googleもスマートフォンに参入、ノートPCが完全に主流になるなど、ブロードバンドから逆に回線の「低速化」が起こっています。

参考： 今だからこそ、「軽量なウェブサイト」を作ることが重要、というお話

また、GoogleはWebの表示速度をPageRankに加味することを検討中であることを明言しています。

ただ、そうは言ったものの、ちゃんと実装しないと話しにならない訳で・・（大汗
細かいことでもちゃんと積み重ねて行かねばと。

というわけで、軽快なサイトを実装するためのTipsを自分のサイトで使ったのを備忘録的にここにも書いておきたいと思います。

まずはまとめ記事から

原則を押さえてから、細かいところに行った方が効率がよいかな、と思います。

30分でできる！Webサイトを高速化する6大原則

最適化を行うための観点が簡潔にまとまっていて、高速化チェック項目として有効です。
具体的な方法もいくつか示してくれているので、これだけでもちょっとしたインパクトがありそう。

1. 画像は最適化してから使え！
2. 画像はサイズを指定せよ！
3. HTTPリクエストは最小にせよ！
4. CSSセレクターは短く最適化せよ！
5. CSSは上に、JavaScriptは下に『まとめて』記述せよ！
6. プロファイリングツールを使いこなせ！

あなたのウェブサイトを高速化する方法

フロントエンドの実装の14のティップスやツール紹介されています。
一つ一つの実行方法までは書いていませんが、上のASCIIよりも細分化されているので、より丁寧にToDoへ落とすことができそうです。

1. HTTPリクエストを減らす
2. コンテンツデリバリーネットワーク（CDN）を使う
3. Expiresヘッダを追加する
4. コンポーネントをgzip圧縮する
5. スタイルシートを先頭に配置する
6. スクリプトを末尾に配置する
7. CSS expressionの使用を避ける
8. JavaScriptとCSSを外部ファイルに記述する
9. DNSルックアップを減らす
10. JavaScriptのサイズを小さくする
11. リダイレクトを避ける
12. スクリプトの重複を排除する
13. ETagの設定を変更する
14. Ajaxをキャッシュ可能にする

Expiresヘッダなんかは、やれていない人も多いのではないでしょうか。
元は幸いなことに、下サイトで細かい解説まで書かれています。どうやら元はYahoo! developer netoworkの内容みたいですね。

→ Webサイトの高速化 フロントエンドのパフォーマンスの重要性

次はメジャー企業の具体例

国内代表選手はYahoo! News

かなり他のサイトにも使える実例で、かつ高速化のインパクトの大きさを理解できます。

システムを全面的に見直し、記事1本を表示するのにかかる時間を1秒以内に短縮しました。従来は、平均3～5秒だったそうです。

PC Online 「Yahoo!ニュース」の表示速度が3～5倍に、そのからくりは……

Yahoo Newsが行ったのは

• 複数枚の画像を1枚にまとめる「CSS Sprite」の採用
• 画像ファイルの形式の変更（Gifから8bit-PNGへ）
• PNG形式の制御情報（チャンクと呼ぶ）の削除

例えば、写真有りのニュースにつけるアイコンと「New」のファイルは、以下のように1つにまとめられています。

（これで1つの画像）

Googleのようにサーバーのレスポンスを上げる方法も確かに重要ですが、フロントエンドでもこれだけのインパクトが出せる、ということは知っておいて損はないでしょう。

Youtubeでも採用していますね。

CSS Spriteについては、運用サイトで早速実装してみましたが、結構簡単かつ確実に結果が出るのがよいですね。

CSS Spriteの具体的な実装方法

実装するだけでなく、画像を背景化するためユーザビリティ・アクセシビリティ面での注意点も理解する必要があるのが、その他の対策とは異なる点です。

• 独学で極める “Webデザイン”の技と心 CSS Spritesでサイトを高速化
• CSS Spriteを使う際の注意事項

王者、Googleの高速化対策

検索結果を始めとするGoogleのレスポンスの速さは誰もが体験していますが、そこにもWebの高速表示のためのノウハウがつぎ込まれています。

スピードをもたらしている要素の一つが、同社の徹底的に簡素化された設計と大規模なサーバファームだが、ページのロードを高速化するための果てしない最適化努力も忘れてはならない。 （TechCrunch）

Googleが使用しているのは、Page Speedというツール。Page Speedは画像を自動的に圧縮してWebサイト上ですぐに使えるようにするほか、ページの表示に使われていないCSSやJavaScriptを見つけてくれます。

不要なファイルを一掃することでページのロードを短縮できるツールですね。
→ Page Speedのページ

※Yahoo（US）のFirefox用プラグインである、YSlowも同じような機能を持っているようです。（未使用）

言ってしまえば極めて地味な作業なわけですが、その積み重ねがGoogleのあの快適さを支えているんだなと改めて実感。

書籍で学ぶなら

おなじみオライリーから、ハイパフォーマンスWebサイトが出版されていて、これが割とお手ごろかなと。
まとめでは具体的な方法まで書かれていないことまで詳細に詰めてあります。

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

posted with amazlet at 10.01.25

Steve Souders スティーブ サウダーズ
オライリージャパン
売り上げランキング: 30185

おすすめ度の平均:

仕事で作る人、趣味で作る人、両方にためになります
フロントエンド方面の最適化手法がわかる本
目からウロコでした。
これからのフロントエンド・エンジニアリングの重要性
簡単なWebサイトの高速化

Amazon.co.jp で詳細を見る

ただ、サーバー・DB側の最適化は色々と書籍にまとまっている割に、フロントエンドの実装はまだまだこれからといった印象です。
本もその他にはあまりめぼしいものは見当たらず。

この後、PNG8も試す予定なので、その結果も実際ここで紹介したいとおもいます。

■ 関連記事

• 今だからこそ、「軽量なウェブサイト」を作ることが重要、というお話
• サイトを作る時に、iPhone対応をしないといけない日がもう目の前に来ている
• ユーザの不満を招く、「重いページ」と「縦にやたら長いページ」
• 2010年版 ユーザーインターフェース（UI）・ユーザビリティ必見サイト/必読書