Mobile Front-end Optimization Standard:2012

Slide 1

Slide 1 text

Standard : 2012 Mobile Front End Optimization Internet Business Headquarters Web Developer Koji Ishimoto 2012.10.21 @Frontrend Vol.3

Slide 2

Slide 2 text

@t32k

Slide 3

Slide 3 text

High Performance Web Design Coding Web Performance Long Life WPO

Slide 4

Slide 4 text

agenda - What kind of work do you do? - Which is slower? - What should we do?

Slide 5

Slide 5 text

What's kind of work do you do?

Slide 6

Slide 6 text

back-end That is... are you? front-end

Slide 7

Slide 7 text

back-end That is... are you? front-end

Slide 8

Slide 8 text

I’m front-end engineer.

Slide 9

Slide 9 text

1. Make Fewer HTTP Requests 2. Use a Content Delivery Network (CDN) 3. Add Expires or Cache-Control Header 4. Gzip Components 5. Put Stylesheets at Top 6. Put Scripts at Bottom 7. Avoid CSS Expressions 8. Make JavaScript and CSS External 9. Reduce DNS Lookups 10. Minify JavaScript and CSS 11. Avoid Redirects 12. Remove Duplicate Scripts 13. Configure ETags 14. Make Ajax Cacheable Best Practices for Speeding Up Your Web Site by Yahoo! Developer Network

Slide 10

Slide 10 text

1 effectiveness difficulty High Easy Difficult Low 2 3 4 5 6 7 8 9 10 11 12 13 14 for front-end engineer

Slide 11

Slide 11 text

1 effectiveness difficulty High Easy Difficult Low 2 3 4 5 6 7 8 9 10 11 12 13 14 for front-end engineer

Slide 12

Slide 12 text

Front-end Task 1. Make Fewer HTTP Requests 5. Put Stylesheets at Top 6. Put Scripts at Bottom 7. Avoid CSS Expressions 8. Make JavaScript and CSS External ------------------------------- 9. Reduce DNS Lookups 12. Remove Duplicate Scripts

Slide 13

Slide 13 text

Slide 14

Slide 14 text

developers.google.com/speed/pagespeed/insights

Slide 15

Slide 15 text

Back-end Task 2. Use a Content Delivery Network (CDN) 3. Add Expires or Cache-Control Header 4. Gzip Components ------------------------------- 10. Minify JavaScript and CSS 11. Avoid Redirects 13. Configure ETags 14. Make Ajax Cacheable

Slide 16

Slide 16 text

Slide 17

Slide 17 text

90 PageSpeed Score +

Slide 18

Slide 18 text

Which is slower?

Slide 19

Slide 19 text

Network vs. Hardware

Slide 20

Slide 20 text

Over the next decade, Internet bandwidth will likely become 57 times faster, while computers will become 100 times more powerful. Mobile Sites vs. Apps: e Coming Strategy Shi

Slide 21

Slide 21 text

Network is so heavy...

Slide 22

Slide 22 text

1,000 1,500 2,000 2,500 3,000 3,500 1Mbps 2Mbps 3Mbps 4Mbps 5Mbps 6Mbps 7Mbps 8Mbps 9Mbps 10Mbps Page Load Time per Bandwidth (ms) More Bandwidth Doesn’t Matter (Much) « Mike's Lookout

Slide 23

Slide 23 text

Why?

Slide 24

Slide 24 text

Chrome Developer Tools: Network Panel

Slide 25

Slide 25 text

HTTP Request Structure Client Server

Slide 26

Slide 26 text

HTTP Request Structure DNS Look up ISP Client Server

Slide 27

Slide 27 text

HTTP Request Structure DNS Look up ISP Client Server DNS Lookup

Slide 28

Slide 28 text

HTTP Request Structure DNS Look up ISP Client Server DNS Lookup First Connect

Slide 29

Slide 29 text

HTTP Request Structure Set TCP Connection DNS Look up ISP Client Server DNS Lookup First Connect

Slide 30

Slide 30 text

HTTP Request Structure Set TCP Connection DNS Look up ISP Client Server DNS Lookup Connecting First Connect

Slide 31

Slide 31 text

HTTP Request Structure Set TCP Connection DNS Look up ISP Client Server DNS Lookup Connecting First Connect First HTTP Request

Slide 32

Slide 32 text

HTTP Request Structure Set TCP Connection DNS Look up ISP Send Data Receive Data Client Server DNS Lookup Connecting First Connect First HTTP Request

Slide 33

Slide 33 text

