mobile  web  performance

@rolandguelle  |  Sevenval  GmbH

about:sevenval

•Web Expert since 1999Adaptive One Web Infrastructure Technology

Future Friendly web design expertiseHighly experienced: over 800 accomplished projects

•Offices in Cologne, Berlin, London and Vienna

•Our Clients: Fortune 500 and DAX companies

•Our Partner: PayPal, Interone, GSI Commerce, CoreMedia, Wincor Nixdorf, T-Systems, etc.

Why?

Who likes slow loading web sites better

than fast ones?

Why?

Why?Who likes slow loading web sites better

than fast ones?

...you should leave now ;)

The problem withThe Web on Mobile.

Sevenval Device Lab / Android & iOS with Adobe Edge Inspect

The Web on Mobile.

•Mobile is mainstream

•Mobile will overtake is overtaking desktop

•But mobile is different!

Mobile is Di!erent

•Powerful browsers

•CPU & GPU

•Memory

•Battery

•Connections

•Parallel downloads

•Cellular vs. wifi

•High latency

The Developers‘ View

http://www.flickr.com/photos/nathij/3126806723

• Browser & OS & Version fragmentation• -webkit- fragmentation

• HTML5 fragmentation• Thousands of devices• Transcoding browsers (Opera Mini, Amazon

Silk, Nokia Express, ...)• Carrier transcoding• Upcoming Platforms (Firefox OS, Ubuntu,

Tizen, BB10...)• Legacy Platforms (Symbian, Bada,

BlackBerry, ...)• ...make it work!

What is Performance?

http://www.flickr.com/photos/laserstars/908946494

•Latency for a single user

•Capacity of the whole system

•We are talking about latency here

Why Performance matters?

http://www.flickr.com/photos/adamcrowe/2236109611

We ♥ Fast Websites!

What Users Want From Mobile?

...62% agreed that speed was the most important feature for them while browsing the mobile web, followed by ease of use (42%), more functionality (30%) and saving money and data (29%).

http://business.opera.com/press/releases/mobile/brazil-feels-the-need-for-speed

http://www.webperformancetoday.com/2011/11/23/case-study-slow-page-load-mobile-business-metrics/

Users Hate Slow Websites

May 29, 2008

„When the company (Google) trimmed the 120KB page size down by about 30 percent, the company started getting about 30 percent more map requests.“

http://news.cnet.com/8301-10784_3-9954972-7.html

•Shopzilla speed up average page load time from 6 seconds to 1.2 seconds.

•Result: 12% increase in revenue.

http://velocityconf.com/velocity2009/public/schedule/detail/7709

Your Boss ♥ Fast Websites

Real World Check

http://www.flickr.com/photos/mumpfpuffel/2349081281

„The extent of consumer annoyance is hardly surprising when we consider the average Briton estimates that they waste 9 minutes every day,

or 2 days a year, waiting for slow websites to load.“

http://press.1and1.co.uk/xml/article?article_id=1123http://www.flickr.com/photos/donkeyhotey/5679642883/

We waste9 minutes a day, 2 days a year, 0.56% our lives

for waiting on slow websites?!

How fast is your site?

•5 seconds

•less than 5 seconds?

•more than 5 seconds?

Germany Retail – Mobile – O2/iPhoneJuly 01, 2012 - August 01, 2012 / 0:00 - midnight

18.9 sec?!

Average

http://www.gomez.com/germany-retail-mobile

27.7 sec????

Average

http://www.compuware.com/en_us/application-performance-management/resources/benchmarks/germanyretail-mobile-o2-iphoneDERETIRMBHPiPhone010.html

Germany Retail – Mobile – O2/iPhoneMay 01, 2013 - June 01, 2012 / 0:00 - midnight

Sites are growing

http://mobile.httparchive.org/trends.php#numurlshttp://httparchive.org/trends.php#numurls

1466kB Mobile: 764kB

https://twitter.com/scottjehl/status/332871134934626306

http://de.slideshare.net/bryanrieger/the-end-of-unlimited-bandwidth

39kB HTML

150kB JavaScript

526kB Images

27kB CSShttp://mobile.httparchive.org/trends.php?s=All&minlabel=Jan+1+2013&maxlabel=Jun+15+2013#bytesHtml&reqHtml

JavaScript FrameworksApple WWDC 2012 http://vaporjs.com

Don‘t use jQuery for everything...

RWD will save us!

„...I used http://mediaqueri.es/ as a repository (471 websites) ... resized to one of 4 different

