Upgrade to Pro — share decks privately, control downloads, hide ads and more …

3 secrets for optimizing Web application

Koji Ishimoto
January 20, 2013

3 secrets for optimizing Web application

Koji Ishimoto

January 20, 2013
Tweet

More Decks by Koji Ishimoto

Other Decks in Design

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