YSlowHolyGrailRoppongi.JS

自己紹介

HolyGrail

こんなアイコン

JUI2008でma.la.さんのスライドでゲスト出演

フロントエンドエンジニア

YSlow

YSlowとは

•Yahoo Inc.開発のFirefoxアドオン•パフォーマンスの計測•14のルール＋α（V2）

画面

画面

画面

Click!

結果表示

悪いところ

ただし！

スコアが高い＝速い

そんなことはない！

例

例

•CSSのback-ground画像が多いよ！

例

•CSSのback-ground画像が多いよ！•→CCSで指定してるところを全部<img>にしようぜ！

例

•CSSのback-ground画像が多いよ！•→CCSで指定してるところを全部<img>にしようぜ！

•→スコアアップで高速化達成！

例

•CSSのback-ground画像が多いよ！•→CCSで指定してるところを全部<img>にしようぜ！

•→スコアアップで高速化達成！

とはならない

大切なこと

•なぜそのような指摘をされているのかを考える

•今回の例•→CSS spriteによってリクエスト数を減らせないか、を考える

22のルール

•http://developer.yahoo.com/yslow/help/

• ちゃんと理由が明記されている•各項目が当てはまるかどうかを正しく理解できるようになろう

その他パフォーマンス測定

その他パフォーマンス測定

• IBM Page Detailer

その他パフォーマンス測定

• IBM Page Detailer• 詳しくは

その他パフォーマンス測定

• IBM Page Detailer• 詳しくは• http://d.hatena.ne.jp/HolyGrail/20081126/1227728194

その他パフォーマンス測定

• IBM Page Detailer• 詳しくは• http://d.hatena.ne.jp/HolyGrail/20081126/1227728194

•Webで！

ご静聴ありがとうございました