Mobile Web Performance - Getting and Staying Fast

100 %
0 %
Information about Mobile Web Performance - Getting and Staying Fast
Technology

Published on March 7, 2014

Author: AndyDavies

Source: slideshare.net

Description

Slides from mine and Aaaron Peter's talk at QCon London (Mar 2014) on how to measure mobile web performance, things that affect in and how to improve it

Mobile Web Performance Getting and Staying Fast! @aaronpeters, Turbobytes @andydavies, NCC Group

Mobile – Everybody is Using It “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!

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

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

Mobile Pages are Growing! http://mobile.httparchive.org/!

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

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

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!

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

So many devices… lots of variation! ! http://www.flickr.com/photos/adactio/12674230513

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

Differing Network Environments! GPRS! EDGE! 3G! 4G! WiFi! Faster, Lower Latency???! Special networks…! Conference, Hotel, Coffee shop WiFi!

Latency is a huge 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/!

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

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!

Measuring mobile web performance! http://www.flickr.com/photos/14516334@N00/286709039/

Navigation Timing API 9+ window.performance.timing;   http://goo.gl/x483FY !

Resource Timing API not on iPad 10+ DNS and Connect times are broken http://goo.gl/afV9OD ! window.performance.getEntries();  

First Paint time window.chrome.loadTimes().firstPaintTime;     9+ window.performance.msFirstPaint;   Works on IE Mobile? Don’t know …   firstPaintTime = ‘first time MozAfterPaint event fires’ window.performance.timing.navigationStart  

WebPagetest

WebPagetest I built and operate WPT.! I am awesome.! •  Best tool to analyze web performance! •  Real browser, many locations around the globe! •  IE6-11, Firefox, Chrome, Android, iPhone, iPad…! •  Specify connection speeds, packet loss! •  Extensive API (eg. multi-page testing)! •  Run your own private instance!!

Appurify’s WebPagetest! Many devices! Many carrier profiles! All located in San Francisco! http://appurify.webpagetest.org ! ! https://androidwpt.appurify.com ! !

Chrome DevTools For Mobile http://goo.gl/jfKyAN" " " "http://goo.gl/WS5N8E!

Finding the problems! http://www.flickr.com/photos/chasblackman/6795013658/

nbcnews.com Dulles, VA, Motorola G – Chrome, Shaped 3G (1.6 Mbps/768 Kbps, 300ms RTT)!

nbcnews.com 18.7 sec Start Render Time! 344 ! Requests! 1523 KB Total Transfer Size! 115 different domains !"

htc.com

htc.com 9.4 sec 7 .js files = 200 KB = too much Start Render Time! >1 MB files ! 77 Requests! 3,256 KB ! Total Transfer Size!

Solving the problems: make it faster! http://www.flickr.com/photos/velacreations/5249327029/

> Minimize transfer size Send less bytes… A LOT LESS!

Send text based files compressed Savings: 10% – 80% !!! !

Minimize image dimensions

Crunch images Served by apple.com Optimized with ImageOptim 380 KB 179 KB

Don’t send what is not needed apple.com on Nexus 7! ! 370 KB above fold hero image Same image in higher res, now 442 KB. So why send that first one??

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

Icon fonts! ★ ★! ☆ ☆! ♥ ♥! ☁ ☁! Heydings by Heydon Works! “Bog Standard Font”!

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

Webfonts? Maybe better not 4.5 seconds … blocking!!

> Minimize number of requests

> Increase initcwnd initial congestion window is a server parameter! initcwnd  =  10  means server sends initially 10 packets (~14KB) over a TCP connection! Default value is 10 in Linux 2.6.39+! ! Most CDNs use 10, but some as high as 26!

> Increase initcwnd A higher initcwnd really helps, especially with small object delivery! http://goo.gl/ee0xBs !

> Cache aggressively

Fonts, Stylesheets, JavaScript block rendering! ! http://www.flickr.com/photos/timo/3995227

???!

CSS! http://mobile.httparchive.org/!

Javascript! http://mobile.httparchive.org/!

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

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

But at what cost?!

Use of Web Fonts is Growing! http://mobile.httparchive.org/!

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

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

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

Provide hints before a resource is discovered! <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">

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

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

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

Network request! still in progress! User gets ! feedback!

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

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

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

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

For a faster mobile site:! "  "  "  "  "  Measure Move less bytes Prioritise what you move Move them while no-one is looking Distract the visitor!!

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

Add a comment

Related presentations

Related pages

Mobile Web Performance - Getting & Staying Fast! - infoq.com

Bio. Aaron Peters has worked with the Web since 1997 in the areas of Product, Business Development, UI and Tech. In the past 3 years, Aaron worked as an ...
Read more

Presentation: Mobile Web Performance - Getting & Staying ...

Presentation: Mobile Web Performance - Getting & Staying Fast! ... 原文 http://www.infoq.com/presentations/mobile-web-performance. 主题 移动 ...
Read more

Presentations -> Mobile Web Performance - Getting ...

Websites that are fast and smooth are critical for a good user experience and increasingly we expect sites to perform as well on our mobile phone as they ...
Read more

How To Make Your Websites Faster On Mobile Devices ...

... techniques you can use to make your websites faster on mobile ... Performance On Mobile ... staying fast requires a bit more web performance ...
Read more

Mobile Network Performance in the US: A Special ...

Mobile performance has changed ... T-Mobile also improved its ability to stay connected during web/app testing, staying ... we noted that T-Mobile is fast ...
Read more

Executive Team | Akamai

Executive Team The vision and ... world optimize website performance and software delivery with solutions for web acceleration, mobile ... Back Web Performance
Read more

Understanding Mobile Web Performance - Technology

Understanding Mobile Web Performance; Understanding Mobile Web Performance Jan 23, 2015 Technology vrajivk ...
Read more

qconlondon.com

qconlondon.com
Read more