Yellow Lab Tools

Tested url: {{phantomasResults.url}}

New test

Summary

JS Timeline

All Metrics

Error: {{phantomasResults.error}}

Phantomas timed out

Phantomas config error

Phantomas failed to load page

Phantomas internal error

Javascript execution tree error

JSON undefined error

Summary

DOM complexity

DOM elements count

A high number of DOM elements means a lot of work for the browser to render the page.

It also slows down Javascript DOM queries, as there are more elements to search through.

DOM max depth

A deep DOM makes difficult the CSS matching with DOM elements.

It also slows down Javascript modifications to the DOM because dimensions calculations bubble up. Same thing for Javascript events.

Number of iframes

iFrames are the most complex HTML elements. They are pages just like the main page and the browser needs to create a new page context, wich has a cost.

IDs duplicated

DOM read and write

DOM inserts

DOM queries

Time they took

{{totalJSTime}} ms

Duplicated DOM queries

Avoidable queries

Events bound

Bad Javascript

Javascript errors

eval calls

document.write calls

Console messages

Global variables

jQuery version

{{phantomasResults.metrics.jQueryDifferentVersions}} versions loaded

{{version}} &

CSS complexity

Rules count

Complex selectors

Bad CSS

Duplicated selectors

Empty rules

CSS expressions

Uses of !important

Old IE fixes

Old prefixes

Universal selectors

Redundant body selectors

Requests number

Total requests

Documents

Scripts

Stylesheets

Images

Fonts

Videos

JSON

Other

Network

404 not found

Connections closed

Duplicated requests

Caching disabled

Caching not specified

Caching too short

Different domains

Javascript Timeline

This graph gives a quick view of when the Javascript interactions with the DOM occur during the loading of the page.

0 ms

{{endTime | number: 0}} ms

DOM creation

DOM interactive

DOM content loaded event

Page completion

Page is complete

Executing Javascript and DOM queries here is a bad practice and slows down the DOM construction.

Some frameworks do things here, but it's not reliable and should be avoided.

Also known as "document ready". This is where you should execute top-priority scripts, like binding action buttons or launch a video player.

Here you can execute mid-priority tasks. Loading a script with createElement('script') is one way to do so.

The page is considered loaded, it's time for low priority things : trackers, social plugins, easter egg...

Javascript Profiler

The table below shows the interactions between Javascript and the DOM. It is usefull to understand what's going on when the page loads.
The tool is slower than a real browser, so durations are a little exagerated.

Filter by

Requests slower than ms

Type

Params

Duration

Timestamp

{{node.data.callDetails.arguments[0]}} : {{node.data.callDetails.arguments[1]}} : {{node.data.callDetails.arguments[2]}} : {{node.data.callDetails.arguments[3]}}

✖

Called on DOM element

Called on 1 jQuery element

Called on {{node.data.callDetails.context.length}} jQuery elements

The .bind() method attaches the event listener to each jQuery element one by one. Using the .on() method is preferred if available (from v1.7).

First one is: {{node.data.callDetails.context.firstElementPath}}

Backtrace

{{trace.fileName || 'HTML'}}:{{trace.line}}

can't find any backtrace :/

Sub processes

Type

Params

Duration

{{node.data.callDetails.arguments[0]}} : {{node.data.callDetails.arguments[1]}} : {{node.data.callDetails.arguments[2]}} : {{node.data.callDetails.arguments[3]}}

{{node.data.time}} ms

Metrics from Phantomas report

Phantomas is a web performance metrics collector. You can find here the (almost) entire list of metrics from Phantomas.

{{metricName}}: {{phantomasResults.metrics[metricName] | number: 0}} {{metric.unit}}

{{metric.desc}} (unreliable)

Show offenders

Hide offenders

{{offender}}

Error: {{phantomasResults.error}}

Summary

Javascript Timeline

Javascript Profiler

Called on DOM element

Called on 1 jQuery element

Called on {{node.data.callDetails.context.length}} jQuery elements

Backtrace

Sub processes

Metrics from Phantomas report

{{moduleName}}