screen resolutions each time ... less than 7% of websites were at least 2x smaller when loaded on the smallest screen compared to the biggest screen. Another 22% weighed between 50-90% of the large-screen page size when loaded on the smallest one, and the majority (72%) were roughly the same size on the smallest and biggest screens.

http://www.guypo.com/uncategorized/real-world-rwd-performance-take-2/

D‘OH!

You can’t fix what you can’t measure.

http://www.flickr.com/photos/tiffanyday/2929861461

Client Measuring

•Client

•Real Device

•Simulator

•User-Agent String

•Test Instanz

•Connection

•Carrier Network

•Rewriting Proxies

•WiFi

•Bandwith

Tools

•www.webpagetest.org

•Google PageSpeed Insights

•https://developers.google.com/speed/pagespeed/insights

•Yahoo! YSlow

•.. and thousands more out in the web – find ‘em, use ‘em!

http://slideshare.net/klick_ass/mobile-web-testing-debugging-best-practices

WebPageTest.org

•all waterfall charts are made with WPT

•we use an private instance

•Test types: 1st view vs repeat view

•Script user navigation with flow views

Understanding Waterfall Charts

•Server vs Client time

•Time to first byte

•# Connections

•# HTTP-Requests

•Dependencies (Critical Path)

•# Domains/Origins

•Document Complete

Server vs. Client

Where to optimize?

Server vs. Client

Server17%

Client83%•Server 10-30%

•Client 70-90%

Bottlenecks

http://www.flickr.com/photos/kino/438237794/

<outbreakname=“Making a Mobile

Connection“>

http://www.stevesouders.com/blog/2011/09/21/making-a-mobile-connection/http://www.research.att.com/articles/featured_stories/2011_03/201102_Energy_efficient

Radio Connections

2 sec delay 1.5 sec delay

Mobile Networks

Delay

Limited connections

OperatorNetwork

Limited bandwith

OperatorTranscoding?

Internet

http://www.stevesouders.com/blog/2011/09/21/making-a-mobile-connection/http://www.research.att.com/articles/featured_stories/2011_03/201102_Energy_efficient

Network Latency

http://www.cisco.com/en/US/solutions/collateral/ns341/ns525/ns537/ns705/ns1175/Cloud_Index_White_Paper.htmlhttp://www.yuiblog.com/blog/2010/04/08/analyzing-bandwidth-and-latency/

DSL without Fastpath:40-50ms

~ 350ms

</outbreak>

•Consider load & render dependencies

•CSS loading/parsing blocks image loading

•inline JS/CSS blocks new external requests

•Image/ressource loading blocks document complete

Critical Path

Time to First Byte

•DNS Lookup + TCP Connection + SSL Handshake + HTTP Request + Server Processing + transfer of first TCP packet

•Always critical path

Connections•DNS lookup for every domain (and

CNAMEs)

•TCP handshake takes time

DNS

TCP handshake

HTTP Requests•The biggest problem!

•More requests, more connections

•Total of 2-6 connections per domain

•Each Request: Upload on slow connections

•Size does matter: More content, longer downloads

•Mobile specific: Download on sloooow connections

CSS loading/parsing blocks image loading

Critical Path

CSS Rendering

Critical Path

Image/ressource loading blocks document complete

font blocksdocument complete

Document Complete

•document complete blocks onload-events

•onload-events (may) block user interaction

•usually trigger for unobtrusive JavaScript

Bottlenecks

•The mobile Web is slooooow

•Connections has delays, are slow and limited

•Sites are too big

•Too many requests / connections needed

•Critical Path consider load & render dependencies

•css blocks images

•image blocks document complete

•blocking JS

•rendering / painting

•DOM manipulation = rerendering

Fix it!

http://www.flickr.com/photos/thomashawk/4927579251

Software

Our Approach

http://www.netmagazine.com/tutorials/getting-started-ress

http://slideshare.net/4nd3rsen/ress-responsive-design-server-side-components-10084972

Measures

•Enable

•keep-alive

•compression (gzip) / excluding images

Must-Have

E!ectw/o gzip w/ gzip 36%

w/o keep-alive

•Image resizing

•Image quality

•Depend on network quality

•Server Side Content Filter (Server Side Media Queries)

•HTML, JavaScript & CSS

Reduce Transfer Size

Browser Dependencies

•<script async HTML5 attribute/>

•Non blocking JS loader (RequireJS, LabJS, head.js, )

•Order of inline & extern scripts

http://www.netmagazine.com/features/essential-javascript-top-five-script-loaders

Reduce Content

