• 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
allows for fine-tuning and best results
best for a few important photos
repetitive
time-consuming
error-prone
Slide 25
Slide 25 text
gulp-responsive
Slide 26
Slide 26 text
faster and less error-prone
updated images get resized automatically
the code gets huge very quickly
Slide 27
Slide 27 text
Image sprites
Slide 28
Slide 28 text
css-sprite
Slide 29
Slide 29 text
Critical CSS
http://iamthefold.com/
Slide 30
Slide 30 text
tl;dr
• criticalCSS or critical
• loadCSS
• critical-path-css-tools
Slide 31
Slide 31 text
Remove Unused CSS
Slide 32
Slide 32 text
gulp-uncss
Slide 33
Slide 33 text
• 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
• 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…)
Slide 42
Slide 42 text
Spriting
Slide 43
Slide 43 text
No content
Slide 44
Slide 44 text
No content
Slide 45
Slide 45 text
IE6-9 CSS Selector Limit
(4095)
Slide 46
Slide 46 text
No content
Slide 47
Slide 47 text
Inline Small
Background Images
Slide 48
Slide 48 text
No content
Slide 49
Slide 49 text
No content
Slide 50
Slide 50 text
Image Processing
Slide 51
Slide 51 text
No content
Slide 52
Slide 52 text
No content
Slide 53
Slide 53 text
No content
Slide 54
Slide 54 text
And A Lot More…
Slide 55
Slide 55 text
A Good Read
• Improving Smashing Magazine’s Performance: A
Case Study, Vitaly Friedman
Slide 56
Slide 56 text
Follow Me
• github.com/silvenon
• twitter.com/silvenon