Mobile WPO

Tim Kadlec
Tim KadlecWeb Developer
Mobile WPO


 Presented by Tim Kadlec




                           http://www.flickr.com/photos/vlastula/300102949/
Sunday, May 29, 2011
It’s a Mobile World



2                                 http://www.flickr.com/photos/ivyfield/4731067532/
Sunday, May 29, 2011
5.6 billion mobile subscriptions
                       6.9 billion people

3                          http://www.flickr.com/photos/wwworks/2222523486/in/photostream/
Sunday, May 29, 2011
More smart phones and
                       tablets shipped than PCs

4                                   http://www.flickr.com/photos/wwworks/4472384764/
Sunday, May 29, 2011
Mobile traffic will grow by 26x in 5 years




5                                http://www.flickr.com/photos/epsos/5591761716/
Sunday, May 29, 2011
25% mobile only in US
                       22% mobile only in UK

6                                  http://www.flickr.com/photos/perspective/49671901/
Sunday, May 29, 2011
Things have changed...

7                                   http://www.flickr.com/photos/spine/2261612821/
Sunday, May 29, 2011
In the last twelve months, customers
             around the world have ordered more than
             US $1 billion of products from Amazon
             using a mobile device.
                                  - Jeff Bezos (July 2010)




8                      Source: http://phx.corporate-ir.net/phoenix.zhtml?c=97664&p=irol-newsArticle&ID=1451041&highlight=
Sunday, May 29, 2011
2010: eBay mobile transactions were > $2 billion

            2009: 600 million




9    Source: http://files.shareholder.com/downloads/ebay/1156981139x0x435896/9bd99676-b782-4784-87de-2899abe14a6d/eBay_Q42010EarningsRelease_Draft011911_FINAL.pdf

Sunday, May 29, 2011
If you’re not optimizing, you’re
             throwing money away




10                     http://www.flickr.com/photos/lisa_yarost/1592436195/in/photostream/
Sunday, May 29, 2011
Mobile users want fast experiences!


11                                http://www.flickr.com/photos/thatguyfromcchs08/2300190277/
Sunday, May 29, 2011
58% of mobile users expect websites
               to load as quickly, almost as quickly
               or faster on their mobile phone,
               compared to the computer they use
               at home




12
Sunday, May 29, 2011
73% of users are willing to wait a
               minute or less to complete a simple
               transaction - like checking their bank
               balance




13
Sunday, May 29, 2011
14                     Source: The business case for assuring the customer mobile Web experience
Sunday, May 29, 2011
So how are we doing?

15                                http://www.flickr.com/photos/deepphoto/463648209/
Sunday, May 29, 2011
HTTP Archive Mobile

16                                  http://mobile.httparchive.org/index.php
Sunday, May 29, 2011
17                     Source: http://mobile.httparchive.org/trends.php
Sunday, May 29, 2011
18                     Source: http://mobile.httparchive.org/trends.php
Sunday, May 29, 2011
Retail and Banking




19                         Source: http://www.gomez.com/benchmarks/sitemap/?region=US_Benchmarks
Sunday, May 29, 2011
Definitely room for improvement

20                                    http://www.flickr.com/photos/jonathansuzuki/2198667658/
Sunday, May 29, 2011
This Is Gonna Hurt




21                              http://www.flickr.com/photos/scottfeldstein/372141970/
Sunday, May 29, 2011
22                     http://www.pcworld.com/zoom?id=167391&page=1&zoomIdx=1
Sunday, May 29, 2011
Latency sucks

23                        http://developer.yahoo.com/blogs/ydn/posts/2009/10/a_engineers_gui/
Sunday, May 29, 2011
Just how bad is it?




24                         http://www.yuiblog.com/blog/2010/04/08/analyzing-bandwidth-and-latency/
Sunday, May 29, 2011
Uh oh!

25                     http://developer.yahoo.com/blogs/ydn/posts/2009/10/a_engineers_gui/
Sunday, May 29, 2011
Reduce Requests



26
Sunday, May 29, 2011
Replace images with Data URIs




