Presentation for WordCamp Antwerp 2016

1. Themes that perform:
Creating Faster themes for non developers

2. Andrés Cifuentes
WPML Supporter | WPML Training

3. Agenda
Performance budget.
Underscores and Components.
Installing grunt.js
Responsive images
¿Questions?

4. Budget
¿How can we measure it?
Time vs Data

5. WebPageTest
Google PageSpeed
Pingdom
https://css-
tricks.com/performanc
e-tools/
Budget

6. WebPageTest:
Speed index (1000?)
Budget

7. Budget
Google pageSpeed
90/100 (?)

8. Budget
Pingdom:
Performance grade (?)

9. Structure
¿Where can I start?

10. Structure
Underscores
Components

11. Structure
Semantically correct
WordPress guidelines
Automattic
Minimum necessary

12. Installing Grunt.js
¿Why?

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

14. Installing Grunt.js
¿Why not?

15. I don’t need it.
It runs on node.js
I’m just a designer.
Installing Grunt.js

16. Installing Grunt.js
Requirements

17. Installing Grunt.js
Pre-install node.js

18. Installing Grunt.js
npm install -g grunt-cli
Grunt CLI (command line interface)

19. Installing Grunt.js
You need the following two
files in your theme root.
package.json
Gruntfile.js

20. Installing Grunt.js
This file allows you to install
the node.js dependencies.
Let’s call it our Grunt.js
archive file
package.json

21. Installing Grunt.js
npm install

22. Installing Grunt.js
Let’s configure
Grunt.js
grunt.js

23. Installing Grunt.js
1. Source > Destination
Archives SCSS => CSS
2. Autoprefixer
3. Minimize
grunt-autoprefixergrunt-contrib-cssmin
grunt-sass

24. Installing Grunt.js
Concatenate our
JavaScript files.
Uglify(?) them.
grunt-contrib-uglify
grunt-contrib-concat

25. ● Optimise all our
png / jpg / gif images.
Installing Grunt.js
grunt-contrib-imagemin

26. Installing Grunt.js
● All these tasks are
executed
automatically
grunt-contrib-watch

27. grunt watch
Installing Grunt.js

28. ¿What have we done
with all this?
Installing Grunt.js

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

30. Experiment
First day:

31. Experiment
Fourth day:

32. Agenda
Performance budget.
Underscores and Components.
Installing grunt.js
Responsive images
¿Questions?
Agenda

33. @andescifuentesr
andres.c@icanlocalize.com
¿Questions?