LDN Web Perf - RWD and Fast, iterating "live"

by Michael Gooding

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Slide 3

Slide 3 text

©2015 AKAMAI | FASTER FORWARDTM Why is responsive design so popular?  Removes expensive redirects www.espn.com 2 redirects, 2.5 seconds lost (23% of page load time) Each Redirect requires at least 1 round-trip

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Slide 9

Slide 9 text

Slide 10

Slide 10 text

Slide 11

Slide 11 text

©2015 AKAMAI | FASTER FORWARDTM Introducing our Guinea Pig! • Magento CE 1.9 • Sample Data 1.9 • Theme: rwd • Plugins: AddShoppers, YotPo, Recommender • http://ec2-54-190-59-81.us-west- 2.compute.amazonaws.com/magento/ • http://magento.example.com/ Source: Builtwith

Slide 12

Slide 12 text

Slide 13

Slide 13 text

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Slide 17

Slide 17 text

Slide 18

Slide 18 text

©2015 AKAMAI | FASTER FORWARDTM Spectrum of Responsive Sites • Client Side Rendering • CSS @media • Fluid Grids / Flex Images • Device decides which content to use • Server Side • Device / Situation Detection • Server decides the appropriate content for the user

Slide 19

Slide 19 text

©2015 AKAMAI | FASTER FORWARDTM Testing • WebPageTest.org • Devices: Desktop, Moto G [opensignal.org] • Moto E, Nexus 7 on initial test • Network Conditions: Cable, 3G [State of the Internet] • Browsers: Chrome [akamai.io] • IE 9, Firefox, Chrome on initial test • Ignore multi-geo testing • Assume adding oceans makes it worse

Slide 20

Slide 20 text

Slide 21

Slide 21 text

©2015 AKAMAI | FASTER FORWARDTM Exercise in Stating the Obvious • Network Conditions (bandwidth, latency) impact performance • Mobile is slower than Desktop • Lots of Images • Lots of JS • Cost of Painting on mobile • Cost of JS on mobile

Slide 22

Slide 22 text

Slide 23

Slide 23 text

Slide 24

Slide 24 text

Slide 25

Slide 25 text

Slide 26

Slide 26 text

Slide 27

Slide 27 text

©2015 AKAMAI | FASTER FORWARDTM Strategies to Reduce Image Cost • No Images! • Use SVG • Use CSS • Change formats • Increase compression • Use different sized image for different viewport (Responsive Images) • (impractical) • (impractical) • (impractical; unexpected results) • (interesting, more later) • (a different talk)

Slide 28

Slide 28 text

Slide 29

Slide 29 text

new Imager({ availableWidths: [200, 260, 320, 600], widthInterpolator: function(width) { return width + 'x' + (width/2); } });

Slide 30

Slide 30 text

Srcset Attribute Client Hints

Picture Element

Slide 31

Slide 31 text

Slide 32

Slide 32 text

Slide 33

Slide 33 text

Slide 34

Slide 34 text

Slide 35

Slide 35 text

Slide 36

Slide 36 text

Slide 37

Slide 37 text

Slide 38

Slide 38 text

Slide 39

Slide 39 text

©2015 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Responsive Images: Results WPT Results Start Render: 6.4s Doc Complete: 18.9s Fully Loaded: 28s Start Render: 7.7s Doc Complete: 15.9 Fully Loaded: 22.7s

Slide 40

Slide 40 text

Slide 41

Slide 41 text

©2015 AKAMAI | FASTER FORWARDTM Responsive Images: Notes & Caveats • Use polyfill (eg: Scott Jehl’s PictureFill) • Polyfill manipulates the in the DOM; Supported Browsers do not • JS Libraries that depend on may not work with (see ImageZoom) • Future of is still uncertain – Only Chrome 38 (Desktop) is committed

Slide 42

Slide 42 text

Slide 43

Slide 43 text

Slide 44

Slide 44 text

Slide 45

Slide 45 text

©2015 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Magento Updated v2 function loadRealUpSell(img) { if (!img) return; if (img.offsetParent != null) { // Implies hidden img.onload = null; img.src = img.getAttribute("data-src"); } }

You may also be interested in the following product(s)

Slide 46

Slide 46 text

Slide 47

Slide 47 text

©2015 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Conditional Load Images: Results WPT Results Start Render: 7.7s Doc Complete: 15.9 Fully Loaded: 22.7s Start Render: 7.5s Doc Complete: 14s Fully Loaded: 21.4s

Slide 48

Slide 48 text

©2015 AKAMAI | FASTER FORWARDTM Conditional Load Images: Notes & Caveats • “onLoad” only fires if the 1x1.gif exists and loaded • Make sure you don’t have broken JavaScript or no images are shown • Resizing viewport or orientation changes require special attention and additional logic • Yet more JavaScript!

Slide 49

Slide 49 text

Slide 50

Slide 50 text

Slide 51

Slide 51 text

Slide 52

Slide 52 text

©2015 AKAMAI | FASTER FORWARDTM On Demand Images: Caveats & Notes • Many automated solutions offer lazyload • Eg: Google PageSpeed, Akamai FEO • Existing lazyload solutions may need to be updated may not interact with final supported browsers • Picture Polyfill + Lazyload scripts need to be careful – use solutions such as Picturefill 2 and lazyloading

Slide 53

Slide 53 text

Slide 54

Slide 54 text

Slide 55

Slide 55 text

Slide 56

Slide 56 text

©2015 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. grep "@media" styles.css | sort | uniq @media (-webkit-min-device-pixel-ratio: 2), (min--moz-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 4 / 2), (min-device 2), (min-resolution: 192dpi), (min-resolution: 2dppx) { @media only screen and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 0) { @media only screen and (max-width: 1000px) { @media only screen and (max-width: 1199px) { @media only screen and (max-width: 1279px) { @media only screen and (max-width: 320px) { @media only screen and (max-width: 420px) { @media only screen and (max-width: 450px) { @media only screen and (max-width: 479px) { @media only screen and (max-width: 499px) { @media only screen and (max-width: 520px) { @media only screen and (max-width: 530px) { @media only screen and (max-width: 535px) { @media only screen and (max-width: 599px) { @media only screen and (max-width: 600px) { @media only screen and (max-width: 620px) { @media only screen and (max-width: 670px) { @media only screen and (max-width: 699px) { @media only screen and (max-width: 770px) { @media only screen and (max-width: 799px) { @media only screen and (max-width: 850px) { @media only screen and (max-width: 870px) and (min-width: 771px) { @media only screen and (max-width: 979px) { @media only screen and (min-width: 1126px) {

Slide 57

Slide 57 text

Slide 58

Slide 58 text

Slide 59

Slide 59 text

Slide 60

Slide 60 text

©2015 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. 4b. Solution: More Javascript! var styles= document.getElementsByTagName("link"); for(var i=0;i<styles.length; i++) { // Test if the Media Query matches var mq = styles[i].getAttribute("data-mq"); if (mq && window.matchMedia(mq).matches) { // If so, append the new (link) element. var l = document.createElement("link"); l.rel = 'stylesheet'; l.type = 'text/css'; l.href = scripts[i].getAttribute("data-src"); document.getElementsByTagName('head')[0].appendChild(l); } }

Slide 61

Slide 61 text

Slide 62

Slide 62 text

©2015 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. On Demand CSS: Results WPT Results Start Render: 7.5s Doc Complete: 14s Fully Loaded: 21.4s Start Render: 9.2s Doc Complete: 12.7s Fully Loaded: 20.4s

Slide 63

Slide 63 text

Slide 64

Slide 64 text

©2015 AKAMAI | FASTER FORWARDTM Without the CSSOM, First Paint is Blocked Resources to calculate Critical Path CSS: • Chrome Bookmarklet by Paul Kinlan • Grunt task, NPM or online tool by Jonas Ohlsson

Slide 65

Slide 65 text

Slide 66

Slide 66 text

©2015 AKAMAI | FASTER FORWARDTM Grow revenue opportunities with fast, personalized web experiences and manage complexity from peak demand, mobile devices and data collection. *, ::before, ::after { box-sizing: border-box; margin: 0px; padding: 0px; } html { font-family: sans-serif; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } html, body, img, fieldset, abbr, acronym { border: 0px; } html, body { height: 100%; } body { margin: 0px; color: rgb(0, 0, 0); line-height: 1; background: rgb(255, 255, 2 body, button, input, select, table, textarea { font-family: 'Helvetica Neue', Verdan .wrapper { min-width: 320px; min-height: 100%; margin: 0px auto; background: rgb(255 .header-language-background { padding: 10px; text-transform: uppercase; background-c .header-language-background, .header-language-background a { color: rgb(230, 230, 23 .header-language-container, .page-header { font-family: Raleway, 'Helvetica Neue', V .header-language-background .header-language-container { max-width: 1200px; margin-l ... Linen Blazer ...

Slide 67

Slide 67 text

©2015 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Inline Critical CSS: Results WPT Results Start Render: 7.5s Doc Complete: 14s Fully Loaded: 21.4s Start Render: 7.2s Doc Complete: 13.4s Fully Loaded: 20.9s

Slide 68

Slide 68 text

©2015 AKAMAI | FASTER FORWARDTM CSS Notes and Caveats • Splitting CSS by Media Query has marginal net-benefits • The Browser will still load CSS with Media Queries • Use Conditionally loaded CSS for mobile first designs • Focus on critical CSS instead

Slide 69

Slide 69 text

Slide 70

Slide 70 text

Slide 71

Slide 71 text

©2015 AKAMAI | FASTER FORWARDTM Solution: Conditional Loading JS (& CSS) “… conditional loading can be used to ensure that small screen users don’t download a whole bunch of stuff they can’t use …” Brad Frost: var scripts = document.getElementsByTagName("script"); for(var i=0;i<scripts.length; i++) { // Test if the Media Query matches var mq = scripts[i].getAttribute("data-mq"); if (mq && window.matchMedia(mq).matches) { // If so, append the new (script) element. var s = document.createElement("script"); s.src = scripts[i].getAttribute("data-src"); document.body.appendChild(s); } }

Slide 72

Slide 72 text

Slide 73

Slide 73 text

©2015 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Conditional Load JS: Results WPT Results Start Render: 7.2s Doc Complete: 13.4s Fully Loaded: 20.9s Start Render: 6.8s Doc Complete: 10.5s Fully Loaded: 17.5s

Slide 74

Slide 74 text

Slide 75

Slide 75 text

Slide 76

Slide 76 text

Slide 77

Slide 77 text

©2015 AKAMAI | FASTER FORWARDTM Solution: REsponsive + Server Side (RESS) • Server conditionally assembles (remove / add) design response • Does not replace Front-End Responsive design • Tune for families of devices • User-Agent Regex • Device Characteristic Databases • Client Hints (Header, Cookie) • Other Cookie Mobile Content Removed Desktop Content Removed

Slide 78

Slide 78 text

Slide 79

Slide 79 text

Slide 80

Slide 80 text

Slide 81

Slide 81 text

©2015 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. RESS: Results WPT Results Start Render: 6.8s Doc Complete: 10.5s Fully Loaded: 17.5s Start Render: 6.8s Doc Complete: 10.1s Fully Loaded: 17 s

Slide 82

Slide 82 text

©2015 AKAMAI | FASTER FORWARDTM RESS Notes & Caveats • Vary: User-Agent to avoid SEO Cloaking • Cache-Control: Private to avoid cache collision by Proxy • Pre-instruct your CDN to utilize the same RESS logic • (Otherwise your CDN will not cache or have cache collisions)

Slide 83

Slide 83 text

©2015 AKAMAI | FASTER FORWARDTM Solution: RESS with CDN ● Identify Common Devices ○ Or common properties of devices ● Optimize for those devices ○ RWD, even if not 100% Client Side ● Example: Akamai EDC & Property Manager ○ Device Properties sent as header ○ Origin returns correct content ○ Cache key includes mobile property

Slide 84

Slide 84 text

Slide 85

Slide 85 text

Slide 86

Slide 86 text

Slide 87

Slide 87 text

Slide 88

Slide 88 text

Slide 89

Slide 89 text

©2015 AKAMAI | FASTER FORWARDTM Could we use the same design for images? Format Size vs JPEG Proggressive Transparency Support Hardware Decoding Encoder Browser Support JPEG N/A N/A No No jpegtran Everybody WebP -35% -35% Yes No cwebp JPEG XR -30% N/A In Spec, not Browsers Maybe jxrlib JPEG 2000 -30% N/A In Spec, not Browsers Maybe OpenJP EG 10+ 12.1+ 4+ 23+ 6+ 6+

Slide 90

Slide 90 text

Slide 91

Slide 91 text

©2015 AKAMAI | FASTER FORWARDTM Avoid data theft and downtime by extending the security perimeter outside the data-center and protect from increasing frequency, scale and sophistication of web attacks. Adaptive Format: Results for Chrome & WebP WPT Results Start Render: 6.8s Doc Complete: 10.1s Fully Loaded: 17 s Start Render: 6.4s Doc Complete: 9.4s Fully Loaded: 16.2 s

Slide 92

Slide 92 text

Slide 93

Slide 93 text

©2015 AKAMAI | FASTER FORWARDTM Bonus: Image Transcoder for Resize & Compression • Deliver a browser specific version of a requested image • Reduce the “noise” in the tag • Provides backward compatibility for all browsers • Ensures all images apply best practices (remove EXIF, progressive, etc)

Slide 94

Slide 94 text

©2015 AKAMAI | FASTER FORWARDTM Bonus: Adjust Based on Network Conditions Quality: 100% Size: 101KB Average Throughput: High Size: 85KB (Q: 90) Throughput: Med Size: 35KB (Q: 40) Throughput: Low Size: 13KB (Q: 20) May be Grainy, But Stays Fast!

Slide 95

Slide 95 text

Slide 96

Slide 96 text

Slide 97

Slide 97 text

Slide 98

Slide 98 text

Slide 99

Slide 99 text

Slide 100

Slide 100 text

©2015 AKAMAI | FASTER FORWARDTM Final Recommendations 1. Use a responsive image solution (like ) 2. Prevent downloading hidden & below the fold images 3. Inline critical css 4. Use conditional loading for CSS & JS (to avoid hidden SPOF issues) 5. Implement RESS to reduce DOM complexity • Integrate with your CDN for maximum offload 6. Adaptive Images to Browser and Network conditions

Slide 101

Slide 101 text

Slide 102

Slide 102 text