Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Themes that perform short: WordCamp Antwerp 2016

627 views

Published on

Presentation for WordCamp Antwerp 2016

Published in: Technology
  • Login to see the comments

  • Be the first to like this

Themes that perform short: WordCamp Antwerp 2016

  1. 1. Themes that perform: Creating Faster themes for non developers
  2. 2. Andrés Cifuentes WPML Supporter | WPML Training
  3. 3. Agenda Performance budget. Underscores and Components. Installing grunt.js Responsive images ¿Questions?
  4. 4. Budget ¿How can we measure it? Time vs Data
  5. 5. WebPageTest Google PageSpeed Pingdom https://css- tricks.com/performanc e-tools/ Budget
  6. 6. WebPageTest: Speed index (1000?) Budget
  7. 7. Budget Google pageSpeed 90/100 (?)
  8. 8. Budget Pingdom: Performance grade (?)
  9. 9. Structure ¿Where can I start?
  10. 10. Structure Underscores Components
  11. 11. Structure Semantically correct WordPress guidelines Automattic Minimum necessary
  12. 12. Installing Grunt.js ¿Why?
  13. 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. 14. Installing Grunt.js ¿Why not?
  15. 15. I don’t need it. It runs on node.js I’m just a designer. Installing Grunt.js
  16. 16. Installing Grunt.js Requirements
  17. 17. Installing Grunt.js Pre-install node.js
  18. 18. Installing Grunt.js npm install -g grunt-cli Grunt CLI (command line interface)
  19. 19. Installing Grunt.js You need the following two files in your theme root. package.json Gruntfile.js
  20. 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. 21. Installing Grunt.js npm install
  22. 22. Installing Grunt.js Let’s configure Grunt.js grunt.js
  23. 23. Installing Grunt.js 1. Source > Destination Archives SCSS => CSS 2. Autoprefixer 3. Minimize grunt-autoprefixergrunt-contrib-cssmin grunt-sass
  24. 24. Installing Grunt.js Concatenate our JavaScript files. Uglify(?) them. grunt-contrib-uglify grunt-contrib-concat
  25. 25. ● Optimise all our png / jpg / gif images. Installing Grunt.js grunt-contrib-imagemin
  26. 26. Installing Grunt.js ● All these tasks are executed automatically grunt-contrib-watch
  27. 27. grunt watch Installing Grunt.js
  28. 28. ¿What have we done with all this? Installing Grunt.js
  29. 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. 30. Experiment First day:
  31. 31. Experiment Fourth day:
  32. 32. Agenda Performance budget. Underscores and Components. Installing grunt.js Responsive images ¿Questions? Agenda
  33. 33. @andescifuentesr andres.c@icanlocalize.com ¿Questions?

×