HTTP Request Structure Set TCP Connection DNS Look up ISP Send Data Receive Data Client Server DNS Lookup Connecting Waiting First Connect First HTTP Request

Slide 34

Slide 34 text

HTTP Request Structure Set TCP Connection DNS Look up ISP Send Data Receive Data Complete Complete Client Server DNS Lookup Connecting Waiting First Connect First HTTP Request

Slide 35

Slide 35 text

HTTP Request Structure Set TCP Connection DNS Look up ISP Send Data Receive Data Complete Complete Client Server DNS Lookup Connecting Waiting Receiving First Connect First HTTP Request

Slide 36

Slide 36 text

HTTP Request Structure Set TCP Connection DNS Look up ISP Send Data Receive Data Complete Complete Client Server DNS Lookup Connecting Waiting Receiving First Connect First HTTP Request RTT

Slide 37

Slide 37 text

HTTP Request Structure Set TCP Connection DNS Look up ISP Send Data Receive Data Complete Complete Client Server DNS Lookup Connecting Waiting Receiving First Connect First HTTP Request RTT DL

Slide 38

Slide 38 text

DNS resolution time. Elapsed time required to create a TCP connection. Elapsed time spent in a browser queue waiting for a network connection. Time needed to send request data to the server. Waiting for the response (till the first byte is received from the server). Time necessary to download response body. DNS Lookup: Connecting: Blocking: Sending: Waiting: Receiving:

Slide 39

Slide 39 text

Round Trip Time RTT DL Payload Size

Slide 40

Slide 40 text

What should we do?

Slide 41

Slide 41 text

Round Trip Time RTT

Slide 42

Slide 42 text

CSS Sprite Round Trip Time RTT

Slide 43

Slide 43 text

Requests 30 vs. 1 (CSS Sprite)

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

No content

Slide 46

Slide 46 text

spritegen.website-performance.org

Slide 47

Slide 47 text

spritegen.website-performance.org No Retina!

Slide 48

Slide 48 text

Pain in the a**

Slide 49

Slide 49 text

Know me?

Slide 50

Slide 50 text

compass-style.org

Slide 51

Slide 51 text

t32k at MacBookPro in ~ $ gem install compass $ compass create my_project $ cd /my_project $ compass watch Command line

Slide 52

Slide 52 text

t32k at MacBookPro in ~ $ gem install compass $ compass create my_project $ cd /my_project $ compass watch Command line

Slide 53

Slide 53 text

@import "compass"; @import "/sprites/category/*.png"; @include all-category-sprites; Sass + compass

Slide 54

Slide 54 text

.category-sprite, .category-chat, .category- fav, .category-home, .category-love, .category- mind, .category-new, .category-nightlife, .category-work { background: url(/sprites/category-s87c70fb891.png) no- repeat; } .category-chat { background-position: 0 -168px; } .category-fav { background-position: 0 -42px; } .category-home { background-position: 0 -294px; } .category-love { background-position: 0 -252px; } .category-mind { background-position: 0 -84px; } .category-new { background-position: 0 -210px; } .category-nightlife { background-position: 0 0; } .category-work { background-position: 0 -126px; } CSS

Slide 55

Slide 55 text

Slide 56

Slide 56 text

Yourself Do It

Slide 57

Slide 57 text

// For Retina @2x @mixin sprites($map, $map-item, $isCommon:false) { @if $isCommon { display: inline-block; background-image: sprite-url($map); background-repeat: no-repeat; background-size: (image-width(sprite-path($map)) / 2) (image- height(sprite-path($map)) / 2); } @else { $pos-y: round(nth(sprite-position($map, $map-item), 2) / 2); width: image-width(sprite-file($map, $map-item)) / 2; height: image-height(sprite-file($map, $map-item)) / 2; background-position: 0 $pos-y; } } @mixin

Slide 58

Slide 58 text

$sprites-category: sprite-map("sprites/category/*.png"); .common-property { @include sprites($sprites-category, foo, true); } .indivisual-property-fav { @include sprites($sprites-category, fav, false); } .indivisual-property-chat { @include sprites($sprites-category, chat, false); } Usage

Slide 59

Slide 59 text

.common-property { display: inline-block; background-image: url('/images/sprites/category-s13fa409ec6.png'); background-repeat: no-repeat; background-size: 21px 168px; } .indivisual-property-fav { width: 21px; height: 21px; background-position: 0 -21px; } .indivisual-property-chat { width: 21px; height: 21px; background-position: 0 -84px; } CSS

Slide 60

