Tweet
Tweet

Slide 1

Slide 1 text

Responsive in the wild

Slide 2

Slide 2 text

Many techniques Picturefill Inline CSS & JS Conditional loading WebP RESS 14k Srcset

Slide 3

Slide 3 text

250 Responsive websites

Slide 4

Slide 4 text

17 Viewport widths 1024 1366 320 1920 360 400 480 560 640 768 864 960 1152 1280 1483 1600 1760

Slide 5

Slide 5 text

449 316 320 1920 IMG JS CSS FONT HTML KB KB PX PX PX 1024

Slide 6

Slide 6 text

1024 1366 2217 KB 1861 KB 18% 320 1920

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

38% FLATLINE

Slide 9

Slide 9 text

1024 1366 320 1920 IMG JS CSS 3530 3530

Slide 10

Slide 10 text

3530k 3530k

Slide 11

Slide 11 text

38% 55% IMAGES

Slide 12

Slide 12 text

1024 1366 1020 587 43% 768 320 1920 IMG JS CSS FONT Size

Slide 13

Slide 13 text

1024 2021 51 grolsch.co.uk 320 1920 IMG JS

Slide 14

Slide 14 text

768 1280 2160 1254 rue21.com 320 1920 IMG JS FONT

Slide 15

Slide 15 text

768 1280 1770 637 newzealand.com 320 1920 IMG JS

Slide 16

Slide 16 text

=!

Slide 17

Slide 17 text

864 1959 3395 engadget.com 320 1920 IMG JS

Slide 18

Slide 18 text

5% Conditional CSS

Slide 19

Slide 19 text

1024 254 32 barackobama.com 320 1920 IMG JS CSS

Slide 20

Slide 20 text

11% Conditional JS

Slide 21

Slide 21 text

1024 280 156 famm.org 320 1920 IMG JS CSS

Slide 22

Slide 22 text

1024 38 14 320 1920 IMG JS CSS HTML 34 15 Requests 5 5 5 5

Slide 23

Slide 23 text

Mobile is nearing 50%

Slide 24

Slide 24 text

yet there’s minimal responsive optimisation!

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

1024 1599 768 mediatemple.net 320 1920 IMG JS FONT

Slide 27

Slide 27 text

speedcurve.com/blog @MarkZeman FRONT-END PERFORMANCE MONITORING [email protected]