3 secrets for optimizing Web application

Transcript

1. 
   TFDSFUT
   GPS
   PQUJNJ[JOH 8FC
   BQQMJDBUJPO "NFCB
   )FBERVBSUFST
   $PNNVOJUZ
   %JWJTJPO 8FC
   %FWFMPQFS
   
   ,PKJ
   *TIJNPUP 
   !5BQ
   "QQ
   "XBSET
   4NBSUQIPOF
   6*
2. @t32k
3. www.ca-girlstalk.jp
4. agenda - Why web performance? - 3 secrets for web performance - Tooling for web performance - Conclusion
5. Why web performance?
6. Android Design Principles
7. Make important things fast Not all actions are equal. Decide what's most important in your app and make it easy to find and fast to use, like the shutter button in a camera, or the pause button in a music player. Design Principles | Android Developers
8. iOS Human Interface Design Guidelines
9. Direct Manipulation/Feedback iOS Human Interface Guidelines: Human Interface Principles When people directly manipulate onscreen objects instead of using separate controls to manipulate them, they're more engaged with the task and they more readily understand the results of their actions. Feedback acknowledges people’s actions and assures them that processing is occurring. People expect immediate feedback when they operate a control
10. User Interface
11. User eXperience
12. Flow Flow is an "optimal experience" that is "intrinsically enjoyable."
13. .JIBMZ
    $TJLT[FOUNJIBMZJ Flow is the mental state of operation in which a person performing an activity is fully immersed in a feeling of energized focus, full involvement, and enjoyment in the process of the activity. 'MPX
    QTZDIPMPHZ
    
    8JLJQFEJB
14. Components of flow 1. intense and focused concentration on the present moment 2. merging of action and awareness 3. a loss of reflective self-consciousness 4. a sense of personal control over the situation or activity 5. a distortion of temporal experience, one's subjective experience of time is altered 6. experience of the activity as intrinsically rewarding also referred to as autotelic experience
15. Components of flow 1. intense and focused concentration on the present moment 2. merging of action and awareness 3. a loss of reflective self-consciousness 4. a sense of personal control over the situation or activity 5. a distortion of temporal experience, one's subjective experience of time is altered 6. experience of the activity as intrinsically rewarding, also referred to as autotelic experience
16. Responsiveness Web Apps
17. 0.1s Powers of 10: Time Scales in User Experience
18. +BLPC
    /JFMTFO 0.1 second is the response time limit if you want users to feel like their actions are directly causing something to happen on the screen. 1PXFST
    PG
    
    5JNF
    4DBMFT
    JO
    6TFS
    &YQFSJFODF
19. 3 secrets for web performance
20. developer.yahoo.com/performance/rules.html
21. developer.yahoo.com/performance/rules.html 35
22. developers.google.com/speed/docs/best-practices/rules_intro
23. developers.google.com/speed/docs/best-practices/rules_intro 31
24. Add Expires or Cache-Control Header Gzip Components Put Stylesheets at Top Put Scripts at Bottom Avoid CSS Expressions Make JavaScript and CSS External Reduce DNS Lookups Mini JavaScript and CSS Avoid Redirects Remove Duplicate Scripts
25. 3FEVDF
    UIF
    OVNCFS
    3FEVDF
    UIF
    XBTUF 3FEVDF
    UIF
    BNPVOU 
    TFDSFUT
    GPS
    8FC
    QFSGPSNBODF
26. Web Apps VS. Native Apps
27. Web Apps VS. Native Apps
28. Web Apps VS. Native Apps
29. Web Apps VS. Native Apps
30. Web Apps VS. Native Apps 3FEVDF
    UIF
    OVNCFS
31. Web Apps VS. Native Apps 3FEVDF
    UIF
    OVNCFS 3FEVDF
    UIF
    BNPVOU
32. Web Apps VS. Native Apps 3FEVDF
    UIF
    XBTUF 3FEVDF
    UIF
    BNPVOU 3FEVDF
    UIF
    OVNCFS
33. Reduce the number 
    .BLF
    'FXFS
    )551
    3FRVFTUT 
    "EE
    &YQJSFT
    PS
    $BDIF$POUSPM
    )FBEFS 
    3FEVDF
    %/4
    -PPLVQT 
    .JOJNJ[F
    SFEJSFDUT 
    3FNPWF
    %VQMJDBUF
    4DSJQUT 
    "KBYΛΩϟογϡՄೳʹ͢Δ 
    .BLF
    "KBY
    $BDIFBCMF 
    1PTUMPBE
    $PNQPOFOUT 
    1SFMPBE
    $PNQPOFOUT 
    0QUJNJ[F
    $44
    4QSJUFT 
    .BLF
    GBWJDPOJDP
    4NBMM
    BOE
    $BDIFBCMF 
    1BDL
    $PNQPOFOUT
    *OUP
    B
    .VMUJQBSU
    %PDVNFOU 
    "WPJE
    &NQUZ
    *NBHF
    TSD 
    -FWFSBHF
    QSPYZ
    DBDIJOH 
    "WPJE
    CBE
    SFRVFTUT 
    $PNCJOF
    FYUFSOBM
    +BWB4DSJQU 
    $PNCJOF
    FYUFSOBM
    $44 
    4FSWF
    SFTPVSDFT
    GSPN
    B
    DPOTJTUFOU
    63- 
    .BLF
    MBOEJOH
    QBHF
    SFEJSFDUT
    DBDIFBCMF 
    1BSBMMFMJ[F
    EPXOMPBET
    BDSPTT
    IPTUOBNFT 
    $POGJHVSF
    &5BHT
34. 
    ([JQ
    $PNQPOFOUT 
    .BLF
    +BWB4DSJQU
    BOE
    $44
    &YUFSOBM 
    .JOJGZ
    +BWB4DSJQU
    BOE
    $44 
    3FEVDF
    $PPLJF
    4J[F 
    0QUJNJ[F
    *NBHFT 
    .JOJNJ[F
    SFRVFTU
    TJ[F 
    4FSWF
    TUBUJD
    DPOUFOU
    GSPN
    B
    DPPLJFMFTT
    EPNBJO 
    3FNPWF
    VOVTFE
    $44 
    .JOJGZ
    )5.- 
    4FSWF
    TDBMFE
    JNBHFT Reduce the amount
35. 
    6TF
    B
    $POUFOU
    %FMJWFSZ
    /FUXPSL
    $%/ 
    1VU
    4UZMFTIFFUT
    BU
    5PQ 
    1VU
    4DSJQUT
    BU
    #PUUPN 
    "WPJE
    $44
    &YQSFTTJPOT 
    'MVTI
    #VGGFS
    &BSMZ 
    .JOJNJ[F
    /VNCFS
    PG
    JGSBNFT 
    "WPJE
    T 
    .JOJNJ[F
    %0.
    "DDFTT 
    %FWFMPQ
    4NBSU
    &WFOU
    )BOEMFST 
    $IPPTF
    MJOL
    0WFS
    !JNQPSU 
    "WPJE
    'JMUFST 
    ,FFQ
    $PNQPOFOUT
    6OEFS
    
    ,# 
    "WPJE
    EPDVNFOUXSJUF 
    1SFGFS
    BTZODISPOPVT
    SFTPVSDFT 
    %FGFS
    QBSTJOH
    PG
    +BWB4DSJQU 
    6TF
    FGGJDJFOU
    $44
    TFMFDUPST 
    4QFDJGZ
    JNBHF
    EJNFOTJPOT 
    4QFDJGZ
    B
    DIBSBDUFS
    TFU 
    %FGFS
    MPBEJOH
    PG
    +BWB4DSJQU 
    3FEVDF
    UIF
    /VNCFS
    PG
    %0.
    &MFNFOUT 
    %P
    /PU
    4DBMF
    *NBHFT
    JO
    )5.- Reduce the waste
36. sass compass less stylus markdown haml jade co eescript Ant make rake cake bash Image compression tools Minification & concat tooling JSHint JSLint codekit livereload web-build handlebars mustache zen coding selenium browserstack mogotest require sprockets jQuery Mobile Sencha jQuery UI Sproutcore Selenium Jenkins QUnit Jasmine jstestdriver from: Talk: Tooling & The Webapp Development Stack « Paul Irish
37. ʋ ʅ
    Т
    ʆ ϊ ʋ ʅ
    Т
    ʆ ϊ ʋ ʅ
    Т
    ʆ ϊ ʋ ʅ
    Т
    ʆ ϊ ʋ ʅ
    Т
    ʆ
    ϊ ʋ ʅ
    Т
    ʆ
    ϊ
38. Tooling for web performance
39. Tooling in the Web App Development Lifecycle from: Talk: Tooling & The Webapp Development Stack « Paul Irish
40. Boilerplate from: Talk: Tooling & The Webapp Development Stack « Paul Irish
41. html5boilerplate.com/mobile/
42. Authoring Abstractions from: Talk: Tooling & The Webapp Development Stack « Paul Irish
44. Frameworks
45. backbonejs.org
46. Iteration Workflow from: Talk: Tooling & The Webapp Development Stack « Paul Irish
47. incident57.com/codekit/
48. www.sublimetext.com
49. Performance Tuning from: Talk: Tooling & The Webapp Development Stack « Paul Irish
50. developers.google.com/chrome-developer-tools/
51. Build & Optimization from: Talk: Tooling & The Webapp Development Stack « Paul Irish
52. gruntjs.com
53. Conclusion
54. Fast is better than slow 8F
    LOPX
    ZPVS
    UJNF
    JT
    WBMVBCMF
    TP
    XIFO
    ZPVʟSF
    TFFLJOH
    BO
    BOTXFS
    PO
    UIF
    XFC
    ZPV
    XBOU
    JU
    SJHIU
    BXBZrBOE
    XF
    BJN
    UP
    QMFBTF
    8F
    NBZ
    CF
    UIF
    POMZ
    QFPQMF
    JO
    UIF
    XPSME
    XIP
    DBO
    TBZ
    PVS
    HPBM
    JT
    UP
    IBWF
    QFPQMF
    MFBWF
    PVS
    XFCTJUF
    BT
    RVJDLMZ
    BT
    QPTTJCMF
    #Z
    TIBWJOH
    FYDFTT
    CJUT
    BOE
    CZUFT
    GSPN
    PVS
    QBHFT
    BOE
    JODSFBTJOH
    UIF
    FGpDJFODZ
    PG
    PVS
    TFSWJOH
    FOWJSPONFOU
    XFʟWF
    CSPLFO
    PVS
    PXO
    TQFFE
    SFDPSET
    NBOZ
    UJNFT
    PWFS
    TP
    UIBU
    UIF
    BWFSBHF
    SFTQPOTF
    UJNF
    PO
    B
    TFBSDI
    SFTVMU
    JT
    B
    GSBDUJPO
    PG
    B
    TFDPOE
    8F
    LFFQ
    TQFFE
    JO
    NJOE
    XJUI
    FBDI
    OFX
    QSPEVDU
    XF
    SFMFBTF
    XIFUIFS
    JUʟT
    B
    NPCJMF
    BQQMJDBUJPO
    PS
    (PPHMF
    $ISPNF
    B
    CSPXTFS
    EFTJHOFE
    UP
    CF
    GBTU
    FOPVHI
    GPS
    UIF
    NPEFSO
    XFC
    "OE
    XF
    DPOUJOVF
    UP
    XPSL
    PO
    NBLJOH
    JU
    BMM
    HP
    FWFO
    GBTUFS Ten things Google has found to be true – Google
55. Persistent Impact of Post-header Delay daily searches per user relative to control from: The User and Business Impact of Server Delays, Additional Bytes, and HTTP Chunking in Web Search: Velocity 2009
56. ank you :)
57. photo credit - http://www.flickr.com/photos/polandeze/394280019/ - http://www.flickr.com/photos/fsvehla/3402701140/ - http://www.flickr.com/photos/kevinsteele/4845215034/ - http://www.flickr.com/photos/shiyazuni/3406692752/ - http://www.flickr.com/photos/titrans/4617500457/