Top 10 Gulp Tasks for Optimising Front End Performance

gulp tasks performance

What is Gulp?

Unless you have been living under a rock you’ll have probably heard of Gulp, the streaming build manager from the guys at Fractal.

If you have actually been living under a rock, then Gulp is a build tool that helps to speed up your workflow by automating repetitive tasks, such as optimising images and concatenating and minifying JavaScript.

Here at CDNify, we recently made the switch from Grunt to Gulp because of the flexibility Gulp offers. We also found it’s much faster and, as we are obsessed with all things performance related, the switch seemed an obvious one to make. Unlike Grunt which relies on configuration, Gulp allows you to write your build scripts in JavaScript and run multiple tasks at the same time.

Building super fast, lightweight pages is important to us and Gulp helps us achieve this. In this article, we’ll look at the various plugins we use in our build process and highlight our top 10 Gulp tasks for optimising front end performance.

SASS and LESS

Browser Compatibility

To ensure compatibility across all browsers and to cut down on our testing time, we use Auto-Prefixer. It’s a post-processor that allows you to write CSS rules without worrying about vendor prefixes. Once you’ve run Auto-Prefixor it reference’s data on current browser popularity and support to apply prefixes for you. Best of all because it’s a post-processor you can use it alongside preprocessors like SASS and LESS.

The SASS Way

Compiling CSS

To compile our CSS we use Gulp-SASS. In terms of speeding up your workflow SASS is particularly useful as it allows us to treat CSS in a modular fashion, which makes it much easier to maintain and scale. If we need to change a colour value this only needs to be done once and allows us to create reusable blocks of styles that only need to be defined once :) If you’re not sure where to get started with SASS then check out The SASS Way, which has an awesome collection of resources.

CSS3

Minifying CSS

Minification removes unnecessary characters in your CSS such as line breaks, spaces, and indentation. Whilst useful at the development and debugging stage, these characters are superfluous in production, so it’s considered good practice to remove them before shipping your code. We use Minify CSS to make sure our CSS is as compact as it can be.

Removing Unused CSS

Whilst there’s no doubt that using a CSS framework like Bootstrap is a big time saver, they can often be incredibly bloated. To avoid shipping the entire framework to production and remove any unused styles in our pages we use UNCSS. Also worth mentioning that this plugin is built by our front end developer Ben.

Inline CSS

The main advantage of using inline styles is that your tags can be styled individually. Because they have the highest precedence, if for whatever reason you can’t change the external style file, you can use inline CSS to override your default CSS for a specific tag. Whilst it’s great for testing, quick fixes, and reducing HTTP requests, it’s generally not considered best practice to use inline CSS in production. However, we use a plugin called Inline CSS to apply our CSS attributes inline in our HTML email templates and ensure they are rendered properly in browser.

Minifying SVGs

We are big fans of SVGs at CDNify, but they can be incredibly bulky! We use SVG-Min to ensure that all unnecessary information (like meta-data and hidden comments) is removed and the file that’s rendered is as small as possible. Like UNCSS, this was built by our front-end developer Ben.

Creating Icons Fonts

To convert multiple SVGs into icon fonts, we use a plugin called (rather unsurprisingly) IconFont. This allows us to treat our icons like our fonts and use CSS to style them. Performance wise they’re relatively small, use less HTTP requests, and are even supported by IE (if you still use IE that is).

CDNify Iconfont

Minifying JavaScript

We use UglifyJS to combine and minify JavaScript assets into one compressed file. This reduces HTTP requests and the amount of code your users need to download, meaning your site can load faster. Minifying your JavaScript typically reduces your file size by about 30% to 90%.

JavaScrip

Concatenation

One of our biggest requirements whenever we develop anything at CDNify is to ensure that our code is modular and lightweight. We use Concat to combine multiple JavaScript or CSS files into one. This ensures optimised performance by reducing the load on the sever and the number of requests the user has to make.

Start Experimenting!

Even the tiniest delay in your websites load time can result in negative user experience and lost revenue. Whilst the build process we use at CDNify might not be for everyone, there are countless plugins available for Gulp so finding the right mix is just a matter of experimenting. If your site is optimised for performance, users will be happier and will thank you for it.

If you are currently using Gulp to automate your workflow then let us know what plugins you are using in the comments below.

Enjoyed this blog post?

  • Peter Somhorst

    Awesome, I love this list!! Actually, I’ve been using most of them for a while, but UNCSS, InlineCSS and IconFont in new for me. Gonna’s try them in my current project!

    • cdnify

      Glad you like list of plugins. Good luck and let us know if you have any questions about getting started.

  • Jull Weber

    You should offer for download a typical project gulp file.
    thanks

    • http://drewlustro.com/ Drew Lustro

      Agreed… looks like you made a list with links to gulp modules, but don’t really explain how to put them into practice, which leads any normal engineer to believe that you’re not 100% familiar with the modules referenced. Thus, trust in this article is reduced significantly.

      Thanks for the post, but it would be helpful if this article had some more meat to it. For those that care, you could probably get a lot farther than this article if you check out the yo generator for a gulp application:

      https://github.com/yeoman/generator-gulp-webapp

      –Drew
      http://drewlustro.com

      • cdnify

        Hi Drew, thanks for the feedback. This article is more about showcasing the plugins we use to optimise performance. If people are looking for looking for more of a “How to” there’s already some great ones out there like this http://hmphry.com/gulp/

    • cdnify

      Hi Jull, if you’re looking to get started with Gulp check out the link below. Thanks

      • Jull Weber

        Actually was just personally curious what your typical gulp file looks like. Addy Osmani wrote an amazing article on performance gulp tasks too http://yeoman.io/blog/performance-optimization.html.
        It’s just interesting what everybody’s take on it is.

        • cdnify

          Great article, thanks for sharing

  • https://github.com/mehdishojaei Mehdi Shojaei

    gulp-amdcheck can be useful too to remove unused dependencies from AMD modules. Results to less file size and fewer HTTP requests for final optimized modules. Uses AST to find unused dependencies.

    https://github.com/mehdishojaei/gulp-amdcheck

  • lenswipe

    I built a web starter kit using gulp with a friend that does a whole bunch of cool stuff. Link can be found here: http://bitbucket.com/elementalsoftware/pillars