delivering responsibly

Delivering Responsibly

dev.Objective() 2016Matt Busche @mrbusche

Questions?

Responsive Design● An approach● Optimal user experience● Content first!● What do you users care about?

Responsive Design● Platform agnostic● 94.64% + all mobile● Fluid user interface● Watches, phones, e-readers, tablets, laptops, monitors, etc● Two orientations for most

Why Responsive Design?

https://opensignal.com/reports/fragmentation.php

Why Responsive Design?

Desktop Mobile

Why Responsive Design?● 333M smartphones sold Q3 2015● 6.2 visits on 2.6 devices● Mobile users > desktop

Why Responsive Design?● 92% of adults have a cell phone● 68% have a smartphone● 73% have a desktop/laptop● 45% have a tablet

Progressive Enhancement● Not just old browsers● Network behavior● 60% US still on 3G or 2G/Edge● Content blockers on iOS9

Progressive Enhancement● CDN is down● Bad network● Select box to type ahead (Demo)● Add features if available (Demo)

Progressive Enhancement● Image Enhancement

Progressive Enhancement● Load minimum styles● EnhanceJS

Progressive Web Apps● Progressive!● Short attention spans

Progressive Web Apps

Progressive Web Apps● Service Worker

Service Worker● 53.31% no IE, Edge, Safari● Offline functionality● Background sync● Add to home screen● Push notifications

Push notifications● Service Worker Spec● Increase engagement● Demo / push.png

Detecting Features● Modernizr

Detecting Features● @supports - 69.52% (non IE, old Android)

Progressive Disclosure

Progressive Disclosure

Page size● Desktop page size 2466 kB● Images 1504 kB 62%● Scripts 399 kB 16%● Video 294 kB 12%● CSS 75 kB 3%● Fonts 73 kB 3%● HTML 67 kB 3%● Other 11 kB <1%

Page size past 5 years

5/2011 5/2012 5/2013 5/2014 5/2015 5/2016

Desktop 772 kB 1059 kB 1448 kB 1775 kB 2099 kB 2466 kB

Increase +37% +37% +23% +18% +17%

Mobile 377 kB 537 kB 752 kB 915 kB 1143 kB 1765 kB

Increase +42% +40% +22% +25% +54%

Why do we care?● 50% of traffic is through mobile device● 80% of worldwide users on 3G or worse● 60% of US users 3G or worse● 50% of mobile device traffic is wifi

Why do we care?

Decreasing image load times● Use the right size images

Decreasing image load times● TinyPNG, ImageOptim, 100 others● Data URI - 95.3%● SVG - 94.67%

Grunticon● SVG data uri - 21 images 20 KB gz 4.5 KB● PNG data uri - 21 images 23.2 KB gz 11.1 KB● PNG images - 21 images 307 bytes plus image size● Grunt task or web based

Decreasing image load times● Picture element - 63.29% - Demo

○ Browser chooses based on screen size

● Img with srcset - 66.09% - Demo○ Browser chooses best fit

Decreasing CSS/JS load times● Minify● Concat● One http request● JS obfuscation

Enable gzip/Brotli● Gzip - supported in all browsers● Brotli

○ 17-25% improvement○ 45.81% support 6.97% May 26th○ HTTPS only

JavaScript Library Sizes

Development Minified gzip Savings

JQuery 1.11 276 kB 94 kB 33 kB 88.04%

Angular 1.2.15 729 kB 101 kB 37 kB 94.92%

Bootstrap 3.1.1 118 kB 98 kB 17 kB 85.59%

Foundation 5 186 kB 146 kB 18 kB 90.32%

Page size with basic tips● Desktop page size 1250 kB● Images (60% savings) 602 kB 48% ● Scripts (-50%) 200 kB 16%● Video 294 kB 24%● CSS (-50%) 38 kB 3%● Fonts 73 kB 6%● HTML (-50%) 34 kB 3%● Other 11 kB <1%

Browser Caching● Expire Headers● CSS● JavaScript● Images● Invalidate with new name

HTTP/2● Faster on mobile● Works best from one host● Cheaper http requests● Binary● Multiplexed; eliminates blocking

HTTP/2 Keep Doing● Optimize for size● Progressive enhancement● Eliminate unnecessary http requests

HTTP/2 Stop Doing● Domain sharding● CSS sprites

Testing● Browser tools

○ Disable JavaScript○ Slow connections○ Mobile emulator

● Real devices

Questions?