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

以下斜め読んだ内容

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

Strangeloop「wine.comにsite optimizerを導入してもらった件」

斜め読み

strangeloopnetworks.comで恐らく2012.4.13頃に公開された記事

Case study: Wine.com - Strangeloop

  • 2012.4.13の公式アカウントでのtweetから公開日を推定
  • ie6-7しか使えない環境から大量の注文が届き、ie6-7で注文出してくるお客はサイトの遅さにシビアで、商材への法規制が複雑かつ改正が頻発し、ページ表記を超柔軟に変えないといけない
  • そんな商材(ワイン)のECサイト、7年目突入のwine.comにサイト高速化ツールSite Optimizerを導入してもらうまでの道のりを色々データ出して説明する、という主旨のエントリ
  • wine.comのエンジニア達がコンバージョン上げるために、ABテスト、リソースの軽量化、色々最適化を続けた。けど「リソース足りない」のでツール探したのがきっかけ
  • ctoのインタビューからとったコメントをもとに再構成。クライアントからのリップサービスも多い
  • pdf版もあり
以下斜め読んだ内容
  • はじめにwine.comのCTOのお言葉
    • フロントエンド最適化ベンダーを調査してみて出した結論
    • ベンダーの中でstrangeloopは突出してる
    • グローバル展開してるサイトを高速化させた実績のあるのはstrangeloopだけ
    • site optimizerはエンタープライズ規模でも対応できる唯一のプロダクト
    • クライアントのサイトがクラウド使ってるとかそうでないとかも関係なく対応してる
  • wine.com?
    • ワイン専門のecサイトでは過去7年no.1。「internet retailer magazine」調べ
    • 登録ユーザは100万以上
    • ワインの種類は、1万3000種以上
    • 2011年のデータだと、200万ボトル以上を出荷、昨対比35%増
    • ギフトやアクセサリなどワイン関連の商材もある
    • サイトではレビュー投稿、レーティング、リスト作成ができる
      • 約4万人くらいのコミュニティができてる
      • レビューやワインリストなどがシェアされてる
  • Geoffrey Smalling(=wine.com cto)曰く
    • パフォーマンスはローンチ直後から最重要課題
    • 購入直後にお客からフィードバックをもらうようにしてる
    • ceoはこのフィードバックの全てに目を通してる
    • フィードバックのうち「サイトが遅い」系は全部cto宛に転送。結構な数が来る
  • パフォーマンスがネックになってるのはモダンなECサイト共通の悩み
  • お客はインタラクティブなエクスペリエンスを求める
    • ニーズに応えるため、ECサイトはリッチなコンテンツをページに詰め込まないといけない
  • コンテンツの詰め込みは代償がつきもの
    • cto曰く
      • リッチな機能と画像のデータ転送とレンダリングには所要時間が発生
  • wine.comの高速化へのもう1つの壁はIE6-7対策が必須なこと
    • cto曰く
      • 調査してわかったこと
      • 購入金額の高いお客の中で金融系の会社の人がかなりいる
      • 金融系のお客は職場から注文してる
      • 金融系のお客の職場で使えるブラウザはIE6-7だけ
      • ie6-7向けにはwine.comはまるで最適化されてなかった
      • 金融系のお客はクソ重いページから注文を出す羽目になってた
  • データセンターのリージョンもまずかった
    • データセンターは西海岸にあった
    • 金融街のお客はたいてい東海岸にいた
    • 地理的に離れてるので、ページ読み込み時間が更に遅れる要因となった
    • ベストタイムで4秒という状態だった
  • ページ読み込み時間が4秒かかること
    • これで満足するECサイトも中にはある
    • wine.comにとっては満足できる状態じゃない
    • 「3秒以下」がwine.comの目標だった
  • cto曰く
    • 「読み込みに4秒」でよしとできた時は過去の話
    • テクノロジーは進歩し、お客の期待は大きくなった
    • 4秒じゃ遅い
  • 「読み込みに2秒」はデカい目標だったのは昔のことで、今は達成しないといけない
    • 達成できなければ、潜在顧客を失う。特に初回訪問者を失う
  • 2009年からwine.comのパフォーマンス最適化はスタートしてる
    • wine.comのデザインをリニューアルしたタイミングから
    • cto曰く
      • 当時リニューアルにはとても中の人たちはワクワクしてた
      • 訪問者へ提供する情報をより豊かに
      • ナビゲーションを合理的に
      • 見栄えもよくなった
      • お客により豊かなエクスペリエンスを提供できるという自負があった
      • しかし待っていたのは、コンバージョンの大幅下落
  • デザインリニューアル後のコンバージョン大幅下落の原因を中の人たちは探った
    • 今回の新デザイン版と、簡易版でA/Bテストしてみた
    • 簡易版はボタン3つ、2−3個の画像、コピー少々だけの構成
    • テスト結果は簡易版の圧勝。コンバージョンも相当上昇してた
  • cto曰く
    • 当時中の人たちが痛感させられた事実
    • お客は、素敵なデザインではなくサイトの速度を気にしてる、と
    • 「速度大事」と気づいてからサイトのソースに手を入れた
    • 簡易版の速度に近づけるように新デザイン版のソースに手をいれた
    • テコ入れしていくと新デザイン版のコンバージョンは回復してきた
    • 速度改善をサイト全体レベルで実施できるようにリソースを割くべき
      • と、気付いたきっかけになった
  • 2009年以降のwine.comのエンジニアチームが実行したこと
    • サイトのソースに手を入れてパフォーマンス・チューニングを続けた
    • 「サイト全ページで3秒以下に」の実現にはリソースが足りないと気付いた
  • cto曰く
    • wine.comでは1.3万以上の商品ページがある
    • 各商品ページに対して、別バージョンが7つある
    • 8バージョン必要なのは、ワイン出荷に対する法規制が州によってバラバラでお届け先次第で表記を変えるため
    • お客がwine.comを訪問してリンクをクリックしたとき
    • お客の居住州を突き止め、該当州への出荷にたいする法的制限の有無をチェックしたあとで、お客に合わせたページを表示させる
    • これを3秒以下でやらないとダメ
  • wine.comの高速化の課題おさらい
    • ページはリッチコンテンツ
    • ページは法規制にあわせて8バージョン用意
    • ページはie6-7で閲覧される
  • 洗い出した課題を解決するものをみつけるべくwine.comチームはリサーチを開始
  • cto曰く
    • 高速化のためのツール、サービスを探してみた
    • strangeloopは抜きん出てた
    • site optimizerは全てのブラウザ/OSに対応するツール
    • セキュリティも万全だった
    • site optimizerはかなり有望にみえた
    • 1つのツールを手軽なコストで導入するだけで、抱えてる課題全てが解決できるなら、相当すごいこと
  • wine.comでのsite optimizer導入はあっという間に終わった
    • 2010年のホリデー商戦に間に合った
    • wine.comが重視する指標全てで劇的な改善を達成できた

ブラウザ別でみると最大で45%導入後高速化した

  • cto曰く
    • site optimizerは名前通りのことをしてくれる
    • 全てのブラウザ/OS別の最適化をやってくれる
    • 期待を裏切らないソリューションを使うのはとても気分がいい
  • ブラウザ別平均ページ読み込み時間(2012.2時点)
    • 遅い順に並べた
    • ie7:7.6秒
    • ipad safari5:5.2秒
    • ipad safari5.1:4.2秒
    • ie8:3.5秒
    • mac safari5:3.4秒
    • Fx10(win):3.1秒
    • chrome17(win):3秒
    • ie9:2.8秒
    • Fx10(mac):2.7秒
    • safari5.1:2.5秒
    • chrome17(mac):2.3秒
  • ビジネスにあわせてパフォーマンス最適化をさらにカスタマイズ
    • cto曰く
      • wine.comはたいていのecサイトよりも複雑なのは複雑な法規制があるため
      • ワインの出荷場所と出荷方法に関する法規制がとても複雑でたえず変化してる
      • 法規制の改正はwine.comサイト全体に影響を与える
      • お手軽ソリューションはwine.comには役に立たない
      • strangeloopのカスタマーサービスはサイト実装プロセス全般に対して優れてる
      • wine.comのビジネスは法規制の強いユニークなビジネス
      • ビジネスに合わせたパフォーマンス最適化をさらにカスタマイズしていく必要があるが、strangeloopはそれにも十分応えてくれてる
  • サイト規模の恒常的増加が生み出す影響を減らす
    • cto曰く
    • 「読み込みを2秒以内に」はまだ達成できてないががんばってる
    • wire.comのマーケティングの人はどんどん効果的ツール、コンテンツ、etc.をどんどん新たに編み出して導入しようとする
    • この手の新規コンテンツ、ツールの導入は、パフォーマンス担当の人からすれば「負担が増えた」と映るの通常
    • site optimizerは次々登場する負担を軽減するように働いてくれてる
    • (補足)含意不明。どう軽減してくれるのかの説明が脱落してる
  • 他のパフォーマンス系のツールと併用できる
    • cto曰く
      • 「これだけでOK」と言えるような、ページ高速化の万能薬はない
      • パフォーマンスに意見のある人でもパフォーマンスに影響をおよぼす複雑な要因の絡まり合いを深く理解しているわけじゃない
      • パフォーマンス改善は多方面からのアプローチが必須
      • site optimizerはwine.comが導入してるサイト高速化のあくまで1つの(重要な)パーツ
      • 高速化のために他にも手を打ってる。AakamaiのDynamic Site Acceleratorも使ってる
      • パフォーマンス専門のエンジニアも招聘してる