Improving web performance with chrome dev tools

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

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

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 d
   8FCύϑΥʔϚϯε࠷దԽͷͨΊͷίʔσΟϯάख๏
   d Long Life Web Performance Optimization d
   ৺ཧֶ͔Βߟ͑Δ8FCύϑΥʔϚϯε
   d
5. Agenda * $ISPNF
   %FW
   5PPMT
   ֓ཁ ** 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
    %FWFMPQFS
    5PPMT
    ͷ࢖͍ํ
27. 
    **
    $ISPNF
    ֦ுػೳ PageSpeed
28. Online Service - PageSpeed Insights — Google Developers
29. Extension - Chrome Web Store - PageSpeed Insights (by Google)
31. ˞1BHF4QFFE
    W2.0.1.0ͷݴޠઃఆΛӳޠʹ͠ͳ͍ͱ1BHF
    4QFFE
    4DPSF͸Ͱ·ͤΜɻ
32. Remote Debugging
33. Remote Debugging ↪ $ISPNF
    GPS
    "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!