Add this to any ember-cli project and run `npm run build` to get a production build with critical path, inlined CSS.

ember-critical-css.md

Here's how to (hopefully) improve the initial load performance of your ember-cli project.

1. Add this gulpfile.js to any ember-cli project
2. Run yarn add critical gulp --dev
3. Change the build script in package.json to ember build -prod; gulp critical
4. Run yarn build

Now, gulp will run the critical task once after each build. The critical task checks what CSS your app needs to render the initial route and puts it inline in your dist/index.html.

gulpfile.js

/* global require */
var gulp = require('gulp');
var critical = require('critical').stream;

/**
 * GULP CRITICAL
 * Extracts the necessary CSS to render the specified viewport and inlines it in the header and loads the rest of the CSS async
 */
gulp.task('critical', function () {
	return gulp.src('dist/index.html')
		.pipe(critical({base: 'dist/', inline: true}))
		.pipe(gulp.dest('dist'));
});

package.json

{
  "scripts": {
    "build": "ember build --prod; gulp critical",
  },
  "devDependencies": {
    "critical": "^0.8.4",
    "gulp": "^3.9.1",
  }
}

@oskarrough, This is amazing. Do you know how to include this into an ember deploy ?

@ianpetzer I believe you'd have to create an ember-cli addon and use some Broccoli hooks. But didn't look into it.

And I think we can get rid of gulp and use cat index.html | critical --inline > index.tmp && mv index.tmp index.html directly.