読者です 読者をやめる 読者になる 読者になる

以下斜め読んだ内容

pseudo translation of useful posts, book reviews, remarks,etc. twitter: feeddict

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を画像表示に使う
    • 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のスタイルが膨大なサイトでは、使った方がいい
  • 次のプラン
    • 今回のリリースで当初の目標をクリアできるだけのパフォーマンス改善
    • 次回リリースでは、画像表示のテクニックを1つ試す予定
    • div要素+背景画像による画像表示のテクニック