•JS minifying for inline & external code

•CSS minifying for inline & external code

•switch bitmap image formats (GIF -> JPG)

•JPEGs performs better than GIFs and PNGs

Reduce HTTP Requests

• Inline images

• Inline scripts

• Inline styles

• „JS pipe“

Inline Images Disabled

25 of 38 requests

Inline Images Enabled

3 of 16 requests

•must be <2k

•must appear only once

•works in src‘ed CSS, too! (Think sprites)

•for all other images:

•developer enables inlining

Autoinline Images

Delayed Images

•unblocks document onload

•events trigger MUCH earlier

•with fold-logic

•„important“ images first

•invisible slider images last

•header first, footer last..

Low Quality Previews

•Large images get l/q previews

•preview may be inlined

•Big image is loaded after onload

•Looks like progressive images

•Gives a complete look right from the start

•external scripts can be cached and combined (good)

•least size of script for each page (good)

•many HTTP requests on first view (BAD)

External Scripts

External Scripts

12 requests

JS „Pipe“ & Application Cache

•All scripts are delivered in a single request per page

•Minimize HTTP roundtrips

•Core Scripts are stored in Application Cache

•Not affected by „reload“

•Scripts still public cacheable (CDN)

only 1 request

JS „Pipe“ & Application Cache

Caching

•Assets are requsted on every page request

•Make sure they are cacheable!

First View

Caching

•cache assets forever (+ cache buster)

•/path/;lm=1332923272/layout.css

•no sub-requests on repeat/flow views

Repeat View

<outbreakname=“HTTP Caching“>

Caching?

http://mobile.httparchive.org/trends.php#maxageNullhttp://www.stevesouders.com/blog/2012/03/22/cache-them-if-you-can/

Caching?

http://mobile.httparchive.org/trends.php#maxageNullhttp://www.stevesouders.com/blog/2012/03/22/cache-them-if-you-can/

•55% of resources don’t specify a max-age value

•46% of the resources without any max-age remained unchanged over a 2 week period

D‘OH!

</outbreak>

SPDY

•SPDY for SSL enabled by default

•SPDY = „HTTP Super Pipelining“

•We don‘t advertise SPDY for HTTP (its slower)

•Reduces TCP connections, roundtrips, slow starts

http://research.microsoft.com/pubs/170059/A%20comparison%20of%20SPDY%20and%20HTTP%20performance.pdf

Even More?

•Fast clicks on touch devices

•Avoid 302 redirects

•document.write

Results

http://www.flickr.com/photos/rosasay/4675053765

RWD* without FEO

Document Complete: 11.838sBytes In: 1,634 KBRequests: 122Fully Loaded: 12.357sBytes In: 1,634 KBRequests: 126

*added to an existing desktop site

Scaled Images & Filtered Content

Document Complete: 2.732sBytes In: 285 KBRequests: 51Fully Loaded: 4.193sBytes In: 288 KBRequests: 53

Document Complete: 1.088sBytes In: 69 KBRequests: 7Fully Loaded: 3.552sBytes In: 269 KBRequests: 14

ADVERTISING:This is the standard result bySevenval FIT Version 12.0.2.

Scaled Images, Filtered Content & FEO

Overview

Document Complete 11.838s 2.732s 1.088s

Bytes In 1,634KB 285KB 69KB

Requests 122 51 7

Fully Loaded 12.357s 4.193s 3.552s

Bytes In 1,634KB 288KB 269KB

Requests 126 53 14

loadEvent 11.806s 2.696s 0.862s

RWD RESS RESS + FEOpoor

http://www.flickr.com/photos/insouciance/3061759623/

YES, THIS IS COOL!

Performance Killer

•unscaled images

•large inline scripts/styles

•large CSS background images

•Session = Cache-control: private

•3rd Party JavaScript (twitter, fb, Ads, tracking, ...)

•SLOW SERVERS!

Takeaways

http://www.flickr.com/photos/specialkrb/3375397148

Mindset

•Performance is like diets:

•Avoid Yo-yo effects!

•Live performance every day!

•Performance is mindset – not a feature

•Consider performance from day 0

•Performance is hard to apply „at the end“

Performance Triangle

Security

Performance

Eye-Candy

2012 Sevenval, Credits to @ffilex

Performance Triangle

Security

Performance

Eye-Candy

2012 Sevenval, Credits to @ffilex

Performance Triangle

Security

Performance

Eye-Candy

= $ = $$$2012 Sevenval, Credits to @ffilex

Thank You!

@rolandguelle