High Performance Mobile Web

High Performance Mobile Web
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
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
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
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
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
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/>
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
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

Check these out next

High Performance Mobile Web

Recommended

More Related Content

Slideshows for you(20)

Similar to High Performance Mobile Web(20)

Recently uploaded(20)

High Performance Mobile Web