yellowlabtools / yellowlabtools

WebPerf and front-end quality testing tool

Analyzes a webpage and detects performance or front-end code quality issues. Free, easy to launch, easy to understand, in-depth details.

The online tool (recommended): https://yellowlab.tools
The Docker image - ousamabenyounes/docker-yellowlabtools Your own private instance of Yellow Lab Tools, on your computer.
The CLI (Command Line Interface) - Doc here
The NodeJS package - Doc here
The public API - Doc here Allows you to launch runs from any language

How it works

The tool loads the given URL and collects various metrics and statistics with the help of Phantomas. These metrics are then categorized and transformed into scores. It also gives in-depth details so developpers can fix the detected issues.

By the way, it's free because I am a geek, not businessmen. In return, you can add a ★ on GitHub, it will boost my motivation to add more awesome features!!!

Install your own private instance

If your project is not accessible from outside or if you want to test your localhost, you might want to run your own instance of Yellow Lab Tools.

The classical way is to clone the YLT server's GitHub repository and run it on Linux or MacOS. The documentation is here.

The new recommended solution is to run Yellow Lab Tools inside a Docker virtual machine. My friend Ousama Ben Younes maintains this ready-to-use Docker image based on Alpine).

Author

Gaël Métais. I'm a webperf freelance. Follow me on Twitter @gaelmetais, I tweet about Web Performances, Front-end and new versions of Yellow Lab Tools!

I can also help your company about Web Performances, visit my website.

Contributors

• Achraf Ben Younes achrafbenyounes
• Km camlafit
• Vincent L. magikcypress
• Ousama Ben Younes ousamabenyounes

yellowlabtools's Issues

Error 1001: JavaScript profiling failed

Hi,

I have this error when i try to test www.ratp.fr

Thanks

Test failed : Error 1001: JavaScript profiling failed

Hi,

I ran some tests of some websites and I got this error for the following:

• http://www.vosgesmatin.fr
• http://www.bienpublic.com/
• http://www.ledauphine.com/

For information purpose, I ran tests on other web tools for these sites and they worked well.

Thanks in advance for your help on this.

Create mockups for the new dashboard

Find a mockup tool maybe.

The new dashboard will introduce the new grades system, between 0 and 100. The content needs 3 levels of reading:

• I'm the owner of the website, i want to know if it's good
• I'm the technical leader, on what problems should my team focus
• I'm a developer, i need to focus on a specific problem

First thoughts:

• The global score needs to be huge.
• Possibility to tweet the score if the user is proud.
• Reduce the number of categories (HTML, CSS, JS, Images, Network)
• Big visual red alerts for the biggest problems (danger signs? skulls?)
• Should we show a rule if it has a good score?
• If the test fails, display a link to the GitHub issues page.
• Show a thumbnail of the loaded page.

Refactor: Create Angular factories

On branch "refactor".

Two factories for the moment:

• runs
• results

They will simply wrap the RESTfull API.

Never-ending PhantomJS process

The server was failing on more runs then usual since yesterday. I investigated a little and I just found and killed 7 phantomjs processes running. Some of them have been running for more than a month and some were still consuming bandwidth.

YLT should make sure that every spawned phantomjs process is completely ended.

Test failed Error 254: page loading failed in Phantomas

I keep getting
Test failed
Error 254: page loading failed in Phantomas

