Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Improving web performance with chrome dev tools

Improving web performance with chrome dev tools

Webパフォーマンス改善のためのChrome開発者ツール

Web Performance Best Practice - Google Developers の翻訳はこちら
https://github.com/t32k/speed

Koji Ishimoto

August 28, 2012
Tweet

More Decks by Koji Ishimoto

Other Decks in Programming

Transcript

  1. - General - Dock to right - Disable Cache -

    User agent - Override User Agent - Override device metrics - Emulate touch events Settings Panel
  2. - Styles - :active, :hover, :focus, :visited - Matched CSS

    Rules - Color Picker - Pseudo - :before, :after - Metrics Elements Panel
  3. - Frames - Images, Scripts, Stylesheets, XHR - Databases /

    IndexedDB - Local Storage / Session Storage - Cookies - Application Cache Resources Panel
  4. - DOMContentLoaded, onload - Status, Size - Time - Blocking,

    Sending, Waiting, Receiving - Details - Headers, Timing... Network Panel
  5. - Events - Frames - 60FPS+ - Memory Timeline Panel

    - Loading - Scripting - Rendering - Painting ↪ࢀߟɿϦονεϚʔτϑΥϯ8FCΞϓϦͷϝϞϦ؅ཧʛQJYFMʛ$"ެࣜΫϦΤΠλʔζϒϩά
  6. - JavaScript CPU - CSS Selector - Heap Snapshot Profiles

    Panel ↪ࢀߟɿϦονεϚʔτϑΥϯ8FCΞϓϦͷϝϞϦ؅ཧʛQJYFMʛ$"ެࣜΫϦΤΠλʔζϒϩά
  7. - Chrome Developer Tools — Google Developers - Google I/O

    2012 - Chrome Developer Tools Evolution - Make the Web Faster — Google Developers - ࡞ۀޮ཰͕10ഒΞοϓ͢Δ Chrome Developer Tools ͷ࢖͍ํ - h5bp/server-configs See Also