Turtles all the way down

A presentation at Fronteers Jam Session in October 2018 in Amsterdam, Netherlands by Niels Leenheer

Slide 1

Slide 1

NIELS LEENHEER TURTLES ALL THE WAY DOWN

Slide 2

Slide 2

Slide 3

Slide 3

HOW TO DETERMINE WHAT TO OPTIMISE?

Slide 4

Slide 4

telegraaf.nl 190 requests 9130 ms fronteersconf.org 8 requests 449 ms

Slide 5

Slide 5

PREMISE websites that make more requests are slower

Slide 6

Slide 6

PREMISE external images require requests

Slide 7

Slide 7

CONCLUSION we can make a website faster by inlining images

Slide 8

Slide 8

Slide 9

Slide 9

666 pixels x 255 pixels

Slide 10

Slide 10

HOW TO INLINE IMAGES

Slide 11

Slide 11

PREMISE an image is just a grid of coloured pixels

Slide 12

Slide 12

PREMISE tables are grids

Slide 13

Slide 13

CONCLUSION we can inline images using tables

Slide 14

Slide 14

Attempt #1 table with images <table> <tr> <td>...</td> </tr> </table> × 169.830

Slide 15

Slide 15

Attempt #1 table with images <table> <tr> <td><img src="7469FB.png"></td> </tr> </table> × 169.830

Slide 16

Slide 16

Attempt #1 table with images size 5.5 MB requests 454 loaded 66 sec

Slide 17

Slide 17

Attempt #2 table with spacer image <table> <tr> <td style="background-color:#7469FB"> <img src="spacer.png"> </td> </tr> </table> × 169.830

Slide 18

Slide 18

Attempt #2 table with spacer image size 7.9 MB requests 1 loaded 60 sec

Slide 19

Slide 19

Attempt #3 table with data urls

<table> <tr> <td style="background-color:#7469FB"> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAA </td> </tr> </table>

Slide 20

Slide 20

Attempt #3 table with data urls size 20 MB requests 0 loaded 228 sec

Slide 21

Slide 21

Attempt #4 table with width and height <table> <tr> <td height=1 width=1 bgcolor=#7469FB></td> </tr> </table> × 169.830

Slide 22

Slide 22

Attempt #4 table with width and height size 7.1 MB requests 0 loaded 20 sec

Slide 23

Slide 23

HOW TO OPTIMISE RENDERING

Slide 24

Slide 24

PREMISE parallelisation improves performance

Slide 25

Slide 25

PREMISE frames render independently from each other

Slide 26

Slide 26

CONCLUSION we can inline images using frames

Slide 27

Slide 27

Attempt #5 frames <iframe src="..."> <frameset rows="..."> <frameset cols="..."> <frame src="7469FB.html"> </frameset> </frameset> × 169.830

Slide 28

Slide 28

Attempt #6 frames with data urls <iframe src="..."> <frameset rows="..."> <frameset cols="..."> <frame src="data:text/html;base64,R0lGODlhAQABAIA"> </frameset> </frameset> × 169.8

Slide 29

Slide 29

Attempt #6 frames with data urls size 17 MB requests 0 loaded 24 sec

Slide 30

Slide 30

MODERN CSS APPROACH

Slide 31

Slide 31

Attempt #7 absolute positioning

<div> <div id=x32y49></div> × 169.830 </div>

#x32y49 { position: absolute; top: 49px; left: 32px; background-color: #7469FB; }

Slide 32

Slide 32

Attempt #7 absolute positioning

size 15 MB requests 0 loaded 5 sec

Slide 33

Slide 33

Attempt #8 grid and nth-child pseudo selector

<div> <div></div> × 169.830 </div>

div > div:nth-child(1650) { grid-area: 50 / 33 / 51 / 34; background-color: #7469FB; }

Slide 34

Slide 34

Attempt #8 grid and nth-child pseudo selector

size 16 MB requests 0 loaded 2520 sec

Slide 35

Slide 35

Attempt #9 pseudo-elements

#image::after { position: absolute; top: 49px; left: 32px; background-color: #7469FB; } #image::after::after { ... } #image::after::after::after { ... } #image::after::after::after::after { ... }

Slide 36

Slide 36

Attempt #9 pseudo-elements

size 47 GB requests 0 loaded ∞ sec

Slide 37

Slide 37

Attempt #10 run length encoding

<div> <div id=c0></div> × only 6.670 </div>

#c0 { top: 0px; left: 0px; width: 666px; height: 91px; background: #d8baff; }

Slide 38

Slide 38

Attempt #10 run length encoding

size 418 KB requests 0 loaded 0.1 sec

Slide 39

Slide 39

Attempt #3 size 20 MB loaded 228 sec

Attempt #10 size 418 KB loaded 0.1 sec

Slide 40

Slide 40

KEY TAKEAWAYS

Slide 41

Slide 41

5 KEY TAKEAWAYS html4 is better than html5

Slide 42

Slide 42

5 KEY TAKEAWAYS use <div>'s with id's for everything

Slide 43

Slide 43

5 KEY TAKEAWAYS the maximum length of a string is 9.007.199.254.740.991 characters

Slide 44

Slide 44

5 KEY TAKEAWAYS w3schools is way better and has more info than mdn

Slide 45

Slide 45

5 KEY TAKEAWAYS don't use 169.830 <frame>'s in one <frameset>

Slide 46

Slide 46

THANK YOU!