with 2 sites (https://www.nedtrack.nl and https://www.nedsoft.nl)
is this a problem with my website or with the tool?

Improve offenders layout

The offenders are not always easy to read:

• transform DOM paths into something more readable
• improve backtraces
• CSS files and lines (get ready for phantomas v1.9)
• transform file paths into links
• order the requests by weight and highlight the biggest ones
• shorten very long urls and add a title

Show sub-requests on the JS profiler

For example $("#foo") will make a sub-request document.getElementById("foo").

The sub-requests don't need to be visible when arriving on the Timeline page, but a "+" button could open a request to display sub-requests.

And maybe sub-sub-requests, and sub-sub-sub-sub-sub-requests.

Perform tests with mobile user agent?

Is there a way/parameter to perform the tests with a mobile user agent? Our site checks for mobile user agent to redirect the user to mobile or desktop version.

Phantomas seems to support this, see: macbre/phantomas#213 or https://github.com/macbre/phantomas#parameters

Add a tooltip on dashboard about the API

Something like that, at the end of the dashboard:

Did you know?
Yellow Lab Tools now has an API. Here is the JSON output for this run.
Checkout the API documentation and automatically launch runs.

Refactor: Create the JSON format for the API

On branch "refactor".

This is a first thought for the targeted output format:

{
  "runId": 123456,
  "params": {
    "url": "http://www.example.com",
    "options": {}
  },
  "scoreProfiles": {
    "generic": {
      "globalScore": 77,
      "categories": {
        "domComplexity": {
          "categoryScore": 90,
          "rules": [
            "DOMElementsCount",
            "DOMelementMaxDepth"
          ]
        },
        "domManipulations": { ... }
      }
    }
  },
  "rules": {
    "DOMelementsCount": {
      "value": 880,
      "policy": {
        "tool": "phantomas",
        "label": "DOM elements count",
        "message": "A high number of DOM elements means a lot of work for the browser to render the page.",
        "isOkThreshold": 1000,
        "isBadThreshold": 3000,
        "isAbnormalThreshold": 5000
      },
      "bad": false,
      "abnormal": false,
      "score": 100,
      "abnormalityScore": 0
    },
    "DOMelementMaxDepth": { ... }
  },
  "toolsResults": {
    "phantomas": { ... }
  },
  "javascriptExecutionTree": {  
      "data": {  
        "type": "main"
      },
      "children": [  
        {  
          "data": {  
            "type": "getElementById",
            "callDetails": {  
              "context": {  
                "domElement": "#document"
              },
              "arguments": [  
                "#pmocntr2"
              ]
            },
            "backtrace": "http://www.google.fr/:5 / http://www.google.fr/:6",
            "timestamp": 80,
            "loadingStep": "domCreation",
            "time": 0,
            "resultsNumber": 1
          }
        }, {  
          "data": {  
            "type": "domContentLoaded",
            "timestamp": 88,
            "loadingStep": "domContentLoaded"
          }
        }, {  
          "data": {  
            "type": "appendChild",
            "callDetails": {  
              "context": {  
                "domElement":"body > div#xjsd"
              },
              "arguments": [  
                "script"
              ]
            },
            "backtrace": "http://www.google.fr/xjs/_/js/k=xjs.hp.en_US.Anfrvs-G7Vg.O/m=sb_he,pcc/rt=j/d=1/t=zcms/rs=ACT90oEO5uJZbGlNIeyya5w6rQiVuEHo7A:163 / http://www.google.fr/xjs/_/js/k=xjs.hp.en_US.Anfrvs-G7Vg.O/m=sb_he,pcc/rt=j/d=1/t=zcms/rs=ACT90oEO5uJZbGlNIeyya5w6rQiVuEHo7A:315",
            "timestamp": 90,
            "loadingStep": "domContentLoaded",
            "time":1
          }
        }
      ]
    }
  }
}

Test failed Error: JPEG decoding error

I wanted to test some website because it was ultra slow. And got an error 😄 now I know probably why it was slow. Could u see what is the problem? Im not owner of website and also, it's in polish.
Tested url: http://www.zajadam.pl/przepisy-zupy/rosol-domowy

The API redirects to the response before it's written to disk

On branch "refactor".

Sometimes, a run completes but returns 404. It happens because the API doesn't wait the callback of fs.writeFile() before redirecting the response.

Add a white background to screenshot before saving in jpeg

When the page has no default background color, transparent pixels are set to black.

Fix like this: EyalAr/lwip#103

Test failed : Error 255: Phantomas error

Hi,

I ran some tests of some websites and I got this error for the following:

• http://www.dna.fr
• http://www.lejsl.com
• http://www.lalsace.fr

For information purpose, I ran tests on other web tools for these sites and they worked well.

Thanks in advance for your help on this.

Test queue freezed

The public instance is unstable today. The queue goes on increasing, it looks like one run is running forever:

For the moment I have no clue (and no time) for a bug fix. Please post a message if it happens and I'll restart the server manually.

Refactor: Limit the number of API calls per IP address

On branch "refactor".

To avoid abuse, limit the number of runs to 24 per 24h. Use the IP address as a identifier.
The limit will definitely increase when we introduce user accounts in the future.

