Mobile web performance

Mobile Web Performancemobile.cologne / 11th October 2012@rolandguelle | Sevenval GmbH

about:sevenval•Web Expert since 1999 Technology to aggregate and output mobile and multi- channel web optimized content Mobile & future friendly web design expertise Highly 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.

The problem with The Web on Mobile.Sevenval Device Lab / Android & iOS with Adobe Shadow

The Web on Mobile.•Mobile is mainstream•Mobile will overtake is overtaking desktop•But mobile is different!

Mobile is Di!erent•Powerful browsers •Connections •Slow CPUs •Parallel downloads •Memory •Slower networks •Battery •High latency

The Developers‘ View • Browser & OS fragmentation • -webkit- fragmentation • HTML5 fragmentation • Thousands of devices • Existing (!) non HTML5 & XHTML MP browsers • Transcoding browsers (Opera Mini, Amazon Silk, ...) • Carrier transcoding • Issues • position:fixed / overflow:scrollable (still buggy) • touch events (Windows Phone, Android 2.2) • fileupload (solved with iOS 6 but not for iPhone 3g) • Hybrid Apps • „Native“ vs. web • Performancehttp://www.ﬂickr.com/photos/nathij/3126806723

Phones arent Laptops

What is Performance? •Latency for a single user •Capacity of the whole system •We are talking about latency herehttp://www.ﬂickr.com/photos/laserstars/908946494

Why Performance matters?http://www.ﬂickr.com/photos/adamcrowe/2236109611

We ♥ Fast Websites!

What Users Want From Mobile? „A 2011 survey of 4,014 global mobile web users found that consumers have high expectations for mobile website and application performance. Ultimately, 71% stated they expect websites to load as quickly, almost as quickly or faster on their mobile phone compared to the computer they use at home.“http://www.gomez.com/resources/whitepapers/survey-report-what-users-want-from-mobile/

Users Hate Slow Websiteshttp://www.webperformancetoday.com/2011/11/23/case-study-slow-page-load-mobile-business-metrics/

Your Boss ♥ Fast Websites •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

Real World Checkhttp://www.ﬂickr.com/photos/mumpfpuffel/2349081281

What happens in 48 hours? •2576 new apps to download •4 million blog posts are written •9,4 billion minutes are spent on Facebook •588 billion e mails are sent •756,000 iPhones are sold •742,000 babies are bornhttp://www.mirror.co.uk/news/uk-news/fascinating-facts-about-what-happens-in-a-day-782874http://www.digitalbuzzblog.com/infographic-24-hours-on-the-internet/ http://www.ﬂickr.com/photos/donkeyhotey/5679642883/

„The extent of consumer annoyance is hardlysurprising when we consider the average Britonestimates that they waste 9 minutes every day,or 2 days a year, waiting for slowwebsites to load.“ http://press.1and1.co.uk/xml/article?article_id=1123 http://www.ﬂickr.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?

Average 18.9 sec?! Germany Retail – Mobile – O2/iPhone July 01, 2012 - August 01, 2012 / 0:00 - midnight http://www.gomez.com/germany-retail-mobile

Sites are growing 1105kB Mobile: 566kBhttp://httparchive.org/trends.php#numurls http://mobile.httparchive.org/trends.php#numurls

34kB HTML 119kB JavaScript 377kB Images 24kB CSShttp://mobile.httparchive.org/trends.php?s=All&minlabel=Jan+1+2012&maxlabel=Aug+15+2012#numurls

Mobile: 566kB 4 % 2 % 6 % 21 % 67 % HTML JavaScript Images CSS Othershttp://mobile.httparchive.org/trends.php?s=All&minlabel=Jan+1+2012&maxlabel=Aug+15+2012#numurls