27                      http://www.flickr.com/photos/orinrobertjohn/2189064194/
Sunday, May 29, 2011
They’re a little ugly...

     data:image/
     png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAASCAMAAACQGyXoAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZ
     SBJbWFnZVJlYWR5ccllPAAAAUdQTFRFFxUOJiMMFBIOkYsCjIYDioQDGxkNk40CYVwHNDALgHoENTILHRoNJSIMb
     WgFnJYBnpcBJCEMiYMDKygMPzwKWlUHREAJSUUJlo8CgXsEkIoCGBYNmJECIh8NXFgHHx0NExEOp6AAcWwFjYcD
     RkMJcm0Fgn0EHRsNUEwIY14GpJ0AcGoFIiAMT0sITEgJKCUMHBoNpp8Al5ECjogCa2YGaWQGIB0Nd3IFmZMBFhMOJ
     yQMGhgNiIIDWVQHOjcKLSoLIyAMODQKKicMVVEIPToKd3EFQj4KenQEaGQGS0cJh4EDlY8CoJkBfHcEZWAGaGMG
     hX8DZ2IGo5wAi4UDopsBlY4CeHIFRUEJXFcHdG8FKSYMeHMEmpMBV1MISkYJfnkEf3oEc24FnZcBVFAIeXQEQ0AJNj
     MLmJIBYl0Hn5gBVlEIqKEAEhAOjBZoxgAAAG10Uk5T/////////////////////////////////////////////////////////////////////////
     ///////////////////////////////////////////////////////////////////////
     AC221EsAAAEWSURBVHjabNHlVwMxDADw3u1kbGPK3NhwGe7uvuE+3En+/8/k2h6sQD70pf3l9aUNQ0Q9dj5/
     WWjFv8EQI2kAaJvA/
     7WTcKr513kgL9UkTcpar9En6ljHttBVgBFL6D4VeiI8TUAL1+ljMAQugxOZopPne3MWqY4LMCoavuEKUY3yoRC8kJYL2
     FNnXCtCwaZL/QBB0mvw3YZXuF6dSC4Z4ynqgHRwl7anTzNZ4jFojJzTVaB96y4Fwx925iKp6Doy
     +XpzL354tvauaMJVKzRH66eCnqzULh8MYP+BguEm/hu46H2EOOKkgvYr/8nZ8tHbA9XhZiM+L8kpaJrOry/uuFRK
     +78n+DPNjVo1at4Hu2PuyZcAAwA2KbSDyyYFcAAAAABJRU5ErkJggg==




28
Sunday, May 29, 2011
...but they don’t have to be hard

29                     http://www.nczonline.net/blog/2009/11/03/automatic-data-uri-embedding-in-css-files/
Sunday, May 29, 2011
java -jar cssembed-x.y.z.jar -o styles_new.css styles.css




30
Sunday, May 29, 2011
Inline JS & CSS
                        (but be smart about it)




31
Sunday, May 29, 2011
m.bing.com

                       Desktop: 93kB
                       iPad: 59kB
                       iPhone: 198kb
                       iPhone repeat: 30kb




32                               http://www.stevesouders.com/blog/2011/03/14/mobile-comparison-of-top-11/
Sunday, May 29, 2011
_load:function(b){
                          var a=null;
                          if(localStorage)
                             try{a=localStorage.getItem(b)}
                          catch(c){}
                          return a
                       }



33
Sunday, May 29, 2011
<style data-rms="save" id="CUX.Keyframes.B8625FEE"
         rel="stylesheet" type="text/css">
         .....
         </style>




34
Sunday, May 29, 2011
<script type="text/javascript">
         RMS.Load('CUX.Keyframes.B8625FEE')
         </script>




35
Sunday, May 29, 2011
Javascript on Desktop




36                           Source: http://ie.microsoft.com/testdrive/benchmarks/sunspider/default.html
Sunday, May 29, 2011
Javascript on Mobile




37                             Source: http://jeftek.com/1942/motorola-xoom-sunspider-results/
Sunday, May 29, 2011
Write Better Javascript
                                                   (duh)




38                       http://www.amazon.com/Performance-JavaScript-Faster-Application-Interfaces/dp/059680279X
Sunday, May 29, 2011
Don’t parse JS until needed


                       1kB of JS = 1ms



39                          Source: http://code.google.com/speed/page-speed/docs/mobile.html
Sunday, May 29, 2011
Use a script loader
               <script>
                 $LAB
                 .script("myScript.js")
                 .script("bonusScript.js");
               </script>

               http://labjs.com/

               <script>
                 $script(“myScript.js”);
                 $script(“bonusScript.js”);
               </script>

               http://dustindiaz.com/scriptjs




40
Sunday, May 29, 2011
Lazy-loading JS
               <html>
               ...
               <script id="lazy">
               // Make sure you strip out (or replace) comment blocks in your JavaScript first.
               /*
               JavaScript of lazy module
               */
               </script>

               <script>
                 function lazyLoad() {
                   var lazyElement = document.getElementById('lazy');
                   var lazyElementBody = lazyElement.innerHTML;
                   var jsCode = stripOutCommentBlock(lazyElementBody);
                   eval(jsCode);
                }
               </script>

               <div onclick=lazyLoad()> Lazy Load </div>
               </html>




41                           Source: http://googlecode.blogspot.com/2009/09/gmail-for-mobile-html5-series-reducing.html
Sunday, May 29, 2011
Prefer touch over click
                                 300/500ms delay for click
                                 events

                                 Penalty is consistent cross-
                                 platform

                                 Remember - perception is
                                 important!




42                                       Source: http://pcapperf.appspot.com/fastbutton
Sunday, May 29, 2011
Make use of AppCache



43
Sunday, May 29, 2011
CACHE MANIFEST
                       someJS.js
                       someMoreJS.js
                       styles.css
                       /images/myGoodSide.png
                       /images/myBadSide.png


                       <html manifest="mySite.appcache">

                       AddType text/cache-manifest .appcache


                             Simple example
44
Sunday, May 29, 2011
CACHE MANIFEST

                       CACHE
                       someJS.js

                       NETWORK
                       login.php

                       FALLBACK
                       /online.php /offline.php



                       A bit more complicated
45
Sunday, May 29, 2011
Confess.js