Limit the total number of API calls to 1000 per 24h (launch runs + run status + get results).

Update to Phantomas 1.8

• Add a policy for the new metric DOMqueriesWithoutResults.
• Add a policy for the new metric smallCssFiles.
• Add a policy for the new metric smallJsFiles.
• Add a policy for the metric smallImages.
• Revert my custom code for closedConnections metric, implemented in Phantomas.
• Revert my custom code for CSS analyze not finishing macbre/phantomas#417 implemented in Phantomas.
• Revert my custom code for DOMelementMaxDepth offenders, implemented in Phantomas.

Some weird results

hi
on a particular page, I got weird results : www.promovacances.com : http://yellowlab.tools/results/dy19rmetiq

DOM elements count 1
DOM max depth 1
whereas there is more than 2600 nodes

CSS complexity has not been evaluated, probably because of this error :
http://www.promovacances.com/pack/combined.css.h1588357146.pack (Error: CSS parsing failed: missing '}' @ 10:6093)

Wait for CSS selector

I'm trying to test passenger page but, before passenger form is displayed, search results have to be loaded: https://www.onetwotrip.com/en-gb/flights/moscow-london_MOW-LON/#1604MOWLON1904&s|AB|0|fn=8113,943-944,8110

The problem is that Phantomas starts working immediately after page load. The probable solution is a CSS selector to wait for, but this possibility is disabled in phantomasWrapper: https://github.com/gmetais/YellowLabTools/blob/master/lib/tools/phantomas/phantomasWrapper.js#L49

I've tried to enable waitForSelector module and set wait-for-selector in options — that works fine.
@gmetais Could we introduce this feature? Will it affect test results?

Create a filter by script

For each DOM manipulation recorded, we've got the Javascript backtrace, so we know what is the script (or what are the scripts) involved in this DOM manipulation.

Create a select box with all the known scripts on the page. When selecting one, the timeline and the profiler would only show the executions related to this script. Or maybe just highlight them (option?).

It can help to discover which script works the most (probably jQuery).
It can make it easier to prioritize scripts if you see exactly when they run.

Add a warning message when CSS analyzing fails

Make it clearer that a CSS parsing error prevents the tool to analyze CSS complexity.

Refactor: Create a RESTful API

On branch "refactor".

Create a RESTful API that can be used to launch runs on the http://yellowlab.tools server.
For the moment, the API will be limited:

• POST /api/runs : creates a new run. Returns the runId or the redirects to the results (waitForResults option)
• GET /api/runs/:id : returns the current status of the run (waiting position in queue, running, complete, failed)
• GET /api/results/:id : returns the results of a run.
• GET /api/results/:id/generalScores : returns only the general score and categories scores for a run, with the generic score profile.
• GET /api/results/:id/generalScores/:scoreProfile : returns the general score and categories scores with another profile than the generic one (not available yet, preparing for later).
• GET /api/results/:id/rules : returns only the rules part of a run's results.
• GET /api/results/:id/javascriptExecutionTree : returns only the execution tree for a run.
• GET /api/results/:id/toolsResults/phantomas : returns only the phantomas results for a run.

No other possibilities for the moment. The possibility to list and delete runs might come when we introduce user accounts.

CSS drowdown do not open

On this page for instance: http://yellowlab.tools/result/e5kvtzggoc/rule/cssComplexSelectors the dropdown menus referring to CSS complex selectors do not open (with Chrome 43.0.2357.134)

Setting multiple cookies with YLT e.g. siteminder SMIDENTITY & SMSESSION

Hi Team,
The latest code base has an option to accept cookie field, with a textbox.
Q: How do we pass multiple cookies with YLT UI, can you explain the syntax if it is?

If we can't pass multiple cookies from UI, can you add this as an enhancement request to the queue?
Use Case: Siteminder protected internal sites in the Enterprise typically use two cookies SMIDENTITY & SMSESSION for auth.

Thanks

Detect HTTP2 on the server

When a website is served with HTTP2, some of the rules (mainly about reducing the number of requests) are not relevant.

The problem is about detecting HTTP2. Does anyone know how to achieve this? Help appreciated!

@font-face with a curly brace on the next line is reported as a syntax error

If your CSS includes a font declaration with the curly braces on a new line, like this -

@font-face
{
 font-family: 'foo';
 src: url('foo.woff') format('woff');
}

