Quoteのアーカイブ

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

パフォーマンス向上のための14のティップス

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をキャッシュ可能にする

検索エンジン3社、正しいサイトURLを認識させるcanonical属性を導入（URLの正規化）

Google、Yahoo!、Microsoftの3社は2009年2月12日、共同で新しいタグ「 rel=”canonical”」のサポートを開始した。rel=”canonical”（属性）は、検索エンジンに正しいサイトのURLを認識(正規化、canonicalization）させるために使用される。

第1回　モバイルサイト構築前に知っておきたいユーザビリティ10のポイント

主要導線ページはなるべく軽くして体感速度を理解する

こうした主要ページについては、見せたい情報と、下層で展開すればいい情報とを明確にし、可能な限り情報を絞るページ構成を考えると共に、モバイルサイト構築で最も重要な、サービスの対象端末での実機確認をこまめに行い、体感速度を常に理解しておくことが非常に重要です。

詳細ページでは軽さよりも情報量を優先する

コンテンツの詳細を説明するページにおいては、多少1ページ容量が重くなっても、ユーザーの「知りたい」や企業の「伝えたい」がしっかり伝わるページにしましょう。これはPCサイトでも同じことですが、制約の多い端末操作のなか、商品検索してたどりついたページの情報が薄いとユーザーはがっかりしてしまいます。

画像の“点数”がページの表示速度に影響

特に注意するべきなのが、画像の容量ですが、単純に画像の容量だけでなく、1ページの画像数が多いと画像のリクエスト数が増え、ブラウザスペックによっては、表示が非常に遅くなることがあるので、

などなど。

自分じゃCSSスプライトくらいしか実践してない。書籍のほうもせっかく貸してもらってるんだし（積ん読に仲間入りさせて年を越してしまった）オライリーのものにしてはかなり薄手なんだから、これを機会にさっさと読んでしまおう。

ヤフーの画像はなぜyimg.jpドメインなのか？ サイト高速化の手法とヤフーの失敗例

ヤフーでは、ページはyahoo.comやyahoo.co.jpのドメイン名に置いてありますが、画像ファイルはyimg.comやyimg.jpのドメイン名に置いてあります。これはなぜでしょうか？

それは、複数のドメイン名を使ったほうが、ブラウザが平行してデータをダウンロードできるからというのが1つの理由です。Webサーバーとブラウザの間の通信のルールで、1つのドメイン名に対する持続的な接続は同時に2つまでにすることが望ましいとされているのです。

もう1つの理由は不必要なクッキーによる通信量の増加を避けるためです。

訪問者の状態をユーザーのブラウザに保存しておくクッキーは重要な技術ですが、ブラウザはサーバーとやりとりをするたびに手元に保存してあるクッキーのデータをWebサーバーに送ります。送られたクッキーの情報をサーバー側で利用しない場合は、クッキーのやりとりをしないほうがパフォーマンスは良くなります。

そこで、そもそもクッキーを必要としない画像を担当するサーバーはドメイン名を別にすることでクッキーのやりとりをなくしているのです。クッキーはフォルダ名でも対象を指定できますが、多くの場合はサイト全体で利用するためにドメイン名全体に対してクッキーを指定しています。ですから、ブラウザがクッキーを送らなくするには、ドメイン名を分けるのが最善なのです。実際に、米Yahoo!が画像用に利用しているyimg.comではクッキーを利用していないません。

Yahoo!パフォーマンスチーム、最新高速化ルール20を発表

新しい20のルールはサーバ、コンテンツ、クッキー、JavaScript、CSS、画像、モバイルの7つに分類されている。新しく紹介されたルールは次のとおり。

1. バッファは早期にフラッシュする (サーバ)
2. AJAXリクエストにGETを使う (サーバ)
3. コンポーネントのポストロード (コンテンツ)
4. コンテンツのプレロード (コンテンツ)
5. DOM要素数の削減 (コンテンツ)
6. ドメインをまたがってコンテンツを分離 (コンテンツ)
7. iframeの数を最小化 (コンテンツ)
8. 404を作ってしまわない (コンテンツ)
9. クッキーサイズを最小化 (クッキー)
10. コンポーネントに対してクッキーフリードメインを使う (クッキー)
11. DOMアクセスを最小化 (JavaScript)
12. かしこいイベントハンドラを用意 (JavaScript)
13. @importよりもlinkを使う (CSS)
14. フィルタの使用は避ける (CSS)
15. 画像を最適化 (画像)
16. CSS分割を最適化 (画像)
17. HTMLにおいて画像をスケールさせない (画像)
18. favicon.icoを小さく作成しさらにキャッシュを有効にする (画像)
19. 25KB以下にコンポーネントをキープする(モバイル)
20. コンポーネントを複数のドキュメントへパックする(モバイル)

ブラウザでチェックできるadd-on(Firefox)まで出ているとは知らなかった。これも後で試してみよう。
パフォーマンスチェックツール「YSlow」＊要Firebug

Windows版のSafariにある「開発」メニューもなかなかよさそうだけど。（ネットワークタイムラインの表示とか）