Slide 60 text

DL Payload Size

Slide 61

Slide 61 text

Gzip DL Payload Size

Slide 62

Slide 62 text

github.com/h5bp/html5-boilerplate/blob/v4.0.0/doc/htaccess.md

Slide 63

Slide 63 text

Make Compression Most Effective

Slide 64

Slide 64 text

Yourself Don’t Repeat

Slide 65

Slide 65 text

.foo { -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; } CSS

Slide 66

Slide 66 text

F****** CSS

Slide 67

Slide 67 text

Know me?

Slide 68

Slide 68 text

@import "compass"; .foo { @include border-radius(5px); } Sass + compass

Slide 69

Slide 69 text

.foo { -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; } Output CSS

Slide 70

Slide 70 text

F****** CSS

Slide 71

Slide 71 text

developers.google.com/speed/articles/gzip

Slide 72

Slide 72 text

Ensure Consistency in Code

Slide 73

Slide 73 text

.foo { -webkit-border-radius: 1px; -moz-border-radius: 1px; -ms-border-radius: 1px; -o-border-radius: 1px; border-radius: 1px; } .bar { -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; } .baz { -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; } CSS .foo { -ms-border-radius: 1px; -webkit-border-radius: 1px; -moz-border-radius: 1px; -o-border-radius: 1px; border-radius: 1px; } .bar { -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } .baz { -o-border-radius: 5px; -webkit-border-radius: 5px; -ms-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }

Slide 74

Slide 74 text

.foo { -webkit-border-radius: 1px; -moz-border-radius: 1px; -ms-border-radius: 1px; -o-border-radius: 1px; border-radius: 1px; } .bar { -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; } .baz { -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; } Uncompressed: .foo { -ms-border-radius: 1px; -webkit-border-radius: 1px; -moz-border-radius: 1px; -o-border-radius: 1px; border-radius: 1px; } .bar { -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } .baz { -o-border-radius: 5px; -webkit-border-radius: 5px; -ms-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } 416B

Slide 75

Slide 75 text

.foo { -webkit-border-radius: 1px; -moz-border-radius: 1px; -ms-border-radius: 1px; -o-border-radius: 1px; border-radius: 1px; } .bar { -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; } .baz { -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; } Compressed: .foo { -ms-border-radius: 1px; -webkit-border-radius: 1px; -moz-border-radius: 1px; -o-border-radius: 1px; border-radius: 1px; } .bar { -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } .baz { -o-border-radius: 5px; -webkit-border-radius: 5px; -ms-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } 122B 130B

Slide 76

Slide 76 text

Slide 77

Slide 77 text

csscomb.com

Slide 78

Slide 78 text

For example, on Google's search results page, when HTML attributes were alphabetized, a 1.5% reduction in the size of the gzipped output resulted. Minimize payload size - Make the Web Faster

Slide 79

Slide 79 text

― Ludwig Mies van der Rohe God is in the detail.

Slide 80

Slide 80 text

Stop worrying…

Slide 81

Slide 81 text

Conclusion

Slide 82

Slide 82 text

$ What should we do?

Slide 83

Slide 83 text

$ What should we do? >> Focus on front end task

Slide 84

Slide 84 text

$ What should we do? >> Focus on front end task $ What should we do?

Slide 85

Slide 85 text

$ What should we do? >> Focus on front end task $ What should we do? >> Improve network phase

Slide 86

Slide 86 text

$ What should we do? >> Focus on front end task $ What should we do? >> Improve network phase $ What should we do?

Slide 87

Slide 87 text

$ What should we do? >> Focus on front end task $ What should we do? >> Improve network phase $ What should we do? >> Minimize RTT + payload size

Slide 88

Slide 88 text

Thank you :) koji.ishimoto @kojiISHIMOTO t32k The slide design is inspired by Jina Bolton. Thanks to @jina :)

Slide 89

Slide 89 text

photo credit - http://www.flickr.com/photos/expose_switch/4566783151/ - http://www.flickr.com/photos/ivko999/5082864854/ - http://www.flickr.com/photos/peasap/4684467836/ - http://www.flickr.com/photos/emrank/2191608962/ - http://www.flickr.com/photos/spilt-milk/6042115943/ - http://www.flickr.com/photos/avidlyabide/7509737450/ - http://www.flickr.com/photos/hinkelstone/2435823037/ - http://www.flickr.com/photos/alex-d/2770828285/ - http://www.flickr.com/photos/expose_switch/4566783201/ - http://www.flickr.com/photos/expose_switch/4566783171/