46                              https://github.com/jamesgpearce/confess
Sunday, May 29, 2011
Confess.js


         phantomjs confess.js http://functionsource.com




47
Sunday, May 29, 2011
CACHE MANIFEST

            # This manifest was created by confess.js, http://github.com/jamesgpearce/
            confess
            #
            # Time: Wed Apr 13 2011 15:40:27 GMT-0700 (PDT)
            # URL: http://functionsource.com
            # UA: Mozilla/5.0 (Macintosh; U; PPC Mac OS X; en-US) AppleWebKit/533.3
            (KHTML, like Gecko) PhantomJS/1.1.0 Safari/533.3
            #
            # Any console output generated by this page or app is shown immediately
            below. You'll need to remove this to create a valid manifest syntax.
            # [Start of console output]
            # [End of console output]

            CACHE:
            /javascripts/lib/jquery.js
            /javascripts/lib/underscore.js
            /javascripts/lib/backbone.js
            ........
            http://functionsource.com/images/icons/rss.png
            http://functionsource.com/images/icons/podcast.png
            http://functionsource.com/images/icons/firehose.png

            NETWORK:
            *
Sunday, May 29, 2011
A few AppCache resources

          http://www.html5rocks.com/tutorials/
          appcache/beginner/

          http://appcachefacts.info/




49
Sunday, May 29, 2011
Test. Rinse. Repeat.

50                                http://www.flickr.com/photos/jurvetson/2798315677/
Sunday, May 29, 2011
Let’s look at some tools

51                                   http://www.flickr.com/photos/olibac/560079597/
Sunday, May 29, 2011
Page Speed Online




52
Sunday, May 29, 2011
Sunday, May 29, 2011
Sunday, May 29, 2011
Charles Proxy

55
Sunday, May 29, 2011
56
Sunday, May 29, 2011
Blaze.io

57
Sunday, May 29, 2011
Sunday, May 29, 2011
Mobile Performance Bookmarklet




59
Sunday, May 29, 2011
Jdrop
60
Sunday, May 29, 2011
61
Sunday, May 29, 2011
We need more data!



62
Sunday, May 29, 2011
It took our community almost ten years to
            generate meaningful data around regular
            web performance. We don’t have that
            luxury with the mobile internet.
                                          - Joshua Bixby




63         Source: http://www.webperformancetoday.com/2010/07/22/mobile-web-performance-desperately-seeking-data/
Sunday, May 29, 2011
Experiment. Create. Share.




64
Sunday, May 29, 2011
Thank you!

   Tim Kadlec
   http://www.timkadlec.com
   Twitter: @tkadlec




Sunday, May 29, 2011
1 of 65

Recommended

Can Media Queries Save Us All? by
Can Media Queries Save Us All?Can Media Queries Save Us All?
Can Media Queries Save Us All?Tim Kadlec
1.7K views43 slides
What Should Be In My School's Social Media Tool Belt by
What Should Be In My School's Social Media Tool BeltWhat Should Be In My School's Social Media Tool Belt
What Should Be In My School's Social Media Tool BeltedSocialMedia
1.2K views73 slides
Splunk demo by
Splunk demoSplunk demo
Splunk demoCarlos Martinez
56 views43 slides
Reach for the Stars Using Media in Your Classroom by
Reach for the Stars Using Media in Your ClassroomReach for the Stars Using Media in Your Classroom
Reach for the Stars Using Media in Your ClassroomWesley Fryer
1.2K views49 slides
Tech toolbox for teachers by
Tech toolbox for teachersTech toolbox for teachers
Tech toolbox for teachersjharnwell
1K views52 slides
DEN Tech or Treat: Playing with Media by
DEN Tech or Treat: Playing with MediaDEN Tech or Treat: Playing with Media
DEN Tech or Treat: Playing with MediaWesley Fryer
1.9K views86 slides

More Related Content

Viewers also liked

Marthapacheco actividad1 2mapac by
Marthapacheco actividad1 2mapacMarthapacheco actividad1 2mapac
Marthapacheco actividad1 2mapacMarthika Pacheco
246 views1 slide
Die neuen Features der 1&1 Do-It-Yourself Homepage im Überblick by
Die neuen Features der 1&1 Do-It-Yourself Homepage im ÜberblickDie neuen Features der 1&1 Do-It-Yourself Homepage im Überblick
Die neuen Features der 1&1 Do-It-Yourself Homepage im Überblick1&1
3.8K views22 slides
Entendiendo al e-shopper by
Entendiendo al e-shopperEntendiendo al e-shopper
Entendiendo al e-shopperADICT Active Retail
788 views5 slides
Manual: Whatsapp en Tablet by
Manual: Whatsapp en TabletManual: Whatsapp en Tablet
Manual: Whatsapp en TabletPlatinum
2.7K views26 slides
case-study-actelion by
case-study-actelioncase-study-actelion
case-study-actelionGeoffray Schmitt
679 views4 slides
Lect.02.09.13 by
Lect.02.09.13Lect.02.09.13
Lect.02.09.13h_tixid
675 views26 slides

Viewers also liked(20)

