SlideShare a Scribd company logo

Existential web-performance

•
•
Trevor Pierce
Trevor Pierce

Website performance ends with users, but it begins with programmers. Learn how you can improve web performance with Gulp, Sass, Browserify and a number of plugins.

Related slideshows

Building a Single Page Application using Ember.js ... for fun and profit
Building a Single Page Application using Ember.js ... for fun and profitBuilding a Single Page Application using Ember.js ... for fun and profit
Building a Single Page Application using Ember.js ... for fun and profit
 
The web is too slow
The web is too slow The web is too slow
The web is too slow
 
SQL Pass Architecture SQL Tips & Tricks
SQL Pass Architecture SQL Tips & TricksSQL Pass Architecture SQL Tips & Tricks
SQL Pass Architecture SQL Tips & Tricks
 
1 of 16
Download to read offline
Existential Web Performance: How Milliseconds Make the Internet a Happier Place
Trevor Pierce * PITA RE: * Accessibility * Performance * User Advocacy
Rules of web design Rule #1 Don’t waste your own time, it’s how the world ends up with Farmville Rule #2 Write as little code as you have to. But if you have to, write good code. Rule #3 1 big file is better than 3 small files Rule #4 1 small file is better than 1 big file Rule #5 Inline is not a dirty word
My tools of choice:
Rule #1 Don’t waste your own time, it’s how the world ends up with Farmville
/* Concatenate sass files, add source maps and Autoprefix CSS */ gulp.task('sass', function() { var filter = $.filter(['*.css', '!*.map']); return gulp.src('app/styles/sass/*.scss') .pipe($.plumber()) .pipe(sourcemaps.init()) .pipe(sass({ errLogToConsole: true })) .pipe(sourcemaps.write('./')) .pipe(filter) .pipe(autoprefixer({ browsers: ['last 2 versions'] })) .pipe(filter.restore()) .pipe(gulp.dest('app/styles/css')); });
Rule #2 Write as little code as you have to. But if you have to, write good code.
/* Style check the sass */ gulp.task('sass-lint', function() { return gulp.src('app/styles/sass/*.scss') .pipe($.cached('sasslint')) .pipe(sasslint()); });
Rule #3 1 big file is better than 3 small ones
/* Create the index.html file in /build */ gulp.task('build-index', function () { return gulp.src(['app/index.html']) .pipe(htmlbuild({ css: htmlbuild.preprocess.css(function (block) { block.end('styles/main.css'); }), remove: function(block) { block.end(); } })) .pipe(gulp.dest('build')) .pipe($.notify('Copying index.html')); });
Rule #4 1 small file is better than 1 big file
/* Minify and remove unused CSS */ gulp.task('css-min', function() { return gulp.src('app/styles/css/main.css') .pipe(uncss({ html: ['app/*.html'] })) .pipe(csso()) .pipe(gulp.dest('build/styles')) .pipe($.notify('Copying main.css to site.css')); });
Rule #5 Inline is not a dirty word
/* Rename main css file for critical path inlining */ gulp.task('copy-styles', function() { return gulp.src(['build/styles/main.css']) .pipe(rename({ basename: 'site' })) .pipe(gulp.dest('build/styles')); }); /* Create the critical inline css */ gulp.task('critical', ['css-min', 'build-index', 'copy-styles'], function() { critical.generateInline({ base: 'build/', src: 'index.html', styleTarget: 'styles/main.css', htmlTarget: 'index.html', width: 960, height: 768, minify: true }); }, function(err){ if (err) {console.log(err);}});
Live coding: I hope this works?!?
Thank you! https://github.com/1Copenut/C3

More Related Content

Existential web-performance

  • 1. Existential Web Performance: How Milliseconds Make the Internet a Happier Place
  • 2. Trevor Pierce * PITA RE: * Accessibility * Performance * User Advocacy
  • 3. Rules of web design Rule #1 Don’t waste your own time, it’s how the world ends up with Farmville Rule #2 Write as little code as you have to. But if you have to, write good code. Rule #3 1 big file is better than 3 small files Rule #4 1 small file is better than 1 big file Rule #5 Inline is not a dirty word
  • 4. My tools of choice:
  • 5. Rule #1 Don’t waste your own time, it’s how the world ends up with Farmville
  • 6. /* Concatenate sass files, add source maps and Autoprefix CSS */ gulp.task('sass', function() { var filter = $.filter(['*.css', '!*.map']); return gulp.src('app/styles/sass/*.scss') .pipe($.plumber()) .pipe(sourcemaps.init()) .pipe(sass({ errLogToConsole: true })) .pipe(sourcemaps.write('./')) .pipe(filter) .pipe(autoprefixer({ browsers: ['last 2 versions'] })) .pipe(filter.restore()) .pipe(gulp.dest('app/styles/css')); });
  • 7. Rule #2 Write as little code as you have to. But if you have to, write good code.
  • 8. /* Style check the sass */ gulp.task('sass-lint', function() { return gulp.src('app/styles/sass/*.scss') .pipe($.cached('sasslint')) .pipe(sasslint()); });
  • 9. Rule #3 1 big file is better than 3 small ones
  • 10. /* Create the index.html file in /build */ gulp.task('build-index', function () { return gulp.src(['app/index.html']) .pipe(htmlbuild({ css: htmlbuild.preprocess.css(function (block) { block.end('styles/main.css'); }), remove: function(block) { block.end(); } })) .pipe(gulp.dest('build')) .pipe($.notify('Copying index.html')); });
  • 11. Rule #4 1 small file is better than 1 big file
  • 12. /* Minify and remove unused CSS */ gulp.task('css-min', function() { return gulp.src('app/styles/css/main.css') .pipe(uncss({ html: ['app/*.html'] })) .pipe(csso()) .pipe(gulp.dest('build/styles')) .pipe($.notify('Copying main.css to site.css')); });
  • 13. Rule #5 Inline is not a dirty word
  • 14. /* Rename main css file for critical path inlining */ gulp.task('copy-styles', function() { return gulp.src(['build/styles/main.css']) .pipe(rename({ basename: 'site' })) .pipe(gulp.dest('build/styles')); }); /* Create the critical inline css */ gulp.task('critical', ['css-min', 'build-index', 'copy-styles'], function() { critical.generateInline({ base: 'build/', src: 'index.html', styleTarget: 'styles/main.css', htmlTarget: 'index.html', width: 960, height: 768, minify: true }); }, function(err){ if (err) {console.log(err);}});
  • 15. Live coding: I hope this works?!?