Skip to content

Inline CSS!
Compare
Choose a tag to compare
@KyleAMathews KyleAMathews released this 11 May 19:02
· 21186 commits to master since this release
v0.11.0
0250739

The headliner of this release is you can now inline CSS in the <head> of your site. This is a best practice recommended by Google's AMP project among others as you then avoid additional requests which can signifcantly slow down your site. Testing using webpagetest.org showed that moving css inline improved the Speed Index 20-50%!! In one test on a simulated 3G connection, the time to initial render went from ~1.8 seconds to ~1 second.

It's a very simple switch to make. See this commit in the default starter gatsbyjs/gatsby-starter-default@1faecb5 It's also documented at https://github.com/gatsbyjs/gatsby#inline-css

Breaking changes

  • post-build.js moved inside gatsby-node.js. If you had added a post-build.js module to your code, this function should now be exported from gatsby-node.js. A simple way to make the change is to simply require post-build.js there e.g. exports.postBuild = require('./post-build'). Thanks to @LukeSheard for this! #273
  • The "stages" were renamed. If you override Webpack configs and are switching behavior based on the stage, static is split into two stages, build-css and build-html and production is now build-javascript. We think these are much more sensible names. Thanks to @scottnonnenberg for the this! #253

Other notable non-breaking changes

@benstepp did a deep refactor of how we're loading Babel plugins. There shouldn't be any breaking changes but it fixes a number of bugs #279

Some highlights:

  • User can override the .babelrc passed to webpack.
  • User can use whatever babel plugins they want.
  • User babel config is extended with react-hmre rather than being overwritten in develop.js.
  • Object.assign is now polyfilled by default.
  • Non breaking change as starters previously required a babelrc and gatsby will just read them as normal.
  • Fixes three issues #129, #235, #264
Assets 2