Front End Tooling and Performance - Codeaholics HK 2015
2 likes1,489 views
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.
![uncss:
{
dist:
{
options:
{
//
ignore:
['.active',
'.alert-‐box']
},
files:
{
'css/app.un.css':
['index.html',
'readpost.php',
'uncss.html']
}
}
}](https://image.slidesharecdn.com/frontendtoolingforperf-codeaholics2015-150410032714-conversion-gate01/85/Front-End-Tooling-and-Performance-Codeaholics-HK-2015-29-320.jpg)
![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']
}
}
}](https://image.slidesharecdn.com/frontendtoolingforperf-codeaholics2015-150410032714-conversion-gate01/85/Front-End-Tooling-and-Performance-Codeaholics-HK-2015-34-320.jpg)
!['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>'
}
]
}
}
}](https://image.slidesharecdn.com/frontendtoolingforperf-codeaholics2015-150410032714-conversion-gate01/85/Front-End-Tooling-and-Performance-Codeaholics-HK-2015-36-320.jpg)
Ad
More Related Content
What's hot (20)
Viewers also liked (20)
Ad
Similar to Front End Tooling and Performance - Codeaholics HK 2015 (20)
![[convergese] Adaptive Images in Responsive Web Design](https://cdn.slidesharecdn.com/ss_thumbnails/2012-adaptive-images-convergese-120509135732-phpapp01-thumbnail.jpg?width=560&fit=bounds)
![[rwdsummit2012] Adaptive Images in Responsive Web Design](https://cdn.slidesharecdn.com/ss_thumbnails/schmitt-adaptive-imagesv2-120829225201-phpapp02-thumbnail.jpg?width=560&fit=bounds)
![[html5tx] Adaptive Images in Responsive Web Design](https://cdn.slidesharecdn.com/ss_thumbnails/adaptive-images-html5tx-130202100125-phpapp01-thumbnail.jpg?width=560&fit=bounds)
![[cssdevconf] Adaptive Images in RWD](https://cdn.slidesharecdn.com/ss_thumbnails/adaptive-imagesv6-121210084537-phpapp02-thumbnail.jpg?width=560&fit=bounds)
![[refreshaustin] Adaptive Images in Responsive Web Design](https://cdn.slidesharecdn.com/ss_thumbnails/adaptive-imagesv7-130410122323-phpapp02-thumbnail.jpg?width=560&fit=bounds)
![[O'Reilly] HTML5 Design](https://cdn.slidesharecdn.com/ss_thumbnails/html5-workshop-111215160913-phpapp01-thumbnail.jpg?width=560&fit=bounds)
Ad
More from Holger Bartel (14)
Recently uploaded (20)
Front End Tooling and Performance - Codeaholics HK 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
- 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
- 17. USING FRAMEWORKS IS OK B
- 18. KILL THE LAZY DEVELOPER IN YOU…
- 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
- 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 -‐-‐>
- 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
- 41. ENABLE GZIP IN .HTACCESS https://h5bp.github.io
- 43. THANKS! Holger Bartel | @foobartel | CodeaholicsHK April 2015 Meetup @foobartel [email protected]