SlideShare a Scribd company logo
1 of 39
Download to read offline
High Performance Mobile Web
James D Bloom
http://blog.jamesdbloom.com
ABOUT ME
   JAMES D BLOOM
Mobile Web Expert

Technical	
  lead	
  of	
  mobile	
  web	
  at	
  Be2air	
  
	
  
Focusing	
  on:	
  
	
  -­‐	
  High	
  Performance	
  
	
  -­‐	
  Reliability	
  
	
  -­‐	
  Wide	
  Device	
  Support	
  
	
  -­‐	
  Keeping	
  it	
  Simple	
  
	
  -­‐	
  Automated	
  TesEng	
  
This talk….

1.	
     Why	
  We	
  Should	
  Care	
  About	
  Performance?	
  



2.	
     Network	
  
             Reducing	
  Requests	
  
             Reducing	
  Bytes	
  
             Increasing	
  Bandwidth	
  Efficiency	
  
             Reducing	
  Latency	
  



3.	
     SoHware	
  
             More	
  Parallelism	
  
             Faster	
  Page	
  Rendering	
  
             Faster	
  Page	
  InteracEon	
  
01   WHY
     WE SHOULD CARE ABOUT PERFORMANCE?
-5s
 +12% revenue             each -100ms
-50% hardware             +1% revenue
                      Wallmart & Amazon
   Shopzilla


        0.4 -> 0.9s                  -2.2s
      -25% searches             +15% downloads

          Google                        Firefox


                    +1s
                -4% revenue

                   Bing


                                                  WHY CARE?
LOAD TIME (in seconds)
   60	
  
                                                                                                                                                     51.38	
  
   50	
                                                                            47%
                                                                                  expect                                                 44.67	
  

   40	
                                                                            <2s
                                    40% abandon
   30	
  
                                       if >3s                                                                                27.16	
  


   20	
                                                                                                          15.86	
  
                                                                                                     12.49	
  
                                                                      9.21	
     10.36	
   11.43	
  
                                     7.65	
     7.85	
     8.64	
  
   10	
       5.41	
     6.03	
  

     0	
  




h"p://www.keynote.com/keynote_compe11ve_research/performance_indices/mobile/retail-­‐world	
  
02   NETWORK
     -
     -
         REDUCING REQUESTS
         REDUCING BYTES
     -   INCREASING BANDWIDTH EFFICIENCY
     -   REDUCING LATENCY
02   NETWORK
     -
     -
         REDUCING REQUESTS
         REDUCING BYTES
     -   INCREASING BANDWIDTH EFFICIENCY
     -   REDUCING LATENCY
CORELATION TO LOAD TIME

                                                     Reduce
                                                    Requests

         TOTAL REQUESTS            0.46


         IMAGE REQUESTS            0.44


         TOTAL XFER SIZE           0.40


         IMAGE XFER SIZE           0.37


          DOMAINS                  0.37
                                            Total	
     Image	
   Total	
  Xfer	
   Image	
  Xfer	
   Domains	
  
                                          Requests	
   Requests	
    Size	
            Size	
  



h"p://mobile.h"parchive.org/	
                                                      Based	
  on:	
  Alexa	
  Top	
  1,000,000	
  Sites	
  
COMBINE REQUESTS - BUNDLING

•    JavaScript	
  Bundle	
  
       –  Combine	
  all	
  files	
  into	
  single	
  bundle	
  
•    CSS	
  Bundle	
  
       –  Combine	
  all	
  files	
  into	
  single	
  bundle	
  	
  
COMBINE REQUESTS - SPRITES

•    Image	
  Sprite	
  
      –  Combine	
  all	
  images	
  into	
  CSS	
  Sprite	
  
COMBINE REQUESTS - INLINING

•    Inlining	
  
       –  dataURI	
  for	
  external	
  resources	
  
       –  Base64	
  larger	
  by	
  8/6	
  
COMBINE REQUESTS - INLINING

•    First	
  Load:	
  
      –  inline	
  resources	
  and	
  set	
  cookie	
  
      –  put	
  resources	
  in	
  localStorage	
  and	
  update	
  cookie	
  
•    Subsequent	
  Load:	
  
      –  check	
  cookie	
  
                •  if	
  updated	
  
                          –  load	
  resources	
  from	
  localStorage	
  (at	
  top	
  of	
  page)	
  
                •  if	
  iniEal	
  value	
  -­‐>	
  no	
  JavaScript	
  or	
  localStorage	
  
                          –  return	
  with	
  resources	
  as	
  external	
  links	
  
•    Bing	
  
      –  1st	
  request	
  54.9	
  KB	
  
      –  2nd	
  request	
  5.5	
  KB	
  
