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
- ローンチしてから5年経ってる
- そろそろテコ入れ必要かな、してた
- テコ入れの目標の1つが高速化
- リニューアル前より2倍は速くしたかった
- 結果
- もっと手を入れたいと思ってる
- 高速化作業で学んだことは3つある
- 1. ページをチャンクに分けて段階的にレンダリングさせた
- 体感速度アップにうってつけ
- ユーザはいきなりコンテンツを見始めるから
- 最初に表示される部分(ファーストビューor above the fold)、と残り(below the fold)に分割
- このサイトのアクセスデータから70%のユーザの画面サイズは1024x768pxだと分かった
- ページ分割によって最適化のやり方が特定される
- ファーストビュー部分の最適化は、サーバーサイドの処理の高速化に向けられる
- キャッシュサーバを入れると、バックエンドへ投げられるファーストビュー部分の表示に必要なデータのリクエスト数が激減する
- ページの残りの部分へ、jsの読み込み、パース、バインディング等々を移動させる
- 結果実現できること
- ページの残りやページUI動作に必要なjsの読み込み完了する前に、ユーザはファーストビューの閲覧を開始できる
- 体感速度アップにうってつけ
- 2. Data URLを画像表示に使う
- 3. CSS Lintおすすめ
- 次のプラン
- 今回のリリースで当初の目標をクリアできるだけのパフォーマンス改善
- 次回リリースでは、画像表示のテクニックを1つ試す予定
- div要素+背景画像による画像表示のテクニック
- 通常だとimg要素使うところを高速化のためにdiv使うという話
- flickrの人書いたエントリで知ったテクニック
- 画像を大量に使うプロジェクトで実験してみた
- img要素使うケースと比べて、効果はあった
- 一番改善したページだと23%高速化した
- 画像少なめのページだと効果なし。もっと検証必要