SlideShare a Scribd company logo

Going Fast on the Mobile Web

Web Visions presentation on developing fast-loading web pages for mobile devices.

1 of 59
Download to read offline
Going Fast on the
                                               Mobile Web
                                                                                 by Jason Grigsby




                                                                         Flickr: Uploaded February 11, 2007 by hawridger



Work: http://cloudfour.com • Blog: http://userfirstweb.com • Twitter: @grigs
Mobile Concurrency Test: http://cloudfour.com/mobile/
The Mobile Web is Coming.
Web Developers aren’t Ready.
      Flickr photo by look4u: http://www.flickr.com/photos/look4u/279668622/
3.3
                                          Billion
                                           Mobile phone for
                                           half the planet.




Flickr photo by Pingnews: http://www.flickr.com/photos/pingnews/370061022/
3.3 Billion in Perspective




Source: http://communities-dominate.blogs.com/brands/2007/01/putting_27_bill.html
   http://communities-dominate.blogs.com/brands/2008/01/when-there-is-a.html
2007 SMS Revenue: 100 billion




                                                                            •Box Office
                                                                            •DVD Sales & Rentals
          Combined                                                          •Music Industry
                                                                            •Video Games
Flickr photo by Vlastula: http://www.flickr.com/photos/vlastula/450642954/
Mobile is the Technology that Cried Wolf.
                                                 (for 15 years)




                   Flickr photo by CaptPiper: http://www.flickr.com/photos/piper/197153406/

Recommended

Quantifying The Mobile Difference
Quantifying The Mobile DifferenceQuantifying The Mobile Difference
Quantifying The Mobile DifferenceGuy Podjarny
 
Velocity 2012: The 90-Minute Mobile Optimization Life Cycle
Velocity 2012: The 90-Minute Mobile Optimization Life CycleVelocity 2012: The 90-Minute Mobile Optimization Life Cycle
Velocity 2012: The 90-Minute Mobile Optimization Life CycleStrangeloop
 
High Performance Mobile Web
High Performance Mobile WebHigh Performance Mobile Web
High Performance Mobile WebMorgan Cheng
 
Velocity 2012 - Taming the Mobile Beast
Velocity 2012 - Taming the Mobile BeastVelocity 2012 - Taming the Mobile Beast
Velocity 2012 - Taming the Mobile BeastPatrick Meenan
 
Performance Implications of Mobile Design
Performance Implications of Mobile DesignPerformance Implications of Mobile Design
Performance Implications of Mobile DesignGuy Podjarny
 
Mobile Web Speed Bumps
Mobile Web Speed BumpsMobile Web Speed Bumps
Mobile Web Speed BumpsNicholas Zakas
 
Imagesandvideo tallinn
Imagesandvideo tallinnImagesandvideo tallinn
Imagesandvideo tallinnDoug Sillars
 
Mobile Web Best Practices
Mobile Web Best PracticesMobile Web Best Practices
Mobile Web Best PracticesJames D Bloom
 

More Related Content

What's hot

Imagesandvideo stockholm fastandbeautiful
Imagesandvideo stockholm fastandbeautifulImagesandvideo stockholm fastandbeautiful
Imagesandvideo stockholm fastandbeautifulDoug Sillars
 
Imagesandvideo stockholm webmeetup
Imagesandvideo stockholm webmeetupImagesandvideo stockholm webmeetup
Imagesandvideo stockholm webmeetupDoug Sillars
 
Jon Arne Sæterås - Give Responsive Design a mobile performance boost
Jon Arne Sæterås - Give Responsive Design a mobile performance boost Jon Arne Sæterås - Give Responsive Design a mobile performance boost
Jon Arne Sæterås - Give Responsive Design a mobile performance boost DevConFu
 
High Performance Mobile Web
High Performance Mobile WebHigh Performance Mobile Web
High Performance Mobile WebJames D Bloom
 
7 Habits of Exceptional Performance
7 Habits of Exceptional Performance7 Habits of Exceptional Performance
7 Habits of Exceptional PerformanceNicole Sullivan
 
Developing High Performance Web Apps - CodeMash 2011
Developing High Performance Web Apps - CodeMash 2011Developing High Performance Web Apps - CodeMash 2011
Developing High Performance Web Apps - CodeMash 2011Timothy Fisher
 
Extreme Web Performance for Mobile Devices - Velocity NY
Extreme Web Performance for Mobile Devices - Velocity NYExtreme Web Performance for Mobile Devices - Velocity NY
Extreme Web Performance for Mobile Devices - Velocity NYMaximiliano Firtman
 
Delivering Optimal Images for Phones and Tablets on the Modern Web
Delivering Optimal Images for Phones and Tablets on the Modern WebDelivering Optimal Images for Phones and Tablets on the Modern Web
Delivering Optimal Images for Phones and Tablets on the Modern WebJoshua Marantz
 
Image-ine That: Image Optimization for Conversion Maximization
Image-ine That: Image Optimization for Conversion MaximizationImage-ine That: Image Optimization for Conversion Maximization
Image-ine That: Image Optimization for Conversion MaximizationYottaa
 
Its timetostopstalling cambridgemot
Its timetostopstalling cambridgemotIts timetostopstalling cambridgemot
Its timetostopstalling cambridgemotDoug Sillars
 
Fastandbeautiful porto
Fastandbeautiful portoFastandbeautiful porto
Fastandbeautiful portoDoug Sillars
 
Fastandbeautiful full stackporto
Fastandbeautiful full stackportoFastandbeautiful full stackporto
Fastandbeautiful full stackportoDoug Sillars
 
Fastandbeautiful oredev
Fastandbeautiful oredevFastandbeautiful oredev
Fastandbeautiful oredevDoug Sillars
 
Fastandbeautiful ux wurzburg
Fastandbeautiful ux wurzburgFastandbeautiful ux wurzburg
Fastandbeautiful ux wurzburgDoug Sillars
 
Threadneedle when its just too slow
Threadneedle when its just too slowThreadneedle when its just too slow
Threadneedle when its just too slowDoug Sillars
 
Raiders of the Fast Start: Frontend Performance Archaeology - Performance.now...
Raiders of the Fast Start: Frontend Performance Archaeology - Performance.now...Raiders of the Fast Start: Frontend Performance Archaeology - Performance.now...
Raiders of the Fast Start: Frontend Performance Archaeology - Performance.now...Katie Sylor-Miller
 
Fastandbeautiful full stacklondon
Fastandbeautiful full stacklondonFastandbeautiful full stacklondon
Fastandbeautiful full stacklondonDoug Sillars
 
