A presentation at Fronteers Jam Session in in Amsterdam, Netherlands by Niels Leenheer
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!
Every image you use on your website is a request to the server. And I think somebody once told me that we should use as few requests as possible. Yes, that sounds about right. So what if we could embed images right in your HTML? That would make our website load at least twice as fast and reduce requests by... five. Probably. Okay, we can already do that with DataURLs. But what if we couldn't?
Here’s what was said about this presentation on social media.
for free. You
can too.