diff --git a/README.md b/README.md index c425701..974eef8 100644 --- a/README.md +++ b/README.md @@ -11,7 +11,7 @@ Online tool designed to help Front-End developers optimize their website ## How it works The tool is based on the fabulous [Phantomas](https://github.com/macbre/phantomas) by Maciej Brencz, that loads a page and collects many web performance metrics. -I rewrote some modules to deeper analyse Javascript interactions with the DOM (especially with jQuery). +I rewrote some modules to deeper analyze Javascript interactions with the DOM (especially with jQuery). And then it is wrapped inside a small NodeJS server to get an interface (inspired by my favorite tool: [WebPageTest](http://www.webpagetest.org/)). **There are so many things left to do, your help would be greatly appreciated! Please report bugs, ask for evolutions and come code with me.** diff --git a/app/node_views/index.html b/app/node_views/index.html index 40576f6..6e010a6 100644 --- a/app/node_views/index.html +++ b/app/node_views/index.html @@ -8,7 +8,7 @@

Yellow Lab Tools

-

Free online test to help speeding up heavily javascripted pages

+

Free online test to help speeding up heavy web pages

diff --git a/app/node_views/results.html b/app/node_views/results.html index 064fe1a..df675eb 100644 --- a/app/node_views/results.html +++ b/app/node_views/results.html @@ -115,17 +115,6 @@ -
-
{{notations.scripts}}
-
JS files loaded
-
-
    -
  • - Scripts count: {{phantomasResults.metrics.jsCount}} -
    • -
-
-
{{notations.jQueryLoading}}
jQuery version
@@ -188,12 +177,36 @@
-
{{notations.cssCount}}
-
CSS files loaded
+
{{notations.requests}}
+
Requests number
    +
  • + Total requests: {{phantomasResults.metrics.requests}} +
    • +
  • + Documents: {{phantomasResults.metrics.htmlCount}} +
    • +
  • + Scripts: {{phantomasResults.metrics.jsCount}} +
  • - Stylesheets count: {{phantomasResults.metrics.cssCount}} + Stylesheets: {{phantomasResults.metrics.cssCount}} +
    • +
  • + Images: {{phantomasResults.metrics.imageCount}} +
    • +
  • + Fonts: {{phantomasResults.metrics.webfontCount}} +
    • +
  • + Videos: {{phantomasResults.metrics.videoCount}} +
    • +
  • + JSON: {{phantomasResults.metrics.jsonCount}} +
    • +
  • + Other: {{phantomasResults.metrics.otherCount}}
diff --git a/app/public/scripts/resultsCtrl.js b/app/public/scripts/resultsCtrl.js index 67321ff..ab1e8b6 100644 --- a/app/public/scripts/resultsCtrl.js +++ b/app/public/scripts/resultsCtrl.js @@ -72,11 +72,10 @@ app.controller('ResultsCtrl', function ($scope) { duplicatedDomQueries: getDuplicatedDomQueriesScore(), eventsBound: getEventsBoundScore(), jsBadPractices: getJSBadPracticesScore(), - scripts: getScriptsScore(), jQueryLoading: getJQueryLoadingScore(), cssComplexity: getCSSComplexityScore(), badCss: getBadCssScore(), - cssCount: cssCountScore() + requests: requestsScore() }; } @@ -266,27 +265,6 @@ app.controller('ResultsCtrl', function ($scope) { return note; } - function getScriptsScore() { - var note = 'A'; - var score = $scope.phantomasResults.metrics.jsCount; - if (score > 4) { - note = 'B'; - } - if (score > 8) { - note = 'C'; - } - if (score > 12) { - note = 'D'; - } - if (score > 16) { - note = 'E'; - } - if (score > 20) { - note = 'F'; - } - return note; - } - function getJQueryLoadingScore() { var note = 'NA'; if ($scope.phantomasResults.metrics.jQueryDifferentVersions > 1) { @@ -374,22 +352,22 @@ app.controller('ResultsCtrl', function ($scope) { return note; } - function cssCountScore() { + function requestsScore() { var note = 'A'; - var score = $scope.phantomasResults.metrics.cssCount; - if (score > 3) { + var score = $scope.phantomasResults.metrics.requests; + if (score > 30) { note = 'B'; } - if (score > 6) { + if (score > 45) { note = 'C'; } - if (score > 9) { + if (score > 60) { note = 'D'; } - if (score > 12) { + if (score > 80) { note = 'E'; } - if (score > 15) { + if (score > 100) { note = 'F'; } return note;