Happy Browser, Happy User! NY Web Performance Meetup 9/20/19
Happy Browser, Happy User! NY Web Performance Meetup 9/20/19Happy Browser, Happy User! NY Web Performance Meetup 9/20/19
Happy Browser, Happy User! NY Web Performance Meetup 9/20/19Katie Sylor-Miller
 

What's hot (20)

Imagesandvideo stockholm fastandbeautiful
Imagesandvideo stockholm fastandbeautifulImagesandvideo stockholm fastandbeautiful
Imagesandvideo stockholm fastandbeautiful
 
Imagesandvideo stockholm webmeetup
Imagesandvideo stockholm webmeetupImagesandvideo stockholm webmeetup
Imagesandvideo stockholm webmeetup
 
Jon Arne Sæterås - Give Responsive Design a mobile performance boost
Jon Arne Sæterås - Give Responsive Design a mobile performance boost Jon Arne Sæterås - Give Responsive Design a mobile performance boost
Jon Arne Sæterås - Give Responsive Design a mobile performance boost
 
High Performance Mobile Web
High Performance Mobile WebHigh Performance Mobile Web
High Performance Mobile Web
 
7 Habits of Exceptional Performance
7 Habits of Exceptional Performance7 Habits of Exceptional Performance
7 Habits of Exceptional Performance
 
Developing High Performance Web Apps - CodeMash 2011
Developing High Performance Web Apps - CodeMash 2011Developing High Performance Web Apps - CodeMash 2011
Developing High Performance Web Apps - CodeMash 2011
 
Extreme Web Performance for Mobile Devices - Velocity NY
Extreme Web Performance for Mobile Devices - Velocity NYExtreme Web Performance for Mobile Devices - Velocity NY
Extreme Web Performance for Mobile Devices - Velocity NY
 
After YSlow "A"
After YSlow "A"After YSlow "A"
After YSlow "A"
 
Delivering Optimal Images for Phones and Tablets on the Modern Web
Delivering Optimal Images for Phones and Tablets on the Modern WebDelivering Optimal Images for Phones and Tablets on the Modern Web
Delivering Optimal Images for Phones and Tablets on the Modern Web
 
Image-ine That: Image Optimization for Conversion Maximization
Image-ine That: Image Optimization for Conversion MaximizationImage-ine That: Image Optimization for Conversion Maximization
Image-ine That: Image Optimization for Conversion Maximization
 
Mobile web performance dwx13
Mobile web performance dwx13Mobile web performance dwx13
Mobile web performance dwx13
 
Its timetostopstalling cambridgemot
Its timetostopstalling cambridgemotIts timetostopstalling cambridgemot
Its timetostopstalling cambridgemot
 
Fastandbeautiful porto
Fastandbeautiful portoFastandbeautiful porto
Fastandbeautiful porto
 
Fastandbeautiful full stackporto
Fastandbeautiful full stackportoFastandbeautiful full stackporto
Fastandbeautiful full stackporto
 
Fastandbeautiful oredev
Fastandbeautiful oredevFastandbeautiful oredev
Fastandbeautiful oredev
 
Fastandbeautiful ux wurzburg
Fastandbeautiful ux wurzburgFastandbeautiful ux wurzburg
Fastandbeautiful ux wurzburg
 
Threadneedle when its just too slow
Threadneedle when its just too slowThreadneedle when its just too slow
Threadneedle when its just too slow
 
Raiders of the Fast Start: Frontend Performance Archaeology - Performance.now...
Raiders of the Fast Start: Frontend Performance Archaeology - Performance.now...Raiders of the Fast Start: Frontend Performance Archaeology - Performance.now...
Raiders of the Fast Start: Frontend Performance Archaeology - Performance.now...
 
Fastandbeautiful full stacklondon
Fastandbeautiful full stacklondonFastandbeautiful full stacklondon
Fastandbeautiful full stacklondon
 
Happy Browser, Happy User! NY Web Performance Meetup 9/20/19
Happy Browser, Happy User! NY Web Performance Meetup 9/20/19Happy Browser, Happy User! NY Web Performance Meetup 9/20/19
Happy Browser, Happy User! NY Web Performance Meetup 9/20/19
 

Similar to Going Fast on the Mobile Web

Speed Up Wordpress Wordcamp Pdx 2009
Speed Up Wordpress Wordcamp Pdx 2009Speed Up Wordpress Wordcamp Pdx 2009
Speed Up Wordpress Wordcamp Pdx 2009Jason Grigsby
 
La musique via Internet et les réseaux mobiles
La musique via Internet et les réseaux mobilesLa musique via Internet et les réseaux mobiles
La musique via Internet et les réseaux mobilesSonnerie Iphone
 
State of the Mobile Industry -- Innotech Portland
State of the Mobile Industry -- Innotech PortlandState of the Mobile Industry -- Innotech Portland
State of the Mobile Industry -- Innotech PortlandJason Grigsby
 
Devfest Siberia Fast and Beautiful Images and Video
Devfest Siberia Fast and Beautiful Images and VideoDevfest Siberia Fast and Beautiful Images and Video
Devfest Siberia Fast and Beautiful Images and VideoDoug Sillars
 
Fastandbeautiful devfest london
Fastandbeautiful devfest londonFastandbeautiful devfest london
Fastandbeautiful devfest londonDoug Sillars
 
Fastandbeautiful dublin php
Fastandbeautiful dublin phpFastandbeautiful dublin php
Fastandbeautiful dublin phpDoug Sillars
 
Fastandbeautiful novi sad
Fastandbeautiful novi sadFastandbeautiful novi sad
Fastandbeautiful novi sadDoug Sillars
 
Fastandbeautiful vienna
Fastandbeautiful viennaFastandbeautiful vienna
Fastandbeautiful viennaDoug Sillars
 
Fastandbeautiful full stacklondon
Fastandbeautiful full stacklondonFastandbeautiful full stacklondon
Fastandbeautiful full stacklondonDoug Sillars
 
Fastandbeautiful zagrebtechsauna
Fastandbeautiful zagrebtechsaunaFastandbeautiful zagrebtechsauna
Fastandbeautiful zagrebtechsaunaDoug Sillars
 
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)Nicholas Zakas
 
Fastandbeautiful gdg sacremento
Fastandbeautiful gdg sacrementoFastandbeautiful gdg sacremento
Fastandbeautiful gdg sacrementoDoug Sillars
 
Fastandbeautiful webinale
Fastandbeautiful webinaleFastandbeautiful webinale
Fastandbeautiful webinaleDoug Sillars
 
