I love fast, accessible websites. I love seeing beautiful images that explain code. Why not combine the two?
As a rule, everything I code is fast. So when I decided to make an app that would take code and generate a visual representation of its internal logic, I was thinking about speed from the very beginning.
First step: save all required assets in my filesystem. Not only is this faster than hotlinking from somewhere else, but it is also more secure because third party scripts can be tampered with.
The less time the browser spends making HTTP requests, the faster your site can finish loading.
I am ruthless about removing CSS classes and finding alternatives to large code libraries. I used this script to find unused CSS in my project:
The original project loaded all of lodash in order to use a single function from the whole library. Instead of making the browser parse and download lodash just to debounce, I found a tiny debounce script in vanilla JS.
Finally, I remembered my old friend
<link rel="preload" src ="code.js" as="script">. This tells the browser to begin loading the script early in the page's lifecycle.
<link rel="preload" src ="code.js" as="script"> to the head of my HTML and checked Lighthouse for the thousandth time.
I did it. I have a perfect 100.