Die neuen Features der 1&1 Do-It-Yourself Homepage im Überblick by 1&1
Die neuen Features der 1&1 Do-It-Yourself Homepage im ÜberblickDie neuen Features der 1&1 Do-It-Yourself Homepage im Überblick
Die neuen Features der 1&1 Do-It-Yourself Homepage im Überblick
1&13.8K views
Manual: Whatsapp en Tablet by Platinum
Manual: Whatsapp en TabletManual: Whatsapp en Tablet
Manual: Whatsapp en Tablet
Platinum 2.7K views
Lect.02.09.13 by h_tixid
Lect.02.09.13Lect.02.09.13
Lect.02.09.13
h_tixid675 views
GWT 2014: Emergency Conference - 01 Introduzione by Planetek Italia Srl
GWT 2014: Emergency Conference - 01 IntroduzioneGWT 2014: Emergency Conference - 01 Introduzione
GWT 2014: Emergency Conference - 01 Introduzione
Planetek Italia Srl1.2K views
CLICKNL kick-off Built Environment - FUTURE METROPOLIS by CLICKNL
CLICKNL kick-off Built Environment - FUTURE METROPOLISCLICKNL kick-off Built Environment - FUTURE METROPOLIS
CLICKNL kick-off Built Environment - FUTURE METROPOLIS
CLICKNL 802 views
Diseño Instruccional E-learning by Gustavo Davila
Diseño Instruccional E-learningDiseño Instruccional E-learning
Diseño Instruccional E-learning
Gustavo Davila621 views
Strategies for Overcoming Stress, Anxiety and Fear by HawaiiNaturopathic
Strategies for Overcoming Stress, Anxiety and FearStrategies for Overcoming Stress, Anxiety and Fear
Strategies for Overcoming Stress, Anxiety and Fear
HawaiiNaturopathic4.5K views
Estudio sobre el uso de los medios sociales en sector de la automoción en España by Digital PR España
Estudio sobre el uso de los medios sociales en sector de la automoción en EspañaEstudio sobre el uso de los medios sociales en sector de la automoción en España
Estudio sobre el uso de los medios sociales en sector de la automoción en España
Digital PR España162.9K views
Pp de los establos mantenimiento by Francesca Perez
Pp de los establos  mantenimientoPp de los establos  mantenimiento
Pp de los establos mantenimiento
Francesca Perez483 views
Apuntes didactica lp by Xisca BQ
Apuntes didactica lpApuntes didactica lp
Apuntes didactica lp
Xisca BQ1K views
Adolescència 1 by CVA
Adolescència 1Adolescència 1
Adolescència 1
CVA571 views
Are we there yet? by Mike Burrows
Are we there yet?Are we there yet?
Are we there yet?
Mike Burrows4.6K views
Discrimen Ley #100 by guest54cfb
Discrimen Ley #100Discrimen Ley #100
Discrimen Ley #100
guest54cfb13.4K views

Similar to Mobile WPO

EduWeb - Building a Responsive Website for the Presidential Debate by
EduWeb - Building a Responsive Website for the Presidential DebateEduWeb - Building a Responsive Website for the Presidential Debate
EduWeb - Building a Responsive Website for the Presidential DebateJon Liu
437 views90 slides
HTML5/CSS3 @ Baidu by
HTML5/CSS3 @ BaiduHTML5/CSS3 @ Baidu
HTML5/CSS3 @ BaiduZi Bin Cheah
477 views62 slides
Ember.js - scratching the surface by
Ember.js - scratching the surfaceEmber.js - scratching the surface
Ember.js - scratching the surfaceUģis Ozols
655 views21 slides
Product Owner Challenge 3.0 (Agile Cambridge 2016) by
Product Owner Challenge 3.0 (Agile Cambridge 2016)Product Owner Challenge 3.0 (Agile Cambridge 2016)
Product Owner Challenge 3.0 (Agile Cambridge 2016)Michael Tarnowski
3.1K views16 slides
Big Social Broadband: Life after second bubble by
Big Social Broadband: Life after second bubbleBig Social Broadband: Life after second bubble
Big Social Broadband: Life after second bubbleJosef Šlerka
2.9K views27 slides
WordPress Houston Meetup - Using WordPress as a CMS by
WordPress Houston Meetup - Using WordPress as a CMSWordPress Houston Meetup - Using WordPress as a CMS
WordPress Houston Meetup - Using WordPress as a CMSChris Olbekson
1.1K views18 slides

Similar to Mobile WPO(20)

