3 secrets for optimizing Web application

Transcript

1. TFDSFUTGPSPQUJNJ[JOH
   8FCBQQMJDBUJPO
   "NFCB)FBERVBSUFST$PNNVOJUZ%JWJTJPO
   8FC%FWFMPQFS,PKJ*TIJNPUP
   !5BQ"QQ"XBSET4NBSUQIPOF6*
   

   View Slide

2. @t32k
   

   View Slide

3. www.ca-girlstalk.jp
   

   View Slide

4. agenda
   - Why web performance?
   - 3 secrets for web performance
   - Tooling for web performance
   - Conclusion
   

   View Slide

5. Why web performance?
   

   View Slide

6. Android Design Principles
   

   View Slide

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
   

   View Slide

8. iOS Human Interface
   Design Guidelines
   

   View Slide

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
   

   View Slide

10. User Interface
    

    View Slide

11. User eXperience
    

    View Slide

12. Flow
    Flow is an "optimal experience"
    that is "intrinsically enjoyable."
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

16. Responsiveness
    Web Apps
    

    View Slide

17. 0.1s
    Powers of 10: Time Scales in User Experience
    

    View Slide

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.
    1PXFSTPG5JNF4DBMFTJO6TFS&YQFSJFODF
    

    View Slide

19. 3 secrets
    for web performance
    

    View Slide

20. developer.yahoo.com/performance/rules.html
    

    View Slide

21. developer.yahoo.com/performance/rules.html
    35
    

    View Slide

22. developers.google.com/speed/docs/best-practices/rules_intro
    

    View Slide

23. developers.google.com/speed/docs/best-practices/rules_intro
    31
    

    View Slide

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
    

    View Slide

25. 3FEVDFUIFOVNCFS 3FEVDFUIFXBTUF
    3FEVDFUIFBNPVOU
    TFDSFUTGPS8FCQFSGPSNBODF
    

    View Slide

26. Web Apps
    VS.
    Native Apps
    

    View Slide

27. Web Apps
    VS.
    Native Apps
    

    View Slide

28. Web Apps
    VS.
    Native Apps
    

    View Slide

29. Web Apps
    VS.
    Native Apps
    

    View Slide

30. Web Apps
    VS.
    Native Apps
    3FEVDFUIFOVNCFS
    

    View Slide

31. Web Apps
    VS.
    Native Apps
    3FEVDFUIFOVNCFS
    3FEVDFUIFBNPVOU
    

    View Slide

32. Web Apps
    VS.
    Native Apps
    3FEVDFUIFXBTUF
    3FEVDFUIFBNPVOU 3FEVDFUIFOVNCFS
    

    View Slide

33. Reduce the number
    .BLF'FXFS)5513FRVFTUT
    "EE&YQJSFTPS$BDIF$POUSPM)FBEFS
    3FEVDF%/4-PPLVQT
    .JOJNJ[FSFEJSFDUT
    3FNPWF%VQMJDBUF4DSJQUT
    "KBYΛΩϟογϡՄೳʹ͢Δ
    .BLF"KBY$BDIFBCMF
    1PTUMPBE$PNQPOFOUT
    1SFMPBE$PNQPOFOUT
    0QUJNJ[F$444QSJUFT
    .BLFGBWJDPOJDP4NBMMBOE$BDIFBCMF
    1BDL$PNQPOFOUT*OUPB.VMUJQBSU%PDVNFOU
    "WPJE&NQUZ*NBHFTSD
    -FWFSBHFQSPYZDBDIJOH
    "WPJECBESFRVFTUT
    $PNCJOFFYUFSOBM+BWB4DSJQU
    $PNCJOFFYUFSOBM$44
    4FSWFSFTPVSDFTGSPNBDPOTJTUFOU63-
    .BLFMBOEJOHQBHFSFEJSFDUTDBDIFBCMF
    1BSBMMFMJ[FEPXOMPBETBDSPTTIPTUOBNFT
    $POGJHVSF&5BHT
    

    View Slide

34. ([JQ$PNQPOFOUT
    .BLF+BWB4DSJQUBOE$44&YUFSOBM
    .JOJGZ+BWB4DSJQUBOE$44
    3FEVDF$PPLJF4J[F
    0QUJNJ[F*NBHFT
    .JOJNJ[FSFRVFTUTJ[F
    4FSWFTUBUJDDPOUFOUGSPNBDPPLJFMFTTEPNBJO
    3FNPWFVOVTFE$44
    .JOJGZ)5.-
    4FSWFTDBMFEJNBHFT
    Reduce the amount
    

    View Slide

35. 6TFB$POUFOU%FMJWFSZ/FUXPSL $%/
    
    1VU4UZMFTIFFUTBU5PQ
    1VU4DSJQUTBU#PUUPN
    "WPJE$44&YQSFTTJPOT
    'MVTI#VGGFS&BSMZ
    .JOJNJ[F/VNCFSPGJGSBNFT
    "WPJET
    .JOJNJ[F%0."DDFTT
    %FWFMPQ4NBSU&WFOU)BOEMFST
    $IPPTFMJOL0WFS!JNQPSU
    "WPJE'JMUFST
    ,FFQ$PNQPOFOUT6OEFS,#
    "WPJEEPDVNFOUXSJUF
    1SFGFSBTZODISPOPVTSFTPVSDFT
    %FGFSQBSTJOHPG+BWB4DSJQU
    6TFFGGJDJFOU$44TFMFDUPST
    4QFDJGZJNBHFEJNFOTJPOT
    4QFDJGZBDIBSBDUFSTFU
    %FGFSMPBEJOHPG+BWB4DSJQU
    3FEVDFUIF/VNCFSPG%0.&MFNFOUT
    %P/PU4DBMF*NBHFTJO)5.-
    Reduce the waste
    

    View Slide

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
    

    View Slide

37. ʋ ʅТʆ
    ϊ
    ʋ ʅТʆ
    ϊ
    ʋ ʅТʆ
    ϊ
    ʋ ʅТʆ
    ϊ
    ʋ ʅТʆ
    ϊ
    ʋ ʅТʆ
    ϊ
    

    View Slide

38. Tooling
    for web performance
    

    View Slide

39. Tooling in the Web App Development Lifecycle
    from: Talk: Tooling & The Webapp Development Stack « Paul Irish
    

    View Slide

40. Boilerplate
    from: Talk: Tooling & The Webapp Development Stack « Paul Irish
    

    View Slide

41. html5boilerplate.com/mobile/
    

    View Slide

42. Authoring Abstractions
    from: Talk: Tooling & The Webapp Development Stack « Paul Irish
    

    View Slide

43. View Slide

44. Frameworks
    

    View Slide

45. backbonejs.org
    

    View Slide

46. Iteration Workflow
    from: Talk: Tooling & The Webapp Development Stack « Paul Irish
    

    View Slide

47. incident57.com/codekit/
    

    View Slide

48. www.sublimetext.com
    

    View Slide

49. Performance Tuning
    from: Talk: Tooling & The Webapp Development Stack « Paul Irish
    

    View Slide

50. developers.google.com/chrome-developer-tools/
    

    View Slide

51. Build & Optimization
    from: Talk: Tooling & The Webapp Development Stack « Paul Irish
    

    View Slide

52. gruntjs.com
    

    View Slide

53. Conclusion
    

    View Slide

54. Fast is better than slow
    8FLOPXZPVSUJNFJTWBMVBCMF TPXIFOZPVʟSFTFFLJOHBOBOTXFSPO
    UIFXFCZPVXBOUJUSJHIUBXBZrBOEXFBJNUPQMFBTF8FNBZCFUIF
    POMZQFPQMFJOUIFXPSMEXIPDBOTBZPVSHPBMJTUPIBWFQFPQMFMFBWF
    PVSXFCTJUFBTRVJDLMZBTQPTTJCMF#ZTIBWJOHFYDFTTCJUTBOECZUFTGSPN
    PVSQBHFTBOEJODSFBTJOHUIFFGpDJFODZPGPVSTFSWJOHFOWJSPONFOU
    XFʟWFCSPLFOPVSPXOTQFFESFDPSETNBOZUJNFTPWFS TPUIBUUIF
    BWFSBHFSFTQPOTFUJNFPOBTFBSDISFTVMUJTBGSBDUJPOPGBTFDPOE8F
    LFFQTQFFEJONJOEXJUIFBDIOFXQSPEVDUXFSFMFBTF XIFUIFSJUʟTB
    NPCJMFBQQMJDBUJPOPS(PPHMF$ISPNF BCSPXTFSEFTJHOFEUPCFGBTU
    FOPVHIGPSUIFNPEFSOXFC"OEXFDPOUJOVFUPXPSLPONBLJOHJUBMM
    HPFWFOGBTUFS
    Ten things Google has found to be true – Google
    

    View Slide

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
    

    View Slide

56. ank you :)
    

    View Slide

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/
    

    View Slide