Yahoo!検索のパフォーマンス向上策全て見せます

250 Views

May 19, 10

#Webパフォーマンス #Yahoo!検索 #パフォーマンス最適化 #フロントエンド開発 #PHP

スライド概要

Yahoo!デベロッパーネットワーク

@ydnjp

スライド一覧

2023年10月からSpeaker Deckに移行しました。最新情報はこちらをご覧ください。 https://speakerdeck.com/lycorptech_jp

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

（ダウンロード不可）

関連スライド

深層学習による自然言語処理入門: word2vecからBERT, GPT-3まで

Yahoo!デベロッパーネットワーク 166.1K

ゼロから始める転移学習

Yahoo!デベロッパーネットワーク 86.6K

ヤフーにおける WebAuthn と Passkey の UX の紹介と考察 #idcon #fidcon

idcon fidcon

Yahoo!デベロッパーネットワーク 74.2K

OpenID Connectとネイティブアプリを取り巻く仕様と動向 Yahoo! JAPANの取り組み #openid #openid_tokyo

openid openid_tokyo

Yahoo!デベロッパーネットワーク 58.1K

運用業務とスクラムは本当に組み合わせにくいのか︖運用業務が大半を占めるプロダクト開発での試行錯誤

devsumi

Yahoo!デベロッパーネットワーク 36K

ヤフーのオンプレ機械学習基盤AIPFについて #ml_kubernetes

ml_kubernetes

Yahoo!デベロッパーネットワーク 29.3K

各ページのテキスト

Yahoo!検索のパフォーマンス向上策全て見せます！ヤフー株式会社 R&D統括本部髙林貴仁 2010年4月9日『続・ハイパフォーマンスWebサイト』（オライリー刊）出版記念イベント

Tips3:First Byte FirstByte利用してない場合サーバの処理ブラウザ処理開始リクエストを待って、ブラウザの処理開始される。サーバ応答待ち時間がもったいない。 FirstByteを利用した場合サーバの処理先に一部のデータを返してる為、ブラウザ側で待ち時間に処理が行われている。ブラウザ処理開始 8 Copyright © 2010 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

10.

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. 無断引用・転載禁止

11.

12.

Tips6:Script Bottom l JavaScriptは、一番下に - JavaScriptを一番下に置く事でダウンロードやレンダリングがブロックされないようにする – 重いスクリプトの場合、全てがダウンロードされるまで描画がストップしてしまう場合がある 11 Copyright © 2010 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

13.

14.

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. 無断引用・転載禁止

15.

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. 無断引用・転載禁止

16.

17.

Tips11:Federation Search l 複数のAPIを並列にリクエストする事で遅延時間を改善 - PHP等では、curl_multiなどが有名。 - Yahoo! では、独自の並列モジュールを利用 - PHPのエクステンションで実装 - 条件分岐やタイムアウト等を設定ファイルで管理 - 動的な接続・ホスト等のパラメータを変更可能 - Yahoo!検索では10以上のAPIへリクエスト 16 Copyright © 2010 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

18.

19.

20.

21.

22.

23.

24.

25.

26.

27.

28.

サーバサイドのお話 l Frontendのサーバ負荷 - Frontendで複雑なビジネスロジックが増えてきた為、 cpuのリソースを大量に消費している。 - cpuリソースの消費が多いためその分パフォーマンスが↓ l Frontendサーバの増加 - サーバリソースの消費を補う為、Frontendのサーバを大量に増強する必要がある - サーバを購入するコストが↑ 27 Copyright © 2010 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

29.

30.

31.

32.

サーバサイドのお話 l 現在利用してるサーバは負荷が高い l ハイスペックサーバと比べると性能は約1/3 l ハイスペックのサーバと比べると約100msec位パフォーマンスが落ちるじゃぁ、 Frontendのサーバを全て新しいサーバに切り替えちゃえばいい 31 Copyright © 2010 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

33.

34.

35.

36.

未来予想図 l FrontEndは、PresentationLayoutに特化 - Layoutに特化する事で、リソース削減 l 中間サーバを新たに設置 - C++ or Javaで開発し、リソースを削減 - 中間サーバにビジネスロジックを移す - FrontEndにシンプルなレスポンスを提供 35 Copyright © 2010 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

37.

38.

39.

40.

これはやって損はない！ l First Byteは活用しよう - cssをインライン化させる事でバッファサイズも稼げるしcssの読み込みをできるので 1石2鳥 l ダイエット（スリム化)しよう - gzip、cssスプライト等を利用してスリム化させよう。 39 Copyright © 2010 Yahoo Japan Corporation. All Rights Reserved. 無断引用・転載禁止

41.