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 full-size slide

  2. www.ca-girlstalk.jp

    View full-size slide

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

    View full-size slide

  4. Why web performance?

    View full-size slide

  5. Android Design Principles

    View full-size slide

  6. 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 full-size slide

  7. iOS Human Interface
    Design Guidelines

    View full-size slide

  8. 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 full-size slide

  9. User Interface

    View full-size slide

  10. User eXperience

    View full-size slide

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

    View full-size slide

  12. .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 full-size slide

  13. 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 full-size 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 full-size slide

  15. Responsiveness
    Web Apps

    View full-size slide

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

    View full-size slide

  17. +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 full-size slide

  18. 3 secrets
    for web performance

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  23. 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 full-size slide

  24. 3FEVDFUIFOVNCFS 3FEVDFUIFXBTUF
    3FEVDFUIFBNPVOU
    TFDSFUTGPS8FCQFSGPSNBODF

    View full-size slide

  25. Web Apps
    VS.
    Native Apps

    View full-size slide

  26. Web Apps
    VS.
    Native Apps

    View full-size slide

  27. Web Apps
    VS.
    Native Apps

    View full-size slide

  28. Web Apps
    VS.
    Native Apps

    View full-size slide

  29. Web Apps
    VS.
    Native Apps
    3FEVDFUIFOVNCFS

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  32. 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 full-size slide

  33. ([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 full-size slide

  34. 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 full-size slide

  35. 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 full-size slide

  36. ʋ ʅТʆ
    ϊ
    ʋ ʅТʆ
    ϊ
    ʋ ʅТʆ
    ϊ
    ʋ ʅТʆ
    ϊ
    ʋ ʅТʆ
    ϊ
    ʋ ʅТʆ
    ϊ

    View full-size slide

  37. Tooling
    for web performance

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  40. html5boilerplate.com/mobile/

    View full-size slide

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

    View full-size slide

  42. backbonejs.org

    View full-size slide

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

    View full-size slide

  44. incident57.com/codekit/

    View full-size slide

  45. www.sublimetext.com

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  49. 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 full-size slide

  50. 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 full-size slide

  51. 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 full-size slide