13 steps to a faster jekyll website

30
How click-baity is that? 13 steps to a faster Jekyll website

Upload: ronan-berder

Post on 16-Apr-2017

337 views

Category:

Technology


0 download

TRANSCRIPT

Page 1: 13 steps to a faster jekyll website

How click-baity is that?

13 steps to a faster Jekyll website

Page 2: 13 steps to a faster jekyll website

Ronan BerderChief Janitor Officer at Wiredcraft

Who’s that guy?

Page 3: 13 steps to a faster jekyll website

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

Fast you said?

Page 4: 13 steps to a faster jekyll website
Page 5: 13 steps to a faster jekyll website

Optimize your picturesFor example with ImageOptim

Step 1

Page 6: 13 steps to a faster jekyll website
Page 7: 13 steps to a faster jekyll website

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

Step 2

Page 8: 13 steps to a faster jekyll website
Page 9: 13 steps to a faster jekyll website

CSS inlined in the headerJS at the end of the body

Step 3

Page 10: 13 steps to a faster jekyll website
Page 11: 13 steps to a faster jekyll website

Avoid blocking CSS/JSGood example is @font-face

Step 4

Page 12: 13 steps to a faster jekyll website
Page 13: 13 steps to a faster jekyll website

Use a CDNCloudFlare is a (free) no-brainer

Step 5

Page 14: 13 steps to a faster jekyll website
Page 15: 13 steps to a faster jekyll website

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

Step 6

Page 17: 13 steps to a faster jekyll website

Use something AlgoliaFor search, listings & related posts

Step 8

Page 18: 13 steps to a faster jekyll website
Page 19: 13 steps to a faster jekyll website

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

Step 9

Page 20: 13 steps to a faster jekyll website
Page 21: 13 steps to a faster jekyll website

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

Step 10

Page 22: 13 steps to a faster jekyll website
Page 23: 13 steps to a faster jekyll website

Generate only the latest postJust using --limit_posts 1

Step 11

Page 24: 13 steps to a faster jekyll website
Page 25: 13 steps to a faster jekyll website

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

Step 12

Page 26: 13 steps to a faster jekyll website
Page 27: 13 steps to a faster jekyll website

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

Step 13

Page 28: 13 steps to a faster jekyll website
Page 29: 13 steps to a faster jekyll website

Still not happy?Maybe check out Hugo.