The report says there is a syntax error in the CSS -

CSS syntax error

F
0/100
Value: 1

Yellow Lab Tools failed to parse a CSS file. I doubt the problem comes from the css parser.

Maybe a CSS validator can help you.

THE-URL (Error: CSS parsing failed: @font-face missing '{' @ 7:11)

Refactor: Front-office must become a true SPA

On branch "refactor".

A true Single Page Application. For the moment, the front-office has 3 views (index, launchTest and results). Replace by an unique index.html view. Angular will manage the url changes.

Choose a NodeJS templating engine that doesn't create conflicts with AngularJS. Anybody knowing the answer?

SSL issue with Phantomas? Failed Page Load.

Hi,

just tried to analyze my website and it failed due to not being able to load the page.
http://yellowlab.tools/queue/dzq1ogv01z

 Test failed
 Error 254: page loading failed in Phantomas

I use SSL via CloudFlare on Github Pages, just for the technical record.

Create a preprod server

Probably hosted on the prod's server, but on port 8383.

http://yellowlab.tools:8383

Make the timeline clickable

A click on a timeline chunk scrolls the page to the corresponding profiler's lines and highlights them.

Replace Bower by Browserify

Two less steps on install:

• npm install -g bower
• bower install

Enhance params readability in the JS timeline

For example, replace:

type	params
appendChild	script
jQuery - on	click : (function)

by:

type	params
appendChild	Created element script on DOM element body > div.foo
jQuery - on	Event click on DOM element body > div.foo

Refactor: Create Angular routes

Route	View name	Description
/	home	Home page with URL input field
/queue/:runId	queue	The waiting page
/results/:runId	results	The results dashboard
/results/:runId/timeline	timeline	The timeline and JS profiling page
/results/:runId/rule/:policy	policy	The details of a policy score + explanations + offenders
/about	about	What is YLT

Display a thumbnail on dashboard

Take a screenshot of the page.
Create a thumbnail.
Compress the images if needed.
Display the thumbnail on dashboard and the big one on click.

Add an options form on the launch screen

Improve the start screen with an options form. I like the www.webpagetest.org style, but could be modernized a bit.

The options:

• Mobile / Tablet / Desktop option (done in v1.4.0)
• HTTP authentication (done in v1.7.8)
• User agent
• Screen size
• Cookie (done in v1.5.0)
• Block domains (done in v1.10)
• Your ideas...

Error 1001 when using the Node module

All tests fail when using the NPM module : Error 1001.

Refactor: Create a scoring profile

On branch "refactor".

I've recently introduced the "policies" system. Every policy contains a calculation alogithm, providing a score between 0 and 100.
There are currently 46 rules here: https://github.com/gmetais/YellowLabTools/blob/refactor/lib/metadata/policies.json

Now we need to aggregate these rules into categories, such as the existing ones:

• DOM complexity
• DOM manipulations
• Bad Javascript
• etc.

Each category has a score which is calculated from it's children scores, with weights. The weight can be any positive number. And then, the global score is calculated from the categories scores with weights.

The scoreProfileGeneric.json might look like this:

{
  "categories": {
    "domComplexity": {
      "label": "DOM complexity",
      "policies": {
        "DOMelementsCount": 2,
        "DOMelementMaxDepth": 1,
        "iframesCount": 0.5,
        "DOMidDuplicated": 2
      }
    },
    "domManipulations": {
      ...
    }
  },
  "globalScore": {
    "domComplexity": 2,
    "domManipulations": 1
  }
}

All scores (policy score, category score, global score) are grades between 0 and 100.

Load tests with JMeter or Gatling

On branch "refactor".

Conduct a stress test on the API.

Scenario:

• POST a run
• then GET the run status 50 times every 2 seconds
• then GET a result

How many users can we handle?

Proxy setting in YLT / PhantomasWrapper.js

Hi,
I tried running YLT in a corporate environment behind a firewall with the git based setup. I kept running into an access denied error.

Adding an option to accept the proxy parameter in PhantomasWrapper.js as a workaround works for me. What is the correct way to set up the corporate proxy with YLT, not sure if this is a bug/missed option?

Thanks
P.S. Can you mention the msvs_version=2013 option to npm install for Windows users for node-gyp setup somewhere in the documentation. Git, bower, npm all need additional proxy set up configuration params too.

