続・ハイパフォーマンスWebサイト
書泉ブックタワー
・前本、ハイパフォーマンス
ブラウザのバックエンドの部分を贈れば早くなる
・高林貴仁
Yahoo！検索のパフォーマンス
Yahoo! Search Tecnology(YST)の検索結果の表示
1秒間に数線リクエスト
12のパフォーマンスTips
HTTPのRequestはできるだけ減らす
DNSのLookupは平均20120msかかる
コンテンツをGzupすることで転送量の削減
FirstByte
一部のhtmlを返すことによってブラウザのレンダリング処理を
一部のデータを先に返すためブラウザで先に処理する
cssスプライト
複数の画像をまとめて制御
HTTPリクエストの削減
cssは
プログレッシブ・レンダリング
JavaScriptは一番下に
描画がストップしてしまう。
cssやJSはコメントや改行をできる限りなくしてスリムにする
Cookieサイズを抑える
複数のJavaScriptファイルやcssファイルを一つにまとめてリクエスト数を減らす
パフォーマンスが悪い場合はextentionを作成
パフォーマンスを優先
ジェネレーションサーチ
複数のAPIを並列にリクエスト
PHPではcurl multi
Yahoo!では独自の並列モジュール
ソフトウェアロードバランサ
PHPのエクステンション
複数のサーバに負荷を分散
フェイルオーバーを実現
3つのTipsに関して最適化
HTTPリクエストの削減
HTTPリクエスト数の削減を実施
CSSスプライト
インラインCSS
描画開始時間の短縮
First Byte
スタイルシートHEADの先頭に置く
ページ要領の削減
コンポーネントのgzip化
JavaScript/CSSの縮小化
yslow score
■サーバーサイドのお話
Frontendのサーバ負荷
複雑なビジネスロジックが増えてきたためCPUのリソースを大量に消費してしまう。
Yahoo検索のFrontendの負荷が高い
現在利用しているサーバは負荷が高い
ハイスペックサーバと比べると性能は
お金で解決！
経済的！
とても経済的！
とても楽！
FrontEndは、PresentationLayoutに特価
Kayoutに特化することで、リソースを削減
HTMLのレンダリングに特化
システムの共通化として10サービスのFrontEndを共通フレームワークで開発中
First Byteは活用しよう
未来予想図、中間サーバはJavaなどで
HTMLのレンダリングに特化 FrontEnd
ビジネスロジック シンプルなレスポンスをFEに提供 中間サーバ
JSとCSSの読み込み位置を変える
インライン化？
外部ファイル化してキャッシュ
基本的にインラインcss
言語にPHPを？
→YGAは共通して。YahooINCに有名な人が多いので。
CSSをPHPで吐き出すことも
サーバを新しいのにすると性能が良くなる、仮想化？
→Yahoo検索ではトラフィックが多いので、サーバを100台買う FrontEndに搭載
サーバはそのまま使う
仮想化すると遅くなるかも知れない
DBで検索？DBを使ってるときもある。
→MySQLは使ってない。YahooJapanオリジナルもあり、YahooINCで開発しているもの
独自のDB
FirstByteはブロードバンドは速くなる
→ContentLength、KeepAliveが返せない弊害がある
米国は日本ほど速くないので
DOM構築前でも使える者が増えている。
改ブラウザを使っていても速くなるように開発している
ブラウザごとに処理を分けるのは面倒。
JavaScript、クランチしているミニマム
YUIの3Kは余り使っていない
YUIはYahooINCががんばっている
JSはどうすればいいか？
CSSスプライト弊害
→画像が表示できないなどの弊害
普通のイメージ要素を使うのか？
デザイナの方が詳しい
→Techブログで
FirstByteとGzipはどちらをとるか？
した場合、していない場合
FirstZIPはYJでもやっている
速くなったというのを調べる基準は？
ワイスロー、Firebug
パフォーマンスツールで測定
独自実装
高速化をするとしたあと、
Cookieを出すのと出さない静的なドメイン
yahoo.co.jp
海外は、国の帰省でプロキシの下
MozillaJapan
■
@dynamitter
http://r,dynamis.jp/presen/
・レンダリングエンジンの展望
順調に少しずつ速く
グラフィックスエンジンをGPUを使って行う
3.5〜3.6
WebGL
css3 バックグラウンドのグラデーション
Firefoxを使っていると体感速度が遅くなる。
インストールしたてだと速くても
下手なアドオンを入れるとすぐに遅くなる
Gmailが速くなった
低スペックで遅くなるコードはなくしている
ブラウザを作ることではなく、ブラウザを使ってインターネットを
JavaScriptは他社さんが投入したから速くした
Webの高速化がSEOに影響、パフォーマンスのランキング
PHPで書いていた、バックエンドCとかJava
FacebookはPHPのコードをJavaScriptに変換して力業で高速化した。
Yahoo!はそういった動きはない。Yahoo検索にトラフィック。慎重に実装。
