Upload
octavio-andres-cifuentes
View
423
Download
0
Embed Size (px)
Citation preview
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