3 secrets for optimizing Web application

4cf842e43a782a585d8707f2ba7f9a5c?s=47 Koji Ishimoto
January 20, 2013

3 secrets for optimizing Web application

4cf842e43a782a585d8707f2ba7f9a5c?s=128

Koji Ishimoto

January 20, 2013
Tweet

Transcript

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

  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. 1PXFSTPG5JNF4DBMFTJO6TFS&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. 3FEVDFUIFOVNCFS 3FEVDFUIFXBTUF 3FEVDFUIFBNPVOU TFDSFUTGPS8FCQFSGPSNBODF

  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 3FEVDFUIFOVNCFS

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

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

  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
  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
  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
  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
  43. None
  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 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
  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/