delivering responsibly
TRANSCRIPT
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● 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?