'

Making Mobile Sites Faster

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





Слайд 0

Making Mobile Sites Faster @andydavies NCC Group, Oct 2015 http://www.flickr.com/photos/b-tal/156919562


Слайд 1

Digital media usage time is exploding right now, and it’ predominantly being driven by mobile apps. The mobile web is under threat… Growth in Digital Media Time Spent Source: comScore Media Metrix Multi-Platform & Mobile Metrix, U.S., Total Audience Desktop Mobile App Mobile Browser 1,600,000 Total Minutes (MM) 1,400,000 118,299 1,200,000 1,000,000 vs. 2013 97,440 778,954 77,081 800,000 600,000 +53% +90% vs. 2013 621,410 409,847 400,000 200,000 476,553 480,967 550,522 Jun-2013 Jun-2014 Jun-2015 +16% vs. 2013 0


Слайд 2

And mobile audience growth is being driven more by m properties, which are actually bigger and growing faste Or is it? Average Monthly Audience: Top 1000 Mobile Apps vs. Top 1000 Mobile Web Properties Source: comScore Mobile Metrix, U.S., Age 18+ Apps Mobile Web +21% y/y 10,000 +42% y/y 9,000 Unique Visitors (000) 8,000 7,000 6,000 5,000 4,000 3,000 2,000 1,000 Jun-2014 Sep-2014 Dec-2014 Mar-2015 Jun-2015


Слайд 3

Social media and entertainment account for the six top categories and drive two-thirds of total time spent on a App usage is very specific Share of Mobile App Time Spent Source: comScore Media Metrix MP and Mobile Metrix, U.S., Total Audience, June 2015 Social Networking 23% Radio 29% Games Multimedia 3% 3% 4% Instant Messengers Music Retail 6% 15% 6% 11% News/Information All Others


Слайд 4

“At the beginning of 2013 mobile (excluding tablet) accounted for 26% of our traffic, and we ended the year with it contributing 33%.” Stuart McMillan, Schuh As of Feb 2015 - 45%


Слайд 5

“Historically, mobile baskets have always been lower value than desktop but just before Christmas the difference was only about 6%” Stuart McMillan, Schuh


Слайд 6

“85% of mobile users expect sites to load at least as fast or faster than sites on their desktop” Strangeloop Networks


Слайд 7

But we’re not quite meeting expectations % of visitors per device 2.0% Tablet Phone Desktop 1.5% 1.0% 0.5% 0.0% 0 2.0 4.0 6.0 8.0 10.0 12.0 14.0 Page Load Time 16.0 18.0 20.0 22.0 24.0


Слайд 8

“We’ve remade the Internet in our image… obese.” Jason Grigsby http://www.flickr.com/photos/mrtopher/1414159786


Слайд 9

Mobile Pages are Growing Requests Size (kB) 1,400 1,300 1,200 1,100 1,000 900 800 700 600 500 400 300 200 100 0 O ct '15 Ju n '14 Jan Ju n '13 Jan N ov '12 Size doubled in just three years! http://mobile.httparchive.org/


Слайд 10

We’re relying on ever faster phones and networks http://www.flickr.com/photos/willposh/3825768273/


Слайд 11

4G isn’t going to bail us out 77.3M mobile connections 2-3M 4G connections Estimated 20% of connections will be LTE by end of 2017 GSMA Intelligence + operators


Слайд 12

http://www.flickr.com/photos/endlisnis/174511509


Слайд 13

So many devices… so much variation… http://www.flickr.com/photos/adactio/12674230513


Слайд 14

Meet the $25 Smartphone http://www.flickr.com/photos/mozillaeu/12748349115


Слайд 15

Networks are Improving 2G 2.5G 3G 4G WiFi Faster, Lower Latency??? Special networks… Conference, Hotel, Coffee shop WiFi


Слайд 16

Latency is still the big issue “In 2012, the average worldwide RTT to Google is still ~100ms, and ~50-60ms within the US.” “we are looking at 100-1000ms RTT range on mobile” Ilya Grigorik http://www.igvita.com/2012/07/19/latency-the-new-web-performance-bottleneck/


Слайд 17

It’s not just about speed http://www.flickr.com/photos/fastjack/2943793818


Слайд 18

