Maximizing your ROI on the mobile web

Maximizing your ROI on The Mobile Web

+Ido [email protected]

Pretty sure everyone in the room knows this

Mobile Vs Desktop - Global Trends

Google Confidential and Proprietary

India in terms of mobile usage

A unique country in terms of mobile usage

What is missing?

A unique country in terms of mobile usage

How do you make the most of this opportunity?

Google Confidential and Proprietary

1. PerformanceGet content to the user as quickly.Expected Vs Actual.

2. User Experience Optimize for the mobile device

(!) Pssst… there are more, but we are only covering two.

Key Principles

Most sites fail at most of these!

Performance Principles

30 second page loadis normal in India

This is bad

1. Time to First Render

2. Time to Visually Complete

3. Time to Load Complete

3 Critical Performance Criteria

First render in under 1 second

Visually complete in under 3 seconds

Fully loaded in under 3 seconds

How can you help me?

- - Every Developer Ever

Tools every developer needs to use

1. Web Fundamentals

2. Web Starter Kit

3. PageSpeed Insights

4. Web Page Test

Can we do better?

PSI >= 80 GOODPSI >= 65 < 80 OKPSI < 65 POOR

SpeedIndex <= 1000 GOOD>= 1000 < 3000 OK>= 3000 POOR

Aim for < 1 second

Aim for < 3 second

Aim for < 5 seconds

1. The minimal amount of information to display something on the screen

2. Any CSS or JS in the head blocksrendering until it has been downloaded

What is Critical Render Path?

Rendering is blocked until all the CSS and JS is downloaded

What is Render Blocking CSS + JS

How do I fix this?

- Every Developer Ever

Each request to new domain requires:● DNS Lookup + TCP Connection● HTTP or HTTPS Connection new TCP Connection

Mobile 3g can add 300ms to each request.6 domains on CDN = up to 2.4 extra seconds to load the page

Don’t overuse domain sharding - CDNs

Mobile 3g can add 300ms to each request RTT

Reduce the number of request

Liberal use of Caching

If your image size is larger than the screen size you are slowing down your site for no user benefit.

Compress all your images

●CSS

● JS

●HTML

Minify and Compress everythingReduce the download time

Can save up to 50% of the bandwidth

Make sure all widgets use the ‘async’ keyword

Stop using widgetsIf you want a really fast site

● Requires a DNS lookup and TCP connect

­ At a minimum 300ms on 3g

● Cross platform sharing is problematic

● Content management is challenging

Don’t do www. -> m.Adopt responsive principles

User Experience Principles

India is in a good placefor mobileness

PageSpeed Insights

PSI >= 80 GOODPSI >= 65 < 80 OKPSI < 65 POOR

● Build for Mobile (Viewport tag)

● Fit content to screen - RWD

● Make buttons clickable

● Make fonts readable

● Don’t use Plugins (i.e Flash)

5 Key Criteria

25 principles

SiteSearch

Commerceand

Conversions

OptimizingFormEntry

Site-wideDesign

Considerations

Homepage and

Navigation

Resources

developers.google.com/web/fundamentals

developers.google.com/web/fundamentals/principles/

https://developers.google.com/web/starter-kit

HTML5Rocks

www.html5rocks.com/

PageSpeed Insights

developers.google.com/speed/pagespeed/insights/

www.webpagetest.org/

Thank you!

+Ido [email protected]