My website, despite being quite minimal, had a not-very-good Lighthouse performance score. The other things were fine, but the performance was taking a big hit.
This weekend, I decided to optimize my website. Just a little. And then, this happened:
What have you done?!
It was a simple problem: to inline all JS and CSS that a page required. But that isn't very maintainable, especially for a site like this one. Which is why, I wrote yet another python script that runs at build-time.
I have this kind of comment in the head of every page:
<!--INLINE START
js:default
js:highlight.min
css:default
css:blog
css:gruv
INLINE END-->
<!--AUTOGEN START-->
<!--AUTOGEN END-->
The script injects the files specified in the INLINE
block into the AUTOGEN block. It's that simple!
Feel free to inspect this page and see for yourself.
Of course, this still poses some challenges when it comes to maintainability, but I will eventually roll out fixes for that.