3G Radio Resource Control Idle for 12s IDLE 1-2s delay! 1s delay CELL_DCH CELL_FACH Idle for 5s Exact timings vary and depend on carrier NOT device http://web.eecs.umich.edu/~fengqian/paper/3g_imc10.pdf


Слайд 19

Fast mobile sites have shorter waterfalls


Слайд 20

What are mobile sites made of? HTML Fonts Images CSS Javascript Other O ct '15 Ju n '14 Jan Ju n '13 Jan N ov '12 1,300 1,200 1,100 1,000 900 800 700 600 500 400 300 200 100 0 http://mobile.httparchive.org/


Слайд 21

HTML size isn’t changing much Requests Size (kB) 70 60 50 40 30 20 10 O ct '15 Ju n '14 Jan Ju n '13 Jan N ov '12 0 http://mobile.httparchive.org/


Слайд 22

Images are the Bulk of Download Requests Size (kB) 800 700 600 500 400 300 200 100 O ct '15 Ju n '14 Jan Ju n '13 Jan N ov '12 0 http://mobile.httparchive.org/


Слайд 23

Time to bury bitmapped images? http://www.flickr.com/photos/tonyjcase/7183556158


Слайд 24

Use vector graphics instead? SVG: 12 KB vs PNG: 86KB


Слайд 25

