Making Mobile Sites Faster

57 %
43 %
Information about Making Mobile Sites Faster
Technology

Published on May 10, 2013

Author: AndyDavies

Source: slideshare.net

Description

Slides from my talk on mobile performance at Port 80, Newport

Making Mobile Sites Faster@andydavies#Port80, May 2013http://www.flickr.com/photos/b-tal/156919562

Imagine… later today…http://www.flickr.com/photos/andrew_bolin/3909446250

How long would you wait here?http://www.flickr.com/photos/oatsy40/6198212129

Some of this advice will expirehttp://www.flickr.com/photos/21560098@N06/7127570205

http://www.flickr.com/photos/szene/8220511232So many devices… lots of variation

Differing Network EnvironmentsGPRS EDGE 3G 4G WiFiFaster, Lower Latency???Special networks…Conference, Hotel & Coffee shop WiFi

Latency is a huge issue“In 2012, the average worldwide RTT toGoogle is still ~100ms, and ~50-60ms withinthe US.”http://www.igvita.com/2012/07/19/latency-the-new-web-performance-bottleneck/“we are looking at 100-1000ms RTT rangeon mobile”Ilya Grigorik

3G Radio Resource Controlhttp://web.eecs.umich.edu/~fengqian/paper/3g_imc10.pdfIDLE CELL_FACHCELL_DCH Idle for 5sIdle for 12s1-2s delay!Exact timings vary and depend on carrier NOT device1s delay

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

Some things blockhttp://www.flickr.com/photos/timo/3995227

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

Fast mobile sites have short waterfalls

Do you deploy your CSS like this?<link href="screen.core.css" /><link media="(min-width: 320px)" href="s320.css" /><link media="(min-width: 480px)" href="s480.css" /><link media="(min-width: 750px)" href="s750.css" /><link media="(min-width: 960px)" href="s960.css" />

Do you really need that font?http://www.flickr.com/photos/symphoney/76513801

And what about those scripts?http://www.flickr.com/photos/alikins/4439062727

Remember GZIP and Cachinghttp://www.flickr.com/photos/_flood_/6732863457

Re-Use TCP Connections - HTTP Keep-Alive(HTML5 Boilerplate has example settings for Apache)Orange segments arenew TCP connectionsbeing opened

Beware of Redirects367ms and still no HTML!Set a cache lifetime and make them private

#OneLessJPGMisquoted a lot recently, original quoterefers to relative sizes of JS libraries

ImagesScriptsStylesheetsOtherHTMLImages are 70% of an ‘average’ mobile sitehttp://mobile.httparchive.org

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

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

Heydings by Heydon WorksIcon fonts&#x2605; ★&#x2665; ♥&#x2601; ☁“Bog Standard Font”&#x2606; ☆

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

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

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

Proposed srcset attributehttp://www.w3.org/html/wg/drafts/srcset/w3c-srcset/<img src="beach-desktop.jpeg"srcset="beach-mobile.jpeg 720wbeach-tablet.jpeg 1280w"alt="The beach is gorgeous.">image-set() is CSS equivalent

Compressive Images (experimental)Double the dimensions but lower the quality

As images get smaller need to focus on subject“Art Direction” - Jason Grigsbyhttp://www.flickr.com/photos/barackobamadotcom/5795228030

<picture><source media="(min-width: 45em)" src="large.jpg"><source media="(min-width: 18em)" src="med.jpg"><source src="small.jpg"><img src="small.jpg" alt=""><p>Accessible text</p></picture>Proposed picture elementhttp://www.w3.org/TR/html-picture-element

Cache-Control: no-transformStop proxies recompressing your imagesUnclear how many proxies follow the standard

Do you really want to do it by hand?Can adapt format for visitor e.g.WebPAutomate generate image versionshttp://www.flickr.com/photos/skrubu/4962771959- CMS- Scripts- CDNs- Dedicated services

We’re adapting on the client-sidehttp://seesparkbox.com

But we shouldn’t forget about the serverhttp://www.flickr.com/photos/getbutterfly/6317955134

devicewidthClient Hints HTTP Header (proposed)http://tools.ietf.org/html/draft-grigorik-http-client-hints-00CH: dh=598, dw=384, dpr=2.0deviceheightdevicepixelratio

! "ipinfo": {! ! "ip_address":"212.183.128.252",! !"ip_type":"Mapped",! !"Network": {! !! "organization":"vodafone limited",! ! !"carrier":"vodafone limited",! ! !"asn":25135,! ! !"connection_type":"mobile wireless",! ! !"line_speed":"low",! ! !"ip_routing_type":"mobile gateway",! ! !"Domain": {! ! !! "tld":"net",! ! !! "sld":"vodafone"! ! !! }! ! !},Quova GeoPoint APIWhat if we could detect mobile connections?

cache-control: private&vary: user-agentManaging Caching

But loading fast is only the start…http://www.flickr.com/photos/foodthinkers/4442279870

Facebook artificially slowed downscrolling from 60fps to 30fpsUser Engagement Collapsed

So… what wrecks smoothness?http://www.flickr.com/photos/18854914@N04/2216950328

“Rendering Without Lumpy Bits”http://www.flickr.com/photos/marcthiele/8114191496

Don’t just rely on rules… learn how to measurehttp://www.flickr.com/photos/chandramarsono/4324373384

http://www.flickr.com/photos/alesimages/4215559895

Thank You!@andydaviesandy@asteno.comhttp://slideshare.net/andydavieshttp://www.flickr.com/photos/nzbuu/4093456029

Add a comment

Related presentations

Related pages

Making Mobile Sites Faster - NCC Group

Making Mobile Sites Faster @andydavies NCC Group, Mar 2014 http://www.flickr.com/photos/b-tal/156919562. Imagine… later today ...
Read more

Make the Web Faster — Google Developers

Make the Web Faster; list All Products. ... Get your PageSpeed score and use PageSpeed suggestions to make your web site faster through our online tool.
Read more

How To Make Your WordPress Site Load Faster - iBlogzone

There are several ways to make your WordPress site load faster. ... Does Your Site Have Mobile ... about making site load faster lately and the way ...
Read more

10 Ways to Make Your Website Load Faster | Hostway Blog

10 Ways to Make Your Website Load Faster. by: ... website and it takes around 10 sec to open on mobile ... images and it makes my site load 25% faster.
Read more

5 Tips For Faster Loading Web Sites - Rubyrobot

5 Tips for web site speed optimization of your Apache web server. Optimize page load time for faster loading web sites.
Read more

Mobile Sites vs. Apps: The Coming Strategy Shift

Mobile apps currently have better usability than mobile sites, but forthcoming changes will eventually make a mobile site the superior strategy.
Read more

Duda Website Builder - Build Smarter Websites

Create your Mobile Website with DudaMobile, Make a Responsive Website with DudaOne or Find out more about DudaPro our professional partner program.
Read more

3.4 Make your site mobile-friendly - Search Console Help

Take the course 3.4 Make your site mobile-friendly. Next: 3.5 Join the webmaster community. As you’re creating your website on a desktop computer, keep ...
Read more