Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

Ronan Berder Chief Janitor Officer at Wiredcraft Who’s that guy?

Slide 3

Slide 3 text

Loads quickly (PageSpeed Insights) Generates quickly (--profile) Fast you said?

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

Optimize your pictures For example with ImageOptim Step 1

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

Have an asset pipeline Grunt, Gulp.js… take your pick Step 2

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

CSS inlined in the header JS at the end of the body Step 3

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

Avoid blocking CSS/JS Good example is @font-face Step 4

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

Use a CDN CloudFlare is a (free) no-brainer Step 5

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

Enable gzip & browser caching Out-of-the box with CloudFlare Step 6

Slide 16

Slide 16 text

Enable SSL With CloudFlare (& force redirect) Step 7

Slide 17

Slide 17 text

Use something Algolia For search, listings & related posts Step 8

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

Avoid Jekyll plugins e.g. Highlight.js instead of Rouge Step 9

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

Avoid loops & use variables e.g. the author loop on each post Step 10

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

Generate only the latest post Just using --limit_posts 1 Step 11

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

Ignore stuff with “_” or _config.yml Great to handle media separately Step 12

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

Still not happy? Maybe check out Hugo.

Slide 30

Slide 30 text

Slides & notes: wiredcraft. com/blog/make-jekyll-fast