themes that perform short: wordcamp antwerp 2016

Themes that perform:

Creating Faster themes for non developers

Andrés CifuentesWPML Supporter | WPML Training

Agenda

Performance budget.

Underscores and Components.

Installing grunt.js

Responsive images

¿Questions?

Budget¿How can we measure it?

Time vs Data

WebPageTest

Google PageSpeed

Pingdomhttps://css-tricks.com/performance-tools/

Budget

WebPageTest: Speed index (1000?)

Budget

Budget

Google pageSpeed 90/100 (?)

Budget

Pingdom: Performance grade (?)

Structure

¿Where can I start?

Structure

UnderscoresComponents

StructureSemantically correct

WordPress guidelines

Automattic

Minimum necessary

Installing Grunt.js

¿Why?

Repetitive tasks automatisation.

Work with small fragments for CSS and JavaScript.

Compress and minify CSS and JavaScript.

Reduce http calls.

Images optimisation.

Sass

Installing Grunt.js

Installing Grunt.js

¿Why not?

I don’t need it.

It runs on node.js

I’m just a designer.

Installing Grunt.js

Installing Grunt.js

Requirements

Installing Grunt.js

Pre-install node.js

Installing Grunt.js

npm install -g grunt-cliGrunt CLI (command line interface)

Installing Grunt.jsYou need the following two

files in your theme root.

package.json

Gruntfile.js

Installing Grunt.js

This file allows you to install

the node.js dependencies.

Let’s call it our Grunt.js

archive file

package.json

Installing Grunt.js

npm install

Installing Grunt.js

Let’s configure

Grunt.js

grunt.js

Installing Grunt.js1. Source > Destination

Archives SCSS => CSS

2. Autoprefixer

3. Minimize

grunt-autoprefixer

grunt-contrib-cssmin

grunt-sass

Installing Grunt.js

Concatenate our

JavaScript files.

Uglify(?) them.

grunt-contrib-uglify

grunt-contrib-concat

● Optimise all our

png / jpg / gif images.

Installing Grunt.js

grunt-contrib-imagemin

Installing Grunt.js● All these tasks are

executed

automatically

grunt-contrib-watch

grunt watch

Installing Grunt.js

¿What have we done with all this?

Installing Grunt.js

Repetitive tasks automatisation.

Work with small fragments for CSS and JavaScript.

Compress and minify CSS and JavaScript.

Reduce http calls.

Images optimisation.

Sass

Installing Grunt.js

ExperimentFirst day:

ExperimentFourth day:

Agenda

Performance budget.

Underscores and Components.

Installing grunt.js

Responsive images

¿Questions?

Agenda

@andescifuentesr

andres.c@icanlocalize.com

¿Questions?