Fastandbeautiful belgrade
Fastandbeautiful belgradeFastandbeautiful belgrade
Fastandbeautiful belgradeDoug Sillars
 
Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)Nicholas Zakas
 
Notts js fastandbeautiful
Notts js fastandbeautifulNotts js fastandbeautiful
Notts js fastandbeautifulDoug Sillars
 
Ux connect london_fastandbeautiful
Ux connect london_fastandbeautifulUx connect london_fastandbeautiful
Ux connect london_fastandbeautifulDoug Sillars
 

Similar to Going Fast on the Mobile Web (20)

Speed Up Wordpress Wordcamp Pdx 2009
Speed Up Wordpress Wordcamp Pdx 2009Speed Up Wordpress Wordcamp Pdx 2009
Speed Up Wordpress Wordcamp Pdx 2009
 
La musique via Internet et les réseaux mobiles
La musique via Internet et les réseaux mobilesLa musique via Internet et les réseaux mobiles
La musique via Internet et les réseaux mobiles
 
State of the Mobile Industry -- Innotech Portland
State of the Mobile Industry -- Innotech PortlandState of the Mobile Industry -- Innotech Portland
State of the Mobile Industry -- Innotech Portland
 
Devfest Siberia Fast and Beautiful Images and Video
Devfest Siberia Fast and Beautiful Images and VideoDevfest Siberia Fast and Beautiful Images and Video
Devfest Siberia Fast and Beautiful Images and Video
 
Keynote I
Keynote IKeynote I
Keynote I
 
Fastandbeautiful devfest london
Fastandbeautiful devfest londonFastandbeautiful devfest london
Fastandbeautiful devfest london
 
Fastandbeautiful dublin php
Fastandbeautiful dublin phpFastandbeautiful dublin php
Fastandbeautiful dublin php
 
Fastandbeautiful novi sad
Fastandbeautiful novi sadFastandbeautiful novi sad
Fastandbeautiful novi sad
 
Fastandbeautiful vienna
Fastandbeautiful viennaFastandbeautiful vienna
Fastandbeautiful vienna
 
Fastandbeautiful full stacklondon
Fastandbeautiful full stacklondonFastandbeautiful full stacklondon
Fastandbeautiful full stacklondon
 
Fastandbeautiful zagrebtechsauna
Fastandbeautiful zagrebtechsaunaFastandbeautiful zagrebtechsauna
Fastandbeautiful zagrebtechsauna
 
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
 
Fastandbeautiful gdg sacremento
Fastandbeautiful gdg sacrementoFastandbeautiful gdg sacremento
Fastandbeautiful gdg sacremento
 
Fastandbeautiful webinale
Fastandbeautiful webinaleFastandbeautiful webinale
Fastandbeautiful webinale
 
Cork ux Meetup
Cork ux MeetupCork ux Meetup
Cork ux Meetup
 
do u webview?
do u webview?do u webview?
do u webview?
 
Fastandbeautiful belgrade
Fastandbeautiful belgradeFastandbeautiful belgrade
Fastandbeautiful belgrade
 
Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)
 
Notts js fastandbeautiful
Notts js fastandbeautifulNotts js fastandbeautiful
Notts js fastandbeautiful
 
Ux connect london_fastandbeautiful
Ux connect london_fastandbeautifulUx connect london_fastandbeautiful
Ux connect london_fastandbeautiful
 

More from Jason Grigsby

Planning Your Progressive Web App
Planning Your Progressive Web AppPlanning Your Progressive Web App
Planning Your Progressive Web AppJason Grigsby
 
Progressive Web App Challenges
Progressive Web App ChallengesProgressive Web App Challenges
Progressive Web App ChallengesJason Grigsby
 
Why Progressive Web Apps will transform your website
Why Progressive Web Apps will transform your websiteWhy Progressive Web Apps will transform your website
Why Progressive Web Apps will transform your websiteJason Grigsby
 
The Case for Progressive Web Apps
The Case for Progressive Web AppsThe Case for Progressive Web Apps
The Case for Progressive Web AppsJason Grigsby
 
Adapting to Input — Smashing Conference NYC
Adapting to Input — Smashing Conference NYCAdapting to Input — Smashing Conference NYC
Adapting to Input — Smashing Conference NYCJason Grigsby
 
Responsive images are here. Now what?
Responsive images are here. Now what?Responsive images are here. Now what?
Responsive images are here. Now what?Jason Grigsby
 
Mobile First Responsive Web Design — BD Conf Oct 2013
Mobile First Responsive Web Design — BD Conf Oct 2013Mobile First Responsive Web Design — BD Conf Oct 2013
Mobile First Responsive Web Design — BD Conf Oct 2013Jason Grigsby
 
Responsive Images and Video
Responsive Images and VideoResponsive Images and Video
Responsive Images and VideoJason Grigsby
 
When responsive web design meets the real world
When responsive web design meets the real worldWhen responsive web design meets the real world
When responsive web design meets the real worldJason Grigsby
 
Adaptive Input — Breaking Development Conference, San Diego
Adaptive Input — Breaking Development Conference, San DiegoAdaptive Input — Breaking Development Conference, San Diego
Adaptive Input — Breaking Development Conference, San DiegoJason Grigsby
 
Mobile First Responsive Design
Mobile First Responsive DesignMobile First Responsive Design
Mobile First Responsive DesignJason Grigsby
 
Casting Off Our Desktop Shackles
Casting Off Our Desktop ShacklesCasting Off Our Desktop Shackles
Casting Off Our Desktop ShacklesJason Grigsby
 
Mobile: The Market, The Web and Windows Phone’s Future
Mobile: The Market, The Web and Windows Phone’s Future Mobile: The Market, The Web and Windows Phone’s Future
Mobile: The Market, The Web and Windows Phone’s Future Jason Grigsby
 
Native is easy. Mobile web is freaking hard.
Native is easy. Mobile web is freaking hard.Native is easy. Mobile web is freaking hard.
Native is easy. Mobile web is freaking hard.Jason Grigsby
 
Innotech - Get Me a Mobile Strategy or You’re Fired!
Innotech - Get Me a Mobile Strategy or You’re Fired!Innotech - Get Me a Mobile Strategy or You’re Fired!
Innotech - Get Me a Mobile Strategy or You’re Fired!Jason Grigsby
 
Where 2.0 -- Get me a mobile strategy or you’re fired!
Where 2.0 -- Get me a mobile strategy or you’re fired!Where 2.0 -- Get me a mobile strategy or you’re fired!
Where 2.0 -- Get me a mobile strategy or you’re fired!Jason Grigsby
 
