Last time up on setting up nginx to make PageSpeed Insight happy, we saw that tweaking the webserver wasn’t enough, so now we will have to work on the content.
- Compress html output
- minify & pre-compress js/css assets
- optimize media assets
Compress (minify) html output
There are a bunch of solutions for this step, as of now i’m using the simpler approach of “jekyll-compress”, it’s an html “compressor” that work in pure “Liquid” (the templating language of jekyll), so no strange ruby installation and whatnot, you only need to fetch the compress.html layout generated in the releases, put it in your
_layouts/ folder and modify your layouts to use it as base. If there is a “master” default.html layout it’s as simple as adding the following in the header:
You can tweak the layout so as to filter jekyll to use this new plugin (altough using bundle seem to make this step optionnal)
Minify CSS/JS, Optimize media, ..
There again exist a lot of solutions, i choose for now jekyll-assets which promise a wide list of capabilities regarding assets management.
However using this tool wasn’t exactly “easy-peasy”.
My first attempt was to add the jekyll-assets gem to the system (debian on the laptop/FreeBSD on the server) like before, however this proved a bit chalenging (two gems needed different version for activesupport) and not very “clieanish”, so i looked into deployment using
Then you need to write a
Gemfile, listing all your dependencies:
bunde install to install all thoses dependencies.
NB: By default, even if you’re not a privileged user, bundle will try to install gems globally, if that’s not what you want you need to provide
--path vendor/bundle ou
--deployment to the first install command (this will create a
.bundle/config file to hold the installation path so that consecutives commands will be able to find the gems).
Next i setup jekyll to use this new plugin. Although using
bundle some step are optionnal (the gems/plugins list for example), it is IMPERATIVE to add “vendor” in your exclude list because otherwise you will encounter errors of the weirdest kind like:
Document 'vendor/bundle/ruby/2.5.0/gems/jekyll-3.7.3/lib/site_template/_posts/0000-00-00-welcome-to-jekyll.markdown.erb' does not have a valid date in the YAML front matter.
So here is my configuration:
A few changes are needed in your theme/layout to make full use of jekyll-assets.
1/ The module expects to find assets in a (relatively long) list of predefined locations (assets/css, assets/fonts, assets/images,…, _assets/*, css, fonts, images, …). If you have file in any other location, you should move them, or extend the
RQ: the usual css/main.css + _sass/* split doesn’t seem to work well with jekyll-assets, all files should be moved in a css/ directory.
I personnaly choosed to move every css/sass/images/fonts in an
_assets subdirectory to match every other ‘special’ jekyll folders.
2/ Assets have to be included with a new syntax:
A recurring whining of SEO optimisation tools is related to loading of external JS/CSS ressources (being it the ‘main’ css or extra fonts, scripts..).
The ideal solution according to thoses tools is to move loading of every css/js at the end of the page, and inline “critical” css in the <head> block to reduce the post-loading ‘flickering’.
Sample ‘base’ layout for jekyll:
After all this you should high-score PSI and other !