Themes that perform short: WordCamp Antwerp 2016
-
Upload
octavio-andres-cifuentes -
Category
Technology
-
view
423 -
download
0
Transcript of Themes that perform short: WordCamp Antwerp 2016
![Page 1: Themes that perform short: WordCamp Antwerp 2016](https://reader035.fdocuments.in/reader035/viewer/2022070602/587876531a28ab497b8b74e3/html5/thumbnails/1.jpg)
Themes that perform:
Creating Faster themes for non developers
![Page 2: Themes that perform short: WordCamp Antwerp 2016](https://reader035.fdocuments.in/reader035/viewer/2022070602/587876531a28ab497b8b74e3/html5/thumbnails/2.jpg)
Andrés CifuentesWPML Supporter | WPML Training
![Page 3: Themes that perform short: WordCamp Antwerp 2016](https://reader035.fdocuments.in/reader035/viewer/2022070602/587876531a28ab497b8b74e3/html5/thumbnails/3.jpg)
Agenda
Performance budget.
Underscores and Components.
Installing grunt.js
Responsive images
¿Questions?
![Page 4: Themes that perform short: WordCamp Antwerp 2016](https://reader035.fdocuments.in/reader035/viewer/2022070602/587876531a28ab497b8b74e3/html5/thumbnails/4.jpg)
Budget¿How can we measure it?
Time vs Data
![Page 5: Themes that perform short: WordCamp Antwerp 2016](https://reader035.fdocuments.in/reader035/viewer/2022070602/587876531a28ab497b8b74e3/html5/thumbnails/5.jpg)
WebPageTest
Google PageSpeed
Pingdomhttps://css-tricks.com/performance-tools/
Budget
![Page 6: Themes that perform short: WordCamp Antwerp 2016](https://reader035.fdocuments.in/reader035/viewer/2022070602/587876531a28ab497b8b74e3/html5/thumbnails/6.jpg)
WebPageTest: Speed index (1000?)
Budget
![Page 7: Themes that perform short: WordCamp Antwerp 2016](https://reader035.fdocuments.in/reader035/viewer/2022070602/587876531a28ab497b8b74e3/html5/thumbnails/7.jpg)
Budget
Google pageSpeed 90/100 (?)
![Page 8: Themes that perform short: WordCamp Antwerp 2016](https://reader035.fdocuments.in/reader035/viewer/2022070602/587876531a28ab497b8b74e3/html5/thumbnails/8.jpg)
Budget
Pingdom: Performance grade (?)
![Page 9: Themes that perform short: WordCamp Antwerp 2016](https://reader035.fdocuments.in/reader035/viewer/2022070602/587876531a28ab497b8b74e3/html5/thumbnails/9.jpg)
Structure
¿Where can I start?
![Page 10: Themes that perform short: WordCamp Antwerp 2016](https://reader035.fdocuments.in/reader035/viewer/2022070602/587876531a28ab497b8b74e3/html5/thumbnails/10.jpg)
Structure
UnderscoresComponents
![Page 11: Themes that perform short: WordCamp Antwerp 2016](https://reader035.fdocuments.in/reader035/viewer/2022070602/587876531a28ab497b8b74e3/html5/thumbnails/11.jpg)
StructureSemantically correct
WordPress guidelines
Automattic
Minimum necessary
![Page 12: Themes that perform short: WordCamp Antwerp 2016](https://reader035.fdocuments.in/reader035/viewer/2022070602/587876531a28ab497b8b74e3/html5/thumbnails/12.jpg)
Installing Grunt.js
¿Why?
![Page 13: Themes that perform short: WordCamp Antwerp 2016](https://reader035.fdocuments.in/reader035/viewer/2022070602/587876531a28ab497b8b74e3/html5/thumbnails/13.jpg)
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
![Page 14: Themes that perform short: WordCamp Antwerp 2016](https://reader035.fdocuments.in/reader035/viewer/2022070602/587876531a28ab497b8b74e3/html5/thumbnails/14.jpg)
Installing Grunt.js
¿Why not?
![Page 15: Themes that perform short: WordCamp Antwerp 2016](https://reader035.fdocuments.in/reader035/viewer/2022070602/587876531a28ab497b8b74e3/html5/thumbnails/15.jpg)
I don’t need it.
It runs on node.js
I’m just a designer.
Installing Grunt.js
![Page 16: Themes that perform short: WordCamp Antwerp 2016](https://reader035.fdocuments.in/reader035/viewer/2022070602/587876531a28ab497b8b74e3/html5/thumbnails/16.jpg)
Installing Grunt.js
Requirements
![Page 17: Themes that perform short: WordCamp Antwerp 2016](https://reader035.fdocuments.in/reader035/viewer/2022070602/587876531a28ab497b8b74e3/html5/thumbnails/17.jpg)
Installing Grunt.js
Pre-install node.js
![Page 18: Themes that perform short: WordCamp Antwerp 2016](https://reader035.fdocuments.in/reader035/viewer/2022070602/587876531a28ab497b8b74e3/html5/thumbnails/18.jpg)
Installing Grunt.js
npm install -g grunt-cliGrunt CLI (command line interface)
![Page 19: Themes that perform short: WordCamp Antwerp 2016](https://reader035.fdocuments.in/reader035/viewer/2022070602/587876531a28ab497b8b74e3/html5/thumbnails/19.jpg)
Installing Grunt.jsYou need the following two
files in your theme root.
package.json
Gruntfile.js
![Page 20: Themes that perform short: WordCamp Antwerp 2016](https://reader035.fdocuments.in/reader035/viewer/2022070602/587876531a28ab497b8b74e3/html5/thumbnails/20.jpg)
Installing Grunt.js
This file allows you to install
the node.js dependencies.
Let’s call it our Grunt.js
archive file
package.json
![Page 21: Themes that perform short: WordCamp Antwerp 2016](https://reader035.fdocuments.in/reader035/viewer/2022070602/587876531a28ab497b8b74e3/html5/thumbnails/21.jpg)
Installing Grunt.js
npm install
![Page 22: Themes that perform short: WordCamp Antwerp 2016](https://reader035.fdocuments.in/reader035/viewer/2022070602/587876531a28ab497b8b74e3/html5/thumbnails/22.jpg)
Installing Grunt.js
Let’s configure
Grunt.js
grunt.js
![Page 23: Themes that perform short: WordCamp Antwerp 2016](https://reader035.fdocuments.in/reader035/viewer/2022070602/587876531a28ab497b8b74e3/html5/thumbnails/23.jpg)
Installing Grunt.js1. Source > Destination
Archives SCSS => CSS
2. Autoprefixer
3. Minimize
grunt-autoprefixer
grunt-contrib-cssmin
grunt-sass
![Page 24: Themes that perform short: WordCamp Antwerp 2016](https://reader035.fdocuments.in/reader035/viewer/2022070602/587876531a28ab497b8b74e3/html5/thumbnails/24.jpg)
Installing Grunt.js
Concatenate our
JavaScript files.
Uglify(?) them.
grunt-contrib-uglify
grunt-contrib-concat
![Page 25: Themes that perform short: WordCamp Antwerp 2016](https://reader035.fdocuments.in/reader035/viewer/2022070602/587876531a28ab497b8b74e3/html5/thumbnails/25.jpg)
● Optimise all our
png / jpg / gif images.
Installing Grunt.js
grunt-contrib-imagemin
![Page 26: Themes that perform short: WordCamp Antwerp 2016](https://reader035.fdocuments.in/reader035/viewer/2022070602/587876531a28ab497b8b74e3/html5/thumbnails/26.jpg)
Installing Grunt.js● All these tasks are
executed
automatically
grunt-contrib-watch
![Page 27: Themes that perform short: WordCamp Antwerp 2016](https://reader035.fdocuments.in/reader035/viewer/2022070602/587876531a28ab497b8b74e3/html5/thumbnails/27.jpg)
grunt watch
Installing Grunt.js
![Page 28: Themes that perform short: WordCamp Antwerp 2016](https://reader035.fdocuments.in/reader035/viewer/2022070602/587876531a28ab497b8b74e3/html5/thumbnails/28.jpg)
¿What have we done with all this?
Installing Grunt.js
![Page 29: Themes that perform short: WordCamp Antwerp 2016](https://reader035.fdocuments.in/reader035/viewer/2022070602/587876531a28ab497b8b74e3/html5/thumbnails/29.jpg)
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
![Page 30: Themes that perform short: WordCamp Antwerp 2016](https://reader035.fdocuments.in/reader035/viewer/2022070602/587876531a28ab497b8b74e3/html5/thumbnails/30.jpg)
ExperimentFirst day:
![Page 31: Themes that perform short: WordCamp Antwerp 2016](https://reader035.fdocuments.in/reader035/viewer/2022070602/587876531a28ab497b8b74e3/html5/thumbnails/31.jpg)
ExperimentFourth day:
![Page 32: Themes that perform short: WordCamp Antwerp 2016](https://reader035.fdocuments.in/reader035/viewer/2022070602/587876531a28ab497b8b74e3/html5/thumbnails/32.jpg)
Agenda
Performance budget.
Underscores and Components.
Installing grunt.js
Responsive images
¿Questions?
Agenda