Grunt Plugins Reviewed

Automating with Grunt.js is kind of my jam, so I immediately got to work researching Grunt plugins to incorporate into our existing workflow. I sought out plugins that tested against a budget I could configure in the Gruntfile for any project. With my budget defined there, I’m able to automate testing of page weights, rendering times, and asset sizes to see where we can trim things to keep our pages lean and mean.

Here are the plugins I evaluated, rated on a scale of 1 to 5 Ben Almans. Each of these tools will help you reign in page bloat and keep your websites under budget, but they all have their own strengths and weaknesses.

Grunt PageSpeed

If you’re familiar with Google PageSpeed Insights, Grunt PageSpeed might be the plugin of choice for you. It runs a test for your URL using the API and spits out a set of results straight to the console:

Metrics

Metrics measured include asset sizes, and whether your site implements performance-enhancing techniques like gzip compression, image optimization, and minification.

Drawbacks

Our budget specifies a total page weight for each template we are building which we can’t exceed, a metric this plugin doesn’t measure. It only reports partial file sizes based on asset type (e.g. images or HTML).

The PageSpeed measurements use an outdated approach to web design. You have to select a “Mobile” or “Desktop” strategy to measure your site, neither of which describes a responsive website. Plus your PageSpeed score is calculated using “the fold” as a standard for speedy rendering of the website being tested. (Read Sophie Shepherd’s conversation with herself to learn why the persistent myth of the fold is so harmful.)

The Verdict

2 out of 5 Ben Almans for easy setup and providing a few straightforward, useful metrics, but it loses points for its outmoded scoring system. These limitations led us to investigate other options for measuring performance.

Grunt Phantomas

The Phantomas plugin has the advantage of running in a local environment, where it creates a webpage in your project’s root to display the results.

Metrics

To see the example output that is generated by this plugin, check out these results for Gruntjs.com. They include groovy graphs that update over time as you continue to run the task. Some of the whopping 109 metrics measured include the number of requests, the total page weight (“bodySize”), and download time (“timeToLastByte”).

Cool Beans

This plugin’s greatest strength is the warnings you can set up using assertions. With assertions, your site will pass or fail certain metric thresholds that you define in your Gruntfile options, such as total page weight, or the time it takes to render your images. A warning message will appear at the top of your results page alerting you to any issues—an excellent way to keep track of changes that breach your predefined budget.

Drawbacks

A big weakness is the plugin’s interface. The UI for the results isn’t easy to digest. With 109 metrics presented on one page, the charts could be much better organized. Though you can configure your own metrics to reduce the overwhelming number of results, a simple navigation scheme would help. I found the camel-case metric names aren’t exactly user friendly—the meaning of terms like “bodySize” isn’t necessarily evident on first glance.

The other limitation is an unfortunate bug: Metrics related to page weight, like the total byte size of a page, are not reliable and are noted as such in the results. In our tests, results were off by as much as 20kb. This leaves us wanting in performance-budget land, since we want our page to be measured for its total byte size to effectively pass or fail our assertions. Without reliable metrics, we’re back to square one in finding a task to fit our client’s needs.

The Verdict

3 out of 5 Ben Almans. With over 100 charts, there’s lots of useful data, and it’s easy to set up locally, but the presentation leaves a lot to be desired.

Grunt Perfbudget

We tried one more plugin for our project: Grunt Perfbudget, a plugin that uses WebPageTest.org’s API to run its tests.

Metrics

You can set budgets for specific metrics, including the usual suspects like rendering time and page weight. You also get a bucketload of metrics as measured by the invaluable WebPageTest, which checks for performance best practices such as optimizing images, using CDNs, and caching.

Drawbacks

Setup time for this plugin isn’t as quick as the other two. You need to contact the developer for WebPageTest to obtain an API key. Once in hand, your API key gives you access to a limited number of page loads per day (200), which was still plenty for our purposes.

Cool Beans

My favorite feature is the ability to fail the Grunt task when your page exceeds your defined budgets. We set up our budget task to run last after all our other staging build tasks, so the site will still build to a URL as usual, but the deployment will fail in our Github integration, alerting us to the issue.

An nifty bonus is the links provided for WebPageTest URLs. You can peruse the details of your page’s performance, even for metrics not explicitly tested in your Gruntfile.

The Verdict

4 out of 5 Ben Almans for the best metrics, a handy total-page-weight budget option, and providing a URL to reference later. Minus one Cowboy Hat for the somewhat tedious setup required.

We ultimately settled on using both Grunt Phantomas and Grunt Perfbudget as part of our testing suite. Have you tried any of these tools or others to automate your performance budget tests and remove human error from the equation? Let us know in the comments!

Back to Top