How to get 100 on Lighthouse

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.

Self Host CSS + JS

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.

Inline JS + CSS

The less time the browser spends making HTTP requests, the faster your site can finish loading.

Remove Unused CSS

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:

Remove Unused JS

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.

Help The Browser Help You

After following the steps above, I was stuck at a 99 on Lighthouse. I changed the nature of the website to remove more Javascript, even deleting the "export" button, and I was still stuck at 99.

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.

I added <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.

If you want to see what your JavaScript looks like, check out the app here.