Slide 1

Slide 1 text

Performance as design doing responsive responsibly @14islands

Slide 2

Slide 2 text

This talk is not about Flat design. Media queries. Style guides. Typography.

Slide 3

Slide 3 text

This talk is about Performance as design.

Slide 4

Slide 4 text

Responsive web design?

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

This is not the web.

Slide 7

Slide 7 text

This is the web.

Slide 8

Slide 8 text

This will be the web.

Slide 9

Slide 9 text

Thanks Brad!

Slide 10

Slide 10 text

Thanks Brad! You’re welcome!

Slide 11

Slide 11 text

More people have access to mobile than to running water and toothbrushes. http://blogs.worldbank.org/africacan/more-cell-phones-than-toilets “

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

87% of mobile users expect sites to load at least as fast, or faster than on their desktop. http://www.strangeloopnetworks.com/web-performance-infographics/ “

Slide 14

Slide 14 text

Hej! We are 14islands.

Slide 15

Slide 15 text

Sites are getting fatter https://speakerdeck.com/tkadlec/deliberate-performance

Slide 16

Slide 16 text

At this rate, the average page will hit 2 MB by 2015. http://www.webperformancetoday.com/2012/05/24/average-web-page-size-1-mb/ “

Slide 17

Slide 17 text

http://httparchive.org/interesting.php?a=All&l=Oct%201%202013&s=Top1000

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

RWD may make your pages look better on a variety of devices, but it doesn’t automatically make your pages load better on a variety of devices. It’s all about implementation. http://www.webperformancetoday.com/2013/08/06/8-mobile-performance-assumptions/ “

Slide 21

Slide 21 text

RWD may make your pages look better on a variety of devices, but it doesn’t automatically make your pages load better on a variety of devices. It’s all about implementation. http://www.webperformancetoday.com/2013/08/06/8-mobile-performance-assumptions/ “

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

Performance should be priority

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

75% of mobile users will leave the site if it takes more than 5 seconds. http://www.digitalmall.us/1150/smartphone-users-frustrated-with-mobile-web-experience/ “

Slide 26

Slide 26 text

Performance as priority Set expectations

Slide 27

Slide 27 text

Performance as priority Test early with prototyping

Slide 28

Slide 28 text

Performance as priority Collaborate

Slide 29

Slide 29 text

Performance as priority Iterate

Slide 30

Slide 30 text

Tip: webpagetest.org

Slide 31

Slide 31 text

Start with a budget

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

Example: Less than 3 seconds to see something.

Slide 34

Slide 34 text

Example: Not bigger than 1MB.

Slide 35

Slide 35 text

Example: No more than 20 requests.

Slide 36

Slide 36 text

Now try to stick to it. (good luck!)

Slide 37

Slide 37 text

Mobile first is crucial

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

You get real pretty early.

Slide 40

Slide 40 text

Designing for mobile isn’t just about embracing limitations — it’s also about extending what you can do. - Luke Wroblewski “

Slide 41

Slide 41 text

Also known as Progressive Enhancement

Slide 42

Slide 42 text

3 issues to pick a fight with

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

1/3 Responsive images

Slide 45

Slide 45 text

Biggest performance hit 69% of mobile web traffic is images.

Slide 46

Slide 46 text

First things first One less image, please

Slide 47

Slide 47 text

Question Which one of these sites loads faster?

Slide 48

Slide 48 text

http://alistapart.com/column/performance-matters Total size (kb) Number of elements CSS rules Images Script lines A B C D E 3 697 1 504 1 392 41 77 768

Slide 49

Slide 49 text

http://alistapart.com/column/performance-matters Total size (kb) Number of elements CSS rules Images Script lines A B C D E 3 697 1 504 1 392 41 77 768 2 278 1 100 5 325 29 39 183

Slide 50

Slide 50 text

http://alistapart.com/column/performance-matters Total size (kb) Number of elements CSS rules Images Script lines A B C D E 3 697 1 504 1 392 41 77 768 2 278 1 100 5 325 29 39 183 1 061 2 673 1 105 66 12 643

Slide 51

Slide 51 text

http://alistapart.com/column/performance-matters Total size (kb) Number of elements CSS rules Images Script lines A B C D E 3 697 1 504 1 392 41 77 768 2 278 1 100 5 325 29 39 183 1 061 2 673 1 105 66 12 643 1 812 4 252 1 672 12 10 284

