Speed Matters. So Why Is Your Site So Slow?


The Presentation inside:

Slide 0

Speed Matters… So why is your site so slow? @AndyDavies ReDevelop 2015, August 2015 https://www.flickr.com/photos/sharynmorrow/643126727


Slide 1

https://www.flickr.com/photos/dullhunk/3930915541


Slide 2

But I’m frustrated… http://www.flickr.com/photos/sybrenstuvel/2468506922


Slide 3

The Web is Too Slow http://www.flickr.com/photos/the_justified_sinner/3507390621


Slide 4


Slide 5

(it’s just) Too many sites are too slow http://www.flickr.com/photos/the_justified_sinner/3507390621


Slide 6

and it’s getting worse! Only 12% of the top 100 (US) retail sites rendered feature content in less than 3 seconds. ! ! Year-on-year the median page has slowed down by 23% Tammy Everts - Radware State of the Union Fall 2014


Slide 7

“We’re not being deliberate about performance”! Tim Kadlec https://www.flickr.com/photos/lukew/7382528728


Slide 8

But only if we build it that way… http://3.bp.blogspot.com/-0RqujOyE1ro/Up9HF7bPxbI/AAAAAAAAAbM/Ijudm6uq-dg/s1600/This+is+for+Everyone.jpg


Slide 9

Reader panel (3,000 people) rated speed (fast page load time) as their second most important driver! ! Speed had the highest percentage of people saying it was VERY important to them


Slide 10

Speed matters! Walmart 2012


Slide 11

Increased conversions by 10%! ! Shaved 1 second off median home page time! 6 seconds of 98th percentile http://www.slideshare.net/cliffcrocker/velocity-ny-how-to-measure-revenue-in-milliseconds


Slide 12

Improved load time from 1.2s to 0.5s! ! +28% page views / session! +21% time on site / visit! +20% conversion rate http://blog.quanta-computing.com/etam-earns-20-of-conversion-by-optimising-its-online-store/


Slide 13

We’re more tolerant as we get further into purchase funnels Less Tolerant More Tolerant


Slide 14

and sometimes we get suspicious if something’s too fast


Slide 15

and sometimes we get suspicious if something’s too fast


Slide 16

“ Design is all about finding solutions within constraints,! if there were no constraints, it’s not design — it’s art.!” Matias Duarte


Slide 17

Embrace those constraints… set a performance budget http://www.flickr.com/photos/communityfriend/2342578485


Slide 18

Setting a budget An event that matters to the visitor! within a set time! under defined network conditions


Slide 19

“Usable within 10 seconds on GPRS connection”! BBC News


Slide 20

“SpeedIndex under 1000”! Paul Irish


Slide 21

Could use page size or number of objects but…


Slide 22

…how well would they work here?


Slide 23

We know how to make fast sites, there are plenty of recipes out there


Slide 24

How well do we understand our medium? https://www.flickr.com/photos/[email protected]/6924775578


Slide 25

Do we understand our fundamental building blocks? https://www.flickr.com/photos/ogimogi/2253657555


Slide 26

Which will be faster? 10Mbps 1Mbps


Slide 27

Which will be faster? 10Mbps 1Mbps


Slide 28

Which will be faster? 10Mbps 1Mbps


Slide 29

Which will be faster? 10Mbps 1Mbps


Slide 30

Which will be faster? 10Mbps / 280ms RTT 1Mbps / 28ms RTT


Slide 31

We often think of the network as a pipe https://www.flickr.com/photos/[email protected]/4181042889


Slide 32

that’s sometimes really bad https://www.flickr.com/photos/chesh2000/4487000196


Slide 33

but the reality is closer to http://1m0esx2939yhjwld8419obqhyb.wpengine.netdna-cdn.com/wp-content/uploads/2014/06/DSC_0492.jpg


Slide 34

“More Bandwidth Doesn’t Matter (much)”! Mike Belshe 3.11s Page Load Time 1.95s 1.63s 1 2 3 1.50s 1.44s 1.41s 1.39s 1.38s 1.37s 1.36s 4 5 6 7 8 9 10 Bandwidth (Mbps)


Slide 35

Latency = time between request and response Browser Server Time Request ponse Res


Slide 36

But latency has a linear impact 4 Page Load Time (s) 3 2 1 0 20 40 60 80 100 120 140 Round Trip Time (ms) 160 180 200 220 240


Slide 37

Latency increases with distance BT Backbone roundtrip times from London: http://ippm.bt.net/hour/europe/lo.shtml http://www.vectortemplates.com


Slide 38

Latency increases with distance 81ms 28ms 156ms 201ms 232ms 266ms BT Backbone roundtrip times from London: http://ippm.bt.net/hour/europe/lo.shtml http://www.vectortemplates.com


Slide 39

CDN = content closer to visitor = less latency = faster http://www.vectortemplates.com


Slide 40

There’s the last mile latency too (and routers, other networking kit, mobile latencies too) https://www.flickr.com/photos/kiwanja/3170292282


Slide 41

Will probably need more than one round trip (TCP Segments) 285kB 214kB 143kB 71kB Size 1 2 3 Round Trips 4 5 6 7 8 9 10 11 TCP and the Lower Bound of Web Performance! John Rauser


Slide 42

We can cheat the latency penalty (sometimes) https://speakerdeck.com/mikeyk/secrets-to-lightning-fast-mobile-design


Slide 43


Slide 44

User gets feedback


Slide 45

Network request still in progress User gets feedback


Slide 46

???


Slide 47

Convert HTML … <html> <head> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link href="styles.css" rel="stylesheet"> <script src="script.js"></script> <title>HTML Example</title> </head> <body> <h1>Title</h1> <p>Some introductory text and picture! <img src="image.jpg"/></p> </body> </html>


Slide 48

… into Document Object Model (DOM) html head meta link script body title h1 p img


Slide 49

Convert CSS … body { font-size: 16px } h1 { text-decoration: underline} p { font-weight: bold } p > span { color: #000 } img { border: 1px solid #ccc }


Slide 50

… into CSS Object Model (CSSOM) body font-size: 16px h1 p img font-size: 16px border: 1px solid #ccc font-size: 16px text-decoration: underline span font-size: 16px font-weight: bold color: #000 font-size: 16px font-weight: bold


Slide 51

Combine DOM and CSSOM to build Render Tree body h1 p font-size: 16px font-weight: bold font-size: 16px text-decoration: underline img font-size: 16px font-weight: bold border: 1px solid #ccc


Slide 52

Render the Page HTML DOM Render! Tree CSS CSSOM Layout Paint


Slide 53

But what about JavaScript? HTML DOM Render! Tree JavaScript CSS CSSOM Layout Paint


Slide 54

But what about JavaScript? HTML DOM Render! Tree JavaScript CSS Layout Paint CSSOM JavaScript blocks DOM construction! CSSOM construction blocks JavaScript execution


Slide 55

async attribute avoids JavaScript blocking DOM construction ! <script async src="myscript.js"></script> Widely supported - 89.59% (http://caniuse.com/script-async)! ! Doesn’t incur delays of using inline script to load other scripts e.g. Google Analytics snippet


Slide 56

HTML DOM Render! Tree JavaScript CSS CSSOM Layout Paint


Slide 57

HTML DOM Render! Tree JavaScript CSS Fonts and background images discovered when render tree builds CSSOM Layout Paint


Slide 58

And we all hate this… right?


Slide 59

Use font foundries that prioritise your visitor’s experience http://www.flickr.com/photos/splorp/4951916342


Slide 60

!"#$%&'()*+,-./0123456789:;<=>[email protected] RSTUVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~ ¡¢£¤¥¦ §¨©ª«¬ ®¯°±²³´µ¶·¸¹º»¼½¾¿ÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖ ×ØÙÚÛÜÝÞßàáâãäåæçèéêëìíîïðñòóôõö÷øùúûüýþÿĀāĂăĄąĆ ćĈĉĊċČčĎďĐđĒēĔĕĖėĘęĚěĜĝĞğĠġĢģĤĥĦħĨĩĪīĬĭĮįİıIJijĴĵĶķ ĸĹĺĻļĽľĿŀŁłŃńŅņŇňʼnŊŋŌōŎŏŐőŒœŔŕŖŗŘřŚśŜŝŞşŠšŢţŤťŦŧ ŨũŪūŬŭŮůŰűŲųŴŵŶŷŸŹźŻżŽžſƒƠơƯưǰǺǻǼǽǾǿȘșȚțȷʼˆˇˉ˘˙ ˚ ˛ ˜ ˝ ˳ ̀ ́ ̃ ̉ ̏ ̣΄ ΅ Ά · Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ήίΰαβγδεζηθικλμνξοπρςστυφχψωϊϋόύώϑϒϖЀЁЂЃЄЅІЇЈЉ ЊЋЌЍЎЏАБВГДЕЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯаб вгдежзийклмнопрстуфхцчшщъыьэюяѐёђѓєѕіїјљњћќѝўџѠѡ ѢѣѤѥѦѧѨѩѪѫѬѭѮѯѰѱѲѳѴѵѶѷѸѹѺѻѼѽѾѿҀҁ҂ ҃҄҅҆҈ ҉ ҊҋҌҍ ҎҏҐґҒғҔҕҖҗҘҙҚқҜҝҞҟҠҡҢңҤҥҦҧҨҩҪҫҬҭҮүҰұҲҳҴҵҶҷҸ ҹҺһҼҽҾҿӀӁӂӃӄӅӆӇӈӉӊӋӌӍӎӏӐӑӒӓӔӕӖӗӘәӚӛӜӝӞӟӠӡӢӣ ӤӥӦӧӨөӪӫӬӭӮӯӰӱӲӳӴӵӶӷӸӹӺӻӼӽӾӿԀԁԂԃԄԅԆԇԈԉԊԋԌԍԎ ԏԐԑԒԓḀḁḾḿẀẁẂẃẄẅẠạẢảẤấẦầẨẩẪẫẬậẮắẰằẲẳẴẵẶặẸẹẺẻ ẼẽẾếỀềỂểỄễỆệỈỉỊịỌọỎỏỐốỒồỔổỖỗỘộỚớỜờỞởỠỡỢợỤụỦủ ỨứỪừỬửỮữỰựỲỳỴỵỶỷỸỹὍ–—―‗‘’‚‛“”„†‡•…‰′″‹›‼⁄⁰⁴⁵⁶⁷⁸⁹ⁿ₣ ₤ ₧ ₫ € ℅ № ℠ ™ Ω ⅛ ⅜ ⅝ ⅞ ∂ ∆ ∏ ∑ − √ ∞ ∫ ≈ ≠ ≤ ≥ ◊ ff fi fl ffi ffl  Do we need all those glyphs? Open Sans — 22.1 kB


Slide 61

!"#$%&'()*+,-./0123456789:;<=>[email protected] RSTUVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~ ¡¢£¤¥¦ §¨©ª«¬ ®¯°±²³´µ¶·¸¹º»¼½¾¿ÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖ ×ØÙÚÛÜÝÞßàáâãäåæçèéêëìíîïðñòóôõö÷øùúûüýþÿĀāĂăĄąĆ ćĈĉĊċČčĎďĐđĒēĔĕĖėĘęĚěĜĝĞğĠġĢģĤĥĦħĨĩĪīĬĭĮįİıIJijĴĵĶķ ĸĹĺĻļĽľĿŀŁłŃńŅņŇňʼnŊŋŌōŎŏŐőŒœŔŕŖŗŘřŚśŜŝŞşŠšŢţŤťŦŧ ŨũŪūŬŭŮůŰűŲųŴŵŶŷŸŹźŻżŽžſƒƠơƯưǰǺǻǼǽǾǿȘșȚțȷʼˆˇˉ˘˙ ˚ ˛ ˜ ˝ ˳ ̀ ́ ̃ ̉ ̏ ̣΄ ΅ Ά · Έ Ή Ί Ό Ύ Ώ ΐ Α Β Γ Δ Ε Ζ Η Θ Ι Κ Λ Μ Ν Ξ Ο Π Ρ Σ Τ Υ Φ Χ Ψ Ω Ϊ Ϋ ά έ ήίΰαβγδεζηθικλμνξοπρςστυφχψωϊϋόύώϑϒϖЀЁЂЃЄЅІЇЈЉ ЊЋЌЍЎЏАБВГДЕЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯаб вгдежзийклмнопрстуфхцчшщъыьэюяѐёђѓєѕіїјљњћќѝўџѠѡ ѢѣѤѥѦѧѨѩѪѫѬѭѮѯѰѱѲѳѴѵѶѷѸѹѺѻѼѽѾѿҀҁ҂ ҃҄҅҆҈ ҉ ҊҋҌҍ ҎҏҐґҒғҔҕҖҗҘҙҚқҜҝҞҟҠҡҢңҤҥҦҧҨҩҪҫҬҭҮүҰұҲҳҴҵҶҷҸ ҹҺһҼҽҾҿӀӁӂӃӄӅӆӇӈӉӊӋӌӍӎӏӐӑӒӓӔӕӖӗӘәӚӛӜӝӞӟӠӡӢӣ ӤӥӦӧӨөӪӫӬӭӮӯӰӱӲӳӴӵӶӷӸӹӺӻӼӽӾӿԀԁԂԃԄԅԆԇԈԉԊԋԌԍԎ ԏԐԑԒԓḀḁḾḿẀẁẂẃẄẅẠạẢảẤấẦầẨẩẪẫẬậẮắẰằẲẳẴẵẶặẸẹẺẻ ẼẽẾếỀềỂểỄễỆệỈỉỊịỌọỎỏỐốỒồỔổỖỗỘộỚớỜờỞởỠỡỢợỤụỦủ ỨứỪừỬửỮữỰựỲỳỴỵỶỷỸỹὍ–—―‗‘’‚‛“”„†‡•…‰′″‹›‼⁄⁰⁴⁵⁶⁷⁸⁹ⁿ₣ ₤ ₧ ₫ € ℅ № ℠ ™ Ω ⅛ ⅜ ⅝ ⅞ ∂ ∆ ∏ ∑ − √ ∞ ∫ ≈ ≠ ≤ ≥ ◊ ff fi fl ffi ffl  Just Latin glyphs… 14.9 kB — 33% saving


Slide 62

Proposal to help control font A proposal that may help… blocking - CSS Font Rendering Controls font-display: auto | block | swap | fallback | optional; https://tabatkins.github.io/specs/css-font-rendering/


Slide 63

Another proposal that should help - link rel=“preload”… <!-- preload a widget component --> <link rel="preload" href="/components/widget.html" as="iframe"> ! <!-- preload an application script --> <link rel="preload" href="/app/script.js" as="javascript"> ! <!-- preload a CSS stylesheet --> <link rel="preload" href="/style/style.css" as="stylesheet"> ! <!-- preload a font --> <link rel="preload" href="//example.com/font.woff2" as="font"> ! <!-- preload an image asset --> <link rel="preload" href="//example.com/image.jpg" as="image" media="max-width: 640px"> https://w3c.github.io/preload/


Slide 64

Some other ways of hinting are already here <link rel="dns-prefetch" href="other.hostname.com"> ! <link rel="subresource" href="/some_other_resource.js"> ! <link rel="prefetch" href="/some_other_resource.jpeg"> ! <link rel="prerender" href=“//domain.com/next_page.html”>


Slide 65

And HTTP/2 server push is here now too https://www.flickr.com/photos/christian_bachellier/582457911


Slide 66

Be deliberate, design for performance https://www.flickr.com/photos/[email protected]/3748770917


Slide 67

Measure frequently - during build and in live http://www.flickr.com/photos/chandramarsono/4324373384


Slide 68

Remember the constraints of our medium https://www.flickr.com/photos/[email protected]/3367739514


Slide 69

https://www.flickr.com/photos/basheertome/4762529213


Slide 70

Thank You! @andydavies [email protected] http://slideshare.net/andydavies http://www.flickr.com/photos/nzbuu/4093456029


Slide 71


×

HTML:





Ссылка: