Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Automatize Frontend Optimizations

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.

Matija Marohnić

March 18, 2015

More Decks by Matija Marohnić

Other Decks in Technology


  1. • 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
  2. • gulp-rev & gulp-rev-replace • set these files’ caches to

    never expire • double-check if references in revved assets have also been updated
  3. allows for fine-tuning and best results best for a few

    important photos repetitive time-consuming error-prone
  4. • 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
  5. psi

  6. • 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…)