Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Add this to any ember-cli project and run `npm run build` to get a production build with critical path, inlined CSS.

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.

/* 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'));
});
{
"scripts": {
"build": "ember build --prod; gulp critical",
},
"devDependencies": {
"critical": "^0.8.4",
"gulp": "^3.9.1",
}
}
@ianpetzer
Copy link

ianpetzer commented Apr 20, 2017

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

@oskarrough
Copy link
Author

oskarrough commented May 29, 2017

@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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment