'

Speed Matters. So Why Is Your Site So Slow?

Понравилась презентация – покажи это...





Слайд 0

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


Слайд 1

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


Слайд 2

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


Слайд 3

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


Слайд 4


Слайд 5

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


Слайд 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


Слайд 7

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


Слайд 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


Слайд 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


Слайд 10

Speed matters! Walmart 2012


Слайд 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


Слайд 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/


Слайд 13

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


Слайд 14

and sometimes we get suspicious if something’s too fast


Слайд 15

and sometimes we get suspicious if something’s too fast


Слайд 16

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


Слайд 17

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


Слайд 18

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


Слайд 19

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


Слайд 20

“SpeedIndex under 1000”! Paul Irish


Слайд 21

Could use page size or number of objects but…


Слайд 22

…how well would they work here?


Слайд 23

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


Слайд 24

How well do we understand our medium? https://www.flickr.com/photos/37873897@N06/6924775578


Слайд 25

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


Слайд 26

Which will be faster? 10Mbps 1Mbps


Слайд 27

Which will be faster? 10Mbps 1Mbps


Слайд 28

Which will be faster? 10Mbps 1Mbps


Слайд 29

Which will be faster? 10Mbps 1Mbps


Слайд 30

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


Слайд 31

We often think of the network as a pipe https://www.flickr.com/photos/63567936@N00/4181042889


Слайд 32

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


Слайд 33

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


Слайд 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)


Слайд 35

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


Слайд 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


Слайд 37

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


Слайд 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


Слайд 39

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


Слайд 40

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


Слайд 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


Слайд 42

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


Слайд 43


Слайд 44

User gets feedback


Слайд 45

Network request still in progress User gets feedback


Слайд 46

???


Слайд 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>


Слайд 48

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


Слайд 49

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


Слайд 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


Слайд 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


Слайд 52

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


Слайд 53

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


Слайд 54

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


Слайд 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


Слайд 56

HTML DOM Render! Tree JavaScript CSS CSSOM Layout Paint


Слайд 57

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


Слайд 58

And we all hate this… right?


Слайд 59

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


Слайд 60

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


Слайд 61

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


Слайд 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/


Слайд 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/


Слайд 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”>


Слайд 65

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


Слайд 66

Be deliberate, design for performance https://www.flickr.com/photos/9760699@N08/3748770917


Слайд 67

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


Слайд 68

Remember the constraints of our medium https://www.flickr.com/photos/33649815@N03/3367739514


Слайд 69

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


Слайд 70

Thank You! @andydavies andy.davies@nccgroup.com http://slideshare.net/andydavies http://www.flickr.com/photos/nzbuu/4093456029


Слайд 71


×

HTML:





Ссылка: