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
   

   View Slide

2. ͜ͷεϥΠυΛμ΢ϯϩʔυͯ͘͠Εͨਓ΁
   

   View Slide

3. t32k.me
   2012.6.1 Joined!
   

   View Slide

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

   View Slide

5. Agenda
   * $ISPNF%FW5PPMT֓ཁ
   ** 1BHF4QFFE&YUFOTJPO֓ཁ
   *** վળ%FNP
   

   View Slide

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

   View Slide

7. Chrome Developer Tools
   Ver 21.0.1180.79
   

   View Slide

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

   View Slide

9. Settings Panel
   

   View Slide

10. - General
    - Dock to right
    - Disable Cache
    - User agent
    - Override User Agent
    - Override device metrics
    - Emulate touch events
    Settings Panel
    

    View Slide

11. Elements Panel
    

    View Slide

12. - Styles
    - :active, :hover, :focus, :visited
    - Matched CSS Rules
    - Color Picker
    - Pseudo
    - :before, :after
    - Metrics
    Elements Panel
    

    View Slide

13. Resources Panel
    

    View Slide

14. - Frames
    - Images, Scripts, Stylesheets, XHR
    - Databases / IndexedDB
    - Local Storage / Session Storage
    - Cookies
    - Application Cache
    Resources Panel
    

    View Slide

15. Network Panel
    

    View Slide

16. - DOMContentLoaded, onload
    - Status, Size
    - Time
    - Blocking, Sending, Waiting, Receiving
    - Details
    - Headers, Timing...
    Network Panel
    

    View Slide

17. Sources Panel
    

    View Slide

18. Sources Panel
    Enjoy JS debug!
    

    View Slide

19. Timeline Panel
    

    View Slide

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

    View Slide

21. Profiles Panel
    

    View Slide

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

    View Slide

23. Audits Panel
    

    View Slide

24. - Network Utilization
    - Web Page Performance
    Audits Panel
    

    View Slide

25. Console Panel
    

    View Slide

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

    View Slide

27. **$ISPNF֦ுػೳ
    PageSpeed
    

    View Slide

28. Online Service - PageSpeed Insights — Google Developers
    

    View Slide

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

    View Slide

30. View Slide

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

    View Slide

32. Remote Debugging
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

37. ank you!
    

    View Slide