Error 254 on https://www.jonathanfielding.com/

So I am getting the 254 error on my site https://www.jonathanfielding.com/ using YellowLabTools, I know the site is up so not sure why I am getting this error. The site is hosted on DigitalOcean and uses CloudFlare CDN

Thanks

Update to Phantomas 1.10

https://github.com/macbre/phantomas/releases/tag/v1.10.0

Not possible to open a row of the "Score Details" table in a new tab.

Should be doable using this technique:
http://stackoverflow.com/questions/23069481/how-to-allow-open-in-a-new-tab-when-using-ng-click

Refactor: Front-end minifying, concatenation, versioning

On branch "refactor".

• Create src and build directories for the assets.
• Template inlining with grunt-inline-angular-templates.
• File versionning with grunt-filerev.
• Script minification and concatenation with grunt-contrib-uglify.
• CSS minification and concatenation with grunt-contrib-cssmin.
• HTML minifying with grunt-contrib-htmlmin.
• Configure a long cache time for assets on express.

Did i forget something?

Write documentation for Node module, CLI and API

https://github.com/gmetais/YellowLabTools/wiki/NodeJS-module

https://github.com/gmetais/YellowLabTools/wiki/Command-Line-Interface

https://github.com/gmetais/YellowLabTools/wiki/Public-API

Update to Phantomas 1.9

• revert custom code to jQueryVersionsLoaded
• test imagesWithoutDimensions
• add a new rule about colors number, and transform the offenders into a palette

Local install returns TypeError: Bad Argument with all requests

Hi team,

I ran through the local installation of Yellow Lab Tools using the Node version of the installation and every url request returns me a TypeError: Bad argument.

I'm not sure if this has to do with using the latest node dependencies after running npm install.

Here's the pertinent information for the request and response:

1. Request headers to /api/runs/[random]

GET /api/runs/e26gjdwz92 HTTP/1.1
Host: localhost:8383
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
Accept: application/json, text/plain, */*
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2272.118 Safari/537.36
Referer: http://localhost:8383/queue/e26gjdwz92
Accept-Encoding: gzip, deflate, sdch
Accept-Language: en-US,en;q=0.8

2. Response Headers

HTTP/1.1 200 OK
X-Powered-By: Express
Access-Control-Allow-Origin: *
Vary: Origin, Accept-Encoding
Content-Type: application/json; charset=utf-8
Content-Length: 285
ETag: W/"11d-54f96413"
Date: Thu, 02 Apr 2015 15:16:38 GMT
Connection: keep-alive

3. Actual Response

{
  "runId": "e26gjdwz92",
  "params": {
    "url": "http://localhost.domain.com:9001",
    "waitForResponse": false,
    "partialResult": null,
    "screenshot": true,
    "jsTimeline": true
  },
  "status": {
    "statusCode": "failed",
    "error": "TypeError: Bad argument"
  }
}

Also, in queueCtrl.js, I am throwing an error instead of allowing the view to just render. Here's the stacktrace from the console:

Error
    at Runs.get.$scope.notFound (queueCtrl.js:26)
    at angular-resource.js:627
    at angular.js:13248
    at n.$get.n.$eval (angular.js:14466)
    at n.$get.n.$digest (angular.js:14282)
    at n.$get.n.$apply (angular.js:14571)
    at l (angular.js:9698)
    at M (angular.js:9888)
    at XMLHttpRequest.F.onload (angular.js:9829)

I also see the TypeError being thrown in browserify, so maybe there's an update there that breaks something?

Refactor: Create Angular views and controllers

On branch "refactor".

One main view that contains the header and the footer. One view and one controller for each route.
Use the existent views and adapt to remove all the code that's now in the core.

Website that breaks during load has a score too high

In my case it's an SPA and it fails to load: screenshot is white.
The score is set to 77/100 but it is based on wrong data, as the console show 5 JS errors which prevent the site from loading correctly, hence the white page.

@gmetais maybe adding a threshold for JS errors, or catching white screen may prevent YellowLabsTools from giving a score ?

Refactor: Implement some special scoring rules

Some of the rules scores are harder to calculate. They need a special function to handle the score calculation:

• jQueryVersion
• jQueryDifferentVersions
• inBodyDomManipulations