Adjust scores to nowadays browsers and network

lib/metadata/policies.js

@@ -15,9 +15,9 @@ var policies = {
         "tool": "phantomas",
         "label": "DOM max depth",
         "message": "<p>A deep DOM makes the CSS matching with DOM elements difficult.</p><p>It also slows down JavaScript modifications to the DOM because changing the dimensions of an element makes the browser re-calculate the dimensions of it's parents. Same thing for JavaScript events, that bubble up to the document root.</p>",
-        "isOkThreshold": 12,
-        "isBadThreshold": 22,
-        "isAbnormalThreshold": 30,
+        "isOkThreshold": 14,
+        "isBadThreshold": 24,
+        "isAbnormalThreshold": 32,
         "hasOffenders": true,
         "offendersTransformFn": function(offenders) {
             var domArrays = offenders.map(offendersHelpers.domPathToArray);
@@ -32,7 +32,7 @@ var policies = {
         "tool": "phantomas",
         "label": "Number of iframes",
         "message": "<p>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, which has a cost.</p>",
-        "isOkThreshold": 3,
+        "isOkThreshold": 4,
         "isBadThreshold": 15,
         "isAbnormalThreshold": 30,
         "hasOffenders": true
@@ -42,7 +42,7 @@ var policies = {
         "label": "IDs duplicated",
         "message": "<p>IDs of HTML elements must be document-wide unique. This can cause problems with getElementById returning the wrong element.</p>",
         "isOkThreshold": 0,
-        "isBadThreshold": 5,
+        "isBadThreshold": 10,
         "isAbnormalThreshold": 50,
         "hasOffenders": true
     },
@@ -102,7 +102,7 @@ var policies = {
         "message": "<p>Just to let you know there are some errors on the page.</p>",
         "isOkThreshold": 0,
         "isBadThreshold": 1,
-        "isAbnormalThreshold": 4,
+        "isAbnormalThreshold": 5,
         "hasOffenders": true,
         "offendersTransformFn": function(offenders) {
             return {
@@ -132,8 +132,8 @@ var policies = {
         "label": "document.write calls",
         "message": "<p>They slow down the page construction, especially if they are used to insert scripts in the page. Remove them ASAP.</p><p>If you cannot remove them because they come from a third-party script (such as ads), have a look at <a href=\"https://github.com/krux/postscribe\" target=\"_blank\">PostScribe</a>.</p>",
         "isOkThreshold": 0,
-        "isBadThreshold": 3,
-        "isAbnormalThreshold": 8,
+        "isBadThreshold": 2,
+        "isAbnormalThreshold": 6,
         "hasOffenders": true,
         "offendersTransformFn": function(offenders) {
             return {
@@ -187,22 +187,13 @@ var policies = {
         "isAbnormalThreshold": 1,
         "hasOffenders": true
     },
-    "consoleMessages": {
-        "tool": "phantomas",
-        "label": "Console messages",
-        "message": "<p>Try to keep your console clean when in production. Debugging is good for development only.</p><p>Writing in the console has a cost, especially when dumping large object variables.</p><p>There is also a problem with Internet Explorer 8, not knowing the console object.</p>",
-        "isOkThreshold": 3,
-        "isBadThreshold": 20,
-        "isAbnormalThreshold": 50,
-        "hasOffenders": false
-    },
     "globalVariables": {
         "tool": "phantomas",
         "label": "Global variables",
         "message": "<p>It is a bad practice because they clutter up the global namespace. If two scripts use the same variable name in the global scope, it can cause conflicts and it is generally hard to debug.</p><p>Global variables also take a (very) little bit longer to be accessed than variables in the local scope of a function.</p>",
-        "isOkThreshold": 40,
-        "isBadThreshold": 200,
-        "isAbnormalThreshold": 700,
+        "isOkThreshold": 20,
+        "isBadThreshold": 300,
+        "isAbnormalThreshold": 800,
         "hasOffenders": true,
         "offendersTransformFn": function(offenders) {
             return {
@@ -282,7 +273,7 @@ var policies = {
         "message": "<p>jQuery is a heavy library. You should <b>never</b> load jQuery more than once on the same page.</p>",
         "isOkThreshold": 1,
         "isBadThreshold": 2,
-        "isAbnormalThreshold": 2,
+        "isAbnormalThreshold": 3,
         "hasOffenders": true
     },
     "cssParsingErrors": {
@@ -290,7 +281,7 @@ var policies = {
         "label": "CSS syntax error",
         "message": "<p>Yellow Lab Tools failed to parse a CSS file. I doubt the problem comes from the css parser.</p><p>Maybe a <a href=\"http://jigsaw.w3.org/css-validator\" target=\"_blank\">CSS validator</a> can help you.</p>",
         "isOkThreshold": 0,
-        "isBadThreshold": 1,
+        "isBadThreshold": 2,
         "isAbnormalThreshold": 20,
         "hasOffenders": true,
         "offendersTransformFn": function(offenders) {
@@ -329,9 +320,9 @@ var policies = {
         "tool": "phantomas",
         "label": "Rules count",
         "message": "<p>Having a huge number of CSS rules hurts performances. If the number of CSS rules is higher than the number of DOM elements, there is clearly a problem.</p><p>Huge stylesheets generally occur when the different pages of a website load all the CSS, concatenated in a single stylesheet, even if a large part of the rules are page-specific. Solution is to create one main CSS file with global rules and one custom file per page.</p>",
-        "isOkThreshold": 1000,
-        "isBadThreshold": 3000,
-        "isAbnormalThreshold": 4500,
+        "isOkThreshold": 2000,
+        "isBadThreshold": 5000,
+        "isAbnormalThreshold": 8000,
         "hasOffenders": true
     },
     "cssComplexSelectors": {
@@ -339,8 +330,8 @@ var policies = {
         "label": "Complex selectors",
         "message": "<p>Complex selectors are CSS selectors with 4 or more expressions, like \"#header ul li .foo\".</p><p>They are adding more work for the browser, and this could be avoided by simplifying selectors. The <a href=\"http://getbem.com\" target=\"_blank\">B.E.M. methodology</a> is a useful way to simplify your CSS.</p>",
         "isOkThreshold": 0,
-        "isBadThreshold": 800,
-        "isAbnormalThreshold": 2000,
+        "isBadThreshold": 1000,
+        "isAbnormalThreshold": 24000,
         "hasOffenders": true,
         "offendersTransformFn": function(offenders) {
             var parsedOffenders = offenders.map(function(offender) {
@@ -355,9 +346,9 @@ var policies = {
         "tool": "phantomas",
         "label": "Colors count",
         "message": "<p>This is the number of different colors defined in CSS.</p><p>Your CSS will be easier to maintain if you keep a small color set.</p>",
-        "isOkThreshold": 50,
-        "isBadThreshold": 150,
-        "isAbnormalThreshold": 400,
+        "isOkThreshold": 100,
+        "isBadThreshold": 200,
+        "isAbnormalThreshold": 500,
         "hasOffenders": true,
         "offendersTransformFn": function(offenders, ruleObject) {
             var deduplicatedObj = {};
@@ -402,8 +393,8 @@ var policies = {
         "label": "Similar colors",
         "message": "<p>This is the list of colors found in the stylesheets, that are very close to each other. The eye can barely see the difference.</p><p>Use this list to reduce the number of colors in your palette, it will be easier to maintain.</p>",
         "isOkThreshold": 0,
-        "isBadThreshold": 40,
-        "isAbnormalThreshold": 80,
+        "isBadThreshold": 60,
+        "isAbnormalThreshold": 120,
         "hasOffenders": true,
         "offendersTransformFn": function(offenders) {
             return {
@@ -416,9 +407,9 @@ var policies = {
         "tool": "mediaQueriesChecker",
         "label": "Breakpoints count",
         "message": "<p>This is the number of different breakpoints found in the stylesheets' media queries.</p><p>Please note this rule is based on <i>min-width</i>, <i>max-width</i>, <i>min-device-width</i> and <i>max-device-width</i> media queries only.</p><p>Your CSS will be easier to maintain if you keep a reasonable number of breakpoints. Try to make a fluid design - using percents - to avoid the creation of numerous breakpoints.</p>",
-        "isOkThreshold": 6,
-        "isBadThreshold": 40,
-        "isAbnormalThreshold": 60,
+        "isOkThreshold": 10,
+        "isBadThreshold": 50,
+        "isAbnormalThreshold": 80,
         "hasOffenders": true,
         "offendersTransformFn": function(offenders) {
             var offendersTable = [];
@@ -438,9 +429,9 @@ var policies = {
         "tool": "mediaQueriesChecker",
         "label": "Not mobile-first media queries",
         "message": "<p>This is the number of CSS rules inside media queries that address small screens.</p><p>The common good practice, when creating a responsive website, is to write it \"mobile-first\". More explanation in <a href=\"http://www.sitepoint.com/introduction-mobile-first-media-queries\" target=\"_blank\">this great article</a>.</p>",
-        "isOkThreshold": 50,
-        "isBadThreshold": 250,
-        "isAbnormalThreshold": 1000,
+        "isOkThreshold": 60,
+        "isBadThreshold": 400,
+        "isAbnormalThreshold": 1200,
         "hasOffenders": true,
         "offendersTransformFn": function(offenders) {
             return offendersHelpers.orderByFile(offenders);
@@ -469,8 +460,8 @@ var policies = {
         "label": "Duplicated selectors",
         "message": "<p>This is when two or more selectors are strictly identical and should be merged.</p>",
         "isOkThreshold": 0,
-        "isBadThreshold": 50,
-        "isAbnormalThreshold": 100,
+        "isBadThreshold": 100,
+        "isAbnormalThreshold": 200,
         "hasOffenders": true,
         "offendersTransformFn": function(offenders) {
             var parsedOffenders = offenders.map(function(offender) {
@@ -498,8 +489,8 @@ var policies = {
         "label": "Duplicated properties",
         "message": "<p>This is the number of property definitions duplicated within a selector.</p>",
         "isOkThreshold": 0,
-        "isBadThreshold": 60,
-        "isAbnormalThreshold": 120,
+        "isBadThreshold": 100,
+        "isAbnormalThreshold": 200,
         "hasOffenders": true,
         "offendersTransformFn": function(offenders) {
             var parsedOffenders = offenders.map(function(offender) {
@@ -532,7 +523,7 @@ var policies = {
         "message": "<p>Very easy to fix: remove all empty rules.</p>",
         "isOkThreshold": 0,
         "isBadThreshold": 50,
-        "isAbnormalThreshold": 100,
+        "isAbnormalThreshold": 120,
         "hasOffenders": true,
         "offendersTransformFn": function(offenders) {
             var parsedOffenders = offenders.map(offendersHelpers.cssOffenderPattern);
@@ -578,8 +569,8 @@ var policies = {
         "label": "Uses of !important",
         "message": "<p>It can be useful, but only as a last resort. It is a bad practice because it overrides the normal cascading logic. The more you use !important, the more you need it again to over-override. This conducts to a poor maintainability.</p>",
         "isOkThreshold": 0,
-        "isBadThreshold": 75,
-        "isAbnormalThreshold": 200,
+        "isBadThreshold": 200,
+        "isAbnormalThreshold": 500,
         "hasOffenders": true,
         "offendersTransformFn": function(offenders) {
             var parsedOffenders = offenders.map(function(offender) {
@@ -612,8 +603,8 @@ var policies = {
         "label": "Old IE fixes",
         "message": "<p>What browser do you need to support? Once you've got the answer, take a look at these old rules that pollute your CSS code and remove them.</p><p>IE6:<ul><li>* html</li><li>html > body (everything but IE6)</li></ul><p><p>IE7:<ul><li><b>*</b>height: 123px;</li><li>height: 123px <b>!ie</b>;</li></ul><p><p>IE9:<ul><li>-ms-filter</li><li>progid:DXImageTransform.Microsoft</li></ul></p>",
         "isOkThreshold": 0,
-        "isBadThreshold": 50,
-        "isAbnormalThreshold": 150,
+        "isBadThreshold": 100,
+        "isAbnormalThreshold": 300,
         "hasOffenders": true,
         "offendersTransformFn": function(offenders) {
             var parsedOffenders = offenders.map(function(offender) {
@@ -668,8 +659,8 @@ var policies = {
         "label": "Old prefixes",
         "message": "<p>Many property prefixes such as -moz- or -webkit- are not needed anymore, or by very few people. Sometimes, they have never even existed. You can remove them or replace them with the non-prefixed version. This will help reducing your stylesheets weight.</p><p>The prefixes database comes from <a href=\"http://caniuse.com/\" target=\"_blank\">Can I Use</a>.</p>",
         "isOkThreshold": 0,
-        "isBadThreshold": 50,
-        "isAbnormalThreshold": 200,
+        "isBadThreshold": 100,
+        "isAbnormalThreshold": 400,
         "hasOffenders": true,
         "offendersTransformFn": function(offenders) {
             var properties = {};
@@ -721,8 +712,8 @@ var policies = {
         "label": "Redundant body selectors",
         "message": "<p>This is one way to remove complexity from a CSS rule. Generally, when \"body\" is specified in a rule it can be removed, because an element is necessarily inside the body.</p>",
         "isOkThreshold": 0,
-        "isBadThreshold": 60,
-        "isAbnormalThreshold": 200,
+        "isBadThreshold": 120,
+        "isAbnormalThreshold": 400,
         "hasOffenders": true,
         "offendersTransformFn": function(offenders) {
             var parsedOffenders = offenders.map(function(offender) {
@@ -739,8 +730,8 @@ var policies = {
         "label": "Redundant tags selectors",
         "message": "<p>Some tags included inside other tags are obvious. For example, when \"ul li\" is specified in a rule, \"ul\" can be removed because the \"li\" tag is nearly always inside an \"ul\" container (the \"ol\" container is quite rare). Same thing for \"tr td\", \"select option\", ...</p><p>Lowering compexity in CSS selectors can make the page load a little faster.</p>",
         "isOkThreshold": 0,
-        "isBadThreshold": 60,
-        "isAbnormalThreshold": 200,
+        "isBadThreshold": 120,
+        "isAbnormalThreshold": 400,
         "hasOffenders": true,
         "offendersTransformFn": function(offenders) {
             var parsedOffenders = offenders.map(function(offender) {
@@ -771,9 +762,9 @@ var policies = {
         "tool": "redownload",
         "label": "Total weight",
         "message": "<p>The weight is of course very important if you want the page to load fast. Try to stay under 1MB, which is already very long to download over a slow connection.</p>",
-        "isOkThreshold": 1048576,
-        "isBadThreshold": 2621440,
-        "isAbnormalThreshold": 4194304,
+        "isOkThreshold": 1572864,
+        "isBadThreshold": 3145728,
+        "isAbnormalThreshold": 5242880,
         "hasOffenders": true,
         "unit": 'bytes'
     },
@@ -819,19 +810,19 @@ var policies = {
     "totalRequests": {
         "tool": "redownload",
         "label": "Requests number",
-        "message": "<p>This is one of the most important performance rule. Every request is slowing down the page loading.</p><p>There are several technics to reduce their number:<ul><li>Concatenate JS files</li><li>Concatenate CSS files</li><li>Embed or inline small JS or CSS files in the HTML</li><li>Create sprites</li><li>Base64 encode small images in HTML or stylesheets</li><li>Use lazyloading for images</li></ul></p>",
-        "isOkThreshold": 20,
-        "isBadThreshold": 120,
-        "isAbnormalThreshold": 200,
+        "message": "<p>Each request slows down the page loading, especially on the protocol HTTP/1, but also on HTTP/2.</p><p>There are several technics to reduce their number:<ul><li>Concatenate JS files</li><li>Concatenate CSS files</li><li>Embed or inline small JS or CSS files in the HTML</li><li>Create sprites</li><li>Base64 encode small images in HTML or stylesheets</li><li>Use lazyloading for images</li></ul></p>",
+        "isOkThreshold": 50,
+        "isBadThreshold": 150,
+        "isAbnormalThreshold": 250,
         "hasOffenders": true
     },
     "domains": {
         "tool": "phantomas",
         "label": "Different domains",
         "message": "<p>For each domain met, the browser needs to make a DNS look-up, which is slow. Avoid having to many different domains and the page should render faster.</p><p>By the way, domain sharding is not a good practice anymore.</p>",
-        "isOkThreshold": 10,
-        "isBadThreshold": 25,
-        "isAbnormalThreshold": 50,
+        "isOkThreshold": 12,
+        "isBadThreshold": 30,
+        "isAbnormalThreshold": 60,
         "hasOffenders": true
     },
     "notFound": {
@@ -877,9 +868,9 @@ var policies = {
         "tool": "redownload",
         "label": "Small requests",
         "message": "<p>List of all requests that are less than 2 KB. Try to merge them with other files.</p>",
-        "isOkThreshold": 10,
-        "isBadThreshold": 50,
-        "isAbnormalThreshold": 80,
+        "isOkThreshold": 20,
+        "isBadThreshold": 60,
+        "isAbnormalThreshold": 90,
         "hasOffenders": true
     },
     "lazyLoadableImagesBelowTheFold": {
@@ -906,7 +897,7 @@ var policies = {
         "message": "<p>This is the number of custom web fonts loaded on the page.</p><p>Webfonts are beautiful, but heavy. You should keep their number as low as possible.</p>",
         "isOkThreshold": 1,
         "isBadThreshold": 5,
-        "isAbnormalThreshold": 7,
+        "isAbnormalThreshold": 8,
         "hasOffenders": true,
         "offendersTransformFn": function(offenders) {
             return offenders;
@@ -1000,9 +991,9 @@ var policies = {
         "tool": "phantomas",
         "label": "Caching disabled",
         "message": "<p>Counts responses with caching disabled (max-age=0)</p><p>Fix immediatly if on static assets.</p>",
-        "isOkThreshold": 0,
-        "isBadThreshold": 12,
-        "isAbnormalThreshold": 25,
+        "isOkThreshold": 2,
+        "isBadThreshold": 15,
+        "isAbnormalThreshold": 30,
         "hasOffenders": true
     },
     "cachingNotSpecified": {
@@ -1019,8 +1010,8 @@ var policies = {
         "label": "Caching too short",
         "message": "<p>Responses with too short caching time (less than a week).</p><p>The longer you cache, the better. Add versionning to your static assets, if it's not already done, and set their cache time to one year.</p>",
         "isOkThreshold": 5,
-        "isBadThreshold": 20,
-        "isAbnormalThreshold": 40,
+        "isBadThreshold": 25,
+        "isAbnormalThreshold": 50,
         "hasOffenders": true,
         "offendersTransformFn": function(offenders) {
             return {

lib/metadata/scoreProfileGeneric.json

@@ -7,7 +7,7 @@
                 "imageOptimization": 2,
                 "imagesTooLarge": 1,
                 "compression": 2,
-                "fileMinification": 1
+                "fileMinification": 2
             }
         },
         "requests": {
@@ -18,7 +18,7 @@
                 "notFound": 3,
                 "identicalFiles": 2,
                 "emptyRequests": 3,
-                "smallRequests": 1,
+                "smallRequests": 0.5,
                 "lazyLoadableImagesBelowTheFold": 2,
                 "hiddenImages": 1
             }
@@ -36,7 +36,7 @@
             "label": "JS complexity",
             "policies": {
                 "scriptDuration": 4,
-                "DOMaccesses": 3,
+                "DOMaccesses": 2,
                 "eventsScrollBound": 1
             }
         },
@@ -46,7 +46,6 @@
                 "jsErrors": 1,
                 "documentWriteCalls": 2,
                 "synchronousXHR": 5,
-                "consoleMessages": 0.5,
                 "globalVariables": 0.5
             }
         },
@@ -71,13 +70,13 @@
         "badCSS": {
             "label": "Bad CSS",
             "policies": {
-                "cssParsingErrors": 4,
-                "cssImports": 3,
+                "cssParsingErrors": 3,
+                "cssImports": 4,
                 "cssDuplicatedSelectors": 2,
                 "cssDuplicatedProperties": 1,
                 "cssEmptyRules": 2,
                 "cssExpressions": 1,
-                "cssImportants": 3,
+                "cssImportants": 2,
                 "cssOldIEFixes": 1,
                 "cssOldPropertyPrefixes": 1,
                 "cssRedundantBodySelectors": 1,
@@ -110,8 +109,8 @@
         "domComplexity": 2,
         "javascriptComplexity": 2,
         "badJavascript": 2,
-        "jQuery": 1,
-        "cssComplexity": 1,
+        "jQuery": 0.5,
+        "cssComplexity": 0.5,
         "badCSS": 1,
         "fonts": 1,
         "serverConfig": 1