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.

Front End Tooling and Performance - Codeaholics HK 2015

1,111 views

Published on

Front End Tooling and Performance is a case study on what I used to make missedin-hkg.com load in less than 1000ms and optimise front end performance in various ways.
This talk has been held at the Codeaholics Meetup in Hong Kong on 08. April 2015.

Published in: Technology
  • Be the first to comment

Front End Tooling and Performance - Codeaholics HK 2015

  1. 1. Holger Bartel | @foobartel | CodeaholicsHK April 2015 Meetup FRONT END TOOLING
 
 PERFORMANCE 🚀 FOR/AND
  2. 2. FRONT END DEVELOPMENT IS EASY! http://en.wikipedia.org/wiki/Tightrope_walking FRONT END DEVELOPMENT IS EASY!
  3. 3. OK, MAYBE LOOKS EASY… OK, MAYBE LOOKS EASY…
  4. 4. MAN ON WIRE
  5. 5. “It’s Damn Hard!” – Charis Rooda TURNS OUT…
  6. 6. MOST OF THE TIME YOU’LL NEED MORE THAN JUST 3 INGREDIENTS TO COOK A GREAT MEAL MOST OF THE TIME YOU’LL NEED MORE THAN JUST 3 INGREDIENTS TO COOK A GREAT MEAL
  7. 7. TODAY, FRONT END DEVELOPMENT SEEMS MORE LIKE A HUGE BUFFET TODAY, FRONT END DEVELOPMENT SEEMS MORE LIKE A HUGE BUFFET
  8. 8. THE BACKSTORY
  9. 9. SF BAY GUARDIAN, 2003
  10. 10. DELIVERING THE GOODS IN UNDER 1000MS https://www.youtube.com/watch?v=E5lZ12Z889k 🚀
  11. 11. Built with Foundation 5 Uses jQuery, jQuery UI, Vanilla JS
 & Grunt MISSEDIN-HKG.COM
  12. 12. CSS File Size: 88Kb JS File Size: 213Kb Total Size: 559Kb DEVELOPMENT CSS File Size: 3.8Kb JS File Size: 54.3Kb Total Size: 132Kb PRODUCTION
  13. 13. TAMING FRAMEWORK OVERHEAD
  14. 14. USING FRAMEWORKS IS OK B
  15. 15. KILL THE LAZY DEVELOPER IN YOU…
  16. 16. CSS SPRING CLEANING
  17. 17. YOU WANT TO AVOID THIS: 
 15.689 UNUSED RULES
  18. 18. BETTER: 811 UNUSED RULES
  19. 19. HAPPY: 55 UNUSED RULES
  20. 20. SO, HOW DO WE GET THERE?
  21. 21. TOOLING
  22. 22. GRUNT JAVASCRIPT TASK RUNNER http://www.gruntjs.com
  23. 23. GRUNT-UNCSS Remove unused CSS rules
  24. 24.    uncss:  {              dist:  {                  options:  {                      //  ignore:  ['.active',  '.alert-­‐box']                  },                  files:  {                      'css/app.un.css':  ['index.html',  'readpost.php',  'uncss.html']                  }              }          }
  25. 25. GRUNT-PROCESSHTML Modify HTML files at build time
  26. 26.    <!-­‐-­‐  build:js  js/app.min.js  -­‐-­‐>          <script  src="bower_components/jquery/dist/jquery.min.js"></script>          <script  src="js/jquery.validate.js"></script>          <script  src="js/fastclick.js"></script>          <script  src="js/app.js"  async></script>          <script  src="js/main.js"></script>      <!-­‐-­‐  /build  -­‐-­‐>
  27. 27. GRUNT-CONTRIB-UGLIFY Minify files
  28. 28. GRUNT-CONTRIB-CSSMIN Minify CSS files This task needs to run a er UnCSS, otherwise it will un-minify the CSS again.
  29. 29.    cssmin:  {              add_banner:  {                  options:  {                      banner:  '/*  Minified  CSS  for  a  happy  day!  */'                  },                  files:  {                      'dist/css/app.min.css':  ['css/app.un.css'],                      'css/app.min.css':  ['css/app.un.css']                  }              }          }
  30. 30. GRUNT-STRING-REPLACE Find & Replace Text
  31. 31.    'string-­‐replace':  {              inline:  {                  files:  {                      'dist/index.html':  'dist/index.html',                  },                  options:  {                      replacements:  [                          {                              pattern:  '<script  src="js/app.min.js"></script>',                              replacement:  '<script  src="js/app.min.js"  async></script>'                          }                      ]                  }              }          }
  32. 32. GRUNT-IMAGEOPTIM
  33. 33. <img  alt="Missed  in  HKG"   src=“data:image/svg +xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3 dy53My5vcmcvMjAwMC9z… 41IDEuMiA4LjcgMjIuNCAyMi40LTguNyAxLjItMC 41QzQ5MC43IDkwLjYgNDkzLjggODMuNyA0OTEuNC A3Ny41eiIvPjwvc3ZnPg==“> SAVINGS OVER PNG: 15KB
  34. 34. GRUNT-CRITICALCSS Extract the Above the Fold CSS for your page
  35. 35. http://www.perf.rocks
  36. 36. ENABLE GZIP IN .HTACCESS https://h5bp.github.io
  37. 37. PERFORMANCE TESTING http://www.webpagetest.org http://tools.pingdom.com/fpt/ https://developers.google.com/speed/pagespeed/ https://developer.yahoo.com/yslow/
  38. 38. THANKS! Holger Bartel | @foobartel | CodeaholicsHK April 2015 Meetup @foobartel h@foobartel.com

×