Update on 3/9/18: Because my site now contains many pages, I no longer use these techniques. If your site is a single page, you should still consider doing this stuff.
A few weeks ago, I decided to work on speeding up my Jekyll-generated personal website. It is a single page that acts as a short introduction to me with links to my profiles on other sites. Because most visitors are there for a short time and never return, it doesn’t benefit from browser caching. It seemed obvious that I should reduce the number of HTTP requests by embedding the CSS and JS.
But, how I could accomplish this was not so obvious. I first looked at several asset-handling plugins. None of them did embedding. After a lot of searching, I discovered that Jekyll could do much of what I wanted without plugins, if I thought a little more creatively about how things worked. What Jekyll couldn’t do on its own could be solved by writing a couple small plugins.
The key to all this is realizing that you can put any kind of file in the _includes directory. When you treat CSS like an include, embedding is easy.
But this won’t work if you want to use SCSS or minify the CSS. I needed to find a way to process the include. I found a page on how to do this using the capture tag and Jekyll’s scssify filter.
There was one more thing I wanted to do. I use Google Fonts on my site, which requires a request for a CSS file, then requests for the font files. I decided to embed that CSS, too. So, I wrote a plugin for a tag that will download an external resource.
Once you have the plugin set up, including external CSS is simple.
It works just like scssify does in the above CSS example.
When I started this little project, I didn’t think to sample how fast the page was loading. So, I can’t tell you how much improvement you should expect to see. I can tell you that it’s ready to read in less than 100ms from my very underpowered server over my cable connection. I’m happy with that.