Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

@t32k

Slide 3

Slide 3 text

www.ca-girlstalk.jp

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

Why web performance?

Slide 6

Slide 6 text

Android Design Principles

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

iOS Human Interface Design Guidelines

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

User Interface

Slide 11

Slide 11 text

User eXperience

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

.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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

Responsiveness Web Apps

Slide 17

Slide 17 text

0.1s Powers of 10: Time Scales in User Experience

Slide 18

Slide 18 text

+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

Slide 19

Slide 19 text

3 secrets for web performance

Slide 20

Slide 20 text

developer.yahoo.com/performance/rules.html

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

3FEVDFUIFOVNCFS 3FEVDFUIFXBTUF 3FEVDFUIFBNPVOU TFDSFUTGPS8FCQFSGPSNBODF

Slide 26

Slide 26 text

Web Apps VS. Native Apps

Slide 27

Slide 27 text

Web Apps VS. Native Apps

Slide 28

Slide 28 text

Web Apps VS. Native Apps

Slide 29

Slide 29 text

Web Apps VS. Native Apps

Slide 30

Slide 30 text

Web Apps VS. Native Apps 3FEVDFUIFOVNCFS

Slide 31

Slide 31 text

Web Apps VS. Native Apps 3FEVDFUIFOVNCFS 3FEVDFUIFBNPVOU

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

([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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

ʋ ʅТʆ ϊ ʋ ʅТʆ ϊ ʋ ʅТʆ ϊ ʋ ʅТʆ ϊ ʋ ʅТʆ ϊ ʋ ʅТʆ ϊ

Slide 38

Slide 38 text

Tooling for web performance

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

html5boilerplate.com/mobile/

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

Frameworks

Slide 45

Slide 45 text

backbonejs.org

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

incident57.com/codekit/

Slide 48

Slide 48 text

www.sublimetext.com

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

gruntjs.com

Slide 53

Slide 53 text

Conclusion

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

ank you :)

Slide 57

Slide 57 text

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/