14 DAY TRIAL // Focusing on performance should be the goal of every frontend developer, but in the real world this is not the case, mainly because of tight deadlines, lack of expertise, and a shortage of tools to help with this process.
Yellow Lab Tools is a Node.js app that will upgrade a developer's working routine with a utility that can provide an insightful look at how his application's frontend code is performing, compared to industry best practices and recommendations.
Let's first go through the installation procedure:
Step 1: Get the download package and unzip it.
Step 2: Open the Node.js console and navigate to the Yellow Lab Tools folder.
Step 3: Here, run the following commands in this order (Node.js, npm, and Bower need to be installed):
bower install
node bin/server.js
Step 5: Enter the URL of your page and let Yellow Lab Tools do its thing.
Making sense of all the results
Following this procedure should deliver your first Yellow Lab Tools report, consisting of two main sections.
The first section is the score card, a dashboard that gives A to F grades based on a set of specific rules. Clicking each rule expands it into an even more detailed panel, presenting the problems encountered during the scan.
At this time, Yellow Lab Tools can score on issues like DOM complexity, DOM manipulation, scrolling bottlenecks, the presence of jQuery code, bad JavaScript code, CSS complexity, bad CSS code, HTTP request complexity, and network status.
The second panel is a little bit more complex and is a JavaScript profiling utility that analyzes the JavaScript execution timeline and should be the main focus of all your code optimization efforts.
This second panel can help developers identify bad code that blocks page rendering, and see when particular JS functions are being executed in the browser.
Yellow Lab Tools is more versatile than it looks
Besides this self-hosted Web-based version, Yellow Lab Tools comes with a Node.js CLI utility for getting reports directly in the console terminal, and a Grunt task for integrating it with automated build processes, delivering performance tests with every new project release.
If you can't install it locally, then you can use a free online version, or you can create other tools that work on top of it, using the official, publicly accessible RESTful API.