EduWeb - Building a Responsive Website for the Presidential Debate by Jon Liu
EduWeb - Building a Responsive Website for the Presidential DebateEduWeb - Building a Responsive Website for the Presidential Debate
EduWeb - Building a Responsive Website for the Presidential Debate
Jon Liu437 views
Ember.js - scratching the surface by Uģis Ozols
Ember.js - scratching the surfaceEmber.js - scratching the surface
Ember.js - scratching the surface
Uģis Ozols655 views
Product Owner Challenge 3.0 (Agile Cambridge 2016) by Michael Tarnowski
Product Owner Challenge 3.0 (Agile Cambridge 2016)Product Owner Challenge 3.0 (Agile Cambridge 2016)
Product Owner Challenge 3.0 (Agile Cambridge 2016)
Michael Tarnowski3.1K views
Big Social Broadband: Life after second bubble by Josef Šlerka
Big Social Broadband: Life after second bubbleBig Social Broadband: Life after second bubble
Big Social Broadband: Life after second bubble
Josef Šlerka2.9K views
WordPress Houston Meetup - Using WordPress as a CMS by Chris Olbekson
WordPress Houston Meetup - Using WordPress as a CMSWordPress Houston Meetup - Using WordPress as a CMS
WordPress Houston Meetup - Using WordPress as a CMS
Chris Olbekson1.1K views
NodeJS, CoffeeScript & Real-time Web by Jakub Nesetril
NodeJS, CoffeeScript & Real-time WebNodeJS, CoffeeScript & Real-time Web
NodeJS, CoffeeScript & Real-time Web
Jakub Nesetril1.4K views
(31 July 2013) iOS Basic Development Day 2 Human interface design by Eakapong Kattiya
(31 July 2013) iOS Basic Development Day 2 Human interface design (31 July 2013) iOS Basic Development Day 2 Human interface design
(31 July 2013) iOS Basic Development Day 2 Human interface design
Eakapong Kattiya2.5K views
Introduction to Software Development by Zsolt Fabok
Introduction to Software DevelopmentIntroduction to Software Development
Introduction to Software Development
Zsolt Fabok648 views
npm: Modularizing your JavaScript development by Ruy Adorno
npm: Modularizing your JavaScript developmentnpm: Modularizing your JavaScript development
npm: Modularizing your JavaScript development
Ruy Adorno1.1K views
Going Mobile by Stephen G
Going MobileGoing Mobile
Going Mobile
Stephen G576 views
Using Technology Effectively with Gifted Learners by smwatt
Using Technology Effectively with Gifted LearnersUsing Technology Effectively with Gifted Learners
Using Technology Effectively with Gifted Learners
smwatt447 views
web标准化交流会上海站bobby分享 by 裕波 周
web标准化交流会上海站bobby分享web标准化交流会上海站bobby分享
web标准化交流会上海站bobby分享
裕波 周978 views
web标准化交流会bobby分享 by 裕波 周
web标准化交流会bobby分享web标准化交流会bobby分享
web标准化交流会bobby分享
裕波 周657 views
ETSI Hell's Kitchen Debate, Nice 2009 by Paul Downey
ETSI Hell's Kitchen Debate, Nice 2009ETSI Hell's Kitchen Debate, Nice 2009
ETSI Hell's Kitchen Debate, Nice 2009
Paul Downey852 views
"IA Thinking" Workshop at Open-I Seminar 20110528 by Takashi Sakamoto
"IA Thinking" Workshop at Open-I Seminar 20110528 "IA Thinking" Workshop at Open-I Seminar 20110528
"IA Thinking" Workshop at Open-I Seminar 20110528
Takashi Sakamoto861 views
The Windows Developer User Group - Sep 2012 Meetup by Sam Basu
The Windows Developer User Group - Sep 2012 MeetupThe Windows Developer User Group - Sep 2012 Meetup
The Windows Developer User Group - Sep 2012 Meetup
Sam Basu308 views
Koubei banquet 35 by Koubei UED
Koubei banquet 35Koubei banquet 35
Koubei banquet 35
Koubei UED320 views
'Prototyping' - GSJ11 Seoul by Byeonghwan Kim
'Prototyping' - GSJ11 Seoul'Prototyping' - GSJ11 Seoul
'Prototyping' - GSJ11 Seoul
Byeonghwan Kim1.8K views

Recently uploaded

GDG Cloud Southlake 28 Brad Taylor and Shawn Augenstein Old Problems in the N... by
GDG Cloud Southlake 28 Brad Taylor and Shawn Augenstein Old Problems in the N...GDG Cloud Southlake 28 Brad Taylor and Shawn Augenstein Old Problems in the N...
GDG Cloud Southlake 28 Brad Taylor and Shawn Augenstein Old Problems in the N...James Anderson
126 views32 slides
Future of AR - Facebook Presentation by
Future of AR - Facebook PresentationFuture of AR - Facebook Presentation
Future of AR - Facebook Presentationssuserb54b561
22 views27 slides
TrustArc Webinar - Managing Online Tracking Technology Vendors_ A Checklist f... by
TrustArc Webinar - Managing Online Tracking Technology Vendors_ A Checklist f...TrustArc Webinar - Managing Online Tracking Technology Vendors_ A Checklist f...
TrustArc Webinar - Managing Online Tracking Technology Vendors_ A Checklist f...TrustArc
72 views29 slides
Network Source of Truth and Infrastructure as Code revisited by
Network Source of Truth and Infrastructure as Code revisitedNetwork Source of Truth and Infrastructure as Code revisited
Network Source of Truth and Infrastructure as Code revisitedNetwork Automation Forum
32 views45 slides
Mini-Track: Challenges to Network Automation Adoption by
Mini-Track: Challenges to Network Automation AdoptionMini-Track: Challenges to Network Automation Adoption
Mini-Track: Challenges to Network Automation AdoptionNetwork Automation Forum
17 views27 slides
Data Integrity for Banking and Financial Services by
Data Integrity for Banking and Financial ServicesData Integrity for Banking and Financial Services
Data Integrity for Banking and Financial ServicesPrecisely
29 views26 slides

