existential web-performance
TRANSCRIPT
Existential Web Performance:How Milliseconds Make the Internet a Happier Place
Trevor Pierce* PITA RE: * Accessibility * Performance * User Advocacy
Rules of web design
Rule #1Don’t waste your own time, it’s how the world ends up with Farmville
Rule #2Write as little code as you have to. But if you have to, write good code.
Rule #31 big file is better than 3 small files
Rule #41 small file is better than 1 big file
Rule #5Inline is not a dirty word
My tools of choice:
Rule #1Don’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 #2Write 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 #31 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 #41 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 #5Inline 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?!?