Slide 52

Slide 52 text

http://alistapart.com/column/performance-matters Total size (kb) Number of elements CSS rules Images Script lines A B C D E 3 697 1 504 1 392 41 77 768 2 278 1 100 5 325 29 39 183 1 061 2 673 1 105 66 12 643 1 812 4 252 1 672 12 10 284 1 372 900 3 902 6 38 269

Slide 53

Slide 53 text

http://alistapart.com/column/performance-matters Total size (kb) Number of elements CSS rules Images Script lines A B C D E 3 697 1 504 1 392 41 77 768 2 278 1 100 5 325 29 39 183 1 061 2 673 1 105 66 12 643 1 812 4 252 1 672 12 10 284 1 372 900 3 902 6 38 269

Slide 54

Slide 54 text

No content

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

Serve the correct images to the correct devices

Slide 57

Slide 57 text

background-images with media queries

Slide 58

Slide 58 text

Note not for user generated content

Slide 59

Slide 59 text

@media (max-width: 600px) { .module { background-image: url('images/image-600.png'); } } @media (min-width: 600px) { .module { background-image: url('images/image-min600.png'); } }

Slide 60

Slide 60 text

The proposed element

Slide 61

Slide 61 text

Slide 62

Slide 62 text

The attribute srcset

Slide 63

Slide 63 text

Slide 64

Slide 64 text

The flag-enabled client hints

Slide 65

Slide 65 text

Client Hints can be used as input to proactive content negotiation; just as the Accept header allowed clients to indicate what formats they prefer, Client Hints allow clients to indicate a list of device and agent specific preferences. http://www.igvita.com/2013/08/29/automating-dpr-switching-with-client-hints/ “

Slide 66

Slide 66 text

(request) GET /img.jpg HTTP/1.1 User-Agent: Awesome Browser Accept: image/webp, image/jpg CH: dpr=2.0 (response) HTTP/1.1 200 OK Server: Awesome Server Content-Type: image/jpg Content-Length: 124523 Vary: CH (image data) http://www.igvita.com/2013/08/29/automating-dpr-switching-with-client-hints/

Slide 67

Slide 67 text

Try it: --enable-client-hints

Slide 68

Slide 68 text

Using a service like responsive.io

Slide 69

Slide 69 text

My responsive
image

Slide 70

Slide 70 text

How can a front-end + back-end service work?

Slide 71

Slide 71 text

Javascript crawls the page

Slide 72

Slide 72 text

Javascript crawls the page Check browser for size and capabilities

Slide 73

Slide 73 text

Javascript crawls the page Check browser for size and capabilities Request responsive.io CDN

Slide 74

Slide 74 text

Javascript crawls the page Check browser for size and capabilities Request responsive.io CDN Do we have this image?

Slide 75

Slide 75 text

Javascript crawls the page Check browser for size and capabilities Request responsive.io CDN Return the image Do we have this image?

Slide 76

Slide 76 text

Javascript crawls the page Check browser for size and capabilities Request responsive.io CDN Return the image Prepare the image Return the image Do we have this image?

Slide 77

Slide 77 text

And by the way... SVGs are pretty awesome.

Slide 78

Slide 78 text

Slide 79

Slide 79 text

For more information responsiveimages.org

Slide 80

Slide 80 text

2/3 Prioritize loading of core content.

Slide 81

Slide 81 text

Load me first! Not yet! Not yet!

Slide 82

Slide 82 text

Load me first! Not yet! Not yet!

Slide 83

Slide 83 text

Load me first! Load me! Load me!

Slide 84

Slide 84 text

The useful matchMedia

Slide 85

Slide 85 text

// maybe make sure there’s a polyfill loaded before this? if (matchMedia("only screen and (max- width: 480px)").matches) { // load some JS templates // append them in the page } https://github.com/paulirish/matchMedia.js/

Slide 86

Slide 86 text

How about YepNope + matchMedia

Slide 87

Slide 87 text

// cool syntax :) yepnope({ test: window.matchMedia("(orientation: landscape)").matches, yep: "landscape.js", nope: "portrait.js" }); http://yepnopejs.com/

Slide 88

Slide 88 text

Our own approach Breakpoints.js

Slide 89

Slide 89 text

