27 December 2015

Compressing CSS source can provide a noticeable performance increase for a static blog. I’ve found this to have made a considerable difference on mobile.

Setting up a pipeline for compressing resources is possible in Jekyll. After trying many of the existing guides out there without success, I finally found a solution that worked for me and I’m sharing it here.

The end result is that my CSS is combined into a single file and it is minified for the fast possible downloading.

I installed two plugins, jekyll-assets and jekyll-press using

  • sudo gem install jekyll-assets
  • sudo gem install jekyll-press

I have the following in _config.yml:

gems : [jekyll-assets, jekyll-press]  
  
assets:  
  dirname: assets  
  baseurl: /assets/  
  compress:  
    js: 'uglifier'  
    css: 'sass'  
  cachebust: hard  
  gzip: [ text/css, application/javascript ]  

Another performance improvement can be gained by combining multiple CSS files into a single one. I have my CSS generated by Sass that is combined into a single file using @import on the individual .scss files.



blog comments powered by Disqus