Delivering Performance on a Diverse Web Ronan Cremin, Afilias Technologies 23/9/2015

Overview Problem • A new web reality • Device evolution • A more diverse & global web • Web performance crisis Solution • How to fix it with NGINX

DeviceAtlas • Traffic intelligence • Afilias Technologies • W3C contributors & editors • mobiForge.com, internet.com

A New Web Reality

Device Evolution

Device Evolution 1990 2007 2015 2000 dark ages of the web Cambrian explosion

Tipping point in devices Number of global users (millions) Source: Morgan Stanley Research

Mobile traffic is majority Facebook MAUs by platform Source: Facebook

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

Western World World Wide Web Internet user penetration curve, 1990 - 2020 Source: Hillhouse Capital

Fastest-growing internet markets barely use apps Mobile impressions by region 2015 Source: Opera Mediaworks

Web Landscape Evolution https://www.flickr.com/photos/tomkoadam/

2002 mind the gap portable capable

2015

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

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

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/

Source: httparchive.org Average bytes per page by content type June 2015

DSL / Cable 2.2MB 4G 2.2MB 2G 2.2MB $ UNUSED USED

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 “ “

Web Performance Crisis

No content

No content

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

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

Delivering Performance on a Diverse Web https://www.flickr.com/photos/bowtoo/

No content

entirely different!

No content

No content

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

Dynamic range DESKTOP IPHONE NOKIA 366KB 199KB 3KB 122x

Adaptive content

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

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

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 “ “

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%

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

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

Achieving this with NGINX & DeviceAtlas

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

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

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

Image Optimisation Per-device image adjustments

Per-device image optimisation • Typically ~70% of page weight • Best first step for weight reduction • Really big gains quickly achievable

Start: stock RWD template • RWD template • 998KB OTA size • http://html5up.net/spectral

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 ->

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

Benefits to user (iPhone) • 65% faster load time • Data savings • Battery life 5.4s 1.9s 1MB, 40ms RTT

Conversion rate 0.7% 1.4% http://www.soasta.com/blog/mobile-web-performance-monitoring-conversion-rate/ 2x

Bounce rate 35% 26% http://www.soasta.com/blog/mobile-web-performance-monitoring-conversion-rate/

Capacity doubled, response time quartered Throughput (reqs/s) Response time (ms) add device intelligence stock NGINX

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

Content Tailoring Per-device content changes

Java PHP Ruby NodeJS String value = System.getenv('X-DeviceAtlas-isTablet’); if (value != null && value.equals(“true”)) { // do tablet stuff` } if ENV[‘X-DeviceAtlas-isTablet’] # do tablet stuff end if (process.env[‘X-DeviceAtlas-isTablet’]) { // do tablet stuff }

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

Recap

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

• Free DeviceAtlas license • Just download and try