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.
Increasing Sass
Compilation Time
Time saver for Front-end developer.
About Pagepro:
• Internet Software House from Poland
• Operating since 2010
• Clients from Western Europe and U.S.
• 176 p...
Starting Point
• GRUNT http://gruntjs.com
• COMPASS http://compass-style.org
• CSS Sprites http://compass-style.org/help/t...
Initial Compilation Time
• I’ve made 5 tests:
• 34.78 s
• 33.86 s
• 32.67 s
• 32.83 s
• 33.66 s
• Averange compilation tim...
Step 1: Remove Sprites
• After removing Compass Sprites:
• 33.59 s
• 31.33 s
• 36.81 s
• 32.11 s
• 32.07 s
• Averange comp...
Step 2: Remove SUSY
• After removing SUSY Grid system:
• 21.40 s
• 19.15 s
• 20.54 s
• 19.87 s
• 19.66 s
• Averange compil...
Step 3: Remove Breakpoint
• After removing Breakpoint:
• 17.68 s
• 16.02 s
• 16.14 s
• 16.05 s
• 15.84 s
• Averange compil...
Step 4: Replacing COMPASS
Framework with Sass Mixins
• I’ve replaced Compass with set of mixins: 

https://github.com/Igos...
Step 5: Replacing grunt-
compass with grunt-sass
• I’ve used grunt-sass to compile Sass using LIBSAS
http://libsass.org
• ...
Result
• Compilation time changed
• from: 33.56 s
• to: 1.54 s
• Biggest impact:
• LibSass http://libsass.org
• Susy
But
• I need SUSY, Breakpoint and Sprites!
• LibSass doesn’t allow me to use Compass
Sprites.
Step 6: Adding Breakpoint
• I’ve used Breakpoint with LibSass:
• 1.8 s
• 1.8 s
• 1.8 s
• 1.8 s
• 1.8 s
• Averange compilat...
Step 7: Adding SUSY
• I’ve added SUSY:
• 4.3 s
• 4.6 s
• 4.9 s
• 4.7 s
• 4.3 s
• Averange compilation time: 4.56 s
Compila...
Summary
• Replacing grunt-compass (Ruby Sass
compilator) with grunt-sass (C Sass compilator)
saves a lot of time.
• We sav...
CSS Sprites
• Sprites are done now as separate grunt task.
• For sprites you can use Spritesmith 

https://github.com/Ensi...
Others
• To mesure execution time of Grunt tasks you
can use time-grunt 

https://github.com/sindresorhus/time-grunt
• Exa...
Others
• Grunt task loading can take lots of time, you can
lazy load them, recommended solution: jit-grunt
https://github....
LibSass Starter
• Our LibSass project starter is open source, you
can fork it from our GitHub account:

https://github.com...
Thank you!
Developing the web in the heart of Europe.
Upcoming SlideShare
Loading in …5
×

Increasing Sass Compilation Time

530 views

Published on

Every front-end developer wants to be effective. Sass compilation time is very important, every second counts. We've investigated what part of process takes most time. Presentation contains results of our investigation and suggest solution: LibSass.

Published in: Software
  • Be the first to comment

  • Be the first to like this

Increasing Sass Compilation Time

  1. 1. Increasing Sass Compilation Time Time saver for Front-end developer.
  2. 2. About Pagepro: • Internet Software House from Poland • Operating since 2010 • Clients from Western Europe and U.S. • 176 projects done in 2014 • 1758 PSDs converted into 
 HTML5 in 2014
  3. 3. Starting Point • GRUNT http://gruntjs.com • COMPASS http://compass-style.org • CSS Sprites http://compass-style.org/help/tutorials/spriting • SUSY Grid system http://susy.oddbird.net • Brakepoint http://breakpoint-sass.com
  4. 4. Initial Compilation Time • I’ve made 5 tests: • 34.78 s • 33.86 s • 32.67 s • 32.83 s • 33.66 s • Averange compilation time: 33.56 s
  5. 5. Step 1: Remove Sprites • After removing Compass Sprites: • 33.59 s • 31.33 s • 36.81 s • 32.11 s • 32.07 s • Averange compilation time: 33.18 s Compilation time change: -0.38 s (1.13%) Conclusion: small impact
  6. 6. Step 2: Remove SUSY • After removing SUSY Grid system: • 21.40 s • 19.15 s • 20.54 s • 19.87 s • 19.66 s • Averange compilation time: 20.13 s Compilation time change: -13.43 s (40.03%) Conclusion: big impact SUSY can slow you down.
  7. 7. Step 3: Remove Breakpoint • After removing Breakpoint: • 17.68 s • 16.02 s • 16.14 s • 16.05 s • 15.84 s • Averange compilation time: 16.35 s Compilation time change: -17.21 s (51.29%) Conclusion: small impact Breakpoint can slow you down, but not as much as SUSY.
  8. 8. Step 4: Replacing COMPASS Framework with Sass Mixins • I’ve replaced Compass with set of mixins: 
 https://github.com/Igosuki/compass-mixins • 16.83 s • 16.68 s • 16.97 s • 17.28 s • 17.01 s • Averange compilation time: 16.95 s Compilation time change: -16.60 s (49.48%) Conclusion: small impact Compass framework doesn’t slow you down.
  9. 9. Step 5: Replacing grunt- compass with grunt-sass • I’ve used grunt-sass to compile Sass using LIBSAS http://libsass.org • 1.5 s • 1.5 s • 1.6 s • 1.6 s • 1.5 s • Averange compilation time: 1.54 s Compilation time change: -32.02 s (95.41%) Conclusion: big impact Libsass is extremely fast!
  10. 10. Result • Compilation time changed • from: 33.56 s • to: 1.54 s • Biggest impact: • LibSass http://libsass.org • Susy
  11. 11. But • I need SUSY, Breakpoint and Sprites! • LibSass doesn’t allow me to use Compass Sprites.
  12. 12. Step 6: Adding Breakpoint • I’ve used Breakpoint with LibSass: • 1.8 s • 1.8 s • 1.8 s • 1.8 s • 1.8 s • Averange compilation time: 1.8 s Compilation time change: -31.76 s (94.64%)
  13. 13. Step 7: Adding SUSY • I’ve added SUSY: • 4.3 s • 4.6 s • 4.9 s • 4.7 s • 4.3 s • Averange compilation time: 4.56 s Compilation time change: -28.62 s (86.26%)
  14. 14. Summary • Replacing grunt-compass (Ruby Sass compilator) with grunt-sass (C Sass compilator) saves a lot of time. • We saved -28.62 s (86.26%) and: • compilation is less annoying now ;-)
  15. 15. CSS Sprites • Sprites are done now as separate grunt task. • For sprites you can use Spritesmith 
 https://github.com/Ensighten/grunt-spritesmith
  16. 16. Others • To mesure execution time of Grunt tasks you can use time-grunt 
 https://github.com/sindresorhus/time-grunt • Example:
  17. 17. Others • Grunt task loading can take lots of time, you can lazy load them, recommended solution: jit-grunt https://github.com/shootaroo/jit-grunt • Before: • After: • We’ve saved another second!
  18. 18. LibSass Starter • Our LibSass project starter is open source, you can fork it from our GitHub account:
 https://github.com/Pagepro/libsasserplate
  19. 19. Thank you! Developing the web in the heart of Europe.

×