Faster Netlify builds

Slowly but surely, I’ve been chipping away at my site’s build time on Netlify.

There’s little left for me to optimize until Jekyll drops some nice updates in version 4.0. I’ve cached the rendering of Liquid includes across _layouts via the {% include_cached %} tag, limited use of {% for %} loops over large collections like {% site.posts %}, and stripped Jekyll’s duties down to solely a HTML generator.

The “little” that remains, is about a gigabyte of images I pipe through Gulp. Thousands of high resolution images are processed by Sharp into various sizes. I’ve been able to knock this down from 18 minutes, to six on a fresh build…

When building the site locally I store the image artifacts in a temporary folder, and generate new ones if the source changes. When Netlify generates the site it processes these images each build — regardless if they have changed or not.

By stashing the processed images in a secret Netlify cache folder¹ and using Gulp to move files around, I cut the build time in half. Which is fantastic since I’m now averaging 5–8 minutes for dependencies to install, Jekyll to run, and Netlify to deploy the site.

Excerpt from my Gulp build task

// 'gulp copy:images:cached' -- copies cached images from Netlify's `/opt/build/cache/` folder to `/dist/`

gulp.task("copy:images:cached", () => {
  return gulp
    .src(paths.imageFilesCachePath + "/**/*")
    .pipe(newer(paths.imageFilesSite))
    .pipe(gulp.dest(paths.imageFilesSite));
});