Senthil Padmanabhan「2倍速実現したeBay Motors Homepage」

• eBay Tech Blog 2011.10.14のエントリ
• senthilの肩書きは「Site Speed Evangelist」

The New eBay Motors Homepage is 2X Faster ― eBay Tech Blog

• data uri使ったサイト高速化というアイディア実戦投下し成果出た

css lintをCIに組み込んでレポート通り問題潰して200ミリ秒高速化した
なエントリ

• 「画像表示にimgは無しにしてdivと背景画像組み合わせたら速くならないかな？」という黒魔術なテクニックも、「とりあえず試す」が信条のebayエンジニア

以下斜め読んだ内容

• eBay Motors homepage
  • ローンチしてから５年経ってる
  • そろそろテコ入れ必要かな、してた
• テコ入れの目標の１つが高速化
  • リニューアル前より２倍は速くしたかった
• 結果
  • 二倍高速達成
  • YSLOW、PageSpeedのスコア比較した
  • 
  • 本当かよ？な人はPageSpeedで追試できる
    • 前のページ
    • 新しいページ
• もっと手を入れたいと思ってる
• 高速化作業で学んだことは３つある
• 1. ページをチャンクに分けて段階的にレンダリングさせた
  • 体感速度アップにうってつけ
    • ユーザはいきなりコンテンツを見始めるから
  • 最初に表示される部分（ファーストビューor above the fold）、と残り（below the fold）に分割
  • このサイトのアクセスデータから70%のユーザの画面サイズは1024x768pxだと分かった
    • このデータをもとにページを上下分割
    • 上
      • 
    • 残り
      • 
  • ページ分割によって最適化のやり方が特定される
  • ファーストビュー部分の最適化は、サーバーサイドの処理の高速化に向けられる
    • キャッシュサーバを入れると、バックエンドへ投げられるファーストビュー部分の表示に必要なデータのリクエスト数が激減する
  • ページの残りの部分へ、jsの読み込み、パース、バインディング等々を移動させる
  • 結果実現できること
    • ページの残りやページUI動作に必要なjsの読み込み完了する前に、ユーザはファーストビューの閲覧を開始できる
• 2. Data URLを画像表示に使う
  • httpリクエストを減らせる
    • cssスプライトとのと併用でも効果出た
    • cssファイルの中で、通常画像のパスを指定する箇所でData URI使った
  • 一応フォールバックは付けてる
    • ie7以前など、Data URI非対応ブラウザ向け
    • その場合は画像ファイルを読み込むように設定
  • ブラウザのキャッシュ機能が活かせる
    • • cssファイルはブラウザでキャッシュされる
  • 外部cssファイル+cssファイル経由の画像読込よりもhttpリクエスト減らせる
• 3. CSS Lintおすすめ
  • CSS Lint
  • jslintのcss版。css記述で発生してる問題を検出
  • css lintでは色々ルールも調整できる
  • css lintがサポートするルールから必要なルールだけ使う、とか
  • css lintのソースが公開されてる
    • 開発チームのCIビルドシステムに組み込み可能になり、チェックがスムーズに
    • 改善可能なポイントの検出がらくらくに
    • 使ってないスタイル、冗長なスタイルの削除
    • cssセレクタを効率的に使ってるか
    • 再利用可能でメンテナンスできるcssスタイルの記述
  • 200ミリ秒高速化生んだ
    • 開発チームのコードベース全体にcss lintを実行
    • レポートされた問題をどんどん潰していった
  • css lintは開発チームのビルドシステムの必須アイテムになった
  • プロダクション環境で発見する前に、問題を検出できるようになった
  • cssのスタイルが膨大なサイトでは、使った方がいい
• 次のプラン
  • 今回のリリースで当初の目標をクリアできるだけのパフォーマンス改善
  • 次回リリースでは、画像表示のテクニックを１つ試す予定
  • div要素+背景画像による画像表示のテクニック
    • 通常だとimg要素使うところを高速化のためにdiv使うという話
    • flickrの人書いたエントリで知ったテクニック
      • Code: Flickr Developer Blog » Lessons Learned from the Flickr Touch Lightbox
      • 斜め読んだ（Stephen Little「Flickr Lightbox開発で得たノウハウ」）
    • 画像を大量に使うプロジェクトで実験してみた
    • img要素使うケースと比べて、効果はあった
    • 一番改善したページだと23%高速化した
    • 画像少なめのページだと効果なし。もっと検証必要