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.

1. Holger Bartel | @foobartel | CodeaholicsHK April 2015 Meetup
FRONT END TOOLING
PERFORMANCE
🚀
FOR/AND

2. FRONT END
DEVELOPMENT IS
EASY!
http://en.wikipedia.org/wiki/Tightrope_walking
FRONT END
DEVELOPMENT IS
EASY!

3. OK, MAYBE LOOKS
EASY…
OK, MAYBE LOOKS
EASY…

4. MAN ON WIRE

5. “It’s Damn Hard!”
– Charis Rooda
TURNS OUT…

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. TODAY, FRONT END
DEVELOPMENT SEEMS MORE LIKE
A HUGE BUFFET
TODAY, FRONT END
DEVELOPMENT SEEMS MORE LIKE
A HUGE BUFFET

8. THE BACKSTORY

9. SF BAY GUARDIAN, 2003

11. DELIVERING THE GOODS
IN UNDER 1000MS
https://www.youtube.com/watch?v=E5lZ12Z889k
🚀

14. Built with Foundation 5
Uses jQuery, jQuery UI, Vanilla JS
& Grunt
MISSEDIN-HKG.COM

15. 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

16. TAMING FRAMEWORK
OVERHEAD

17. USING FRAMEWORKS IS OK
B

18. KILL THE LAZY
DEVELOPER IN YOU…

19. CSS SPRING CLEANING

20. YOU WANT TO AVOID THIS:
15.689 UNUSED RULES

21. BETTER: 811 UNUSED RULES

22. HAPPY: 55 UNUSED RULES

25. SO, HOW DO WE GET
THERE?

26. TOOLING

27. GRUNT
JAVASCRIPT TASK
RUNNER
http://www.gruntjs.com

28. GRUNT-UNCSS
Remove unused CSS rules

29.
uncss:
{
dist:
{
options:
{
//
ignore:
['.active',
'.alert-­‐box']
},
files:
{
'css/app.un.css':
['index.html',
'readpost.php',
'uncss.html']
}
}
}

30. GRUNT-PROCESSHTML
Modify HTML files at build time

31.
<!-­‐-­‐
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
-­‐-­‐>

32. GRUNT-CONTRIB-UGLIFY
Minify files

33. GRUNT-CONTRIB-CSSMIN
Minify CSS files
This task needs to run a er UnCSS,
otherwise it will un-minify the CSS again.

34.
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']
}
}
}

35. GRUNT-STRING-REPLACE
Find & Replace Text

36.
'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>'
}
]
}
}
}

37. GRUNT-IMAGEOPTIM

38. <img
alt="Missed
in
HKG"
src=“data:image/svg
+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3
dy53My5vcmcvMjAwMC9z…
41IDEuMiA4LjcgMjIuNCAyMi40LTguNyAxLjItMC
41QzQ5MC43IDkwLjYgNDkzLjggODMuNyA0OTEuNC
A3Ny41eiIvPjwvc3ZnPg==“>
SAVINGS OVER PNG: 15KB

39. GRUNT-CRITICALCSS
Extract the Above the Fold CSS for your page

40. http://www.perf.rocks

41. ENABLE GZIP IN .HTACCESS
https://h5bp.github.io

42. PERFORMANCE TESTING
http://www.webpagetest.org
http://tools.pingdom.com/fpt/
https://developers.google.com/speed/pagespeed/
https://developer.yahoo.com/yslow/

43. THANKS!
Holger Bartel | @foobartel | CodeaholicsHK April 2015 Meetup
@foobartel
h@foobartel.com