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.

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?!?

16. Thank you!
https://github.com/1Copenut/C3