Recently uploaded(20)

GDG Cloud Southlake 28 Brad Taylor and Shawn Augenstein Old Problems in the N... by James Anderson
GDG Cloud Southlake 28 Brad Taylor and Shawn Augenstein Old Problems in the N...GDG Cloud Southlake 28 Brad Taylor and Shawn Augenstein Old Problems in the N...
GDG Cloud Southlake 28 Brad Taylor and Shawn Augenstein Old Problems in the N...
James Anderson126 views
Future of AR - Facebook Presentation by ssuserb54b561
Future of AR - Facebook PresentationFuture of AR - Facebook Presentation
Future of AR - Facebook Presentation
ssuserb54b56122 views
TrustArc Webinar - Managing Online Tracking Technology Vendors_ A Checklist f... by TrustArc
TrustArc Webinar - Managing Online Tracking Technology Vendors_ A Checklist f...TrustArc Webinar - Managing Online Tracking Technology Vendors_ A Checklist f...
TrustArc Webinar - Managing Online Tracking Technology Vendors_ A Checklist f...
TrustArc72 views
Data Integrity for Banking and Financial Services by Precisely
Data Integrity for Banking and Financial ServicesData Integrity for Banking and Financial Services
Data Integrity for Banking and Financial Services
Precisely29 views
STPI OctaNE CoE Brochure.pdf by madhurjyapb
STPI OctaNE CoE Brochure.pdfSTPI OctaNE CoE Brochure.pdf
STPI OctaNE CoE Brochure.pdf
madhurjyapb14 views
2024: A Travel Odyssey The Role of Generative AI in the Tourism Universe by Simone Puorto
2024: A Travel Odyssey The Role of Generative AI in the Tourism Universe2024: A Travel Odyssey The Role of Generative AI in the Tourism Universe
2024: A Travel Odyssey The Role of Generative AI in the Tourism Universe
Simone Puorto13 views
STKI Israeli Market Study 2023 corrected forecast 2023_24 v3.pdf by Dr. Jimmy Schwarzkopf
STKI Israeli Market Study 2023   corrected forecast 2023_24 v3.pdfSTKI Israeli Market Study 2023   corrected forecast 2023_24 v3.pdf
STKI Israeli Market Study 2023 corrected forecast 2023_24 v3.pdf
"Running students' code in isolation. The hard way", Yurii Holiuk by Fwdays
"Running students' code in isolation. The hard way", Yurii Holiuk "Running students' code in isolation. The hard way", Yurii Holiuk
"Running students' code in isolation. The hard way", Yurii Holiuk
Fwdays24 views
PharoJS - Zürich Smalltalk Group Meetup November 2023 by Noury Bouraqadi
PharoJS - Zürich Smalltalk Group Meetup November 2023PharoJS - Zürich Smalltalk Group Meetup November 2023
PharoJS - Zürich Smalltalk Group Meetup November 2023
Noury Bouraqadi139 views
ESPC 2023 - Protect and Govern your Sensitive Data with Microsoft Purview in ... by Jasper Oosterveld
ESPC 2023 - Protect and Govern your Sensitive Data with Microsoft Purview in ...ESPC 2023 - Protect and Govern your Sensitive Data with Microsoft Purview in ...
ESPC 2023 - Protect and Govern your Sensitive Data with Microsoft Purview in ...
Five Things You SHOULD Know About Postman by Postman
Five Things You SHOULD Know About PostmanFive Things You SHOULD Know About Postman
Five Things You SHOULD Know About Postman
Postman38 views