AVOID REQUESTS

•    Avoid	
  redirects	
  –	
  71%	
  of	
  mobile	
  sites	
  have	
  3xx	
  
      –  or	
  at	
  least	
  cache	
  them	
  
•    Images	
  
      –  CSS3	
  
               •  gradient,	
  rounded	
  corners,	
  drop	
  shadow,	
  text	
  shadow	
  
      –  Avoid	
  animated	
  gifs	
  
               •  staEc	
  image	
  +	
  JS	
  
•    Load	
  (and	
  eval)	
  on	
  demand	
  
      –  Images	
  -­‐>	
  google	
  image	
  search	
  
      –  JS	
  -­‐>	
  gmail	
  
02   NETWORK
     -
     -
         REDUCING REQUESTS
         REDUCING BYTES
     -   INCREASING BANDWIDTH EFFICIENCY
     -   REDUCING LATENCY
RESPONSE SIZE (in kB)

                                            Reduce
                                          Image Size
         IMAGES                    67%
                                           358	
  

         SCRIPTS                   21%


         HTML                      6%

                                                         112	
  
         STYLESHEETS               4%
                                                                       33	
              23	
  
                                                                                                                  10	
  
          OTHER                    2%
                                         Images	
      Scripts	
     HTML	
     Stylesheets	
                  Other	
  



h"p://mobile.h"parchive.org/	
                                                  Based	
  on:	
  Alexa	
  Top	
  1,000,000	
  Sites	
  
REDUCING BYTES – ADAPTIVE RESOURCES

•    AdapEve	
  Images	
  
      –  UA	
  sniffing	
  or	
  media	
  queries	
  
      –  Major	
  breakpoints	
  or	
  server	
  side	
  scaling	
  
•    AdapEve	
  JavaScript	
  
      –  UA	
  sniffing	
  for	
  device	
  specific	
  JS	
  
•    AdapEve	
  CSS	
  
      –  Media	
  queries	
  for	
  device	
  specific	
  CSS	
  
REDUCING BYTES - MINIFY

•    Minify	
  JS	
  &	
  CSS	
  
      –  Typically	
  during	
  bundling	
  
•    Mini	
  JS	
  framework	
  
      –  don’t	
  send	
  desktop	
  JS	
  to	
  mobile	
  
REDUCING BYTES

•    Compression	
  
      –  Use	
  gzip	
  for	
  text	
  resources	
  
      –  Maximize	
  lossless	
  compression	
  for	
  images	
  
•    Reduce	
  Upload	
  
      –  Reduce	
  /	
  remove	
  cookies	
  
      –  Server-­‐side	
  cookie	
  
      –  Cookie	
  Free	
  Domain	
  
               •  staEc	
  resources	
  
               •  CDN	
  
•    HIJAX	
  
      –  Highjack	
  full	
  page	
  request	
  
      –  AJAX	
  to	
  replace	
  <body/>	
  
      –  Avoids	
  reloading	
  CSS,	
  JS,	
  background	
  images	
  
02   NETWORK
     -
     -
         REDUCING REQUESTS
         REDUCING BYTES
     -   INCREASING BANDWIDTH EFFICIENCY
     -   REDUCING LATENCY
PARALLELIZE DOWNLOADS

•    CSS	
  at	
  the	
  top	
  
       –  download	
  background	
  images	
  
       –  avoid	
  FOUC	
  
•    JS	
  at	
  the	
  booom	
  
       –  avoid	
  SPOF	
  
PARALLELIZE DOWNLOADS

•    async	
  or	
  defer	
  on	
  script	
  element	
  
PARALLELIZE DOWNLOADS

•    Domain	
  Sharding	
  
      –  >	
  6	
  resources	
  due	
  to	
  extra	
  domain	
  lookups	
  
DELAYING DOWNLOAD

•    delay	
  load	
  with	
  document.appendChild(node)	
  
DELAYING DOWNLOAD

•    delay	
  load	
  with	
  document.appendChild(node)	
  
EARLY DOWNLOAD

•    Eager	
  loading	
  
      –  Load	
  staEc	
  pages	
  eagerly	
  
      –  Store	
  in	
  localStorage	
  
      –  Uses	
  spare	
  bandwidth	
  
02   NETWORK
     -
     -
         REDUCING REQUESTS
         REDUCING BYTES
     -   INCREASING BANDWIDTH EFFICIENCY
     -   REDUCING LATENCY
