Tweet
Tweet

Slide 1

Slide 1 text

8FCύϑΥʔϚϯεվળͷͨΊͷ$ISPNF։ൃऀπʔϧ Make the Web Faster! Internet Business Headquarters Web Developer Koji Ishimoto 2012.08.24 @Skill U Friday #4

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

t32k.me 2012.6.1 Joined!

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

Chrome Developer Tools Ver 21.0.1180.79

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

Settings Panel

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

Elements Panel

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

Resources Panel

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

Network Panel

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

Sources Panel

Slide 18

Slide 18 text

Sources Panel Enjoy JS debug!

Slide 19

Slide 19 text

Timeline Panel

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

Profiles Panel

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

Audits Panel

Slide 24

Slide 24 text

- Network Utilization - Web Page Performance Audits Panel

Slide 25

Slide 25 text

Console Panel

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

**$ISPNF֦ுػೳ PageSpeed

Slide 28

Slide 28 text

Online Service - PageSpeed Insights — Google Developers

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

Remote Debugging

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

- 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

Slide 37

Slide 37 text

ank you!