• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
High Performance Mobile Web
 

High Performance Mobile Web

on

  • 343 views

 

Statistics

Views

Total Views
343
Views on SlideShare
332
Embed Views
11

Actions

Likes
0
Downloads
3
Comments
0

1 Embed 11

https://twitter.com 11

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    High Performance Mobile Web High Performance Mobile Web Presentation Transcript

    • © Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 1 High Performance Mobile Web James D Bloom http://blog.jamesdbloom.com
    • © 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
    • © 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 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
    • © Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 5 NETWORK - REDUCING REQUESTS - REDUCING BYTES - INCREASING BANDWIDTH EFFICIENCY 02
    • © 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
    • © 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
    • © Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 8 COMBINE REQUESTS - INLINING §  Inlining –  dataURI for external resources –  Base64 larger by 8/6
    • © 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  
    • © Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 10 NETWORK - REDUCING REQUESTS - REDUCING BYTES - INCREASING BANDWIDTH EFFICIENCY 02
    • © 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
    • © 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
    • © 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
    • © 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
    • © Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 15 NETWORK - REDUCING REQUESTS - REDUCING BYTES - INCREASING BANDWIDTH EFFICIENCY 02
    • © 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
    • © Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 17 PARALLELIZE DOWNLOADS §  Domain Sharding –  > 6 resources due to extra domain lookups
    • © Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 18 DELAYING DOWNLOAD §  delay load with document.appendChild(node)
    • © Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 19 EARLY DOWNLOAD §  Eager loading –  Load static pages eagerly –  Store in localStorage –  Uses spare bandwidth
    • © 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 & DB calls flush <head/> controller task executor view flush <body/> §  Parallelize service calls / DB queries §  Render view (and flush <head/>) in parallel
    • © Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 22 PARALLEL DOWNLOAD §  Flush <head/> early –  CSS in parallel –  CSS background images (sprites) in parallel
    • © Equal Experts UK Ltd 2011 - confidential www.equalexperts.com 23 Questions….