@media ( min-width: 600px ) { body { @include defineBreakpoint("GENERIC_BIG_SCREEN_BREAKPOINT"); // generic breakpoint styles } } .element { @media ( min-width: 320px ) { @include defineBreakpoint("SPECIFIC_CONTENT_BREAKPOINT"); // specific styles for this element } } https://github.com/14islands/js-breakpoints

Slide 90

Slide 90 text

Breakpoints.on({ name: "GENERIC_BIG_SCREEN_BREAKPOINT", matched: function(){ /* some js logic to activate*/ }, exit: function(){ /* disable some js logic*/ }, }); Breakpoints.on({ name: "SPECIFIC_CONTENT_BREAKPOINT", el: document.getElementById("myElement"), matched: function(){ /* some js logic to activate*/ }, exit: function(){ /* disable some js logic*/ }, }); https://github.com/14islands/js-breakpoints

Slide 91

Slide 91 text

3/3 Be aware of Javascript.

Slide 92

Slide 92 text

Separating concerns Mind your JS

Slide 93

Slide 93 text

By keeping your client side code small and lightweight, you can literally open up your product to new markets. https://speakerdeck.com/tkadlec/deliberate-performance “

Slide 94

Slide 94 text

Old-school Progressive Enhancement isn’t dead!

Slide 95

Slide 95 text

http://www.flickr.com/photos/not-so-much/2819702177/

Slide 96

Slide 96 text

To improve the twitter.com experience for everyone, we’ve been working to take back control of our front-end performance by moving the rendering to the server. This has allowed us to drop our initial page load times to 1/5th of what they were previously and reduce differences in performance across browsers. https://blog.twitter.com/2012/improving-performance-twittercom “

Slide 97

Slide 97 text

To improve the twitter.com experience for everyone, we’ve been working to take back control of our front-end performance by moving the rendering to the server. This has allowed us to drop our initial page load times to 1/5th of what they were previously and reduce differences in performance across browsers. https://blog.twitter.com/2012/improving-performance-twittercom “

Slide 98

Slide 98 text

(...) It looks exactly the same as the app it replaced, however initial pageload feels drastically quicker because we serve up real HTML instead of waiting for the client to download JavaScript before rendering. Plus, it is fully crawlable by search engines. http://nerds.airbnb.com/weve-launched-our-first-nodejs-app-to-product/ “

Slide 99

Slide 99 text

(...) It looks exactly the same as the app it replaced, however initial pageload feels drastically quicker because we serve up real HTML instead of waiting for the client to download JavaScript before rendering. Plus, it is fully crawlable by search engines. http://nerds.airbnb.com/weve-launched-our-first-nodejs-app-to-product/ “

Slide 100

Slide 100 text

Remember to Keep it simple

Slide 101

Slide 101 text

No content

Slide 102

Slide 102 text

http://www.slideshare.net/nzakas/enough-withthejavascriptalready Value Bytes Profit! Ok. Bad! Ok.

Slide 103

Slide 103 text

No content

Slide 104

Slide 104 text

Psst! Check the source Almost no javascript. Fewer requests.

Slide 105

Slide 105 text

#perfmatters

Slide 106

Slide 106 text

Think and prioritize performance from day one.

Slide 107

Slide 107 text

Measure. Treat performance as a core part of your website’s quality, and don’t ship without understanding and accepting its performance. http://www.guypo.com/mobile/performance-implications-of-responsive-design-book-contribution/ “

Slide 108

Slide 108 text

There are techniques.

Slide 109

Slide 109 text

We need to care more.

Slide 110

Slide 110 text

No content

Slide 111

Slide 111 text

The internet appreciates it!

Slide 112

Slide 112 text

Questions?

Slide 113

Slide 113 text

Tack! http://14islands.com hello@14islands.com http://twitter.com/14islands https://twitter.com/responsive_io https://www.facebook.com/14islands

Slide 114

Slide 114 text

Some good references http://dribbble.com/shots/1099303-Flat-Apple-Devices-Mockup http://dribbble.com/shots/1126404-Flat-Chrome http://www.guypo.com/technical/responsive-web-design-is-bad-for-performance-there-i-said-it/ http://www.guypo.com/uncategorized/real-world-rwd-performance-take-2/ https://speakerdeck.com/tkadlec/responsive-responsive-design-tutorial-at-velocity-ny https://speakerdeck.com/tkadlec/deliberate-performance