• Mobile is big (1/3 of all traffic)! • Original approach - do nothing • Then, dedicated domains (eg. m.domain.com) • Now, Responsive Web Design The Mobile Web
Responsive Web Design • Google recommends it • Adoption is fast on the increase • Challenge: • Different devices, same download • More bytes-per-pixel on smaller screens
RWD Problems • Very few RWD sites optimise for performance • RWD sites generally heavier than mdot sites • RWD sites generally heavier to process than mdot sites • Example: • Old CNN site - Adaptive mdot, 571KB, 15s • New CNN site - RWD, 2.9MB, 41.9s • Load time matters!
Solution: Responsive Images • ‘srcset’ - suggests to the browser which images to use • element - forces the browser to use certain images (art direction) • Browser support is good, but Polyfills are available for older browsers
Solution: Conditional Loading (Client-Side) • Use placeholders (1px.gif), then swap the ‘src’ if the image is not set to ‘display: none;’ • Or check for screen size, orientation changes etc. • You can also use the element to achieve a similar effect
Solution: Conditional loading • You could have one file for each ‘breakpoint’ • Conditionally load each file using media queries • All files are still downloaded, but deferred so not render blocking • or JavaScript (async) • Design mobile first
REsponsive + Server Side (RESS) • Server conditionally assembles design response • Doesn’t replace RWD • Tuned for families families of devices (http:// web.wurfl.io/) • Use cookies, get user’s device data, include/ignore blocks • Can’t add a cookie using JavaScript because it won’t be set on first view
RESS With Edge Side Includes (ESI) • Another form of conditional loading • Benefit: Can be placed directly in templates (looks like XML) • Works with EDC, eg. detect user’s screen width, then conditionally load block • Other providers offer (limited) ESI support, eg. Varnish
Problem: Image File Sizes • A LOT of image variants are required: • Thousands of products • Multiple images per product • Multiple breakpoints • Standard def and High def (Retina) • Versions optimised for browser type • Versions optimised for poor network • = LOTS of images to manage! • Image transcoding takes time (especially on the first-run)
Solution: Better file formats • JPEGXR (IE) • WebP (Chrome, Android, Opera) • JPEG2000 (iOS, Safari) • JPEGXR and WebP can save over 30% compared to a standard JPEG
• Akamai Image Manager for delivery-time selection • Use ‘srcset’ to load the right sized images • Use to load the right image format • Akamai Image Manager can also adjust image compression based on network performance
mattbailey
tsujiba
opeonikute
hk_shino
adavis
pauli
1000ch
_kensh
doradora09
nagiss
prathamesh
eiki
sadonosake
danielanewman
bkeepers
mclloyd
tammielis
holman
keavy
chriscoyier
tanoku
tenderlove
geeforr
roundedbygravity
keathley