Delivering Performance on a Diverse Web

The web is now more global and diverse than ever. How can you ensure that your website delivers a high-performance experience regardless of device type and connectivity?

Transcript

1. Delivering Performance on a Diverse Web Ronan Cremin, Afilias Technologies 23/9/2015
2. Overview Problem • A new web reality • Device evolution • A more diverse & global web • Web performance crisis Solution • How to fix it with NGINX
3. DeviceAtlas • Traffic intelligence • Afilias Technologies • W3C contributors & editors • mobiForge.com, internet.com
4. A New Web Reality
5. Device Evolution
6. Device Evolution 1990 2007 2015 2000 dark ages of the web Cambrian explosion
7. Tipping point in devices Number of global users (millions) Source: Morgan Stanley Research
8. Mobile traffic is majority Facebook MAUs by platform Source: Facebook
9. Mobile device penetration Mobile device penetration North America Western Europe Central & Eastern Europe Developed Asia Pacific EMAP Caribbean & Latin America Middle East & North Africa Sub Saharan Africa WORLD
10. Western World World Wide Web Internet user penetration curve, 1990 - 2020 Source: Hillhouse Capital
11. Fastest-growing internet markets barely use apps Mobile impressions by region 2015 Source: Opera Mediaworks
12. Web Landscape Evolution https://www.flickr.com/photos/tomkoadam/
13. 2002 mind the gap portable capable
15. Contexts, interfaces, input methods Physical screen size Input methods Viewing distance Physical context Pixel dimensions Tablet Desktop TV Mobile 176 x 220 to 800 x 1280 600 x 800 to 2048 x 1536 800 x 600 to 2560 x 1600 1280 x 720 to 1980 x 1080 0.3m 0.5m 0.7m 3m
16. Responsive Web Design • One-size-fits-all approach • Addresses the complexity of handling different device types & sizes with layout changes • Useful technique, not without its issues • Default technique for web developers • Primarily a layout technique 1024px 768px 320px
17. Web ecosystem evolution • Advertising ecosystem failing as monetisation strategy • Sites are adding more ads • Third-party JS libraries increasingly used • Web fonts • Rich web frameworks https://www.flickr.com/photos/staffanscherz/
18. Source: httparchive.org Average bytes per page by content type June 2015
19. DSL / Cable 2.2MB 4G 2.2MB 2G 2.2MB $ UNUSED USED
20. Delivering a website that only works for the luckiest, most fortunate users on the web is uninteresting, not to mention bad for business. Source: @scottjehl “ “
21. Web Performance Crisis
24. Data: performance is critical 1s speed-up: 2% ↑ conversions Temporary delays = long term damage 0.4s speed-up 9% ↑ page views 0.1s speed-up: 1% ↑ revenue 2.2s speedup: 60m ↑ downloads 5s speed-up: 25% ↑ pageviews 7 - 12% ↑ revenue
25. Performance more important on diverse web • Constraints growing as page weight increasing • In terms of raw CPU power, RAM & connectivity mobile will always lag • Mobile context: • shorter attention span • higher sensitivity to delays
26. Delivering Performance on a Diverse Web https://www.flickr.com/photos/bowtoo/
28. entirely different!
31. Common approaches of top 10 • Light & efficient sites, significantly below industry average • Server-side adaptation— different content served for every device • Different prioritisation of content per device type • High dynamic range
32. Dynamic range DESKTOP IPHONE NOKIA 366KB 199KB 3KB 122x
33. Adaptive content
34. Introducing server-side adaptation • Optimize on first load • Immediate serving of correct images • Tailor page content & visitor experience per device type • Do maximum on server side so visitor’s browser doesn’t have to
35. Benefits to site owner • Benefits not limited to visitor • Site hosting becomes faster & cheaper • Lower bandwidth & CDN bills • Get more out of every server • Greater market reach: high-end 4G-connected device is the edge case, not the norm
36. Adaptive site = market reach I learned a valuable lesson about the state of the Internet throughout the rest of the world. Many of us are fortunate to live in high bandwidth regions, but there are still large portions of the world that do not. By keeping your client side code small and lightweight, you can literally open your product up to new markets. …entire populations of people simply could not use YouTube because it took too long to see anything. http://blog.chriszacharias.com/page-weight-matters — Chris Zacharias, YouTube “ “
37. Bandwidth savings Traffic Before (KB) After (KB) Weighted total (KB) Desktop 40% 1,000 1,000 400 Mobile 40% 1,000 300 120 Bots 20% 1,000 300 60 Total 580 Reduction 42%
38. Benefits to site owner • Device detection at server layer: • Adapt sites wholesale within infrastructure • No developer time required • Site visitors protected from poor craftsmanship • Provides additional levers for controlling site delivery • Selective inclusion / exclusion / compression of content • Tailor site response to bots—they don’t care about looks
39. Case study: NGINX + DeviceAtlas • 200K sites, used in 140 countries • Without server-side adaptation • ~40 servers • $10,000/month servers, $1400/ month bandwidth • With server-side adaptation • ~20 servers • $5,500/month servers, $750/ month bandwidth • Much improved user experience
40. Achieving this with NGINX & DeviceAtlas
41. Add DeviceAtlas tar -zxvf deviceatlas_cpp-nginx.tar.gz cd deviceatlas_cpp-nginx cmake . make http { # Device Detection devatlas_db /PATH/TO/JSON; # Carrier Identification carrierapi_db /PATH/TO/DATA devatlas_properties_cookie DAPROPS; } 1 2
42. Utilize intelligence • Device details available for every request: • nginx.conf • Environment variables / HTTP headers • Available to all downstream environments • Language-neutral Device type Hardware properties Carrier identification Name Browser properties OS details JavaScript properties Network protocols HTML5 properties
43. Why do this in NGINX? • Cheaper • More efficient to do this in C code front-facing servers • Easier • Resulting intelligence available downstream • Single point to maintain & update NGINX Ruby PHP NodeJS HTTP REQUEST + DEVICE DATA
44. Image Optimisation Per-device image adjustments
45. Per-device image optimisation • Typically ~70% of page weight • Best first step for weight reduction • Really big gains quickly achievable
46. Start: stock RWD template • RWD template • 998KB OTA size • http://html5up.net/spectral
47. location /resize { set $width $da_displayWidth; set $height $da_displayHeight; if ($width = "") { set $width "-"; set $height "-"; } set $dimensions "_${width}x${height}_${quality}"; alias /tmp/nginx/resize$dimensions; if ($uri ~* "^/resize/(.*)" ) { set $image_path $1; } set $image_uri image_resize/$image_path?width=$width &height=$height&quality=$quality; if (!-f $request_filename) { proxy_pass http://127.0.0.1:8080/$image_uri; break; } proxy_store /tmp/nginx/resize$dimensions/$image_path proxy_store_access user:rw group:rw all:r; proxy_temp_path /tmp/images; proxy_set_header Host $host; } location /image_resize { alias /var/www/images; image_filter resize $arg_width $arg_height; image_filter_jpeg_quality $arg_quality; allow 127.0.0.0/8; deny all; } Modify NGINX • Compile in image resizing module • cmake --with- http_image_filter_module • Add device-aware resizing rules ->
48. Finish: optimized site • No reduction in functionality Before (KB) After (KB) Reduction (KB) Desktop 998 998 0 iPhone 998 308 690 iPad 998 557 441 Low-end phone 998 285 713
49. Benefits to user (iPhone) • 65% faster load time • Data savings • Battery life 5.4s 1.9s 1MB, 40ms RTT
50. Conversion rate 0.7% 1.4% http://www.soasta.com/blog/mobile-web-performance-monitoring-conversion-rate/ 2x
51. Bounce rate 35% 26% http://www.soasta.com/blog/mobile-web-performance-monitoring-conversion-rate/
52. Capacity doubled, response time quartered Throughput (reqs/s) Response time (ms) add device intelligence stock NGINX
53. Image adaptation summary • Very quick to implement • Better user experience • Lower bounce rate • Higher conversion • Higher per-server load capacity • Reduced b/w costs 35% 26 0.7 1.4 2x
54. Content Tailoring Per-device content changes
55. Java PHP Ruby NodeJS String value = System.getenv('X-DeviceAtlas-isTablet’); if (value != null && value.equals(“true”)) { // do tablet stuff` } <?php if (isset($_ENV["X-DeviceAtlas-isTablet"])) // do tablet stuff ?> if ENV[‘X-DeviceAtlas-isTablet’] # do tablet stuff end if (process.env[‘X-DeviceAtlas-isTablet’]) { // do tablet stuff }
56. Server overhead • Slight overhead for lookup • Millions/sec possible on modest server • Some memory consumed by device data, 12MB - 100MB • Data updates required, pull rather than push, you decide frequency
57. Recap
58. Recap • Embedded traffic intelligence is table stakes for top global web brands—the web has moved on • Reduce server load & bandwidth costs while improving site visitor experience • Adding device intelligence is straightforward—short time to value • All downstream apps can benefit • Tried & trusted technology, used by many top brands
59. • Free DeviceAtlas license • Just download and try