Automatize Frontend Optimizations

Frontend optimization is hard, let's look at some of the many ways to automatize this process as much as we can.

Transcript

1. AUTOMATIZE FRONTEND OPTIMIZATIONS
2. Preparations
3. • I use gulp-load-plugins for loading Gulp plugins • it loads all gulp- plugins into an assigned variable • every time you see $.fooBar, think gulp-foo-bar
4. Concatenate & Compress CSS/JS/HTML
8. • gulp-useref • gulp-if • gulp-csso • gulp-uglify • gulp-minify-html
9. • beware of missing semicolons + self-invoking anonymous functions • properly configure HTML minifier
10. Optimize Images
11. gulp-cache & gulp-imagemin
13. • SVG optimization removes stuff, configure carefully • image processing is slow, so we’re using gulp-cache
14. Gzipping index.html.gz
15. gulp-gzip & gulp-size
17. • turn on gzipping on your server
18. Asset revisioning (a.k.a. cache-busting) main.css ⇝ main-098f6bcd.css
20. • gulp-rev & gulp-rev-replace • set these files’ caches to never expire • double-check if references in revved assets have also been updated
21. Responsive images
22. Ugh. http://bradfrost.com/blog/post/device-fatigue/
24. allows for fine-tuning and best results best for a few important photos repetitive time-consuming error-prone
25. gulp-responsive
26. faster and less error-prone updated images get resized automatically the code gets huge very quickly
27. Image sprites
28. css-sprite
29. Critical CSS http://iamthefold.com/
30. tl;dr • criticalCSS or critical • loadCSS • critical-path-css-tools
31. Remove Unused CSS
32. gulp-uncss
33. • fires up PhantomJS and extracts used styles • tricky with web apps, many elements are initially hidden • possible solution: run it on your pattern library • additional configuration may be needed
34. PageSpeed Analytics
35. psi
37. Now For Something Different…
38. Meet AssetGraph npm install --global assetgraph-builder
39. assetgraph-builder
41. • just give it the root, it will do the rest • finds assets by following URLs • it has gajillion features (asset optimizations, spriting, image processing, revisioning, gzipping…)
42. Spriting
45. IE6-9 CSS Selector Limit (4095)
47. Inline Small Background Images
50. Image Processing
54. And A Lot More…
55. A Good Read • Improving Smashing Magazine’s Performance: A Case Study, Vitaly Friedman
56. Follow Me • github.com/silvenon • twitter.com/silvenon