Last September I migrated my blog over to AMP which entailed a variety of challenges ranging from converting every img tag to an amp-img tag with some additional metadata to figuring out how to support Disqus. I tackled the critical ones but the one I never got to was speeding up the build time since it had no impact on the actual reader experience and just slowed down my build and commit process. During this Thanksgiving break I finally decided to do something about it after discovering that jekyll has a profiling feature. It’s expected that the bulk of the time is spent generating the post pages but running the profiler highlighted that the majority of the work wasn’t in the actual content block but in generating the head element - something that shold similar from page to page.

After taking a quick look at the head.html file it became clear what the problem was: AMP requires the CSS to be inline which combined with my usage of SCSS which needed to be transpiled to CSS on every page. Unsurprisingly, this was an expensive operation and the solution was to somehow get rid of it. While we can’t avoid inlining the CSS what we can do is transpile the SCSS to CSS once and include the contents in every post. Even better is to read the contents of the resulting CSS file once and then just inject it whenever necessary via the jekyll-include-cache extension. Applying these tactics gets the blog generation time down to 15 seconds from over 4 minutes. It does require the CSS file to be regenerated every time the SCSS file changes but given the infrequency it’s not a huge issue. This doesn’t make it any quicker to write posts but it does feel good to get such a big improvement in blog generation speed.