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. agenda - Why web performance? - 3 secrets for web

    performance - Tooling for web performance - Conclusion
  2. 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
  3. 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
  4. .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
  5. 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
  6. 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
  7. +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
  8. 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
  9. 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
  10. 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
  11. 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
  12. ʋ ʅТʆ ϊ ʋ ʅТʆ ϊ ʋ ʅТʆ ϊ ʋ

    ʅТʆ ϊ ʋ ʅТʆ ϊ ʋ ʅТʆ ϊ
  13. Tooling in the Web App Development Lifecycle from: Talk: Tooling

    & The Webapp Development Stack « Paul Irish
  14. 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
  15. 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