Native is easy. Web is essential.
Native is easy. Web is essential.Native is easy. Web is essential.
Native is easy. Web is essential.Jason Grigsby
 
Journalism and the Future of Mobile
Journalism and the Future of MobileJournalism and the Future of Mobile
Journalism and the Future of MobileJason Grigsby
 
Get Me a Mobile Strategy or You're Fired - Central Oregon Ad Fed
Get Me a Mobile Strategy or You're Fired  - Central Oregon Ad FedGet Me a Mobile Strategy or You're Fired  - Central Oregon Ad Fed
Get Me a Mobile Strategy or You're Fired - Central Oregon Ad FedJason Grigsby
 

More from Jason Grigsby (20)

Planning Your Progressive Web App
Planning Your Progressive Web AppPlanning Your Progressive Web App
Planning Your Progressive Web App
 
Progressive Web App Challenges
Progressive Web App ChallengesProgressive Web App Challenges
Progressive Web App Challenges
 
Why Progressive Web Apps will transform your website
Why Progressive Web Apps will transform your websiteWhy Progressive Web Apps will transform your website
Why Progressive Web Apps will transform your website
 
The Case for Progressive Web Apps
The Case for Progressive Web AppsThe Case for Progressive Web Apps
The Case for Progressive Web Apps
 
Adapting to Input — Smashing Conference NYC
Adapting to Input — Smashing Conference NYCAdapting to Input — Smashing Conference NYC
Adapting to Input — Smashing Conference NYC
 
Responsive images are here. Now what?
Responsive images are here. Now what?Responsive images are here. Now what?
Responsive images are here. Now what?
 
Mobile First Responsive Web Design — BD Conf Oct 2013
Mobile First Responsive Web Design — BD Conf Oct 2013Mobile First Responsive Web Design — BD Conf Oct 2013
Mobile First Responsive Web Design — BD Conf Oct 2013
 
Responsive Images and Video
Responsive Images and VideoResponsive Images and Video
Responsive Images and Video
 
When responsive web design meets the real world
When responsive web design meets the real worldWhen responsive web design meets the real world
When responsive web design meets the real world
 
Adaptive Input — Breaking Development Conference, San Diego
Adaptive Input — Breaking Development Conference, San DiegoAdaptive Input — Breaking Development Conference, San Diego
Adaptive Input — Breaking Development Conference, San Diego
 
Mobile First Responsive Design
Mobile First Responsive DesignMobile First Responsive Design
Mobile First Responsive Design
 
Casting Off Our Desktop Shackles
Casting Off Our Desktop ShacklesCasting Off Our Desktop Shackles
Casting Off Our Desktop Shackles
 
The Immobile Web
The Immobile WebThe Immobile Web
The Immobile Web
 
Mobile: The Market, The Web and Windows Phone’s Future
Mobile: The Market, The Web and Windows Phone’s Future Mobile: The Market, The Web and Windows Phone’s Future
Mobile: The Market, The Web and Windows Phone’s Future
 
Native is easy. Mobile web is freaking hard.
Native is easy. Mobile web is freaking hard.Native is easy. Mobile web is freaking hard.
Native is easy. Mobile web is freaking hard.
 
Innotech - Get Me a Mobile Strategy or You’re Fired!
Innotech - Get Me a Mobile Strategy or You’re Fired!Innotech - Get Me a Mobile Strategy or You’re Fired!
Innotech - Get Me a Mobile Strategy or You’re Fired!
 
Where 2.0 -- Get me a mobile strategy or you’re fired!
Where 2.0 -- Get me a mobile strategy or you’re fired!Where 2.0 -- Get me a mobile strategy or you’re fired!
Where 2.0 -- Get me a mobile strategy or you’re fired!
 
Native is easy. Web is essential.
Native is easy. Web is essential.Native is easy. Web is essential.
Native is easy. Web is essential.
 
Journalism and the Future of Mobile
Journalism and the Future of MobileJournalism and the Future of Mobile
Journalism and the Future of Mobile
 
Get Me a Mobile Strategy or You're Fired - Central Oregon Ad Fed
Get Me a Mobile Strategy or You're Fired  - Central Oregon Ad FedGet Me a Mobile Strategy or You're Fired  - Central Oregon Ad Fed
Get Me a Mobile Strategy or You're Fired - Central Oregon Ad Fed
 

Recently uploaded

"The Transformative Power of AI and Open Challenges" by Dr. Manish Gupta, Google
"The Transformative Power of AI and Open Challenges" by Dr. Manish Gupta, Google"The Transformative Power of AI and Open Challenges" by Dr. Manish Gupta, Google
"The Transformative Power of AI and Open Challenges" by Dr. Manish Gupta, GoogleISPMAIndia
 
Building Products That Think- Bhaskaran Srinivasan & Ashish Gupta
Building Products That Think- Bhaskaran Srinivasan & Ashish GuptaBuilding Products That Think- Bhaskaran Srinivasan & Ashish Gupta
Building Products That Think- Bhaskaran Srinivasan & Ashish GuptaISPMAIndia
 
Automation Ops Series: Session 1 - Introduction and setup DevOps for UiPath p...
Automation Ops Series: Session 1 - Introduction and setup DevOps for UiPath p...Automation Ops Series: Session 1 - Introduction and setup DevOps for UiPath p...
Automation Ops Series: Session 1 - Introduction and setup DevOps for UiPath p...DianaGray10
 
Leonis Insights: The State of AI (7 trends for 2023 and 7 predictions for 2024)
Leonis Insights: The State of AI (7 trends for 2023 and 7 predictions for 2024)Leonis Insights: The State of AI (7 trends for 2023 and 7 predictions for 2024)
Leonis Insights: The State of AI (7 trends for 2023 and 7 predictions for 2024)Jay Zhao
 
Are Human-generated Demonstrations Necessary for In-context Learning?
Are Human-generated Demonstrations Necessary for In-context Learning?Are Human-generated Demonstrations Necessary for In-context Learning?
Are Human-generated Demonstrations Necessary for In-context Learning?MENGSAYLOEM1
 
From Challenger to Champion: How SpiraPlan Outperforms JIRA+Plugins
From Challenger to Champion: How SpiraPlan Outperforms JIRA+PluginsFrom Challenger to Champion: How SpiraPlan Outperforms JIRA+Plugins
From Challenger to Champion: How SpiraPlan Outperforms JIRA+PluginsInflectra
 