„... a performance test on 347 responsivewebsites (on http://mediaqueri.es/ in March,2012) ... 86% of the websites “weighed”roughly the same when loaded in thesmallest window, compared to the largest one.“http://www.guypo.com/mobile/performance-implications-of-responsive-design-book-contribution/

D‘OH!

You can’t ﬁx what you can’t measure.http://www.ﬂickr.com/photos/tiffanyday/2929861461

Client Measuring•Client •Connection •Real Device •Carrier Network •Simulator •Rewriting Proxies •User-Agent String •WiFi •Test Instanz •Bandwith

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

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!

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. ClientWhere to optimize?

Server vs. Client Server Client•Server 10-30% 17% 83%•Client 70-90%

Bottleneckshttp://www.ﬂickr.com/photos/kino/438237794/

<outbreakname=“Making a Mobile Connection“>

Radio Connections2 sec delay 1.5 sec delay http://www.stevesouders.com/blog/2011/09/21/making-a-mobile-connection/ http://www.research.att.com/articles/featured_stories/2011_03/201102_Energy_efﬁcient

Mobile Networks Limited bandwith Operator Network Operator Transcoding?Delay Internet Limited connections http://www.stevesouders.com/blog/2011/09/21/making-a-mobile-connection/ http://www.research.att.com/articles/featured_stories/2011_03/201102_Energy_efﬁcient

Network Latency ~ 350ms 500ms - 150ms http://www.yuiblog.com/blog/2010/04/08/analyzing-bandwidth-and-latency/http://www.cisco.com/en/US/solutions/collateral/ns341/ns525/ns537/ns705/ns1175/Cloud_Index_White_Paper.html

Limited Connectionshttp://slideshare.net/patrickmeenan/velocity-2012-taming-the-mobile-beast http://www.guypo.com/mobile/http-pipelining-big-in-mobile/

</outbreak>

Critical Path•Consider load & render dependencies•CSS loading/parsing blocks image loading•inline JS/CSS blocks new external requests•Image/ressource loading blocks document complete

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

Connections •TCP congestion window, GSM queueing..w/o Keep Alive

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

Critical PathCSS loading/parsing blocks image loadingCSS Rendering

Critical Path Image/ressource loading blocks document complete font blocks document complete

Document Complete•document complete blocks onload-events•onload-events (may) block user interaction•usually trigger for unobtrusive JavaScript

Bottlenecks • Critical Path consider load• The mobile Web is & render dependencies slooooow • css blocks images • Connections has • image blocks document delays, are slow and complete limited • Sites are too big • blocking JS • Too many requests / • rendering / painting connections needed • DOM manipulation = rerendering

Fix it!Software http://www.ﬂickr.com/photos/thomashawk/4927579251

Our Approach http://www.netmagazine.com/tutorials/getting-started-resshttp://slideshare.net/4nd3rsen/ress-responsive-design-server-side-components-10084972

On-Premise / Installation Cloud Solution Server 1 src.example.com Delivery ContextInperfect World Client Env. like Server Side Mashup Inperfect World Private Browsing Server 2 Client Side / JavaScript www.example.com Browser + OS + Hardware Server -n Server Side api.example.com Filtering and Processing 3rd Party Server search.twitter.com Additional layout / assets / static content

Measures

Must-Have•Enable compression (gzip)•Long keep-alive

w/o gzip E!ect w/ gzip 36%w/o keep-alive

Reduce Transfer Size•Image resizing•Image quality •Depend on network quality•Server Side Content Filter (Server Side Media Queries) •HTML, JavaScript & CSS

Browser Dependencies•Non blocking JS loader (LABjs)•Head order of inline & extern scripts

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

Autoinline Images•must be <2k•must appear only once•works in src‘ed CSS, too! (Think sprites)•for all other images: •developer enables inlining

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•external scripts can be cached and combined (good)•least size of script for each page (good)•many HTTP requests on first view (BAD)

External Scripts12 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)

JS „Pipe“ &Application Cache only 1 request

Caching•Assets are requsted on every page request•Make sure they are cacheable! First View

Caching •cache assets forever (+ cache buster) •/fit/site/;lm=1332923272;m=css;pass/ js/layout.css •no sub-requests on repeat/flow viewsRepeat 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?•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 http://mobile.httparchive.org/trends.php#maxageNull http://www.stevesouders.com/blog/2012/03/22/cache-them-if-you-can/

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 startshttp://research.microsoft.com/pubs/170059/A%20comparison%20of%20SPDY%20and%20HTTP%20performance.pdf

Even More?•Fast clicks on touch devices•Avoid 302 redirects

Resultshttp://www.ﬂickr.com/photos/rosasay/4675053765

Performance Results•Google PageSpeed Score > 90, from 60/70/80 up to 100! •of 100 :) •https://developers.google.com/speed/ pagespeed/insights•YSlow Score > 80, from 60/70 up to 95 •http://developer.yahoo.com/yslow/

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

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

Wit Mobile Edition++ aut h all t oma ted rick add s ed!Document Complete: 1.088sBytes In: 69 KBRequests: 7Fully Loaded: 3.552sBytes In: 269 KBRequests: 14 ADVERTISING: This is the standard result by Sevenval FIT Version 12.0.2.

Overview Desktop Mobile Mobile++Document 11.838s 2.732s 1.088sCompleteBytes In 1,634KB 285KB 69KBRequests 122 51 7Fully Loaded 12.357s 4.193s 3.552sBytes In 1,634KB 288KB 269KBRequests 126 53 14loadEvent 11.806s 2.696s 0.862s

YES, THIS IS COOL!http://www.ﬂickr.com/photos/insouciance/3061759623/

Manual Improvements

Performance Booster•Send (intelligent) cache headers•CSS with inline images•Global CSS/JS in external files•Async JavaScript (<script async/>)•Decide between public and private content

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!

Takeawayshttp://www.ﬂickr.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“

Organisation•Performance is non-orthogonal to other features•Involve the customer

Performance Triangle PerformanceSecurity Eye-Candy 2012 Sevenval, Credits to @fﬁlex

Performance Triangle PerformanceSecurity Eye-Candy =$ = $$$ 2012 Sevenval, Credits to @fﬁlex

Thank You!@rolandguelle

https://twitter.com	11
http://www.mobilecologne.de	5
http://127.0.0.1	4
http://localhost	2
http://twitter.com	1
http://kred.com	1
http://www.linkedin.com	1

Mobile web performance

by Sevenval GmbH on Oct 15, 2012

Accessibility

Categories

Upload Details

Usage Rights

7 Embeds 25

Statistics

Mobile web performance Presentation Transcript