Making Mobile Sites Faster

54 %
46 %
Information about Making Mobile Sites Faster

Published on May 10, 2013

Author: AndyDavies



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

Making Mobile Sites Faster@andydavies#Port80, May 2013

Imagine… later today…

How long would you wait here?

Some of this advice will expire 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.”“we are looking at 100-1000ms RTT rangeon mobile”Ilya Grigorik

3G Radio Resource Control CELL_FACHCELL_DCH Idle for 5sIdle for 12s1-2s delay!Exact timings vary and depend on carrier NOT device1s delay’s not just about speed

Some things block’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?

And what about those scripts?

Remember GZIP and Caching

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 site

Time to bury bitmapped images?

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?

Size images for the viewport

Proposed srcset attribute<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 Grigsby

<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 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 versions CMS- Scripts- CDNs- Dedicated services

We’re adapting on the client-side

But we shouldn’t forget about the server

devicewidthClient Hints HTTP Header (proposed) dh=598, dw=384, dpr=2.0deviceheightdevicepixelratio

! "ipinfo": {! ! "ip_address":"",! !"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…

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

So… what wrecks smoothness?

“Rendering Without Lumpy Bits”

Don’t just rely on rules… learn how to measure

Thank You!@andydaviesandy@asteno.com

Add a comment

Related presentations

Presentación que realice en el Evento Nacional de Gobierno Abierto, realizado los ...

In this presentation we will describe our experience developing with a highly dyna...

Presentation to the LITA Forum 7th November 2014 Albuquerque, NM

Un recorrido por los cambios que nos generará el wearabletech en el futuro

Um paralelo entre as novidades & mercado em Wearable Computing e Tecnologias Assis...

Microsoft finally joins the smartwatch and fitness tracker game by introducing the...

Related pages

Making Mobile Sites Faster - NCC Group

Making Mobile Sites Faster @andydavies NCC Group, Mar 2014 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