121 Views
May 19, 10
スライド概要
2023年10月からSpeaker Deckに移行しました。最新情報はこちらをご覧ください。 https://speakerdeck.com/lycorptech_jp
Yahoo!検索の パフォーマンス向上策 全て見せます! ヤフー株式会社 R&D統括本部 髙林 貴仁 2010年4月9日 『続・ハイパフォーマンスWebサイト』(オライリー刊)出版記念イベント
自己紹介 髙林貴仁 R&D統括本部フロントエンド開発本部検索開発部開発2兼企画3 担当 l Yahoo!検索 l 地図検索 l 周辺検索 l エリア検索 l ログ解析 などなど 1 Copyright © 2010 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
お話させて頂く内容 l 概要 l 12のパフォーマンスTips l Tipsを利用した実践例 l 番外編 サーバサイドのお話 l これはやって損はない! 2 Copyright © 2010 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
概要 l Yahoo! Search Technology(YST)の検索結果の 表示 l 1秒間に数千リクエスト l 約100台のサーバで運用 l FreeBSD/Apache/PHP 5.2.xx l 5人のエンジニアで開発 3 Copyright © 2010 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
12のパフォーマンスTips 4 Copyright © 2010 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
Tips1:HTTP Request l HTTPのRequestはできるだけ減らす - DNSのLookupは平均20~120msかかる - 処理がブロックされる - 外部ドメインは2~4ドメイン位に抑える 5 Copyright © 2010 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
Tips2:Gzip l コンテンツをGzipする事で転送量の削減 96.2KB 約-70%の削減 6 Copyright © 2010 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 28.3KB
Tips3:First Byte l サーバリクエスト待ちのブラウザに対して先 に一部のhtmlを返すことによってブラウザの レンダリング処理を開始させる - 解析、ダウンロードを先に処理 - パフォーマンスが向上 7 Copyright © 2010 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
Tips3:First Byte FirstByte利用してない場合 サーバの処理 ブラウザ処理開始 リクエストを待って、ブラウザの処 理開始される。サーバ応答待ち時 間がもったいない。 FirstByteを利用した場合 サーバの処理 先に一部のデータを返して る為、ブラウザ側で待ち時 間に処理が行われている 。 ブラウザ処理開始 8 Copyright © 2010 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
Tips4:CSS スプライト l 複数の画像ファイルをまとめてCSS側で制御 -データサイズの削減 -HTTPリクエスト数の削減 #yschnrel dt { float:left; width:15px; height:16px; margin-right:-3px; backgroundmage:url(http://k.yimg.jp/images/search/websrp_8_080513.png); background-position:-50px -105px; text-indent:-9999px; } 9 Copyright © 2010 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
Tips5:CSS at Top l CSSは、<head>に置く – <head>要素にあるCSSをよみこみ、htmlを解析しながら描画を 開始する(プログレッシブ・レンダリング)。 10 Copyright © 2010 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
Tips6:Script Bottom l JavaScriptは、一番下に - JavaScriptを一番下に置く事でダウンロードやレンダ リングがブロックされないようにする – 重いスクリプトの場合、全てがダウンロードされるまで 描画がストップしてしまう場合がある 11 Copyright © 2010 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
Tips7:スリム化 l CSSやJSは、コメントや改行を削除してできるかぎり スリムにする l HTML内に、CSSやJavaScriptを直接記述 - データサイズの削減 12 Copyright © 2010 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
Tips8:Cookieサイズを抑える Cookie Size 時間 コスト 0 bytes 78 ms 0 ms 500 bytes 79 ms +1 ms 1000 bytes 94 ms +16 ms 1500 bytes 109 ms +31 ms 2000 bytes 125 ms +47 ms 2500 bytes 141 ms +63 ms 3000 bytes 156 ms +78 ms l Cookieのサイズはできるだけ下げる * Yahoo!inc計測結果を引用 13 Copyright © 2010 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
Tips9:Combo l 複数のJavascriptファイルや、CSSファイルを一つに まとめてリクエスト数を減らす <script language="javaScript" src="/combo?091130/jquery.js&100317/srp_sm.js"> </script> - リクエスト数の削減 - Gzipによるデータサイズの削減 14 Copyright © 2010 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
Tips10:PHP l PHPをカスタマイズ l パフォーマンスが悪い場所は、extensionを作成 - 強調表示(bolding),logging etc・・・ l パフォーマンスを優先 - 可読性が若干下がってでもパフォーマンスを優先 15 Copyright © 2010 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
Tips11:Federation Search l 複数のAPIを並列にリクエストする事で遅延時間を 改善 - PHP等では、curl_multiなどが有名。 - Yahoo! では、独自の並列モジュールを利用 - PHPのエクステンションで実装 - 条件分岐やタイムアウト等を設定ファイルで管理 - 動的な接続・ホスト等のパラメータを変更可能 - Yahoo!検索では10以上のAPIへリクエスト 16 Copyright © 2010 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
Tips12:ソフトウェアロードバランサ l 独自のソフトウェアロードバランサを実装 - PHPのエクステンションで実装 - 複数のサーバーに負荷を分散 - フェイルオーバーを実現 17 Copyright © 2010 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
Tipsを利用した実践例 18 Copyright © 2010 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
紹介した12Tipsを Yahoo!検索で実践した時の ビフォー・アフターの紹介 19 Copyright © 2010 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
Yahoo!検索で実施した事例の紹介 3つのTipsに関して最適化の実施 l HTTPリクエストの削減 l 描画開始時間の短縮化 l スリム化 20 Copyright © 2010 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
実践1:HTTPリクエストの削減 HTTPリクエスト数の削減を実施 - CSSスプライト(Tips4) - インラインCSS(Tips7) - 複数のjs/cssファイルをまとめる。(Tips9) リクエスト数 : -46% 21 Copyright © 2010 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
実践2:描画開始時間の短縮 描画開始時間の短縮 - First Byte(Tips3) - スタイルシートをHEADの先頭に置く(Tips5) - スクリプトは最後に置く(Tips6) 描画時間:-69% 22 Copyright © 2010 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
実践3:スリム化 ページ容量の削減 - コンポーネントのgzip化(Tips2) - JavaScript/CSSの縮小化(Tips7,8) - インラインcss/js化(Tips7) ページ容量 : -56% 23 Copyright © 2010 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
まとめ Score : 123% 24 Copyright © 2010 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
番外編 サーバサイドのお話 25 Copyright © 2010 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
サーバサイドでも何か、パ フォーマンスを改善できる 所はないか? 26 Copyright © 2010 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
サーバサイドのお話 l Frontendのサーバ負荷 - Frontendで複雑なビジネスロジックが増えてきた為、 cpuのリソースを大量に 消費している。 - cpuリソースの消費が多いためその分パフォーマンスが↓ l Frontendサーバの増加 - サーバリソースの消費を補う為、Frontendのサーバを大量に 増強する必要 がある - サーバを購入するコストが↑ 27 Copyright © 2010 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
サーバサイドのお話 経済的にもパフォーマンスにもやさ しい方法はないだろうか? 28 Copyright © 2010 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
サーバサイドのお話 CPU負荷の問題 現在のFrontendのサーバの 負荷が高い ! " # $ 負 荷 時間軸 29 Copyright © 2010 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
サーバサイドのお話 ハイスペックサーバと現在稼動している サーバの処理時間の比較 現在稼動してる サーバ ハイスペック サーバ ! " # $ 平 均 応 答 時 間 時間軸 30 Copyright © 2010 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
サーバサイドのお話 l 現在利用してるサーバは負荷が高い l ハイスペックサーバと比べると性能は約1/3 l ハイスペックのサーバと比べると約100msec位パフォー マンスが落ちる じゃぁ、 Frontendのサーバを全て新しいサーバに切り替えちゃ えばいい 31 Copyright © 2010 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
サーバサイドのお話 l お金で解決! l 経済的! l とても効果的! l とても楽! けど・・・。 金じゃなくて頭を使え!! By 社長 32 Copyright © 2010 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
サーバサイドのお話 じゃぁ、どうする?? 33 Copyright © 2010 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
サーバサイドのお話 Frontendのサーバリソースを 削減させよう。 34 Copyright © 2010 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
未来予想図 l FrontEndは、PresentationLayoutに特化 - Layoutに特化する事で、リソース削減 l 中間サーバを新たに設置 - C++ or Javaで開発し、リソースを削減 - 中間サーバにビジネスロジックを移す - FrontEndにシンプルなレスポンスを提供 35 Copyright © 2010 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
未来予想図 HTMLのレンダリングに特化 Frontend ビジネスロジック シンプルなレスポンスをFEに提供 中間サーバ YST 36 Yahoo! リスティング広告 関連検索 ワード Copyright © 2010 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止 自社コンテンツ
スケジュール l システムの共通化として10サービスのFrontEndを 共通フレームワークで開発中 l 中間サーバのモジュールを開発中 l Frontendを先行リリース(7月) 37 Copyright © 2010 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
これはやって損はない! 38 Copyright © 2010 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
これはやって損はない! l First Byteは活用しよう - cssをインライン化させる事でバッファサイズ も稼げるしcssの読み込みをできるので 1石2鳥 l ダイエット(スリム化)しよう - gzip、cssスプライト等を利用してスリム化させ よう。 39 Copyright © 2010 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止
ご清聴ありがとうござい ました! ※本資料は2010年4月9日『続・ハイパフォーマンスWebサイト』(オライリー刊)出版記 念トークイベントにて使用したものです。 40 Copyright © 2010 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止