Skip to content
This repository has been archived by the owner on Jun 18, 2021. It is now read-only.

Optimize build process #49

5 tasks done
mmistakes opened this issue Aug 23, 2016 · 0 comments
5 tasks done

Optimize build process #49

mmistakes opened this issue Aug 23, 2016 · 0 comments


Copy link

mmistakes commented Aug 23, 2016

TL/DR plan of attack: relegate Jekyll to Markdown parsing and building HTML and leave assets (CSS, JS, images, and fonts) to Gulp (or equivalent task runner).

  • Replace jekyll-picture-tag with Gulp task.
  • Replace jekyll-assets with Gulp tasks.
  • Automate critical path CSS generation.
  • Replace layout: compress with Gulp minify task.
  • Replace Rake deploy tasks with Gulp.

The time to jekyll build and deploy the site has gotten out of hand the last couple of years. Test disabling various build tasks and plugins to determine offenders and investigate removing the dependency or developing a lighter weight alternative.

Made Mistakes Jekyll stats as of 8/23/2016:

Windows Test System:

  • Lenovo ThinkStation E30
  • Processor 3.30 GHz Intel Xeon E31245
  • Memory 16 GB
  • Intel SSDSA2BW160G3L 137GB
  • Windows 7 Professional Service Pack 1
  • ruby 2.2.4p230 [x64-mingw32]

Mac Test System:

  • iMac 21.5-inch, Late 2013
  • Processor 2.7 GHz Intel Core i5
  • Memory 16 GB 1600 MHz DDR3
  • 1.12 TB Fusion Drive
  • OS X El Capitan 10.11.6
    -- ruby 2.1.0p0 (2013-12-25 revision 44422) [x86_64-darwin12.0]

Initial build: bundle exec jekyll clean. Verify _site, .asset-cache, and any other .tmp folders and files have been removed.

To test build tasks, disable or remove from source and compute average time of 3 builds using bundle exec jekyll --profile.

task task time (Windows) task time (Mac)
Generate responsively sized page.image.feature photos 1288.289s 1429.255s
Minify HTML with layout: compress 39.348s 11.18s
Read /images/ and copy to _site/ 32.385s 23.629s
Build tag pages with jekyll-archives 17.398s 9.994s
Build tag index page with sort_tag filter 2.62s 0.586s
List related posts with jekyll-tagging-related_posts, jekyll/tagging, and LSI: true 38.356s 17.867s
List related posts with vanilla related_posts 1.649s 4.899s
Preprocess, concatenate, minify, and cache bust SCSS and JS with jekyll-assets 78.751s 25.031s
Display masthead and overlay menu from _data 9.656s 7.815s
List post comments from _data 7.103s 2.216s
Display colophon from _data 0.2s 0.486s
List post taxonomy metadata 3.479s 1.182s
List post breadcrumb links 2.834s 1.029s
List featured posts 0.195s 0.439s
Build style guide collection 1.161s 0.314s
List post social sharing links 5.092s 0.973s

Worst case offenders appear to be resizing large amounts of images, copying images from source to destination, and building the site.

Decoupling asset generation tasks from main Jekyll build so they don't trigger a rebuild each time they are updated should help with development build times. Browsersync can also come to the rescue injecting updated CSS/JS to circumvent the entire Jekyll build process.

Jekyll build times comparison:

build type Jekyll + plugins Jekyll Gulpified
clean build (Mac OS) 26.01 min 14 min
clean build (Windows) 26.31 min 17 min
build with images already resized (Mac OS) 2.21 min 1.58 min
build with images already resized (Win) 5.23 min 4.17 min
@mmistakes mmistakes self-assigned this Aug 23, 2016
mmistakes added a commit that referenced this issue Aug 27, 2016
- Move Jekyll includes, layouts, documents, and assets into /src/
- Replace jekyll-assets and jekyll-picture-tag plugins with equivalent Gulp plugins
- ref #49
mmistakes added a commit that referenced this issue Aug 29, 2016
* gulpify: (23 commits)
  Update README
  Add `gulp icons` task to optimize and combine SVG icons into a single file for inlining
  Add back .page__hero-image for forcing image to fill parent container
  Add submit sitemap XML file to Google/Bing task
  Add `async` attribute to index.js
  Fix bad Markdown
  Disable duplicate Rsync progress output
  Adjust minification settings
  Fix missing .ext from feature image srcset paths
  Copy .htaccess to `dist`
  Move into src
  Move files in src
  Revise Rsync task to match old Rake task
  Add srcset attributes to feed entry feature images
  Escape commenter name
  Remove picturefill script
  Improve image tasks
  Import missing SCSS partials into style.scss
  Update image paths
  Upscale responsive images when resizing
ref #49
@mmistakes mmistakes added this to the 11.0 milestone Sep 15, 2016
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
None yet

No branches or pull requests

1 participant