Faster Netlify builds

Categories
updated on
Related topics

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…

Screenshot of Netlify's deploy log for Made Mistakes

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 folder1 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));
});

  1. Netlify has an undocumented /opt/build/cache/ folder that is cached and persists between builds. Faster static site builds Part 1

About the author

Hi I’m Michael Rose. Just another boring, bearded, tattooed, time traveling designer from Buffalo New York. I maintain several open source projects and occassionally blog.

Glitched photo of Michael Rose with a long beard.

Interactions