NIELS LEENHEER TURTLES ALL THE WAY DOWN

HOW TO DETERMINE WHAT TO OPTIMISE?

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

PREMISE websites that make more requests are slower

PREMISE external images require requests

CONCLUSION we can make a website faster by inlining images

666 pixels x 255 pixels

HOW TO INLINE IMAGES

PREMISE an image is just a grid of coloured pixels

PREMISE tables are grids

CONCLUSION we can inline images using tables

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

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

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

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

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

Attempt #3 table with data urls

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

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

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

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

HOW TO OPTIMISE RENDERING

PREMISE parallelisation improves performance

PREMISE frames render independently from each other

CONCLUSION we can inline images using frames

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

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

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

MODERN CSS APPROACH

Attempt #7 absolute positioning

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

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

Attempt #7 absolute positioning

size 15 MB requests 0 loaded 5 sec

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; }

Attempt #8 grid and nth-child pseudo selector

size 16 MB requests 0 loaded 2520 sec

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 { ... }

Attempt #9 pseudo-elements

size 47 GB requests 0 loaded ∞ sec

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; }

Attempt #10 run length encoding

size 418 KB requests 0 loaded 0.1 sec

Attempt #3 size 20 MB loaded 228 sec

Attempt #10 size 418 KB loaded 0.1 sec

KEY TAKEAWAYS

5 KEY TAKEAWAYS html4 is better than html5

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

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

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

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

THANK YOU!