Workshop: Making Responsive Websites Fast

Slide 1

Slide 1 text

Making Responsive Websites Fast

Slide 2

Slide 2 text

What We Learned At The Akamai Workshop

Slide 3

Slide 3 text

Setting The Scene

Slide 4

Slide 4 text

• Mobile is big (1/3 of all trafﬁc)! • Original approach - do nothing • Then, dedicated domains (eg. m.domain.com) • Now, Responsive Web Design The Mobile Web

Slide 5

Slide 5 text

Responsive Web Design • Google recommends it • Adoption is fast on the increase • Challenge: • Different devices, same download • More bytes-per-pixel on smaller screens

Slide 6

Slide 6 text

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!

Slide 7

Slide 7 text

Problem: Over Downloading

Slide 8

Slide 8 text

Problem: Over Downloading • Download and Shrink - the same image is used on all devices and just shrunk for smaller screens

Slide 9

Slide 9 text

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 Polyﬁlls are available for older browsers

Slide 10

Slide 10 text

Problem: Download And Hide

Slide 11

Slide 11 text

Problem: Download And Hide • Often images are hidden on ‘mobile’ views • The problem is that the browser still has to download them

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

Problem: Over Downloading CSS

Slide 14

Slide 14 text

Problem: Over Downloading CSS • Most sites have just one CSS ﬁle • Fewer requests, but wasteful bytes

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

Solution: Critical Rendering Path • Inline critical CSS in the head • Load non-priority CSS asynchronously • Without the CSSOM ﬁrst paint is blocked

Slide 17

Slide 17 text

REsponsive + Server Side

Slide 18

Slide 18 text

REsponsive + Server Side (RESS) • Server conditionally assembles design response • Doesn’t replace RWD • Tuned for families families of devices (http:// web.wurﬂ.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 ﬁrst view

Slide 19

Slide 19 text

RESS With EDC

Slide 20

Slide 20 text

RESS With Akamai Edge Device Characterisation (EDC) • Uses smarter device matching and smarter routing

Slide 21

Slide 21 text

RESS With ESI

Slide 22

Slide 22 text

RESS With Edge Side Includes (ESI) • Another form of conditional loading • Beneﬁt: 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

Slide 23

Slide 23 text

Problem: Image File Sizes

Slide 24

Slide 24 text

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 ﬁrst-run)

Slide 25

Slide 25 text

Solution: Better ﬁle formats • JPEGXR (IE) • WebP (Chrome, Android, Opera) • JPEG2000 (iOS, Safari) • JPEGXR and WebP can save over 30% compared to a standard JPEG

Slide 26

Slide 26 text

• 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

Slide 27

Slide 27 text

Problem: Third-Party Scripts

Slide 28

Slide 28 text

Problem: Third-Party Scripts • On the increase • Can pose a risk: SPOF (Single Point Of Failure)

Slide 29

Slide 29 text

Solution: Async • Always load third-party scripts asynchronously

Slide 30

Slide 30 text

Problem: Too Many Images

Slide 31

Slide 31 text

Problem: Too Many Images • Often most images are ‘below the fold’ • Especially on mobile