Mobile WPO

  • 1. Mobile WPO Presented by Tim Kadlec http://www.flickr.com/photos/vlastula/300102949/ Sunday, May 29, 2011
  • 2. It’s a Mobile World 2 http://www.flickr.com/photos/ivyfield/4731067532/ Sunday, May 29, 2011
  • 3. 5.6 billion mobile subscriptions 6.9 billion people 3 http://www.flickr.com/photos/wwworks/2222523486/in/photostream/ Sunday, May 29, 2011
  • 4. More smart phones and tablets shipped than PCs 4 http://www.flickr.com/photos/wwworks/4472384764/ Sunday, May 29, 2011
  • 5. Mobile traffic will grow by 26x in 5 years 5 http://www.flickr.com/photos/epsos/5591761716/ Sunday, May 29, 2011
  • 6. 25% mobile only in US 22% mobile only in UK 6 http://www.flickr.com/photos/perspective/49671901/ Sunday, May 29, 2011
  • 7. Things have changed... 7 http://www.flickr.com/photos/spine/2261612821/ Sunday, May 29, 2011
  • 8. In the last twelve months, customers around the world have ordered more than US $1 billion of products from Amazon using a mobile device. - Jeff Bezos (July 2010) 8 Source: http://phx.corporate-ir.net/phoenix.zhtml?c=97664&p=irol-newsArticle&ID=1451041&highlight= Sunday, May 29, 2011
  • 9. 2010: eBay mobile transactions were > $2 billion 2009: 600 million 9 Source: http://files.shareholder.com/downloads/ebay/1156981139x0x435896/9bd99676-b782-4784-87de-2899abe14a6d/eBay_Q42010EarningsRelease_Draft011911_FINAL.pdf Sunday, May 29, 2011
  • 10. If you’re not optimizing, you’re throwing money away 10 http://www.flickr.com/photos/lisa_yarost/1592436195/in/photostream/ Sunday, May 29, 2011
  • 11. Mobile users want fast experiences! 11 http://www.flickr.com/photos/thatguyfromcchs08/2300190277/ Sunday, May 29, 2011
  • 12. 58% of mobile users expect websites to load as quickly, almost as quickly or faster on their mobile phone, compared to the computer they use at home 12 Sunday, May 29, 2011
  • 13. 73% of users are willing to wait a minute or less to complete a simple transaction - like checking their bank balance 13 Sunday, May 29, 2011
  • 14. 14 Source: The business case for assuring the customer mobile Web experience Sunday, May 29, 2011
  • 15. So how are we doing? 15 http://www.flickr.com/photos/deepphoto/463648209/ Sunday, May 29, 2011
  • 16. HTTP Archive Mobile 16 http://mobile.httparchive.org/index.php Sunday, May 29, 2011
  • 17. 17 Source: http://mobile.httparchive.org/trends.php Sunday, May 29, 2011
  • 18. 18 Source: http://mobile.httparchive.org/trends.php Sunday, May 29, 2011
  • 19. Retail and Banking 19 Source: http://www.gomez.com/benchmarks/sitemap/?region=US_Benchmarks Sunday, May 29, 2011
  • 20. Definitely room for improvement 20 http://www.flickr.com/photos/jonathansuzuki/2198667658/ Sunday, May 29, 2011
  • 21. This Is Gonna Hurt 21 http://www.flickr.com/photos/scottfeldstein/372141970/ Sunday, May 29, 2011
  • 22. 22 http://www.pcworld.com/zoom?id=167391&page=1&zoomIdx=1 Sunday, May 29, 2011
  • 23. Latency sucks 23 http://developer.yahoo.com/blogs/ydn/posts/2009/10/a_engineers_gui/ Sunday, May 29, 2011
  • 24. Just how bad is it? 24 http://www.yuiblog.com/blog/2010/04/08/analyzing-bandwidth-and-latency/ Sunday, May 29, 2011
  • 25. Uh oh! 25 http://developer.yahoo.com/blogs/ydn/posts/2009/10/a_engineers_gui/ Sunday, May 29, 2011
  • 27. Replace images with Data URIs 27 http://www.flickr.com/photos/orinrobertjohn/2189064194/ Sunday, May 29, 2011
  • 28. They’re a little ugly... data:image/ png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAASCAMAAACQGyXoAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZ SBJbWFnZVJlYWR5ccllPAAAAUdQTFRFFxUOJiMMFBIOkYsCjIYDioQDGxkNk40CYVwHNDALgHoENTILHRoNJSIMb WgFnJYBnpcBJCEMiYMDKygMPzwKWlUHREAJSUUJlo8CgXsEkIoCGBYNmJECIh8NXFgHHx0NExEOp6AAcWwFjYcD RkMJcm0Fgn0EHRsNUEwIY14GpJ0AcGoFIiAMT0sITEgJKCUMHBoNpp8Al5ECjogCa2YGaWQGIB0Nd3IFmZMBFhMOJ yQMGhgNiIIDWVQHOjcKLSoLIyAMODQKKicMVVEIPToKd3EFQj4KenQEaGQGS0cJh4EDlY8CoJkBfHcEZWAGaGMG hX8DZ2IGo5wAi4UDopsBlY4CeHIFRUEJXFcHdG8FKSYMeHMEmpMBV1MISkYJfnkEf3oEc24FnZcBVFAIeXQEQ0AJNj MLmJIBYl0Hn5gBVlEIqKEAEhAOjBZoxgAAAG10Uk5T///////////////////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////////////////// AC221EsAAAEWSURBVHjabNHlVwMxDADw3u1kbGPK3NhwGe7uvuE+3En+/8/k2h6sQD70pf3l9aUNQ0Q9dj5/ WWjFv8EQI2kAaJvA/ 7WTcKr513kgL9UkTcpar9En6ljHttBVgBFL6D4VeiI8TUAL1+ljMAQugxOZopPne3MWqY4LMCoavuEKUY3yoRC8kJYL2 FNnXCtCwaZL/QBB0mvw3YZXuF6dSC4Z4ynqgHRwl7anTzNZ4jFojJzTVaB96y4Fwx925iKp6Doy +XpzL354tvauaMJVKzRH66eCnqzULh8MYP+BguEm/hu46H2EOOKkgvYr/8nZ8tHbA9XhZiM+L8kpaJrOry/uuFRK +78n+DPNjVo1at4Hu2PuyZcAAwA2KbSDyyYFcAAAAABJRU5ErkJggg== 28 Sunday, May 29, 2011
  • 29. ...but they don’t have to be hard 29 http://www.nczonline.net/blog/2009/11/03/automatic-data-uri-embedding-in-css-files/ Sunday, May 29, 2011
  • 30. java -jar cssembed-x.y.z.jar -o styles_new.css styles.css 30 Sunday, May 29, 2011
  • 31. Inline JS & CSS (but be smart about it) 31 Sunday, May 29, 2011
  • 32. m.bing.com Desktop: 93kB iPad: 59kB iPhone: 198kb iPhone repeat: 30kb 32 http://www.stevesouders.com/blog/2011/03/14/mobile-comparison-of-top-11/ Sunday, May 29, 2011
  • 33. _load:function(b){ var a=null; if(localStorage) try{a=localStorage.getItem(b)} catch(c){} return a } 33 Sunday, May 29, 2011
  • 34. <style data-rms="save" id="CUX.Keyframes.B8625FEE" rel="stylesheet" type="text/css"> ..... </style> 34 Sunday, May 29, 2011
  • 35. <script type="text/javascript"> RMS.Load('CUX.Keyframes.B8625FEE') </script> 35 Sunday, May 29, 2011
  • 36. Javascript on Desktop 36 Source: http://ie.microsoft.com/testdrive/benchmarks/sunspider/default.html Sunday, May 29, 2011
  • 37. Javascript on Mobile 37 Source: http://jeftek.com/1942/motorola-xoom-sunspider-results/ Sunday, May 29, 2011
  • 38. Write Better Javascript (duh) 38 http://www.amazon.com/Performance-JavaScript-Faster-Application-Interfaces/dp/059680279X Sunday, May 29, 2011
  • 39. Don’t parse JS until needed 1kB of JS = 1ms 39 Source: http://code.google.com/speed/page-speed/docs/mobile.html Sunday, May 29, 2011
  • 40. Use a script loader <script> $LAB .script("myScript.js") .script("bonusScript.js"); </script> http://labjs.com/ <script> $script(“myScript.js”); $script(“bonusScript.js”); </script> http://dustindiaz.com/scriptjs 40 Sunday, May 29, 2011
  • 41. Lazy-loading JS <html> ... <script id="lazy"> // Make sure you strip out (or replace) comment blocks in your JavaScript first. /* JavaScript of lazy module */ </script> <script>   function lazyLoad() {     var lazyElement = document.getElementById('lazy');     var lazyElementBody = lazyElement.innerHTML;     var jsCode = stripOutCommentBlock(lazyElementBody);     eval(jsCode);  } </script> <div onclick=lazyLoad()> Lazy Load </div> </html> 41 Source: http://googlecode.blogspot.com/2009/09/gmail-for-mobile-html5-series-reducing.html Sunday, May 29, 2011
  • 42. Prefer touch over click 300/500ms delay for click events Penalty is consistent cross- platform Remember - perception is important! 42 Source: http://pcapperf.appspot.com/fastbutton Sunday, May 29, 2011
  • 43. Make use of AppCache 43 Sunday, May 29, 2011
  • 44. CACHE MANIFEST someJS.js someMoreJS.js styles.css /images/myGoodSide.png /images/myBadSide.png <html manifest="mySite.appcache"> AddType text/cache-manifest .appcache Simple example 44 Sunday, May 29, 2011
  • 45. CACHE MANIFEST CACHE someJS.js NETWORK login.php FALLBACK /online.php /offline.php A bit more complicated 45 Sunday, May 29, 2011
  • 46. Confess.js 46 https://github.com/jamesgpearce/confess Sunday, May 29, 2011
  • 47. Confess.js phantomjs confess.js http://functionsource.com 47 Sunday, May 29, 2011
  • 48. CACHE MANIFEST # This manifest was created by confess.js, http://github.com/jamesgpearce/ confess # # Time: Wed Apr 13 2011 15:40:27 GMT-0700 (PDT) # URL: http://functionsource.com # UA: Mozilla/5.0 (Macintosh; U; PPC Mac OS X; en-US) AppleWebKit/533.3 (KHTML, like Gecko) PhantomJS/1.1.0 Safari/533.3 # # Any console output generated by this page or app is shown immediately below. You'll need to remove this to create a valid manifest syntax. # [Start of console output] # [End of console output] CACHE: /javascripts/lib/jquery.js /javascripts/lib/underscore.js /javascripts/lib/backbone.js ........ http://functionsource.com/images/icons/rss.png http://functionsource.com/images/icons/podcast.png http://functionsource.com/images/icons/firehose.png NETWORK: * Sunday, May 29, 2011
  • 49. A few AppCache resources http://www.html5rocks.com/tutorials/ appcache/beginner/ http://appcachefacts.info/ 49 Sunday, May 29, 2011
  • 50. Test. Rinse. Repeat. 50 http://www.flickr.com/photos/jurvetson/2798315677/ Sunday, May 29, 2011
  • 51. Let’s look at some tools 51 http://www.flickr.com/photos/olibac/560079597/ Sunday, May 29, 2011
  • 62. We need more data! 62 Sunday, May 29, 2011
  • 63. It took our community almost ten years to generate meaningful data around regular web performance. We don’t have that luxury with the mobile internet. - Joshua Bixby 63 Source: http://www.webperformancetoday.com/2010/07/22/mobile-web-performance-desperately-seeking-data/ Sunday, May 29, 2011
  • 65. Thank you! Tim Kadlec http://www.timkadlec.com Twitter: @tkadlec Sunday, May 29, 2011