CACHING
•    Caching	
  
      –  Caching	
  headers	
  
           •  Cache-­‐Control,	
  Expires,	
  Vary,	
  Last-­‐Modified,	
  ETag	
  
      –  Finger	
  print	
  
           •  >	
  1y	
  cache	
  
           •  JS,	
  CSS	
  and	
  images	
  
           •  i.e.	
  build	
  2932	
  -­‐>	
  all_2932_.css	
  

      –  Make	
  pages	
  cacheable	
  
          •  Avoid	
  cookies	
  &	
  headers	
  
          •  Use	
  path	
  variables	
  
          •  Separate	
  out	
  variable	
  content	
  
                  –  iframe	
  	
  
                  –  AJAX	
  
      –  How	
  variable	
  is	
  content?	
  	
  
          •  Always	
  consider	
  >	
  1s	
  cache	
  
CACHING

•    Types	
  of	
  Cache	
  
      –  Content	
  Delivery	
  Network	
  /	
  Edge	
  Cache	
  
              •  JS,	
  CSS	
  and	
  images	
  
      –  Reverse	
  Proxies	
  
      –  Browser	
  Cache	
  
              •  Limited	
  space,	
  regularly	
  fully	
  cycled	
  
      –  More	
  control	
  but	
  harder	
  to	
  use	
  
              •  ApplicaEon	
  Cache	
  
              •  Local	
  Storage	
  
              •  WebSQL	
  /	
  IndexedDB	
  
03   SOFTWARE
     - MORE PARALLELISM
     - FASTER PAGE RENDERING
     - FASTER INTERACTION
03   SOFTWARE
     - MORE PARALLELISM
     - FASTER PAGE RENDERING
     - FASTER INTERACTION
PARALLEL DOWNLOAD

•    Flush	
  <head/>	
  early	
  
      –  CSS	
  in	
  parallel	
  
      –  CSS	
  background	
  images	
  (sprites)	
  in	
  parallel	
  
PARALLEL SERVICE CALLS
•    Parallelize	
  service	
  calls	
  /	
  DB	
  queries	
  
•    Render	
  view	
  (and	
  flush	
  <head/>)	
  in	
  parallel	
  

              controller                                                task executor
                                            build model

                                                  view
                            render view

                                                                                        service & DB calls
             flush <head/>




             flush <body/>
03   SOFTWARE
     - MORE PARALLELISM
     - FASTER PAGE RENDERING
     - FASTER INTERACTION
FASTER PAGE RENDERING
•    Simple	
  DOM	
  
•    Efficient	
  CSS	
  selectors	
  
      –  avoid	
  generic	
  matches	
  on	
  right	
  side:	
  




      –  use	
  ids	
  or	
  specific	
  classes:	
  




•    Minimize	
  reflows	
  
      –  CSS	
  in	
  <head/>	
  
      –  <img/>	
  with	
  height	
  and	
  width	
  
03   SOFTWARE
     - MORE PARALLELISM
     - FASTER PAGE RENDERING
     - FASTER INTERACTION
FASTER PAGE INTERACTION

•        Avoid	
  blocking	
  UI	
  Thread	
  
          –  Split	
  tasks	
  
                   •  Use	
  events	
  
                   •  setTimeout	
  
          –  Web	
  Workers	
  	
  
                   •  data	
  only	
  	
  
                   •  no	
  UI	
  interacEon	
  
     UI Thread
                                                                           execuEon	
  

          button 1 UI unpressed                     button 1 onclick   button 1 UI depressed

     UI Queue

          button 2 UI depressed                    button 2 clicked                   button 1 clicked
             button 2 onclick

         button 2 UI unpressed
FASTER PAGE INTERACTION

•    SyntheEc	
  events	
  
      –  Touch	
  300ms	
  delay	
  
•    Timers	
  
      –  Lots	
  >1s	
  
      –  Few	
  <500ms	
  
      –  Use	
  single	
  global	
  repeaEng	
  Emer	
  for	
  mulEple	
  tasks	
  
•    Pre-­‐execute	
  
      –  Use	
  middle	
  Eer	
  as	
  much	
  as	
  possible	
  
This talk….

1.	
     Why	
  We	
  Should	
  Care	
  About	
  Performance?	
  



2.	
     Network	
  
             Reducing	
  Requests	
  
             Reducing	
  Bytes	
  
             Increasing	
  Bandwidth	
  Efficiency	
  
             Reducing	
  Latency	
  



3.	
     SoHware	
  
             More	
  Parallelism	
  
             Faster	
  Page	
  Rendering	
  
             Faster	
  Page	
  InteracEon	
  

More Related Content

What's hot

