SlideShare a Scribd company logo
1 of 46
Download to read offline
Don't touch the mobile parts
Francesco Fullone <ff@ideato.it>
Twitter @fullo
Who am I

Francesco Fullone aka Fullo

- PHP developer since 1999
-               President
-         and Open Source Evangelist
- CEO @
- founder @


- Nerd and geek
In the previous* WPO episodes



* “don't touch the slow parts ” [ http://ow.ly/5ihyb ] and “extended slow parts” [ http://ow.ly/5ihLT ]
Kate and Jack discovered that the
      80% of loading time
        is on the browser
In the same time Locke
     understood that
resource loading order
         matters
Sayid tried to
    cut the bandwidth usage
decreasing files number and size...
… helped by Hurley whom
   reduces downloads forcing
headers to enable browser cache
at the same time, the “Others” studied
  the new possibilities offered by the
               HTML5
They never believe that
  mobile WPO is an even more
mysterious and frightening journey...
...and that 97% of performance
    issues happen at frontend*




   * from webperformancetoday.com [ http://ow.ly/5hd35 ]
The Browser Chapter
On a smartphone a web page
is rendered from 40% to 80% slower
          than on a desktop.
A lot of different browsers

         Pre-installed webkit
  (iOS, Android, Blackberry, webOS, Symbian …)
     Pre-installed non-webkit
(Bada, old Blackberry, Internet Explorer, DoCoMo …)
            User installable
      (Opera Mobile/Mini, Firefox, Skyfire ...)
Same engine doesn't mean
    same behaviours
We have to talk about
mobile browser families:

      Smartphone
       Mid-End
       Low-End
Mid-End to Low-End browsers
   families lost (randomly):

       HTML5 support
        CSS3 support
       Caching quota
            Ajax
Still...
Symbian's Anna WebKit browser* has

              No Application Cache
              No Geolocalization API
              No HTML5 Audio/Video tags
              Very limited CSS3 support


     * Released on April 2011 for X7 and E6 Nokia Smartphones
CSS Expressions and iFrames don't
  work on most mobile browsers
Different country* means different browser




                    * From icrossing.co.uk [ http://ow.ly/5hanY ]
Caching, now, is not a difficult task


     * browserscope.org helps us [ http://ow.ly/5h8Db ]
New iOS* and Android browsers have

   4Mb file cache (uncompressed)
  4Mb total cache (uncompressed)
  1Mb limit for file execution (js/css)
   * but cache is invalidated at the reboot [ http://ow.ly/5h8G4 ]
But...
Old iOS 3.x browser* had

       25.6Kb file cache
1Mb total cache (uncompressed)




     * and a lot of other low-end browsers
The Network Chapter
3G Networks are slow, with higher
      latency and limited*


 * comet doesn't works and 3G operator applies some limits.
HTTP Headers are different*
                                            [...]
    user-agent: LG-CU920/V1.0p Obigo/Q05A Profile/MIDP-2.0 Configuration/CLDC-1.1
                             via: 1.1 alpmagr1fe02WAP2-mbl
                        x-up-devcap-accept-language: en,fr,es
  x-up-devcap-charset: US-ASCII,ISO-8859-1,UTF-8,UTF-16,ISO-8859-15,ISO-10646-UCS-2
                                   x-up-devcap-iscolor: 1
                               x-up-devcap-numsoftkeys: 3
                              x-up-devcap-screendepth: 16
                          x-up-devcap-screenpixels: 240,400
                               x-up-devcap-smartdialing: 1
                  x-up-subno: ppu_1077a8d8fc1_vmag.mycingular.net
              x-wap-profile: http://gsm.lge.com/html/gsm/LG-CU920.xml
                                            [...]


 * 30% more than desktop, ETag doesn't works
Beware of the content proxies*!


* used by some browsers like Opera mini. Ajax doesn't work properly
The Mobile WPO Chapter
As for desktop browsers a reduction
   of the requests is necessary,
but mobile strategies are somewhat
              differents
When possible embed resources in
the page: CSS, JavaScript* and images
            with data URI




    * then save them after document.onload in local cache
Use Application Storage to statically
save most used resources and user
      infos* in localStorage




        * as the geolocation infos and prefs
Save JavaScript function with
Application Storage*, then fire them
  to a tag and eval when needed




      * as Google and Bing do [ http://ow.ly/5h8Ab ]
Load resources as late as possible*
 and store them to be never loaded
               again
* use ajax and infinite scrolling pattern [ http://ow.ly/5h9A6 ] to load only
              visible data, but remember to free memory
Use CSS to draw interface object*
-webkit-border-image, CSS sprites, -webkit-border-
           radius, -webkit-gradient, ...




    * but remember that the browsers compatibility changes
Optimize images* and defer them
when possible. Use SVG for charts.




* animated GIF doesn't work on Android and WebOS, SVG is not
      enabled on Android. When possible strip EXIF tags.
GZip, Minify and Merge
  CSS and JavaScript*



        * as usual ;)
When possible
 avoid JavaScript frameworks*
and use specific ones (ie. zepto.js)

 * some mobile browser can take up to 8s to parse jQuery
Detect device, reduce image details
             as needed


       * use window.devicePixelRatio on WebKit
HTML coding still matter
Use different (KiSS*) html than in the
          desktop browser




   * reduce elements. You are still on a 3/4'' device, isn't it?
Reduce DOM elements, CSS classes
  and apply good programming
            patterns
Add specificic html meta tags* for
        mobile browsers




* viewport, media=handheld, MobileOptimized, HandheldFriendly
     * add the right MIME for each device and use viewport meta tag
Test your code

http://mobile.httparchive.org

   http://blaze.io/mobile

      http://jdrop.org

http://www.mobilexweb.com
Your new best friend*




 * buy it on Amazon http://ow.ly/5sm6C
Francesco Fullone
      ff@ideato.it
         @fullo




  via Quinto Bucci 205
   47023 Cesena (FC)
 info AT makemeapp.it
  www.makemeapp.it

More Related Content

What's hot

HTML5 multimedia - where we are, where we're going
HTML5 multimedia - where we are, where we're goingHTML5 multimedia - where we are, where we're going
HTML5 multimedia - where we are, where we're goingbrucelawson
 
W3C Widget and MeeGo - MeeGo Meetup Hacker's Dojo Mountain View Dec 2010 @iRa...
W3C Widget and MeeGo - MeeGo Meetup Hacker's Dojo Mountain View Dec 2010 @iRa...W3C Widget and MeeGo - MeeGo Meetup Hacker's Dojo Mountain View Dec 2010 @iRa...
W3C Widget and MeeGo - MeeGo Meetup Hacker's Dojo Mountain View Dec 2010 @iRa...Raj Lal
 
Chrome OS: The Stateless Operating System
Chrome OS: The Stateless Operating SystemChrome OS: The Stateless Operating System
Chrome OS: The Stateless Operating SystemChatchai Wangwiwattana
 
Be ef presentation-securitybyte2011-michele_orru
Be ef presentation-securitybyte2011-michele_orruBe ef presentation-securitybyte2011-michele_orru
Be ef presentation-securitybyte2011-michele_orruMichele Orru
 
Chrome OS presentation
Chrome OS presentationChrome OS presentation
Chrome OS presentationmelodyhe121
 
Koubei banquet 35
Koubei banquet 35Koubei banquet 35
Koubei banquet 35Koubei UED
 
Google Chrome - OS & BROWSER
Google Chrome - OS & BROWSERGoogle Chrome - OS & BROWSER
Google Chrome - OS & BROWSERFaheem Ahmed
 
Performance Improvements in Browsers
Performance Improvements in BrowsersPerformance Improvements in Browsers
Performance Improvements in Browsersjeresig
 
Google chrome operating system
Google chrome operating systemGoogle chrome operating system
Google chrome operating systemkondalarao7
 
Introduction To Google Chrome Os
Introduction To Google Chrome OsIntroduction To Google Chrome Os
Introduction To Google Chrome OsSaurabh Jinturkar
 
Vagrant - Team Development made easy
Vagrant - Team Development made easyVagrant - Team Development made easy
Vagrant - Team Development made easyMarco Silva
 
It works on your computer... but does it render fast enough?
It works on your computer... but does it render fast enough?It works on your computer... but does it render fast enough?
It works on your computer... but does it render fast enough?Diogo Antunes
 
Css hacks for different browsers
Css hacks for different browsersCss hacks for different browsers
Css hacks for different browsersSavitha Chandra
 
ISM APAC TechTalk - WebSockets Presentation
ISM APAC TechTalk - WebSockets PresentationISM APAC TechTalk - WebSockets Presentation
ISM APAC TechTalk - WebSockets PresentationDimuthu Nilanka
 
Cold front - bridging the web and the physical world
Cold front - bridging the web and the physical worldCold front - bridging the web and the physical world
Cold front - bridging the web and the physical worldKenneth Rohde Christiansen
 

What's hot (20)

HTML5 multimedia - where we are, where we're going
HTML5 multimedia - where we are, where we're goingHTML5 multimedia - where we are, where we're going
HTML5 multimedia - where we are, where we're going
 
W3C Widget and MeeGo - MeeGo Meetup Hacker's Dojo Mountain View Dec 2010 @iRa...
W3C Widget and MeeGo - MeeGo Meetup Hacker's Dojo Mountain View Dec 2010 @iRa...W3C Widget and MeeGo - MeeGo Meetup Hacker's Dojo Mountain View Dec 2010 @iRa...
W3C Widget and MeeGo - MeeGo Meetup Hacker's Dojo Mountain View Dec 2010 @iRa...
 
Chrome OS: The Stateless Operating System
Chrome OS: The Stateless Operating SystemChrome OS: The Stateless Operating System
Chrome OS: The Stateless Operating System
 
Be ef presentation-securitybyte2011-michele_orru
Be ef presentation-securitybyte2011-michele_orruBe ef presentation-securitybyte2011-michele_orru
Be ef presentation-securitybyte2011-michele_orru
 
Google chrome
Google chromeGoogle chrome
Google chrome
 
Chrome OS presentation
Chrome OS presentationChrome OS presentation
Chrome OS presentation
 
Koubei banquet 35
Koubei banquet 35Koubei banquet 35
Koubei banquet 35
 
Google Chrome - OS & BROWSER
Google Chrome - OS & BROWSERGoogle Chrome - OS & BROWSER
Google Chrome - OS & BROWSER
 
Performance Improvements in Browsers
Performance Improvements in BrowsersPerformance Improvements in Browsers
Performance Improvements in Browsers
 
Google chrome operating system
Google chrome operating systemGoogle chrome operating system
Google chrome operating system
 
Introduction To Google Chrome Os
Introduction To Google Chrome OsIntroduction To Google Chrome Os
Introduction To Google Chrome Os
 
Vagrant - Team Development made easy
Vagrant - Team Development made easyVagrant - Team Development made easy
Vagrant - Team Development made easy
 
Webtech 17.11.2009
Webtech 17.11.2009Webtech 17.11.2009
Webtech 17.11.2009
 
It works on your computer... but does it render fast enough?
It works on your computer... but does it render fast enough?It works on your computer... but does it render fast enough?
It works on your computer... but does it render fast enough?
 
Screencasting Matrix
Screencasting MatrixScreencasting Matrix
Screencasting Matrix
 
Google chrome OS
Google chrome OSGoogle chrome OS
Google chrome OS
 
Css hacks for different browsers
Css hacks for different browsersCss hacks for different browsers
Css hacks for different browsers
 
ISM APAC TechTalk - WebSockets Presentation
ISM APAC TechTalk - WebSockets PresentationISM APAC TechTalk - WebSockets Presentation
ISM APAC TechTalk - WebSockets Presentation
 
Socket.io
Socket.ioSocket.io
Socket.io
 
Cold front - bridging the web and the physical world
Cold front - bridging the web and the physical worldCold front - bridging the web and the physical world
Cold front - bridging the web and the physical world
 

Viewers also liked

From brainstorming to product development
From brainstorming to product developmentFrom brainstorming to product development
From brainstorming to product developmentFrancesco Fullone
 
Compromises and not solution
Compromises and not solutionCompromises and not solution
Compromises and not solutionFrancesco Fullone
 
New Product Commercialization
New Product CommercializationNew Product Commercialization
New Product CommercializationJohn Glenning
 
Basic aspects of international marketing
Basic aspects of international marketingBasic aspects of international marketing
Basic aspects of international marketingMegha Mishra
 
Product Launch Presentation By Linda Johnson
Product Launch Presentation By Linda JohnsonProduct Launch Presentation By Linda Johnson
Product Launch Presentation By Linda Johnsonlindajohnsonh
 
Fruit punch - Launching a New Product - Marketing
Fruit punch - Launching a New Product - MarketingFruit punch - Launching a New Product - Marketing
Fruit punch - Launching a New Product - MarketingCotecna Inspection
 

Viewers also liked (9)

From brainstorming to product development
From brainstorming to product developmentFrom brainstorming to product development
From brainstorming to product development
 
Compromises and not solution
Compromises and not solutionCompromises and not solution
Compromises and not solution
 
Con te non ci lavoro
Con te non ci lavoroCon te non ci lavoro
Con te non ci lavoro
 
New Product Commercialization
New Product CommercializationNew Product Commercialization
New Product Commercialization
 
The commercialization process
The commercialization processThe commercialization process
The commercialization process
 
Basic aspects of international marketing
Basic aspects of international marketingBasic aspects of international marketing
Basic aspects of international marketing
 
Launching a new Product
Launching a new Product Launching a new Product
Launching a new Product
 
Product Launch Presentation By Linda Johnson
Product Launch Presentation By Linda JohnsonProduct Launch Presentation By Linda Johnson
Product Launch Presentation By Linda Johnson
 
Fruit punch - Launching a New Product - Marketing
Fruit punch - Launching a New Product - MarketingFruit punch - Launching a New Product - Marketing
Fruit punch - Launching a New Product - Marketing
 

Similar to Don't touch the mobile parts

Making your site mobile-friendly - Standards-Next 12.06.2010
Making your site mobile-friendly - Standards-Next 12.06.2010Making your site mobile-friendly - Standards-Next 12.06.2010
Making your site mobile-friendly - Standards-Next 12.06.2010Patrick Lauke
 
Apache Flex and the imperfect Web
Apache Flex and the imperfect WebApache Flex and the imperfect Web
Apache Flex and the imperfect Webmasuland
 
Making your site mobile-friendly / RIT++
Making your site mobile-friendly / RIT++Making your site mobile-friendly / RIT++
Making your site mobile-friendly / RIT++Patrick Lauke
 
FEDM Meetup: Introducing Mojito
FEDM Meetup: Introducing MojitoFEDM Meetup: Introducing Mojito
FEDM Meetup: Introducing MojitoCaridy Patino
 
HTML5: An Introduction To Next Generation Web Development
HTML5: An Introduction To Next Generation Web DevelopmentHTML5: An Introduction To Next Generation Web Development
HTML5: An Introduction To Next Generation Web DevelopmentTilak Joshi
 
Os Henrikson
Os HenriksonOs Henrikson
Os Henriksonoscon2007
 
(In)Security Implication in the JS Universe
(In)Security Implication in the JS Universe(In)Security Implication in the JS Universe
(In)Security Implication in the JS UniverseStefano Di Paola
 
Your browser, your storage (extended version)
Your browser, your storage (extended version)Your browser, your storage (extended version)
Your browser, your storage (extended version)Francesco Fullone
 
Mobile App Development
Mobile App DevelopmentMobile App Development
Mobile App DevelopmentChris Morrell
 
Making your site mobile-friendly - DevCSI Reading 21.07.2010
Making your site mobile-friendly - DevCSI Reading 21.07.2010Making your site mobile-friendly - DevCSI Reading 21.07.2010
Making your site mobile-friendly - DevCSI Reading 21.07.2010Patrick Lauke
 
Alt-Cookies and Controversies in Ethics
Alt-Cookies and Controversies in EthicsAlt-Cookies and Controversies in Ethics
Alt-Cookies and Controversies in EthicsKazuhiro Kosaka
 
Developing for the mobile web
Developing for the mobile webDeveloping for the mobile web
Developing for the mobile webjoeysim
 
Mobile Web High Performance
Mobile Web High PerformanceMobile Web High Performance
Mobile Web High PerformanceAmjad Rafique
 

Similar to Don't touch the mobile parts (20)

Making your site mobile-friendly - Standards-Next 12.06.2010
Making your site mobile-friendly - Standards-Next 12.06.2010Making your site mobile-friendly - Standards-Next 12.06.2010
Making your site mobile-friendly - Standards-Next 12.06.2010
 
Mobile Web
Mobile WebMobile Web
Mobile Web
 
Echo HTML5
Echo HTML5Echo HTML5
Echo HTML5
 
Apache Flex and the imperfect Web
Apache Flex and the imperfect WebApache Flex and the imperfect Web
Apache Flex and the imperfect Web
 
Making your site mobile-friendly / RIT++
Making your site mobile-friendly / RIT++Making your site mobile-friendly / RIT++
Making your site mobile-friendly / RIT++
 
DDive- Giuseppe Grasso - mobile su Lotus
DDive- Giuseppe Grasso - mobile su LotusDDive- Giuseppe Grasso - mobile su Lotus
DDive- Giuseppe Grasso - mobile su Lotus
 
FEDM Meetup: Introducing Mojito
FEDM Meetup: Introducing MojitoFEDM Meetup: Introducing Mojito
FEDM Meetup: Introducing Mojito
 
HTML5: An Introduction To Next Generation Web Development
HTML5: An Introduction To Next Generation Web DevelopmentHTML5: An Introduction To Next Generation Web Development
HTML5: An Introduction To Next Generation Web Development
 
Os Henrikson
Os HenriksonOs Henrikson
Os Henrikson
 
Hybrid mobile apps
Hybrid mobile appsHybrid mobile apps
Hybrid mobile apps
 
your browser, your storage
your browser, your storageyour browser, your storage
your browser, your storage
 
your browser, my storage
your browser, my storageyour browser, my storage
your browser, my storage
 
(In)Security Implication in the JS Universe
(In)Security Implication in the JS Universe(In)Security Implication in the JS Universe
(In)Security Implication in the JS Universe
 
Your browser, your storage (extended version)
Your browser, your storage (extended version)Your browser, your storage (extended version)
Your browser, your storage (extended version)
 
Mobile App Development
Mobile App DevelopmentMobile App Development
Mobile App Development
 
Making your site mobile-friendly - DevCSI Reading 21.07.2010
Making your site mobile-friendly - DevCSI Reading 21.07.2010Making your site mobile-friendly - DevCSI Reading 21.07.2010
Making your site mobile-friendly - DevCSI Reading 21.07.2010
 
Alt-Cookies and Controversies in Ethics
Alt-Cookies and Controversies in EthicsAlt-Cookies and Controversies in Ethics
Alt-Cookies and Controversies in Ethics
 
Developing for the mobile web
Developing for the mobile webDeveloping for the mobile web
Developing for the mobile web
 
Mobile Web High Performance
Mobile Web High PerformanceMobile Web High Performance
Mobile Web High Performance
 
XTech May 2008
XTech May 2008XTech May 2008
XTech May 2008
 

More from Francesco Fullone

Life Cycle Design e Circular Economy: un caso reale
Life Cycle Design e Circular Economy: un caso reale Life Cycle Design e Circular Economy: un caso reale
Life Cycle Design e Circular Economy: un caso reale Francesco Fullone
 
Okr istruzioni per l'uso - devfest
Okr   istruzioni per l'uso - devfestOkr   istruzioni per l'uso - devfest
Okr istruzioni per l'uso - devfestFrancesco Fullone
 
OKR, sono veramente utili alla mia azienda?
OKR, sono veramente utili alla mia azienda?OKR, sono veramente utili alla mia azienda?
OKR, sono veramente utili alla mia azienda?Francesco Fullone
 
Open Governance, un caso reale
Open Governance, un caso realeOpen Governance, un caso reale
Open Governance, un caso realeFrancesco Fullone
 
A recommendation engine for your applications
A recommendation engine for your applicationsA recommendation engine for your applications
A recommendation engine for your applicationsFrancesco Fullone
 
A recommendation engine for your applications
A recommendation engine for your applicationsA recommendation engine for your applications
A recommendation engine for your applicationsFrancesco Fullone
 
MVP & Startup, with OpenSource Software and Microsoft Azure
MVP & Startup, with OpenSource Software and Microsoft AzureMVP & Startup, with OpenSource Software and Microsoft Azure
MVP & Startup, with OpenSource Software and Microsoft AzureFrancesco Fullone
 
Help yourself, grow an healthy ecosystem
Help yourself, grow an healthy ecosystemHelp yourself, grow an healthy ecosystem
Help yourself, grow an healthy ecosystemFrancesco Fullone
 
Outsourcing, partners or suppliers?
Outsourcing, partners or suppliers?Outsourcing, partners or suppliers?
Outsourcing, partners or suppliers?Francesco Fullone
 
From webagency to...a better job, life and a lot of fun
From webagency to...a better job, life and a lot of funFrom webagency to...a better job, life and a lot of fun
From webagency to...a better job, life and a lot of funFrancesco Fullone
 
Open Source in the web enterprise world a secure success
Open Source in the web enterprise world a secure successOpen Source in the web enterprise world a secure success
Open Source in the web enterprise world a secure successFrancesco Fullone
 
extended slow parts, HTML5 meets WPO
extended slow parts, HTML5 meets WPOextended slow parts, HTML5 meets WPO
extended slow parts, HTML5 meets WPOFrancesco Fullone
 

More from Francesco Fullone (20)

Life Cycle Design e Circular Economy: un caso reale
Life Cycle Design e Circular Economy: un caso reale Life Cycle Design e Circular Economy: un caso reale
Life Cycle Design e Circular Economy: un caso reale
 
Okr istruzioni per l'uso - devfest
Okr   istruzioni per l'uso - devfestOkr   istruzioni per l'uso - devfest
Okr istruzioni per l'uso - devfest
 
OKR, sono veramente utili alla mia azienda?
OKR, sono veramente utili alla mia azienda?OKR, sono veramente utili alla mia azienda?
OKR, sono veramente utili alla mia azienda?
 
Okr per community - icms
Okr   per community - icmsOkr   per community - icms
Okr per community - icms
 
Open Governance, un caso reale
Open Governance, un caso realeOpen Governance, un caso reale
Open Governance, un caso reale
 
A recommendation engine for your applications
A recommendation engine for your applicationsA recommendation engine for your applications
A recommendation engine for your applications
 
A recommendation engine for your applications
A recommendation engine for your applicationsA recommendation engine for your applications
A recommendation engine for your applications
 
Con te non ci lavoro
Con te non ci lavoroCon te non ci lavoro
Con te non ci lavoro
 
Continuous budgeting
Continuous budgetingContinuous budgeting
Continuous budgeting
 
Remote working istruzioni
Remote working istruzioniRemote working istruzioni
Remote working istruzioni
 
Remote working istruzioni
Remote working istruzioniRemote working istruzioni
Remote working istruzioni
 
MVP & Startup, with OpenSource Software and Microsoft Azure
MVP & Startup, with OpenSource Software and Microsoft AzureMVP & Startup, with OpenSource Software and Microsoft Azure
MVP & Startup, with OpenSource Software and Microsoft Azure
 
Remote working istruzioni
Remote working istruzioniRemote working istruzioni
Remote working istruzioni
 
Help yourself, grow an healthy ecosystem
Help yourself, grow an healthy ecosystemHelp yourself, grow an healthy ecosystem
Help yourself, grow an healthy ecosystem
 
Outsourcing, partners or suppliers?
Outsourcing, partners or suppliers?Outsourcing, partners or suppliers?
Outsourcing, partners or suppliers?
 
PHP Goes Enterprise
PHP Goes EnterprisePHP Goes Enterprise
PHP Goes Enterprise
 
From webagency to...a better job, life and a lot of fun
From webagency to...a better job, life and a lot of funFrom webagency to...a better job, life and a lot of fun
From webagency to...a better job, life and a lot of fun
 
Open Source in the web enterprise world a secure success
Open Source in the web enterprise world a secure successOpen Source in the web enterprise world a secure success
Open Source in the web enterprise world a secure success
 
Compromessi e non soluzioni
Compromessi e non soluzioniCompromessi e non soluzioni
Compromessi e non soluzioni
 
extended slow parts, HTML5 meets WPO
extended slow parts, HTML5 meets WPOextended slow parts, HTML5 meets WPO
extended slow parts, HTML5 meets WPO
 

Recently uploaded

CyberSecurity - Computers In Libraries 2024
CyberSecurity - Computers In Libraries 2024CyberSecurity - Computers In Libraries 2024
CyberSecurity - Computers In Libraries 2024Brian Pichman
 
LF Energy Webinar - Unveiling OpenEEMeter 4.0
LF Energy Webinar - Unveiling OpenEEMeter 4.0LF Energy Webinar - Unveiling OpenEEMeter 4.0
LF Energy Webinar - Unveiling OpenEEMeter 4.0DanBrown980551
 
TrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie WorldTrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie WorldTrustArc
 
Trailblazer Community - Flows Workshop (Session 2)
Trailblazer Community - Flows Workshop (Session 2)Trailblazer Community - Flows Workshop (Session 2)
Trailblazer Community - Flows Workshop (Session 2)Muhammad Tiham Siddiqui
 
AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024Brian Pichman
 
March Patch Tuesday
March Patch TuesdayMarch Patch Tuesday
March Patch TuesdayIvanti
 
The Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightThe Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightSafe Software
 
From the origin to the future of Open Source model and business
From the origin to the future of  Open Source model and businessFrom the origin to the future of  Open Source model and business
From the origin to the future of Open Source model and businessFrancesco Corti
 
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENTSIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENTxtailishbaloch
 
UiPath Studio Web workshop series - Day 4
UiPath Studio Web workshop series - Day 4UiPath Studio Web workshop series - Day 4
UiPath Studio Web workshop series - Day 4DianaGray10
 
Introduction - IPLOOK NETWORKS CO., LTD.
Introduction - IPLOOK NETWORKS CO., LTD.Introduction - IPLOOK NETWORKS CO., LTD.
Introduction - IPLOOK NETWORKS CO., LTD.IPLOOK Networks
 
How to release an Open Source Dataweave Library
How to release an Open Source Dataweave LibraryHow to release an Open Source Dataweave Library
How to release an Open Source Dataweave Libraryshyamraj55
 
IT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced ComputingIT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced ComputingMAGNIntelligence
 
Technical SEO for Improved Accessibility WTS FEST
Technical SEO for Improved Accessibility  WTS FESTTechnical SEO for Improved Accessibility  WTS FEST
Technical SEO for Improved Accessibility WTS FESTBillieHyde
 
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedInOutage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedInThousandEyes
 
UiPath Studio Web workshop series - Day 1
UiPath Studio Web workshop series  - Day 1UiPath Studio Web workshop series  - Day 1
UiPath Studio Web workshop series - Day 1DianaGray10
 
UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3DianaGray10
 
How to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptxHow to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptxKaustubhBhavsar6
 
Introduction to RAG (Retrieval Augmented Generation) and its application
Introduction to RAG (Retrieval Augmented Generation) and its applicationIntroduction to RAG (Retrieval Augmented Generation) and its application
Introduction to RAG (Retrieval Augmented Generation) and its applicationKnoldus Inc.
 

Recently uploaded (20)

CyberSecurity - Computers In Libraries 2024
CyberSecurity - Computers In Libraries 2024CyberSecurity - Computers In Libraries 2024
CyberSecurity - Computers In Libraries 2024
 
LF Energy Webinar - Unveiling OpenEEMeter 4.0
LF Energy Webinar - Unveiling OpenEEMeter 4.0LF Energy Webinar - Unveiling OpenEEMeter 4.0
LF Energy Webinar - Unveiling OpenEEMeter 4.0
 
TrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie WorldTrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie World
 
Trailblazer Community - Flows Workshop (Session 2)
Trailblazer Community - Flows Workshop (Session 2)Trailblazer Community - Flows Workshop (Session 2)
Trailblazer Community - Flows Workshop (Session 2)
 
AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024AI Workshops at Computers In Libraries 2024
AI Workshops at Computers In Libraries 2024
 
March Patch Tuesday
March Patch TuesdayMarch Patch Tuesday
March Patch Tuesday
 
The Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightThe Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and Insight
 
From the origin to the future of Open Source model and business
From the origin to the future of  Open Source model and businessFrom the origin to the future of  Open Source model and business
From the origin to the future of Open Source model and business
 
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENTSIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
 
UiPath Studio Web workshop series - Day 4
UiPath Studio Web workshop series - Day 4UiPath Studio Web workshop series - Day 4
UiPath Studio Web workshop series - Day 4
 
Introduction - IPLOOK NETWORKS CO., LTD.
Introduction - IPLOOK NETWORKS CO., LTD.Introduction - IPLOOK NETWORKS CO., LTD.
Introduction - IPLOOK NETWORKS CO., LTD.
 
How to release an Open Source Dataweave Library
How to release an Open Source Dataweave LibraryHow to release an Open Source Dataweave Library
How to release an Open Source Dataweave Library
 
IT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced ComputingIT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced Computing
 
Technical SEO for Improved Accessibility WTS FEST
Technical SEO for Improved Accessibility  WTS FESTTechnical SEO for Improved Accessibility  WTS FEST
Technical SEO for Improved Accessibility WTS FEST
 
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedInOutage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
 
UiPath Studio Web workshop series - Day 1
UiPath Studio Web workshop series  - Day 1UiPath Studio Web workshop series  - Day 1
UiPath Studio Web workshop series - Day 1
 
UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3
 
How to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptxHow to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptx
 
SheDev 2024
SheDev 2024SheDev 2024
SheDev 2024
 
Introduction to RAG (Retrieval Augmented Generation) and its application
Introduction to RAG (Retrieval Augmented Generation) and its applicationIntroduction to RAG (Retrieval Augmented Generation) and its application
Introduction to RAG (Retrieval Augmented Generation) and its application
 

Don't touch the mobile parts

  • 1. Don't touch the mobile parts Francesco Fullone <ff@ideato.it> Twitter @fullo
  • 2. Who am I Francesco Fullone aka Fullo - PHP developer since 1999 - President - and Open Source Evangelist - CEO @ - founder @ - Nerd and geek
  • 3. In the previous* WPO episodes * “don't touch the slow parts ” [ http://ow.ly/5ihyb ] and “extended slow parts” [ http://ow.ly/5ihLT ]
  • 4. Kate and Jack discovered that the 80% of loading time is on the browser
  • 5. In the same time Locke understood that resource loading order matters
  • 6. Sayid tried to cut the bandwidth usage decreasing files number and size...
  • 7. … helped by Hurley whom reduces downloads forcing headers to enable browser cache
  • 8. at the same time, the “Others” studied the new possibilities offered by the HTML5
  • 9. They never believe that mobile WPO is an even more mysterious and frightening journey...
  • 10. ...and that 97% of performance issues happen at frontend* * from webperformancetoday.com [ http://ow.ly/5hd35 ]
  • 12. On a smartphone a web page is rendered from 40% to 80% slower than on a desktop.
  • 13. A lot of different browsers Pre-installed webkit (iOS, Android, Blackberry, webOS, Symbian …) Pre-installed non-webkit (Bada, old Blackberry, Internet Explorer, DoCoMo …) User installable (Opera Mobile/Mini, Firefox, Skyfire ...)
  • 14. Same engine doesn't mean same behaviours
  • 15. We have to talk about mobile browser families: Smartphone Mid-End Low-End
  • 16. Mid-End to Low-End browsers families lost (randomly): HTML5 support CSS3 support Caching quota Ajax
  • 18. Symbian's Anna WebKit browser* has No Application Cache No Geolocalization API No HTML5 Audio/Video tags Very limited CSS3 support * Released on April 2011 for X7 and E6 Nokia Smartphones
  • 19. CSS Expressions and iFrames don't work on most mobile browsers
  • 20. Different country* means different browser * From icrossing.co.uk [ http://ow.ly/5hanY ]
  • 21. Caching, now, is not a difficult task * browserscope.org helps us [ http://ow.ly/5h8Db ]
  • 22. New iOS* and Android browsers have 4Mb file cache (uncompressed) 4Mb total cache (uncompressed) 1Mb limit for file execution (js/css) * but cache is invalidated at the reboot [ http://ow.ly/5h8G4 ]
  • 24. Old iOS 3.x browser* had 25.6Kb file cache 1Mb total cache (uncompressed) * and a lot of other low-end browsers
  • 26. 3G Networks are slow, with higher latency and limited* * comet doesn't works and 3G operator applies some limits.
  • 27. HTTP Headers are different* [...] user-agent: LG-CU920/V1.0p Obigo/Q05A Profile/MIDP-2.0 Configuration/CLDC-1.1 via: 1.1 alpmagr1fe02WAP2-mbl x-up-devcap-accept-language: en,fr,es x-up-devcap-charset: US-ASCII,ISO-8859-1,UTF-8,UTF-16,ISO-8859-15,ISO-10646-UCS-2 x-up-devcap-iscolor: 1 x-up-devcap-numsoftkeys: 3 x-up-devcap-screendepth: 16 x-up-devcap-screenpixels: 240,400 x-up-devcap-smartdialing: 1 x-up-subno: ppu_1077a8d8fc1_vmag.mycingular.net x-wap-profile: http://gsm.lge.com/html/gsm/LG-CU920.xml [...] * 30% more than desktop, ETag doesn't works
  • 28. Beware of the content proxies*! * used by some browsers like Opera mini. Ajax doesn't work properly
  • 29. The Mobile WPO Chapter
  • 30. As for desktop browsers a reduction of the requests is necessary, but mobile strategies are somewhat differents
  • 31. When possible embed resources in the page: CSS, JavaScript* and images with data URI * then save them after document.onload in local cache
  • 32. Use Application Storage to statically save most used resources and user infos* in localStorage * as the geolocation infos and prefs
  • 33. Save JavaScript function with Application Storage*, then fire them to a tag and eval when needed * as Google and Bing do [ http://ow.ly/5h8Ab ]
  • 34. Load resources as late as possible* and store them to be never loaded again * use ajax and infinite scrolling pattern [ http://ow.ly/5h9A6 ] to load only visible data, but remember to free memory
  • 35. Use CSS to draw interface object* -webkit-border-image, CSS sprites, -webkit-border- radius, -webkit-gradient, ... * but remember that the browsers compatibility changes
  • 36. Optimize images* and defer them when possible. Use SVG for charts. * animated GIF doesn't work on Android and WebOS, SVG is not enabled on Android. When possible strip EXIF tags.
  • 37. GZip, Minify and Merge CSS and JavaScript* * as usual ;)
  • 38. When possible avoid JavaScript frameworks* and use specific ones (ie. zepto.js) * some mobile browser can take up to 8s to parse jQuery
  • 39. Detect device, reduce image details as needed * use window.devicePixelRatio on WebKit
  • 41. Use different (KiSS*) html than in the desktop browser * reduce elements. You are still on a 3/4'' device, isn't it?
  • 42. Reduce DOM elements, CSS classes and apply good programming patterns
  • 43. Add specificic html meta tags* for mobile browsers * viewport, media=handheld, MobileOptimized, HandheldFriendly * add the right MIME for each device and use viewport meta tag
  • 44. Test your code http://mobile.httparchive.org http://blaze.io/mobile http://jdrop.org http://www.mobilexweb.com
  • 45. Your new best friend* * buy it on Amazon http://ow.ly/5sm6C
  • 46. Francesco Fullone ff@ideato.it @fullo via Quinto Bucci 205 47023 Cesena (FC) info AT makemeapp.it www.makemeapp.it