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

4cf842e43a782a585d8707f2ba7f9a5c?s=128

Koji Ishimoto

August 28, 2012
Tweet

Transcript

  1. 8FCύϑΥʔϚϯεվળͷͨΊͷ$ISPNF։ൃऀπʔϧ Make the Web Faster! Internet Business Headquarters Web Developer

    Koji Ishimoto 2012.08.24 @Skill U Friday #4
  2. ͜ͷεϥΠυΛμ΢ϯϩʔυͯ͘͠Εͨਓ΁

  3. t32k.me 2012.6.1 Joined!

  4. High Performance Web Design dσβΠϯ͔Βߟ͑ΔϋΠύϑΥʔϚϯε8FCαΠτd Coding Web Performance d8FCύϑΥʔϚϯε࠷దԽͷͨΊͷίʔσΟϯάख๏d Long

    Life Web Performance Optimization d৺ཧֶ͔Βߟ͑Δ8FCύϑΥʔϚϯεd
  5. Agenda * $ISPNF%FW5PPMT֓ཁ ** 1BHF4QFFE&YUFOTJPO֓ཁ *** վળ%FNP

  6. *(PPHMF$ISPNF։ൃऀπʔϧ֓ཁ Chrome Dev Tools

  7. Chrome Developer Tools Ver 21.0.1180.79

  8. ⌘ + Opt + I or J Run DevTools (Mac)

  9. Settings Panel

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

    User agent - Override User Agent - Override device metrics - Emulate touch events Settings Panel
  11. Elements Panel

  12. - Styles - :active, :hover, :focus, :visited - Matched CSS

    Rules - Color Picker - Pseudo - :before, :after - Metrics Elements Panel
  13. Resources Panel

  14. - Frames - Images, Scripts, Stylesheets, XHR - Databases /

    IndexedDB - Local Storage / Session Storage - Cookies - Application Cache Resources Panel
  15. Network Panel

  16. - DOMContentLoaded, onload - Status, Size - Time - Blocking,

    Sending, Waiting, Receiving - Details - Headers, Timing... Network Panel
  17. Sources Panel

  18. Sources Panel Enjoy JS debug!

  19. Timeline Panel

  20. - Events - Frames - 60FPS+ - Memory Timeline Panel

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

  22. - JavaScript CPU - CSS Selector - Heap Snapshot Profiles

    Panel ↪ࢀߟɿϦονεϚʔτϑΥϯ8FCΞϓϦͷϝϞϦ؅ཧʛQJYFMʛ$"ެࣜΫϦΤΠλʔζϒϩά
  23. Audits Panel

  24. - Network Utilization - Web Page Performance Audits Panel

  25. Console Panel

  26. Console Panel Enjoy JS debug! ↪ ࡞ۀޮ཰͕ഒΞοϓ͢Δ$ISPNF%FWFMPQFS5PPMTͷ࢖͍ํ

  27. **$ISPNF֦ுػೳ PageSpeed

  28. Online Service - PageSpeed Insights — Google Developers

  29. Extension - Chrome Web Store - PageSpeed Insights (by Google)

  30. None
  31. ˞1BHF4QFFEW2.0.1.0ͷݴޠઃఆΛӳޠʹ͠ͳ͍ͱ1BHF4QFFE4DPSF͸Ͱ·ͤΜɻ

  32. Remote Debugging

  33. Remote Debugging ↪ $ISPNFGPS"OESPJEͰϦϞʔτσόοάc.0-

  34. ***ύϑΥʔϚϯεվળσϞ Demo

  35. FatNyanSlim http://t32k.github.com/l/fatnyanslim/b4.html http://t32k.github.com/l/fatnyanslim/a5.html

  36. - 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
  37. ank you!