# Gatsby Build Time Optimizations

Strategies to shorten build times for Gatsby websites.

## Gatsby Image

### Reduce number of breakpoints using `srcSetBreakpoints`

`srcSetBreakpoints` sets the quantity and dimensions of the images provided to
the `srcset` property. By default, Gatsby Image (via `gatsby-plugin-sharp`)
generates five images:

1. `maxWidth` or `maxHeight` (note that there is a default value for this even
   if not provded as an argument)
1. `maxWidth / 4` or `maxHeight / 4`
1. `maxWidth / 2` or `maxHeight / 2`
1. `maxWidth * 1.5` or `maxHeight * 1.5`
1. `maxWidth * 2` or `maxHeight * 2`

```graphql
fluid(maxWidth: 1000, srcSetBreakpoints: [400]) {
  ...GatsbyImageSharpFluid_noBase64
}
```

Set `srcSetBreakpoints` to as little values as possible (1 recommended). Note:
setting this to an empty array will tell Gatsby Image to fallback to the
default breakpoints.

### Remove `base64` option

The base Gatsby Image fragments create a small placeholder image. This
can increase build times as it adds yet another size to generate.

If image placeholders are not absolutely necessary, use the `*_noBase64`
fragments instead.

### Faster PNG compression with `pngCompressionSpeed`

`pngCompressionSpeed` determines the quality-to-speed ratio on a scale of 1-10.
This option is set to 4 by default, but if build speed is the main priority,
set this value to 10.

```graphql
fluid(pngCompressionSpeed: 10) {
  ...GatsbyImageSharpFluid_noBase64
}
```

## Disabling full `node_modules` compilation

Gatsby virtually compiles all `node_modules` dependencies at build time using
Babel. This can increase your build times as all JavaScript files will be
transpiled, even if it already is ES5 compatible.

To exclude `node_modules` from compilation at build time, modify the Webpack
configuration in `gatsby-node.js`.

**Note**: The following code is not confirmed to disable `node_modules`
compilation and may not perform as intended.

```js
// gatsby-node.js

exports.onCreateWebpackConfig = async ({ getConfig, actions }) => {
  const config = getConfig()

  config.module.rules.map(x => {
    if (
      String(x.test) === String(/\.(js|mjs|jsx)$/) ||
      String(x.test) === String(/\.m?js$/) ||
      String(x.test) === String(/\.(js|mjs)$/) // vendor dependencies
    ) {
      const y = x
      y.exclude = [/node_modules/]
      return y
    }

    return x
  })

  actions.replaceWebpackConfig({ ...config })
}
```