13 steps to a faster jekyll website
0 likes515 views
Ronan Berder outlines 13 steps to optimize a Jekyll website for speed, including optimizing images, using an asset pipeline, inlining CSS and placing JavaScript before the closing body tag, enabling gzip compression and caching through CloudFlare, avoiding plugins and loops, ignoring files prefixed with underscores, and using incremental builds. He suggests checking out Hugo if the Jekyll site is still not fast enough after implementing these optimizations.
13 steps to a faster jekyll website
- 1. How click-baity is that? 13 steps to a faster Jekyll website
- 2. Ronan Berder Chief Janitor Officer at Wiredcraft Who’s that guy?
- 3. Loads quickly (PageSpeed Insights) Generates quickly (--profile) Fast you said?
- 5. Optimize your pictures For example with ImageOptim Step 1
- 7. Have an asset pipeline Grunt, Gulp.js… take your pick Step 2
- 9. CSS inlined in the header JS at the end of the body Step 3
- 11. Avoid blocking CSS/JS Good example is @font-face Step 4
- 13. Use a CDN CloudFlare is a (free) no-brainer Step 5
- 15. Enable gzip & browser caching Out-of-the box with CloudFlare Step 6
- 16. Enable SSL With CloudFlare (& force redirect) Step 7
- 17. Use something Algolia For search, listings & related posts Step 8
- 19. Avoid Jekyll plugins e.g. Highlight.js instead of Rouge Step 9
- 21. Avoid loops & use variables e.g. the author loop on each post Step 10
- 23. Generate only the latest post Just using --limit_posts 1 Step 11
- 25. Ignore stuff with “_” or _config.yml Great to handle media separately Step 12
- 27. Incremental builds (--incremental) For Jekyll 3 (on GitHub pages) Step 13
- 29. Still not happy? Maybe check out Hugo.
- 30. Slides & notes: wiredcraft. com/blog/make-jekyll-fast