10+апреля+лучшие+практики+и+инновации+вадим+береговский+akamai
10+апреля+лучшие+практики+и+инновации+вадим+береговский+akamai10+апреля+лучшие+практики+и+инновации+вадим+береговский+akamai
10+апреля+лучшие+практики+и+инновации+вадим+береговский+akamai
elenae00
 
Real Life WebSocket Case Studies and Demos
Real Life WebSocket Case Studies and DemosReal Life WebSocket Case Studies and Demos
Real Life WebSocket Case Studies and Demos
Peter Moskovits
 
Velocity NY 2013 - From Slow to Fast: Improving Performance on Intuit Website...
Velocity NY 2013 - From Slow to Fast: Improving Performance on Intuit Website...Velocity NY 2013 - From Slow to Fast: Improving Performance on Intuit Website...
Velocity NY 2013 - From Slow to Fast: Improving Performance on Intuit Website...
Jay Hung
 
Web前端性能分析工具导引
Web前端性能分析工具导引Web前端性能分析工具导引
Web前端性能分析工具导引
冰 郭
 
7 Habits of Exceptional Performance
7 Habits of Exceptional Performance7 Habits of Exceptional Performance
7 Habits of Exceptional Performance
Nicole Sullivan
 
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
 
Yahoo Communities Architecture Unlikely Bedfellows
Yahoo Communities Architecture Unlikely BedfellowsYahoo Communities Architecture Unlikely Bedfellows
Yahoo Communities Architecture Unlikely Bedfellows
ConSanFrancisco123
 

What's hot (20)

Quantifying The Mobile Difference
Quantifying The Mobile DifferenceQuantifying The Mobile Difference
Quantifying The Mobile Difference
 
10+апреля+лучшие+практики+и+инновации+вадим+береговский+akamai
10+апреля+лучшие+практики+и+инновации+вадим+береговский+akamai10+апреля+лучшие+практики+и+инновации+вадим+береговский+akamai
10+апреля+лучшие+практики+и+инновации+вадим+береговский+akamai
 
Real Life WebSocket Case Studies and Demos
Real Life WebSocket Case Studies and DemosReal Life WebSocket Case Studies and Demos
Real Life WebSocket Case Studies and Demos
 
Velocity NY 2013 - From Slow to Fast: Improving Performance on Intuit Website...
Velocity NY 2013 - From Slow to Fast: Improving Performance on Intuit Website...Velocity NY 2013 - From Slow to Fast: Improving Performance on Intuit Website...
Velocity NY 2013 - From Slow to Fast: Improving Performance on Intuit Website...
 
Building faster websites: web performance with WordPress
Building faster websites: web performance with WordPressBuilding faster websites: web performance with WordPress
Building faster websites: web performance with WordPress
 
Performance Implications of Mobile Design (Perf Audience Edition)
Performance Implications of Mobile Design (Perf Audience Edition)Performance Implications of Mobile Design (Perf Audience Edition)
Performance Implications of Mobile Design (Perf Audience Edition)
 
Step by Step Mobile Optimization
Step by Step Mobile OptimizationStep by Step Mobile Optimization
Step by Step Mobile Optimization
 
Web前端性能分析工具导引
Web前端性能分析工具导引Web前端性能分析工具导引
Web前端性能分析工具导引
 
"Turbo boost your website" aka BigPipe at Webinale 2014 in Berlin
"Turbo boost your website" aka BigPipe at Webinale 2014 in Berlin"Turbo boost your website" aka BigPipe at Webinale 2014 in Berlin
"Turbo boost your website" aka BigPipe at Webinale 2014 in Berlin
 
7 Habits of Exceptional Performance
7 Habits of Exceptional Performance7 Habits of Exceptional Performance
7 Habits of Exceptional Performance
 
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...
 
IBM Connect 2016 - AD1548 - Building Responsive XPages Applications
IBM Connect 2016 - AD1548 - Building Responsive XPages ApplicationsIBM Connect 2016 - AD1548 - Building Responsive XPages Applications
IBM Connect 2016 - AD1548 - Building Responsive XPages Applications
 
Mot cph when its just too slow
Mot cph when its just too slowMot cph when its just too slow
Mot cph when its just too slow
 
Offline capable web applications with Google Gears and Dojo Offline
Offline capable web applications with Google Gears and Dojo OfflineOffline capable web applications with Google Gears and Dojo Offline
Offline capable web applications with Google Gears and Dojo Offline
 
A Beard, An App, A Blender
A Beard, An App, A BlenderA Beard, An App, A Blender
A Beard, An App, A Blender
 
SharePoint Performance - Best Practices from the Field
SharePoint Performance - Best Practices from the Field SharePoint Performance - Best Practices from the Field
SharePoint Performance - Best Practices from the Field
 