Or CSS? border-radius: 20px; background: linear-gradient(left, #f06, #ff0); Some combinations produce poor paint performance


Слайд 26

What if only a bitmap image will do? http://www.flickr.com/photos/orkomedix/5026054826


Слайд 27

Size images for the viewport http://www.flickr.com/photos/emzee/139794246


Слайд 28

Size images for the viewport <img src="cat.jpg" alt="cat" srcset="cat-160.jpg 160w, cat-320.jpg 320w, cat-640.jpg 640w, cat-1280.jpg 1280w" sizes=“(max-width: 480px) 100vw, (max-width: 900px) 33vw, 254px">


Слайд 29

Size images for the viewport <img src="cat.jpg" alt="cat" srcset="cat-160.jpg 160w, cat-320.jpg 320w, cat-640.jpg 640w, cat-1280.jpg 1280w" sizes=“(max-width: 480px) 100vw, (max-width: 900px) 33vw, 254px"> srcset specifies the images and their width


Слайд 30

Size images for the viewport <img src="cat.jpg" alt="cat" srcset="cat-160.jpg 160w, cat-320.jpg 320w, cat-640.jpg 640w, cat-1280.jpg 1280w" sizes=“(max-width: 480px) 100vw, (max-width: 900px) 33vw, 254px"> sizes specifies how they should be displayed at each window width


Слайд 31

Size images for the viewport <img src="cat.jpg" alt="cat" srcset="cat-160.jpg 160w, cat-320.jpg 320w, cat-640.jpg 640w, cat-1280.jpg 1280w" sizes=“(max-width: 480px) 100vw, (max-width: 900px) 33vw, 254px"> fall back for browsers that don’t support srcset


Слайд 32

As images get smaller need to focus on subject Runner gets lost as image shrinks


Слайд 33

As images get smaller need to focus on subject


Слайд 34

Switch images for different viewports <picture> <source srcset="runner-wide.jpg" media="(min-width: 1200px)"> <source srcset="runner-narrow_copy.jpg" media="(min-width: 800px)"> <img src="male-runner-square.jpg" srcset="runner-square.jpg" alt="Photograph of man running along pier during sunset"> </picture>


Слайд 35

Switch images for different viewports Source element specifies uses media query to indicate which image to use <picture> <source srcset="runner-wide.jpg" media="(min-width: 1200px)"> <source srcset="runner-narrow_copy.jpg" media="(min-width: 800px)"> <img src="male-runner-square.jpg" srcset="runner-square.jpg" alt="Photograph of man running along pier during sunset"> </picture>


Слайд 36

Switch images for different viewports Can specify multiple sources with different media queries <picture> <source srcset="runner-wide.jpg" media="(min-width: 1200px)"> <source srcset="runner-narrow_copy.jpg" media="(min-width: 800px)"> <img src="male-runner-square.jpg" srcset="runner-square.jpg" alt="Photograph of man running along pier during sunset"> </picture>


Слайд 37

Switch images for different viewports <picture> <source srcset="runner-wide.jpg" media="(min-width: 1200px)"> <source srcset="runner-narrow_copy.jpg" media="(min-width: 800px)"> <img src="male-runner-square.jpg" srcset="runner-square.jpg" alt="Photograph of man running along pier during sunset"> </picture> img fallback for browsers that don’t support picture or when no query matches


Слайд 38

???


Слайд 39

What’s needed to render the page? http://www.flickr.com/photos/wiertz/6922984303


Слайд 40

Prioritise the Content Guardian divide page into: - Content - Enhancements - Leftovers


Слайд 41

How it looks in practice


Слайд 42

Fonts, Stylesheets, JavaScript all block the page http://www.flickr.com/photos/timo/3995227


Слайд 43

CSS size is creeping up Requests Size (kB) 60 50 40 30 20 10 O ct '15 Ju n '14 Jan Ju n '13 Jan N ov '12 0 http://mobile.httparchive.org/


Слайд 44

Doubled Javascript in 3 Years! Requests Size (kB) 350 300 250 200 150 How much of it do we actually need? 100 50 O ct '15 Ju n '14 Jan Ju n '13 Jan N ov '12 0 http://mobile.httparchive.org/


Слайд 45

Added 160kB to page Increased bounce rate by 12% on mobile https://speakerdeck.com/lara/design-for-performance


Слайд 46

We’ve fallen in love with web fonts http://www.flickr.com/photos/splorp/4951916342


Слайд 47

and their use has exploded! Requests Size (kB) 70 60 50 40 30 20 10 O ct '15 Ju n '14 Jan Ju n '13 Jan N ov '12 0 http://mobile.httparchive.org/


Слайд 48

But at what cost to visitors experience?


Слайд 49

Fonts are discovered late in rendering process HTML DOM Render Tree JavaScript CSS Fonts discovered when render tree builds CSSOM Layout Paint


Слайд 50

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


Слайд 51

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


Слайд 52

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


Слайд 53

Control whether a font blocks rendering font-display: auto | block | swap | fallback | optional; (coming soon) https://tabatkins.github.io/specs/css-font-display/


Слайд 54

Replace icon fonts with SVG Heydings by Heydon Works


Слайд 55

Death to Icon Fonts @ninjanails Epic FEL, Sept 2015 https://www.flickr.com/photos/minifig/3186925111/


Слайд 56

W3C Resource Hints should help too <link rel="dns-prefetch" href=“//example.com”> <link rel="preconnect" href=“//example.com”> <link rel="preload" href=“//example.com/font.woff” as=“font”>


Слайд 57

What can we put off until later? http://www.flickr.com/photos/melodramababs/5962771148


Слайд 58

https://speakerdeck.com/mikeyk/secrets-to-lightning-fast-mobile-design


Слайд 59

Network request still in progress User gets feedback


Слайд 60

Magic, the Art of Misdirection http://www.flickr.com/photos/nozzer/3990622685


Слайд 61

http://mercury.io/blog/the-psychology-of-waiting-loading-animations-and-facebook


Слайд 62

Embrace Constraints… Set a budget http://www.flickr.com/photos/communityfriend/2342578485


Слайд 63

Embrace Constraints… Set a budget “Usable within 10 seconds on GPRS connection” - BBC News “SpeedIndex under 1000” - Paul Irish, Google Requests, page size etc. are easier to measure but may not represent real world experience http://www.flickr.com/photos/communityfriend/2342578485


Слайд 64

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


Слайд 65

Measure frequently - during build… http://www.flickr.com/photos/chandramarsono/4324373384


Слайд 66

and in live - visitor’s experience varies % of visitors per device 2.0% Tablet Phone Desktop 1.5% 1.0% 0.5% 0.0% 0 2.0 4.0 6.0 8.0 10.0 12.0 14.0 Page Load Time 16.0 18.0 20.0 22.0 24.0


Слайд 67

New opportunities are arriving too https://www.flickr.com/photos/inucara/14981917985


Слайд 68

They mix reach of the web, with ease of apps Service Worker (programmable proxy in the browser) Installable Web Apps (add launch icon to home screen plus control behaviour) Push Notifications (native notifications via web APIs)


Слайд 69

For a faster mobile site: Move less bytes Prioritise what you move Move them while no-one is looking Deploy Service Workers etc. Distract the visitor!


Слайд 70

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


Слайд 71


×

HTML:





Ссылка: