0
© Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 1
High Performance Mobile Web
James D Bloom
http://blog.ja...
© Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 2
This talk….
§  Why We Should Care About Performance?
§...
© Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 3
WHY
- WE SHOULD CARE ABOUT PERFORMANCE?01
© Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 4
-2.2s
+15% downloads
Firefox
0.4 -> 0.9s
-25% searches
G...
© Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 5
NETWORK
- REDUCING REQUESTS
- REDUCING BYTES
- INCREASIN...
© Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 6
CORELATION TO LOAD TIME
Total
Requests
Image
Requests
To...
© Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 7
COMBINE REQUESTS - BUNDLING
§  JavaScript Bundle
–  Com...
© Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 8
COMBINE REQUESTS - INLINING
§  Inlining
–  dataURI for ...
© Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 9
COMBINE REQUESTS - INLINING
§  First	
  Load:	
  
–  in...
© Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 10
NETWORK
- REDUCING REQUESTS
- REDUCING BYTES
- INCREASI...
© Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 11
RESPONSE SIZE (in kB)
358
112
33 23
10
Images Scripts H...
© Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 12
REDUCING BYTES – ADAPTIVE RESOURCES
§  Adaptive Images...
© Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 13
REDUCING BYTES - MINIFY
§  Minify JS & CSS
–  Typicall...
© Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 14
REDUCING BYTES
§  Compression
–  Use gzip for text res...
© Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 15
NETWORK
- REDUCING REQUESTS
- REDUCING BYTES
- INCREASI...
© Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 16
PARALLELIZE DOWNLOADS
§  CSS at the top
–  download ba...
© Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 17
PARALLELIZE DOWNLOADS
§  Domain Sharding
–  > 6 resour...
© Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 18
DELAYING DOWNLOAD
§  delay load with document.appendCh...
© Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 19
EARLY DOWNLOAD
§  Eager loading
–  Load static pages e...
© Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 20
SOFTWARE
- INCREASING PARALLELISM03
© Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 21
PARALLEL SERVICE CALLS
render view
build model
service ...
© Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 22
PARALLEL DOWNLOAD
§  Flush <head/> early
–  CSS in par...
© Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 23
Questions….
Upcoming SlideShare
Loading in...5
×

High Performance Mobile Web

366

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
366
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "High Performance Mobile Web"

  1. 1. © Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 1 High Performance Mobile Web James D Bloom http://blog.jamesdbloom.com
  2. 2. © Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 2 This talk…. §  Why We Should Care About Performance? §  Network –  Reducing Requests –  Reducing Bytes –  Increasing Bandwidth Efficiency §  Software –  Increasing Parallelism
  3. 3. © Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 3 WHY - WE SHOULD CARE ABOUT PERFORMANCE?01
  4. 4. © Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 4 -2.2s +15% downloads Firefox 0.4 -> 0.9s -25% searches Google -5s +12% revenue -50% hardware Shopzilla each -100ms +1% revenue Wallmart & Amazon Premature optimization is the root of all evil (or at least most of it) in programming. – Donald Knuth +1s -4% revenue Bing But… 40% abandon if >3s
  5. 5. © Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 5 NETWORK - REDUCING REQUESTS - REDUCING BYTES - INCREASING BANDWIDTH EFFICIENCY 02
  6. 6. © Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 6 CORELATION TO LOAD TIME Total Requests Image Requests Total Xfer Size Image Xfer Size Domains TOTAL REQUESTS 0.46 IMAGE REQUESTS 0.44 TOTAL XFER SIZE 0.40 IMAGE XFER SIZE 0.37 Reduce Requests DOMAINS 0.37 http://mobile.httparchive.org/ Based on: Alexa Top 1,000,000 Sites
  7. 7. © Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 7 COMBINE REQUESTS - BUNDLING §  JavaScript Bundle –  Combine all files into single bundle §  CSS Bundle –  Combine all files into single bundle §  Image Sprite –  Combine all images into CSS Sprite
  8. 8. © Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 8 COMBINE REQUESTS - INLINING §  Inlining –  dataURI for external resources –  Base64 larger by 8/6
  9. 9. © Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 9 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  ini>al  value  -­‐>  no  JavaScript  or  localStorage   –  return  with  resources  as  external  links   §  Bing   –  1st  request  54.9  KB   –  2nd  request  5.5  KB  
  10. 10. © Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 10 NETWORK - REDUCING REQUESTS - REDUCING BYTES - INCREASING BANDWIDTH EFFICIENCY 02
  11. 11. © Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 11 RESPONSE SIZE (in kB) 358 112 33 23 10 Images Scripts HTML Stylesheets Other IMAGES 67% SCRIPTS 21% HTML 6% STYLESHEETS 4% OTHER 2% Reduce Image Size http://mobile.httparchive.org/ Based on: Alexa Top 1,000,000 Sites
  12. 12. © Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 12 REDUCING BYTES – ADAPTIVE RESOURCES §  Adaptive Images –  UA sniffing or media queries –  Major breakpoints or server side scaling §  Adaptive JavaScript –  UA sniffing for device specific JS §  Adaptive CSS –  Media queries for device specific CSS
  13. 13. © Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 13 REDUCING BYTES - MINIFY §  Minify JS & CSS –  Typically during bundling §  Mini JS framework –  don’t send desktop JS to mobile
  14. 14. © Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 14 REDUCING BYTES §  Compression –  Use gzip for text resources –  Maximize lossless compression for images §  Reduce Upload –  Reduce / remove cookies –  Server-side cookie –  Cookie Free Domain •  static resources •  CDN §  HIJAX –  Highjack full page request –  AJAX to replace <body/> –  Avoids reloading CSS, JS, background images §  Images –  Avoid animated gifs •  static image + JS
  15. 15. © Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 15 NETWORK - REDUCING REQUESTS - REDUCING BYTES - INCREASING BANDWIDTH EFFICIENCY 02
  16. 16. © Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 16 PARALLELIZE DOWNLOADS §  CSS at the top –  download background images –  avoid FOUC §  JS at the bottom –  avoid SPOF
  17. 17. © Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 17 PARALLELIZE DOWNLOADS §  Domain Sharding –  > 6 resources due to extra domain lookups
  18. 18. © Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 18 DELAYING DOWNLOAD §  delay load with document.appendChild(node)
  19. 19. © Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 19 EARLY DOWNLOAD §  Eager loading –  Load static pages eagerly –  Store in localStorage –  Uses spare bandwidth
  20. 20. © Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 20 SOFTWARE - INCREASING PARALLELISM03
  21. 21. © Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 21 PARALLEL SERVICE CALLS render view build model service & DB calls flush <head/> controller task executor view flush <body/> §  Parallelize service calls / DB queries §  Render view (and flush <head/>) in parallel
  22. 22. © Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 22 PARALLEL DOWNLOAD §  Flush <head/> early –  CSS in parallel –  CSS background images (sprites) in parallel
  23. 23. © Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 23 Questions….
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×