After YSlow "A"
After YSlow "A"After YSlow "A"
After YSlow "A"
 
Yahoo Communities Architecture Unlikely Bedfellows
Yahoo Communities Architecture Unlikely BedfellowsYahoo Communities Architecture Unlikely Bedfellows
Yahoo Communities Architecture Unlikely Bedfellows
 
Imagine 2014: The Devil is in the Details How to Optimize Magento Hosting to ...
Imagine 2014: The Devil is in the Details How to Optimize Magento Hosting to ...Imagine 2014: The Devil is in the Details How to Optimize Magento Hosting to ...
Imagine 2014: The Devil is in the Details How to Optimize Magento Hosting to ...
 
Nl when its just too slow
Nl when its just too slowNl when its just too slow
Nl when its just too slow
 

Viewers also liked (6)

Social Networking Sites
Social Networking SitesSocial Networking Sites
Social Networking Sites
 
Gold
GoldGold
Gold
 
Lab tests ok1294990656
Lab tests   ok1294990656Lab tests   ok1294990656
Lab tests ok1294990656
 
CV
CVCV
CV
 
Trends in group 2 part 3 chemical properties
Trends in group 2 part 3   chemical propertiesTrends in group 2 part 3   chemical properties
Trends in group 2 part 3 chemical properties
 
Invokedynamic in 45 Minutes
Invokedynamic in 45 MinutesInvokedynamic in 45 Minutes
Invokedynamic in 45 Minutes
 

Similar to High Performance Mobile Web

Web Performance 101 - Gil Givati
Web Performance 101 - Gil GivatiWeb Performance 101 - Gil Givati
Web Performance 101 - Gil Givati
Mika Josting
 
High performance website
High performance websiteHigh performance website
High performance website
Chamnap Chhorn
 
Effective and Efficient Design with CSS3
Effective and Efficient Design with CSS3Effective and Efficient Design with CSS3
Effective and Efficient Design with CSS3
Zoe Gillenwater
 
Raiders of the Fast Start: Frontend Performance Archaeology PerfmattersConf 2018
Raiders of the Fast Start: Frontend Performance Archaeology PerfmattersConf 2018Raiders of the Fast Start: Frontend Performance Archaeology PerfmattersConf 2018
Raiders of the Fast Start: Frontend Performance Archaeology PerfmattersConf 2018
Katie Sylor-Miller
 
Talk Paris Infovis 091207132953 Phpapp01(2)
Talk Paris Infovis 091207132953 Phpapp01(2)Talk Paris Infovis 091207132953 Phpapp01(2)
Talk Paris Infovis 091207132953 Phpapp01(2)
johnnybiz
 

Similar to High Performance Mobile Web (20)

Web Performance 101 - Gil Givati
Web Performance 101 - Gil GivatiWeb Performance 101 - Gil Givati
Web Performance 101 - Gil Givati
 
Gaming across multiple devices
Gaming across multiple devicesGaming across multiple devices
Gaming across multiple devices
 
Cvcc performance tuning
Cvcc performance tuningCvcc performance tuning
Cvcc performance tuning
 
Website optimization with request reduce
Website optimization with request reduceWebsite optimization with request reduce
Website optimization with request reduce
 
Meta Refresh 2014
Meta Refresh 2014Meta Refresh 2014
Meta Refresh 2014
 
High performance website
High performance websiteHigh performance website
High performance website
 
A Responsive Design Case Study - What We Did Wrong Building ResponsiveDesign....
A Responsive Design Case Study - What We Did Wrong Building ResponsiveDesign....A Responsive Design Case Study - What We Did Wrong Building ResponsiveDesign....
A Responsive Design Case Study - What We Did Wrong Building ResponsiveDesign....
 
Responsive and Fast
Responsive and FastResponsive and Fast
Responsive and Fast
 
Effective and Efficient Design with CSS3
Effective and Efficient Design with CSS3Effective and Efficient Design with CSS3
Effective and Efficient Design with CSS3
 
Raiders of the Fast Start: Frontend Performance Archaeology PerfmattersConf 2018
Raiders of the Fast Start: Frontend Performance Archaeology PerfmattersConf 2018Raiders of the Fast Start: Frontend Performance Archaeology PerfmattersConf 2018
Raiders of the Fast Start: Frontend Performance Archaeology PerfmattersConf 2018
 
Speed is Essential for a Great Web Experience
Speed is Essential for a Great Web ExperienceSpeed is Essential for a Great Web Experience
Speed is Essential for a Great Web Experience
 
Html5 Whats around the bend
Html5 Whats around the bendHtml5 Whats around the bend
Html5 Whats around the bend
 
Using Web Standards to create Interactive Data Visualizations for the Web
Using Web Standards to create Interactive Data Visualizations for the WebUsing Web Standards to create Interactive Data Visualizations for the Web
Using Web Standards to create Interactive Data Visualizations for the Web
 
Talk Paris Infovis 091207132953 Phpapp01(2)
Talk Paris Infovis 091207132953 Phpapp01(2)Talk Paris Infovis 091207132953 Phpapp01(2)
Talk Paris Infovis 091207132953 Phpapp01(2)
 
Real-world CSS3
Real-world CSS3Real-world CSS3
Real-world CSS3
 
EscConf - Deep Dive Frontend Optimization
EscConf - Deep Dive Frontend OptimizationEscConf - Deep Dive Frontend Optimization
EscConf - Deep Dive Frontend Optimization
 
about HTML5
about HTML5about HTML5
about HTML5
 
Web Performance 101
Web Performance 101Web Performance 101
Web Performance 101
 
Architectures For Scaling Ajax
Architectures For Scaling AjaxArchitectures For Scaling Ajax
Architectures For Scaling Ajax
 
performance.ppt
performance.pptperformance.ppt
performance.ppt
 

Recently uploaded

Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo DiehlFuture Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Peter Udo Diehl
 

Recently uploaded (20)

What's New in Teams Calling, Meetings and Devices April 2024
What's New in Teams Calling, Meetings and Devices April 2024What's New in Teams Calling, Meetings and Devices April 2024
What's New in Teams Calling, Meetings and Devices April 2024
 
Portal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russePortal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russe
 
WSO2CONMay2024OpenSourceConferenceDebrief.pptx
WSO2CONMay2024OpenSourceConferenceDebrief.pptxWSO2CONMay2024OpenSourceConferenceDebrief.pptx
WSO2CONMay2024OpenSourceConferenceDebrief.pptx
 
Designing for Hardware Accessibility at Comcast
Designing for Hardware Accessibility at ComcastDesigning for Hardware Accessibility at Comcast
Designing for Hardware Accessibility at Comcast
 
Speed Wins: From Kafka to APIs in Minutes
Speed Wins: From Kafka to APIs in MinutesSpeed Wins: From Kafka to APIs in Minutes
Speed Wins: From Kafka to APIs in Minutes
 
Where to Learn More About FDO _ Richard at FIDO Alliance.pdf
Where to Learn More About FDO _ Richard at FIDO Alliance.pdfWhere to Learn More About FDO _ Richard at FIDO Alliance.pdf
Where to Learn More About FDO _ Richard at FIDO Alliance.pdf
 
Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024
 
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo DiehlFuture Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
 
Microsoft CSP Briefing Pre-Engagement - Questionnaire
Microsoft CSP Briefing Pre-Engagement - QuestionnaireMicrosoft CSP Briefing Pre-Engagement - Questionnaire
Microsoft CSP Briefing Pre-Engagement - Questionnaire
 
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdfIntroduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
 
Using IESVE for Room Loads Analysis - UK & Ireland
Using IESVE for Room Loads Analysis - UK & IrelandUsing IESVE for Room Loads Analysis - UK & Ireland
Using IESVE for Room Loads Analysis - UK & Ireland
 
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdfSimplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
 
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
 
TopCryptoSupers 12thReport OrionX May2024
TopCryptoSupers 12thReport OrionX May2024TopCryptoSupers 12thReport OrionX May2024
TopCryptoSupers 12thReport OrionX May2024
 
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdfLinux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
 
AI presentation and introduction - Retrieval Augmented Generation RAG 101
AI presentation and introduction - Retrieval Augmented Generation RAG 101AI presentation and introduction - Retrieval Augmented Generation RAG 101
AI presentation and introduction - Retrieval Augmented Generation RAG 101
 
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdfHow Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf
 
Optimizing NoSQL Performance Through Observability
Optimizing NoSQL Performance Through ObservabilityOptimizing NoSQL Performance Through Observability
Optimizing NoSQL Performance Through Observability
 
A Business-Centric Approach to Design System Strategy
A Business-Centric Approach to Design System StrategyA Business-Centric Approach to Design System Strategy
A Business-Centric Approach to Design System Strategy
 
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
 

High Performance Mobile Web

  • 1. High Performance Mobile Web James D Bloom http://blog.jamesdbloom.com
  • 2. ABOUT ME JAMES D BLOOM Mobile Web Expert Technical  lead  of  mobile  web  at  Be2air     Focusing  on:    -­‐  High  Performance    -­‐  Reliability    -­‐  Wide  Device  Support    -­‐  Keeping  it  Simple    -­‐  Automated  TesEng  
  • 3. This talk…. 1.   Why  We  Should  Care  About  Performance?   2.   Network   Reducing  Requests   Reducing  Bytes   Increasing  Bandwidth  Efficiency   Reducing  Latency   3.   SoHware   More  Parallelism   Faster  Page  Rendering   Faster  Page  InteracEon  
  • 4. 01 WHY WE SHOULD CARE ABOUT PERFORMANCE?
  • 5. -5s +12% revenue each -100ms -50% hardware +1% revenue Wallmart & Amazon Shopzilla 0.4 -> 0.9s -2.2s -25% searches +15% downloads Google Firefox +1s -4% revenue Bing WHY CARE?
  • 6. LOAD TIME (in seconds) 60   51.38   50   47% expect 44.67   40   <2s 40% abandon 30   if >3s 27.16   20   15.86   12.49   9.21   10.36   11.43   7.65   7.85   8.64   10   5.41   6.03   0   h"p://www.keynote.com/keynote_compe11ve_research/performance_indices/mobile/retail-­‐world  
  • 7. 02 NETWORK - - REDUCING REQUESTS REDUCING BYTES - INCREASING BANDWIDTH EFFICIENCY - REDUCING LATENCY
  • 8. 02 NETWORK - - REDUCING REQUESTS REDUCING BYTES - INCREASING BANDWIDTH EFFICIENCY - REDUCING LATENCY
  • 9. CORELATION TO LOAD TIME Reduce Requests TOTAL REQUESTS 0.46 IMAGE REQUESTS 0.44 TOTAL XFER SIZE 0.40 IMAGE XFER SIZE 0.37 DOMAINS 0.37 Total   Image   Total  Xfer   Image  Xfer   Domains   Requests   Requests   Size   Size   h"p://mobile.h"parchive.org/   Based  on:  Alexa  Top  1,000,000  Sites  
  • 10. COMBINE REQUESTS - BUNDLING •  JavaScript  Bundle   –  Combine  all  files  into  single  bundle   •  CSS  Bundle   –  Combine  all  files  into  single  bundle    
  • 11. COMBINE REQUESTS - SPRITES •  Image  Sprite   –  Combine  all  images  into  CSS  Sprite  
  • 12. COMBINE REQUESTS - INLINING •  Inlining   –  dataURI  for  external  resources   –  Base64  larger  by  8/6  
  • 13. COMBINE REQUESTS - INLINING •  First  Load:   –  inline  resources  and  set  cookie   –  put  resources  in  localStorage  and  update  cookie   •  Subsequent  Load:   –  check  cookie   •  if  updated   –  load  resources  from  localStorage  (at  top  of  page)   •  if  iniEal  value  -­‐>  no  JavaScript  or  localStorage   –  return  with  resources  as  external  links   •  Bing   –  1st  request  54.9  KB   –  2nd  request  5.5  KB  
  • 14. AVOID REQUESTS •  Avoid  redirects  –  71%  of  mobile  sites  have  3xx   –  or  at  least  cache  them   •  Images   –  CSS3   •  gradient,  rounded  corners,  drop  shadow,  text  shadow   –  Avoid  animated  gifs   •  staEc  image  +  JS   •  Load  (and  eval)  on  demand   –  Images  -­‐>  google  image  search   –  JS  -­‐>  gmail  
  • 15. 02 NETWORK - - REDUCING REQUESTS REDUCING BYTES - INCREASING BANDWIDTH EFFICIENCY - REDUCING LATENCY
  • 16. RESPONSE SIZE (in kB) Reduce Image Size IMAGES 67% 358   SCRIPTS 21% HTML 6% 112   STYLESHEETS 4% 33   23   10   OTHER 2% Images   Scripts   HTML   Stylesheets   Other   h"p://mobile.h"parchive.org/   Based  on:  Alexa  Top  1,000,000  Sites  
  • 17. REDUCING BYTES – ADAPTIVE RESOURCES •  AdapEve  Images   –  UA  sniffing  or  media  queries   –  Major  breakpoints  or  server  side  scaling   •  AdapEve  JavaScript   –  UA  sniffing  for  device  specific  JS   •  AdapEve  CSS   –  Media  queries  for  device  specific  CSS  
  • 18. REDUCING BYTES - MINIFY •  Minify  JS  &  CSS   –  Typically  during  bundling   •  Mini  JS  framework   –  don’t  send  desktop  JS  to  mobile  
  • 19. REDUCING BYTES •  Compression   –  Use  gzip  for  text  resources   –  Maximize  lossless  compression  for  images   •  Reduce  Upload   –  Reduce  /  remove  cookies   –  Server-­‐side  cookie   –  Cookie  Free  Domain   •  staEc  resources   •  CDN   •  HIJAX   –  Highjack  full  page  request   –  AJAX  to  replace  <body/>   –  Avoids  reloading  CSS,  JS,  background  images  
  • 20. 02 NETWORK - - REDUCING REQUESTS REDUCING BYTES - INCREASING BANDWIDTH EFFICIENCY - REDUCING LATENCY
  • 21. PARALLELIZE DOWNLOADS •  CSS  at  the  top   –  download  background  images   –  avoid  FOUC   •  JS  at  the  booom   –  avoid  SPOF  
  • 22. PARALLELIZE DOWNLOADS •  async  or  defer  on  script  element  
  • 23. PARALLELIZE DOWNLOADS •  Domain  Sharding   –  >  6  resources  due  to  extra  domain  lookups  
  • 24. DELAYING DOWNLOAD •  delay  load  with  document.appendChild(node)  
  • 25. DELAYING DOWNLOAD •  delay  load  with  document.appendChild(node)  
  • 26. EARLY DOWNLOAD •  Eager  loading   –  Load  staEc  pages  eagerly   –  Store  in  localStorage   –  Uses  spare  bandwidth  
  • 27. 02 NETWORK - - REDUCING REQUESTS REDUCING BYTES - INCREASING BANDWIDTH EFFICIENCY - REDUCING LATENCY
  • 28. CACHING •  Caching   –  Caching  headers   •  Cache-­‐Control,  Expires,  Vary,  Last-­‐Modified,  ETag   –  Finger  print   •  >  1y  cache   •  JS,  CSS  and  images   •  i.e.  build  2932  -­‐>  all_2932_.css   –  Make  pages  cacheable   •  Avoid  cookies  &  headers   •  Use  path  variables   •  Separate  out  variable  content   –  iframe     –  AJAX   –  How  variable  is  content?     •  Always  consider  >  1s  cache  
  • 29. CACHING •  Types  of  Cache   –  Content  Delivery  Network  /  Edge  Cache   •  JS,  CSS  and  images   –  Reverse  Proxies   –  Browser  Cache   •  Limited  space,  regularly  fully  cycled   –  More  control  but  harder  to  use   •  ApplicaEon  Cache   •  Local  Storage   •  WebSQL  /  IndexedDB  
  • 30. 03 SOFTWARE - MORE PARALLELISM - FASTER PAGE RENDERING - FASTER INTERACTION
  • 31. 03 SOFTWARE - MORE PARALLELISM - FASTER PAGE RENDERING - FASTER INTERACTION
  • 32. PARALLEL DOWNLOAD •  Flush  <head/>  early   –  CSS  in  parallel   –  CSS  background  images  (sprites)  in  parallel  
  • 33. PARALLEL SERVICE CALLS •  Parallelize  service  calls  /  DB  queries   •  Render  view  (and  flush  <head/>)  in  parallel   controller task executor build model view render view service & DB calls flush <head/> flush <body/>
  • 34. 03 SOFTWARE - MORE PARALLELISM - FASTER PAGE RENDERING - FASTER INTERACTION
  • 35. FASTER PAGE RENDERING •  Simple  DOM   •  Efficient  CSS  selectors   –  avoid  generic  matches  on  right  side:   –  use  ids  or  specific  classes:   •  Minimize  reflows   –  CSS  in  <head/>   –  <img/>  with  height  and  width  
  • 36. 03 SOFTWARE - MORE PARALLELISM - FASTER PAGE RENDERING - FASTER INTERACTION
  • 37. FASTER PAGE INTERACTION •  Avoid  blocking  UI  Thread   –  Split  tasks   •  Use  events   •  setTimeout   –  Web  Workers     •  data  only     •  no  UI  interacEon   UI Thread execuEon   button 1 UI unpressed button 1 onclick button 1 UI depressed UI Queue button 2 UI depressed button 2 clicked button 1 clicked button 2 onclick button 2 UI unpressed
  • 38. FASTER PAGE INTERACTION •  SyntheEc  events   –  Touch  300ms  delay   •  Timers   –  Lots  >1s   –  Few  <500ms   –  Use  single  global  repeaEng  Emer  for  mulEple  tasks   •  Pre-­‐execute   –  Use  middle  Eer  as  much  as  possible  
  • 39. This talk…. 1.   Why  We  Should  Care  About  Performance?   2.   Network   Reducing  Requests   Reducing  Bytes   Increasing  Bandwidth  Efficiency   Reducing  Latency   3.   SoHware   More  Parallelism   Faster  Page  Rendering   Faster  Page  InteracEon