Launching New Products In Companies Where It Matters Most by Product Director...
Launching New Products In Companies Where It Matters Most by Product Director...Launching New Products In Companies Where It Matters Most by Product Director...
Launching New Products In Companies Where It Matters Most by Product Director...Product School
 
"AIRe - AI Reliability Engineering", Denys Vasyliev
"AIRe - AI Reliability Engineering", Denys Vasyliev"AIRe - AI Reliability Engineering", Denys Vasyliev
"AIRe - AI Reliability Engineering", Denys VasylievFwdays
 
"Testing of Helm Charts or There and Back Again", Yura Rochniak
"Testing of Helm Charts or There and Back Again", Yura Rochniak"Testing of Helm Charts or There and Back Again", Yura Rochniak
"Testing of Helm Charts or There and Back Again", Yura RochniakFwdays
 
Act Like an Owner, Challenge Like a VC by former CPO, Tripadvisor
Act Like an Owner,  Challenge Like a VC by former CPO, TripadvisorAct Like an Owner,  Challenge Like a VC by former CPO, Tripadvisor
Act Like an Owner, Challenge Like a VC by former CPO, TripadvisorProduct School
 
Pragmatic UI testing with Compose Semantics.pdf
Pragmatic UI testing with Compose Semantics.pdfPragmatic UI testing with Compose Semantics.pdf
Pragmatic UI testing with Compose Semantics.pdfinfogdgmi
 
Mind your App Footprint 🐾⚡️🌱 (@FlutterHeroes 2024)
Mind your App Footprint 🐾⚡️🌱 (@FlutterHeroes 2024)Mind your App Footprint 🐾⚡️🌱 (@FlutterHeroes 2024)
Mind your App Footprint 🐾⚡️🌱 (@FlutterHeroes 2024)François
 
AI MODELS USAGE IN FINTECH PRODUCTS: PM APPROACH & BEST PRACTICES by Kasthuri...
AI MODELS USAGE IN FINTECH PRODUCTS: PM APPROACH & BEST PRACTICES by Kasthuri...AI MODELS USAGE IN FINTECH PRODUCTS: PM APPROACH & BEST PRACTICES by Kasthuri...
AI MODELS USAGE IN FINTECH PRODUCTS: PM APPROACH & BEST PRACTICES by Kasthuri...ISPMAIndia
 
Artificial Intelligence, Design, and More-than-Human Justice
Artificial Intelligence, Design, and More-than-Human JusticeArtificial Intelligence, Design, and More-than-Human Justice
Artificial Intelligence, Design, and More-than-Human JusticeJosh Gellers
 
ASTRAZENECA. Knowledge Graphs Powering a Fast-moving Global Life Sciences Org...
ASTRAZENECA. Knowledge Graphs Powering a Fast-moving Global Life Sciences Org...ASTRAZENECA. Knowledge Graphs Powering a Fast-moving Global Life Sciences Org...
ASTRAZENECA. Knowledge Graphs Powering a Fast-moving Global Life Sciences Org...Neo4j
 
Centralized TLS Certificates Management Using Vault PKI + Cert-Manager
Centralized TLS Certificates Management Using Vault PKI + Cert-ManagerCentralized TLS Certificates Management Using Vault PKI + Cert-Manager
Centralized TLS Certificates Management Using Vault PKI + Cert-ManagerSaiLinnThu2
 
Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...
Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...
Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...UiPathCommunity
 
"DevOps Practisting Platform on EKS with Karpenter autoscaling", Dmytro Kozhevin
"DevOps Practisting Platform on EKS with Karpenter autoscaling", Dmytro Kozhevin"DevOps Practisting Platform on EKS with Karpenter autoscaling", Dmytro Kozhevin
"DevOps Practisting Platform on EKS with Karpenter autoscaling", Dmytro KozhevinFwdays
 
Confoo 2024 Gettings started with OpenAI and data science
Confoo 2024 Gettings started with OpenAI and data scienceConfoo 2024 Gettings started with OpenAI and data science
Confoo 2024 Gettings started with OpenAI and data scienceSusan Ibach
 
Building Bridges: Merging RPA Processes, UiPath Apps, and Data Service to bu...
Building Bridges:  Merging RPA Processes, UiPath Apps, and Data Service to bu...Building Bridges:  Merging RPA Processes, UiPath Apps, and Data Service to bu...
Building Bridges: Merging RPA Processes, UiPath Apps, and Data Service to bu...DianaGray10
 

Recently uploaded (20)

"The Transformative Power of AI and Open Challenges" by Dr. Manish Gupta, Google
"The Transformative Power of AI and Open Challenges" by Dr. Manish Gupta, Google"The Transformative Power of AI and Open Challenges" by Dr. Manish Gupta, Google
"The Transformative Power of AI and Open Challenges" by Dr. Manish Gupta, Google
 
Building Products That Think- Bhaskaran Srinivasan & Ashish Gupta
Building Products That Think- Bhaskaran Srinivasan & Ashish GuptaBuilding Products That Think- Bhaskaran Srinivasan & Ashish Gupta
Building Products That Think- Bhaskaran Srinivasan & Ashish Gupta
 
Automation Ops Series: Session 1 - Introduction and setup DevOps for UiPath p...
Automation Ops Series: Session 1 - Introduction and setup DevOps for UiPath p...Automation Ops Series: Session 1 - Introduction and setup DevOps for UiPath p...
Automation Ops Series: Session 1 - Introduction and setup DevOps for UiPath p...
 
Leonis Insights: The State of AI (7 trends for 2023 and 7 predictions for 2024)
Leonis Insights: The State of AI (7 trends for 2023 and 7 predictions for 2024)Leonis Insights: The State of AI (7 trends for 2023 and 7 predictions for 2024)
Leonis Insights: The State of AI (7 trends for 2023 and 7 predictions for 2024)
 
Are Human-generated Demonstrations Necessary for In-context Learning?
Are Human-generated Demonstrations Necessary for In-context Learning?Are Human-generated Demonstrations Necessary for In-context Learning?
Are Human-generated Demonstrations Necessary for In-context Learning?
 
From Challenger to Champion: How SpiraPlan Outperforms JIRA+Plugins
From Challenger to Champion: How SpiraPlan Outperforms JIRA+PluginsFrom Challenger to Champion: How SpiraPlan Outperforms JIRA+Plugins
From Challenger to Champion: How SpiraPlan Outperforms JIRA+Plugins
 
Launching New Products In Companies Where It Matters Most by Product Director...
Launching New Products In Companies Where It Matters Most by Product Director...Launching New Products In Companies Where It Matters Most by Product Director...
Launching New Products In Companies Where It Matters Most by Product Director...
 
"AIRe - AI Reliability Engineering", Denys Vasyliev
"AIRe - AI Reliability Engineering", Denys Vasyliev"AIRe - AI Reliability Engineering", Denys Vasyliev
"AIRe - AI Reliability Engineering", Denys Vasyliev
 
"Testing of Helm Charts or There and Back Again", Yura Rochniak
"Testing of Helm Charts or There and Back Again", Yura Rochniak"Testing of Helm Charts or There and Back Again", Yura Rochniak
"Testing of Helm Charts or There and Back Again", Yura Rochniak
 
Act Like an Owner, Challenge Like a VC by former CPO, Tripadvisor
Act Like an Owner,  Challenge Like a VC by former CPO, TripadvisorAct Like an Owner,  Challenge Like a VC by former CPO, Tripadvisor
Act Like an Owner, Challenge Like a VC by former CPO, Tripadvisor
 
Pragmatic UI testing with Compose Semantics.pdf
Pragmatic UI testing with Compose Semantics.pdfPragmatic UI testing with Compose Semantics.pdf
Pragmatic UI testing with Compose Semantics.pdf
 
Mind your App Footprint 🐾⚡️🌱 (@FlutterHeroes 2024)
Mind your App Footprint 🐾⚡️🌱 (@FlutterHeroes 2024)Mind your App Footprint 🐾⚡️🌱 (@FlutterHeroes 2024)
Mind your App Footprint 🐾⚡️🌱 (@FlutterHeroes 2024)
 
AI MODELS USAGE IN FINTECH PRODUCTS: PM APPROACH & BEST PRACTICES by Kasthuri...
AI MODELS USAGE IN FINTECH PRODUCTS: PM APPROACH & BEST PRACTICES by Kasthuri...AI MODELS USAGE IN FINTECH PRODUCTS: PM APPROACH & BEST PRACTICES by Kasthuri...
AI MODELS USAGE IN FINTECH PRODUCTS: PM APPROACH & BEST PRACTICES by Kasthuri...
 
Artificial Intelligence, Design, and More-than-Human Justice
Artificial Intelligence, Design, and More-than-Human JusticeArtificial Intelligence, Design, and More-than-Human Justice
Artificial Intelligence, Design, and More-than-Human Justice
 
ASTRAZENECA. Knowledge Graphs Powering a Fast-moving Global Life Sciences Org...
ASTRAZENECA. Knowledge Graphs Powering a Fast-moving Global Life Sciences Org...ASTRAZENECA. Knowledge Graphs Powering a Fast-moving Global Life Sciences Org...
ASTRAZENECA. Knowledge Graphs Powering a Fast-moving Global Life Sciences Org...
 
Centralized TLS Certificates Management Using Vault PKI + Cert-Manager
Centralized TLS Certificates Management Using Vault PKI + Cert-ManagerCentralized TLS Certificates Management Using Vault PKI + Cert-Manager
Centralized TLS Certificates Management Using Vault PKI + Cert-Manager
 
Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...
Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...
Dev Dives: Leverage APIs and Gen AI to power automations for RPA and software...
 
"DevOps Practisting Platform on EKS with Karpenter autoscaling", Dmytro Kozhevin
"DevOps Practisting Platform on EKS with Karpenter autoscaling", Dmytro Kozhevin"DevOps Practisting Platform on EKS with Karpenter autoscaling", Dmytro Kozhevin
"DevOps Practisting Platform on EKS with Karpenter autoscaling", Dmytro Kozhevin
 
Confoo 2024 Gettings started with OpenAI and data science
Confoo 2024 Gettings started with OpenAI and data scienceConfoo 2024 Gettings started with OpenAI and data science
Confoo 2024 Gettings started with OpenAI and data science
 
Building Bridges: Merging RPA Processes, UiPath Apps, and Data Service to bu...
Building Bridges:  Merging RPA Processes, UiPath Apps, and Data Service to bu...Building Bridges:  Merging RPA Processes, UiPath Apps, and Data Service to bu...
Building Bridges: Merging RPA Processes, UiPath Apps, and Data Service to bu...
 

Going Fast on the Mobile Web

  • 1. Going Fast on the Mobile Web by Jason Grigsby Flickr: Uploaded February 11, 2007 by hawridger Work: http://cloudfour.com • Blog: http://userfirstweb.com • Twitter: @grigs Mobile Concurrency Test: http://cloudfour.com/mobile/
  • 2. The Mobile Web is Coming. Web Developers aren’t Ready. Flickr photo by look4u: http://www.flickr.com/photos/look4u/279668622/
  • 3. 3.3 Billion Mobile phone for half the planet. Flickr photo by Pingnews: http://www.flickr.com/photos/pingnews/370061022/
  • 4. 3.3 Billion in Perspective Source: http://communities-dominate.blogs.com/brands/2007/01/putting_27_bill.html http://communities-dominate.blogs.com/brands/2008/01/when-there-is-a.html
  • 5. 2007 SMS Revenue: 100 billion •Box Office •DVD Sales & Rentals Combined •Music Industry •Video Games Flickr photo by Vlastula: http://www.flickr.com/photos/vlastula/450642954/
  • 6. Mobile is the Technology that Cried Wolf. (for 15 years) Flickr photo by CaptPiper: http://www.flickr.com/photos/piper/197153406/
  • 7. “The Mother of all Markets.” Dr. Eli Harai, San Disk CEO, 2008 John Sculley, Apple CEO, 1992 http://query.nytimes.com/gst/fullpage.html?res=9E0CE5D9143AF93AA25754C0A964958260
  • 8. U.S. is behind in Mobile Technology (A.K.A. Why people got hung up on Japanese use of mobile phones to read books during Lynne D Johnson’s Keynote yesterday) • Penetration Rates: Leaders: > 140% (Italy, S. Korea); US: 80% • Networks: 3G launched in 2001 in Japan & S. Korea • Handsets: iPhone not seen considered as innovative in other countries where they’ve had advanced phones for some time. Poorer countries willing to pay more for advanced handsets. • Services: SMS per day per subscriber: S. Korea 10, Singapore 12, Philippines 15, U.S. 2.
  • 10. Gopher, Mosaic, WAP, iPhone Flickr photo by: http://www.flickr.com/photos/vixon/352427852/
  • 11. Gopher, Mosaic, WAP, iPhone Flickr photo by: http://www.flickr.com/photos/vixon/352427852/
  • 12. Gopher, Mosaic, WAP, iPhone Flickr photo by: http://www.flickr.com/photos/vixon/352427852/
  • 13. Gopher, Mosaic, WAP, iPhone Flickr photo by: http://www.flickr.com/photos/vixon/352427852/
  • 14. January 2008 Mobile Browser Stats iPhone + iPod WinCE Symbian Hiptop 8% 4% 23% 65% Source: www.netapplications.com
  • 15. “It’s about usage. Not units” • Number of queries on Google search from iPhones surpassed those from Symbian-based phones in the days after Christmas. Nokia’s Symbian-based phones are 40% of the market worldwide. • German iPhone users consume 30 times more data. • 95% of iPhone customers regularly surf the Internet. Data services revenue increased from $2.7 billion in 2005 to $6.9 billion in 2007. • Google sees 50 times the number of searches using the iPhone than any other mobile device. They were so surprised, they asked their engineers to check the logs to make sure it was correct. • This is why major companies, Google, Quicken, etc. are all launching iPhone-optimized services despite the iPhone’s 1% market share.
  • 16. Why We’re Not Ready to Ride the Mobile Wave Flickr photo by .Hessam: http://www.flickr.com/photos/essamo/1070527547/
  • 17. 1996 1996 235 258 pages pages 1997 238 pages 1997 447 pages 1997 235 pages
  • 18. We’ve Left Optimization Behind Flickr photo by mfajardo: http://www.flickr.com/photos/mfajardo/396104047/
  • 19. We’ve Become Bandwidth Gluttons Since 2003: • Web Page Size Tripled •# of Objects Doubled Since 1995: • Web Page Size: 22x •# of Objects: 21x Source: http://www.websiteoptimization.com/speed/tweak/average-web-page/
  • 20. 2003: Business Critical Look at Speed •Customer complaints •Limits of our 3 T-1s near •Months away from new data center Flickr: Uploaded November 13, 2003 by Wools
  • 21. GBs of Data Transfer 60 45 30 15 0 Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec
  • 22. 75% faster page loads 7 months in data center Flickr: Uploaded August 2, 2006 by pbo31
  • 23. Optimizing for Flow 0.1 seconds — Viewed as Instantaneous 1.0 seconds — Moving Freely 10 seconds — Retain Focus on Task Flickr: Uploaded August 7, 2007 by .Hessam
  • 24. Web Speed = Perception Q ua lity sa bi lity U dibi lity C re erv ice S Flickr: Uploaded October 15, 2006 by mattlogelin
  • 25. Yahoo!’s 80/20 Rule Source: http://yuiblog.com/blog/2006/11/28/performance-research-part-1/
  • 26. Yahoo!’s 13 Performance Rules (Now 34!) 1. Make Fewer HTTP Requests 8. Make JavaScript and CSS External 2. Use a Content Delivery Network 9. Reduce DNS Lookups 3. Add an Expires Header 10.Minify JavaScript 4. Gzip Components 11.Avoid Redirects 5. Put Stylesheets at the Top 12.Remove Duplicate Scripts 6. Move Scripts to the Bottom 13.Configure ETags 7. Avoid CSS Expressions Source: http://developer.yahoo.com/performance/rules.html
  • 27. GZIP Compression • If you do nothing else, DO THIS! • GZIP can reduce files and download time up to 75%. • Works on HTML, CSS, Javascript, XML and JSON files • Most browsers handle GZIP correctly and the libraries like mod_gzip handle exceptions correctly. Flickr: Uploaded February 11, 2007 by hawridger
  • 28. GZIP Case Study from Our 2003 Efforts Version HTML CSS JS Total 40,837 17,764 1,443 60,044 Original bytes bytes bytes bytes 24,907 5,320 1,443 31,670 Optimized bytes bytes bytes bytes 5,722 5,320 1,443 12,485 GZIP bytes bytes bytes* bytes Nearly 80% reduction in file size.
  • 29. Fewer HTTP Requests Most browsers only open 2 http connections to one domain at a time. Flickr: Uploaded April 28, 2007 by ((IANB))
  • 30. Parallel HTTP Requests One Domain Two Domains Source: http://yuiblog.com/blog/2007/04/11/performance-research-part-4
  • 31. How do these rules apply to the mobile web?
  • 32. Numerous Mobile Browsers: Little Documentation • Access • Opera Mini • Access Netfront • Opera Mobile • BlackBerry • Palm • IE Mobile • Safari • Motorola Internet Browser • Samsung • Nokia • Teleca-Obigo • Openwave Mobile Browser • WinWAP No information on gzip support or # of concurrent connections. Source: http://wurfl.sourceforge.net/
  • 33. Cloud Four’s Mobile Browser Test • Tests for number of concurrent connections and multiple domains. • Looks for GZIP support. • Looks for caching support. • Works in any browser (even desktop): • No javascript • XHTML-MP • http://www.cloudfour.com/mobile/ or simple text MOBILETEST to 41411.
  • 34. Cloud Four’s Mobile Browser Test • Tests for number of concurrent connections and multiple domains. • Looks for GZIP support. • Looks for caching support. • Works in any browser (even desktop): • No javascript • XHTML-MP • http://www.cloudfour.com/mobile/ or simple text MOBILETEST to 41411.
  • 35. How Does the Test Work? deliver test page deliver delayed deliver remaining to device under test images images { delay until timeout } (Server) t-zero t-finish (Device) (15 seconds) start test request images from server(s) request render test remaining page for user images • Generates a unique token for this test • Records selected HTTP headers for later analysis • Computes the finish time (microsecond granularity) for the test, based on the current time and our desired delay factor • Creates a database record for the test, containing: the token, start time, finish time, and zeroed counters for four separate domains • Generates and delivers the test page containing 64 small (4x4 px) image requests evenly distributed across four separate domains • Waits for the browser to fetch all images and render the page
  • 36. Initial Results — Still Looking for More Testers GZIP 17% •Over 1,300 tests No GZIP •448 Unique User Agents 83% •169 Unique Mobile User Caching Agents No Caching 32% •Fun items like 68% Kindle, PS3, Zune.
  • 37. Major Mobile Browsers Total Browser GZIP Caching Domain1 Domain 2 Domain 3 Domain 4 Connections Blackberry Browser 20% 71% 4 0 0 0 4 IE Mobile 6.x 83% 100% 3 0 0 0 3 IE Mobile 7.x 100% 89% 3 0 0 0 3 Opera Mini 3.x 100% 100% 10 10 10 10 40 Opera Mini 4.x 100% 0% 2 1 1 1 5 Opera Mobile 8.x 86% 89% 2 2 2 2 8 Safari (iPhone/iPod) 100% 100% 4 4 4 4 16 Symbian (WebKit) 100% 100% 7 0 0 0 7
  • 38. Other Mobile Browsers Total Browser GZIP Caching Domain1 Domain 2 Domain 3 Domain 4 Connections Danger Hiptop 0% ? 3 0 0 0 3 Jataayu 100% 0% 10 0 0 0 10 NetFront 3.x 87% 100% 1 to 4 0 0 0 1 to 4 Nokia Browser 100% 100% 1 to 7 0 to 5 0 to 1 0 to 1 4 to 12 Obigo 0% 0% 3 0 0 0 3 Open Wave Mobile 6.2 100% 0% 4 0 0 0 4 Palm Blazer 71% 50% 4 0 0 0 4 SEMC Browser 100% ? 2 2 2 2 8 UP.Browser 50% 100% 1 to 4 0 0 0 1 to 4 Zune 100% 100% 16 16 16 16 64
  • 39. Preliminary Conclusions from Our Tests • GZIP support is much better than we anticipated. • Caching support is much less than we anticipated. • Full 3G speeds will only come for Windows Mobile and Blackberries after they address their browser deficiencies (concurrent connections, rendering engines and processor speed). • Lots of variability between browsers means necessary testing. • Still much to learn about mobile browser performance
  • 40. Other Mobile Browser Characteristics • Two sites that help you understand mobile device properties: • WURFL: http:// wurfl.sourceforge.net/ • Device Atlas: http:// www.deviceatlas.com/ • Our concurrency test to be included in the DeviceAtlas database. • Also published under creative commons.
  • 41. Eight Recommendations for All Mobile Devices 1. Turn on GZIP Compression 5. Simple, Valid Markup 2. Fewer Files 6. Reduce DNS Lookups 3. Aggressively Encourage Caching 7. Avoid Redirects 4. Minimize File Sizes 8. Limit Cookies Likely benefit from all 34 Yahoo! guidelines. http://developer.yahoo.com/performance/rules.html
  • 42. Flickr photo by amaneiro: http://www.flickr.com/ photos/amaneiro/ 2396649106/ #1 Compressed, but fully functional. GZIP
  • 43. 2. Fewer Files •HTTP Connections are expensive •No more than 1 external CSS & 1 external JS •Consider embedding CSS & JS unless you are confident about your caching. •Remove any unnecessary files (print css) •If CSS is supported, use CSS sprites. •Consider inline images using data url Flickr photo by mkw87: http://www.flickr.com/photo_zoom.gne?id=437942494&size=l
  • 44. 2. Fewer Files: Inline Images <img src=quot;data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/ 0jvb29t/f3//Ub//ge8WSLf/rhf/3kdbW1mxsbP//mf/// yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcppV0aCcGCmT IHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgY Pj/gAwXEQA7quot; width=quot;16quot; height=quot;14quot; alt=quot;embedded folder iconquot; /> background:url(data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/ 0jvb29t/f3//Ub//ge8WSLf/rhf/3kdbW1mxsbP//mf/// yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcppV0aCcGCmT IHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgY Pj/gAwXEQA7) top left no-repeat; ) Test extensively. Not supported in all browsers. Flickr photo by mkw87: http://www.flickr.com/photo_zoom.gne?id=437942494&size=l
  • 45. 3. Aggressively Encourage Caching •Goal #1: No HTTP HEAD Requests. •Add Expires header. Put it far into the future. •Develop naming conventions for versioning of files. Update filename when file is modified. e.g., logo080523.png •Keep files under 25k for mobile devices. •Configure or remove ETags from files. •Watch your logs to make sure caching works. Flickr photo by John Wardell (Netinho): http://www.flickr.com/photo_zoom.gne?id=760902403&size=l
  • 46. 4. Minimize File Sizes •Three reasons why file size matters: •Download time •Caching •Memory •Minimize all html, css, & javascript regardless of GZIP. •Squeeze all unnecessary data out of images. Remember every bit counts! Flickr photo by Amodiovalerio Verde: http://www.flickr.com/photo_zoom.gne?id=425333516&size=o
  • 47. 5. Simple, Valid Markup • CSS-based vs. table layouts Tables are complex to render. • Separate content, style, behavior • Less markup overall • ESPN proved that this change can be significant alone. • Consider processing time to determine layout in addition to download time. Flickr photo by bertheymans: http://www.flickr.com/photo_zoom.gne?id=337851288&size=l September 19 • DevGroup NW Jason Grigsby • http://userfirstweb.com
  • 48. 6. Reduce DNS Lookups • Each DNS lookup costs performance. No control over the DNS speed. • Nothing can be downloaded from the domain until the lookup completes. • Optimum is between 2 and no more than 4 domains per web page because of concurrent download benefits. Flickr photo by André-Batista: http://www.flickr.com/photo_zoom.gne?id=408700622&size=o September 19 • DevGroup NW Jason Grigsby • http://userfirstweb.com
  • 49. 7. Avoid Redirects •Redirects cost the user time so avoid the easy ones. Particularly painful for mobile. •Permanent 301 redirects should be modified to be cacheable (expires header) •Put the trailing slash on your links and shave time off of Apache doing the work. Flickr photo by (nz) dave: http://www.flickr.com/photo_zoom.gne?id=245728298&size=l
  • 50. 8. Limit Cookies • Cookies uploaded with every request! Upload rates are much slower than download speeds. • Goal: Zero or One Cookie. Diet time! • Make the cookie as small as possible. Track details on the server side. • Use www or other sub-domain and restrict cookies to that domain. • Move images, css, javascript to another domain where cookies will not be used.
  • 51. Eight Recommendations for Post iPhone Devices 1.Optimize javascript performance 2.Reduce DOM elements 3.Javascript at bottom of page 4.CSS in the head tag 5.Lazy Load Components 6.Use GET unless you need POST 7.Use JSON instead of XML 8.Use hardware accelerated effects
  • 57. Flickr photo by MarkKelley: http://www.flickr.com/photos/markkelley/1022720488/
  • 58. Flickr photo by localsurfer: http://www.flickr.com/photos/localsurfer/180834588/ Embrace the constraints Make optimization a game
  • 59. Thank You for Your Time Mobile Portland Meets on 4th Monday Next Meeting Tuesday(!) May 27th, 6 pm Join us at our next meeting or Google Group. http://mobileportland.com Work: http://cloudfour.com • Blog: http://userfirstweb.com • Twitter: @grigs Mobile Concurrency Test: http://cloudfour.com/mobile/