13 steps to a faster jekyll website

Post on 16-Apr-2017

337 views 0 download

Transcript of 13 steps to a faster jekyll website

How click-baity is that?

13 steps to a faster Jekyll website

Ronan BerderChief Janitor Officer at Wiredcraft

Who’s that guy?

Loads quickly (PageSpeed Insights)Generates quickly (--profile)

Fast you said?

Optimize your picturesFor example with ImageOptim

Step 1

Have an asset pipelineGrunt, Gulp.js… take your pick

Step 2

CSS inlined in the headerJS at the end of the body

Step 3

Avoid blocking CSS/JSGood example is @font-face

Step 4

Use a CDNCloudFlare is a (free) no-brainer

Step 5

Enable gzip & browser cachingOut-of-the box with CloudFlare

Step 6

Use something AlgoliaFor search, listings & related posts

Step 8

Avoid Jekyll pluginse.g. Highlight.js instead of Rouge

Step 9

Avoid loops & use variablese.g. the author loop on each post

Step 10

Generate only the latest postJust using --limit_posts 1

Step 11

Ignore stuff with “_” or _config.ymlGreat to handle media separately

Step 12

Incremental builds (--incremental)For Jekyll 3 (on GitHub pages)

Step 13

Still not happy?Maybe check out Hugo.