YellowLabTools/lib/metadata/policies.js

var debug = require('debug')('ylt:policies');
var offendersHelpers = require('../offendersHelpers');

var policies = {
    "DOMelementsCount": {
        "tool": "phantomas",
        "label": "DOM elements count",
        "message": "<p>A high number of DOM elements means a lot of work for the browser to render the page.</p><p>It also slows down JavaScript DOM queries, as there are more elements to search through.</p>",
        "isOkThreshold": 1000,
        "isBadThreshold": 2500,
        "isAbnormalThreshold": 4000,
        "hasOffenders": false
    },
    "DOMelementMaxDepth": {
        "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": 10,
        "isBadThreshold": 20,
        "isAbnormalThreshold": 28,
        "hasOffenders": true,
        "offendersTransformFn": function(offenders) {
            var domArrays = offenders.map(offendersHelpers.domPathToArray);

            return {
                count: offenders.length,
                tree: offendersHelpers.listOfDomArraysToTree(domArrays)
            };
        }
    },
    "iframesCount": {
        "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": 2,
        "isBadThreshold": 15,
        "isAbnormalThreshold": 30,
        "hasOffenders": false
    },
    "DOMidDuplicated": {
        "tool": "phantomas",
        "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,
        "isAbnormalThreshold": 50,
        "hasOffenders": true,
        "offendersTransformFn": function(offenders) {
            return {
                count: offenders.length,
                list: offenders.map(function(offender) {
                    var parts = /^(.*): ?(\d+) ?occurrences$/.exec(offender);

                    if (!parts) {
                        debug('DOMidDuplicated offenders transform function error with "%s"', offender);
                        return {
                            parseError: offender
                        };
                    }

                    return {
                        id: parts[1],
                        occurrences: parseInt(parts[2], 10)
                    };
                })
            };
        }
    },
    "DOMaccesses": {
        "tool": "jsExecutionTransformer",
        "label": "DOM access",
        "message": "<p>This metric counts the number of calls to DOM related functions (both native DOM functions and jQuery functions) on page load.</p><p>The more your JavaScript code accesses the DOM, the slower the page will load.</p><p>Try, as much as possible, to have an HTML page fully generated by the server instead of making changes with JS.</p><p>Try to reduce the number of queries by refactoring your JavaScript code.</p><p>Binding too many events also has a cost. Try to use <a href=\"https://learn.jquery.com/events/event-delegation/\" target=\"_blank\">event delegation</a> as much as possible.</p>",
        "isOkThreshold": 50,
        "isBadThreshold": 1500,
        "isAbnormalThreshold": 3000,
        "hasOffenders": false
    },
    "queriesWithoutResults": {
        "tool": "jsExecutionTransformer",
        "label": "Queries without result",
        "message": "<p>Number of queries that return no result. Both native and jQuery DOM requests are counted.</p><p>It suggests the query is not used on the page, probably because it is some dead code.</p><p>Or maybe the code is trying to find an HTML block that is not always here. Look at the JS Timeline to see if the scripts correctly figures out the HTML block is not here and immediatly stops interacting further with the DOM.</p>",
        "isOkThreshold": 0,
        "isBadThreshold": 100,
        "isAbnormalThreshold": 200,
        "hasOffenders": false
    },
    "DOMqueriesAvoidable": {
        "tool": "phantomas",
        "label": "Duplicated DOM queries",
        "message": "<p>This is the number of queries that could be avoided by removing all duplicated queries.</p><p>Simply save the result of a query in a variable. Ok it is not always simple, especially with third-party scripts, but at least do it with your own code.</p>",
        "isOkThreshold": 0,
        "isBadThreshold": 200,
        "isAbnormalThreshold": 500,
        "hasOffenders": true,
        "takeOffendersFrom": "DOMqueriesDuplicated",
        "offendersTransformFn": function(offenders) {
            return {
                count: offenders.length,
                list: offenders.map(function(offender) {
                    var parts = /^[^"]* ?"(.*)" ?with ?(.*) ?\(in ?context ?(.*)\): ?(.*)\s?queries$/.exec(offender);

                    if (!parts) {
                        debug('DOMqueriesAvoidable offenders transform function error with "%s"', offender);
                        return {
                            parseError: offender
                        };
                    }

                    return {
                        query: parts[1],
                        context: offendersHelpers.domPathToDomElementObj(parts[3]),
                        fn: parts[2],
                        count: parseInt(parts[4], 10)
                    };
                })
            };
        }
    },
    "eventsScrollBound": {
        "tool": "phantomas",
        "label": "Scroll events bound",
        "message": "<p>Number of 'scroll' event listeners binded to 'window' or 'document'.</p><p>Asking too much work to the browser on scroll hurts the smoothness of the scroll. Merging all your event listeners into an unique listener can help you factorize their code and reduce their footprint on scroll.</p>",
        "isOkThreshold": 1,
        "isBadThreshold": 7,
        "isAbnormalThreshold": 15,
        "hasOffenders": true,
        "offendersTransformFn": function(offenders) {
            return {
                count: offenders.length,
                list: offenders.map(function(offender) {
                    var parts = /^bound by (.*) on ([^ ]+)$/.exec(offender);

                    if (!parts) {
                        debug('eventsScrollBound offenders transform function error with "%s"', offender);
                        return {
                            parseError: offender
                        };
                    }

                    var backtraceArray = offendersHelpers.backtraceToArray(parts[1]);
                    
                    return {
                        backtrace: backtraceArray || [],
                        target: parts[2]
                    };
                })
            };
        }
    },
    "DOMaccessesOnScroll": {
        "tool": "jsExecutionTransformer",
        "label": "DOM access on scroll",
        "message": "<p>This rule counts the number of DOM-accessing functions calls on a scroll event, such as queries, readings, writings, bindings and jQuery functions.</p><p>Two scroll events are triggered quickly, one after the other, and only the second one is analyzed so throttled functions are ignored.</p><p>One of the main reasons of a poor scrolling experience is when too much JS is executed on each scroll event. Note that some devices such as smartphones and MacBooks send more scroll events than others.</p><p>Reduce the number of DOM accesses inside scroll listeners. Put DOM queries outside them when possible. Use <a href=\"http://blogorama.nerdworks.in/javascriptfunctionthrottlingan/\" target=\"_blank\">throttling or debouncing</a>.</p>",
        "isOkThreshold": 1,
        "isBadThreshold": 20,
        "isAbnormalThreshold": 35,
        "hasOffenders": true,
        "offendersTransformFn": function(offenders) {
            return offenders;
        }
    },
    "jsErrors": {
        "tool": "phantomas",
        "label": "JavaScript errors",
        "message": "<p>Just to let you know there are some errors on the page.</p><p><b>Please note that some errors only occur in the PhantomJS browser, so you might need to double check on other browsers.</b></p>",
        "isOkThreshold": 0,
        "isBadThreshold": 1,
        "isAbnormalThreshold": 4,
        "hasOffenders": true,
        "offendersTransformFn": function(offenders) {
            return {
                count: offenders.length,
                list: offenders.map(function(offender) {
                    var parts = /^(.*) - (.*)$/.exec(offender);

                    if (!parts) {
                        debug('jsErrors offenders transform function error with "%s"', offender);
                        return {
                            parseError: offender
                        };
                    }

                    var backtraceArray = offendersHelpers.backtraceToArray(parts[2]);

                    return {
                        error: parts[1],
                        backtrace: backtraceArray || []
                    };
                })
            };
        }
    },
    "documentWriteCalls": {
        "tool": "phantomas",
        "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": 5,
        "isAbnormalThreshold": 10,
        "hasOffenders": true,
        "offendersTransformFn": function(offenders) {
            return {
                count: offenders.length,
                list: offenders.map(function(offender) {
                    var parts = /^document.write(ln)?\(\) used from (.*)$/.exec(offender);

                    if (parts) {

                        var writeFn = 'document.write' + (parts[1] || '');

                        var methodParts = /^([^\s]+) \((.+):(\d+)\)$/.exec(parts[2]);
                        if (methodParts) {
                            return {
                                writeFn: writeFn,
                                from: {
                                    functionName: methodParts[1],
                                    file: methodParts[2],
                                    line: methodParts[3]
                                }
                            };
                        } else {
                            var noMethodParts = /^(.+):(\d+)$/.exec(parts[2]);

                            if (noMethodParts) {
                                return {
                                    writeFn: writeFn,
                                    from: {
                                        file: noMethodParts[1],
                                        line: noMethodParts[2]
                                    }
                                };
                            }
                        }
                    }

                    debug('documentWriteCalls offenders transform function error with "%s"', offender);
                    return {
                        parseError: offender
                    };
                })
            };
        }
    },
    "synchronousXHR": {
        "tool": "phantomas",
        "label": "Synchronous Ajax requests",
        "message": "<p>Making an XMLHttpRequest with the <i>async</i> option set to <i>false</i> is deprecated due to the negative effect to performances. The browser's main thread needs to stop everything until the response is received.</p>",
        "isOkThreshold": 0,
        "isBadThreshold": 1,
        "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": 0,
        "isBadThreshold": 10,
        "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,
        "hasOffenders": true,
        "offendersTransformFn": function(offenders) {
            return {
                count: offenders.length,
                list: offendersHelpers.sortVarsLikeChromeDevTools(offenders)
            };
        }
    },
    "jQueryVersion": {
        "label": "jQuery version",
        "message": "<p>The current latest version of jQuery is 3.0</p><p>Each new version of jQuery optimizes performances. Do not keep an old version of jQuery. Updating can sometimes break a few things, but it is generally quite easy to fix them up. So don't hesitate.</p>",
        "hasOffenders": false,
        "scoreFn": function(data) {
            var differentVersions = data.toolsResults.phantomas.metrics.jQueryVersionsLoaded;

            if (differentVersions === 0 || differentVersions > 1 || !data.toolsResults.phantomas.metrics.jQueryVersion) {
                // Not applicable
                return null;
            } else {
                var value = data.toolsResults.phantomas.metrics.jQueryVersion;
                var score;

                if (value.indexOf('3.1.') === 0 ||
                    value.indexOf('3.2.') === 0 ||
                    value.indexOf('3.3.') === 0) {
                    score = 100;
                } else if (value.indexOf('3.0.') === 0) {
                    score = 90;
                } else if (value.indexOf('1.12.') === 0 ||
                           value.indexOf('2.2.') === 0) {
                    score = 70;
                } else if (value.indexOf('1.11.') === 0 ||
                           value.indexOf('2.1.') === 0) {
                    score = 50;
                } else if (value.indexOf('1.10.') === 0 ||
                           value.indexOf('2.0.') === 0) {
                    score = 40;
                } else if (value.indexOf('1.9.') === 0) {
                    score = 30;
                } else if (value.indexOf('1.8.') === 0) {
                    score = 20;
                } else if (value.indexOf('1.7') === 0) {
                    score = 10;
                } else if (value.indexOf('1.6') === 0 ||
                           value.indexOf('1.5') === 0 ||
                           value.indexOf('1.4') === 0 ||
                           value.indexOf('1.3') === 0 ||
                           value.indexOf('1.2') === 0) {
                    score = 0;
                } else {
                    debug('Unknown jQuery version "%s"', value);
                    return null;
                }

                // Truncate version number (can be long sometimes, no clue why but it can...)
                if (value.length > 30) {
                    value = value.substr(0, 28) + '...';
                }

                return {
                    value: value,
                    score: score,
                    bad: value < 100,
                    abnormal: false,
                    abnormalityScore: 0
                };
            }
        }
    },
    "jQueryVersionsLoaded": {
        "tool": "phantomas",
        "label": "Several jQuery loaded",
        "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,
        "hasOffenders": true
    },
    "jQueryCallsOnEmptyObject": {
        "tool": "jsExecutionTransformer",
        "label": "Calls on empty objects",
        "message": "<p>This metric counts the number of jQuery functions called on an empty jQuery object. The call was useless.</p><p>This can be helpful to detect dead or unused code.</p>",
        "isOkThreshold": 1,
        "isBadThreshold": 100,
        "isAbnormalThreshold": 180,
        "hasOffenders": false
    },
    "jQueryNotDelegatedEvents": {
        "tool": "jsExecutionTransformer",
        "label": "Events not delegated",
        "message": "<p>This is the number of events that are bound with the .bind() or the .on() function without using <a href=\"https://learn.jquery.com/events/event-delegation/\" target=\"_blank\">event delegation</a>.</p><p>This means jQuery binds each element contained in the object one by one. This is bad for performance.</p>",
        "isOkThreshold": 1,
        "isBadThreshold": 100,
        "isAbnormalThreshold": 180,
        "hasOffenders": false
    },
    "cssParsingErrors": {
        "tool": "phantomas",
        "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,
        "isAbnormalThreshold": 20,
        "hasOffenders": true,
        "offendersTransformFn": function(offenders) {
            return {
                count: offenders.length,
                list: offenders.map(function(offender) {
                    if (offender === '[inline CSS] (Empty CSS was provided)') {
                        return {
                            error: 'Empty style tag',
                            file: null,
                            line: null,
                            column: null
                        };
                    }

                    var parts = /^(?:(?:<([^ \(]*)>|\[inline CSS\]) ?)?(?:\((((?! @ ).)*)(?: @ (\d+):(\d+))?\))?$/.exec(offender);

                    if (parts) {
                        return {
                            error: parts[2] || 'Unknown parsing error' + (parts[1] ? '. The entire file was ignored. As a result, the other CSS metrics and scores are miscalculated.' : ''),
                            file: parts[1] || null,
                            line: (parts[4] && parts[5]) ? parseInt(parts[4], 10) : null,
                            column: (parts[4] && parts[5]) ? parseInt(parts[5], 10) : null
                        };
                    }

                    // Try another syntax
                    parts = /^(.*) <(.*)> @ (\d+):(\d+)$/.exec(offender);

                    if (parts) {
                        return {
                            error: parts[1] || 'Unknown parsing error',
                            file: parts[2] || null,
                            line: parseInt(parts[3], 10),
                            column: parseInt(parts[4], 10)
                        };
                    }


                    debug('cssParsingErrors offenders transform function error with "%s"', offender);
                    return {
                        parseError: offender
                    };
                })
            };
        }
    },
    "cssRules": {
        "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": 750,
        "isBadThreshold": 3000,
        "isAbnormalThreshold": 4500,
        "hasOffenders": true,
        "offendersTransformFn": function(offenders) {
            var hasInline = false;
            var inlineCount = 0;
            var files = [];

            offenders.forEach(function(line) {
                if (line.indexOf('[inline CSS]: ') === 0) {
                    hasInline = true;
                    inlineCount += parseInt(line.substr(14));
                } else {
                    var parts = /^<(.*)>: (\d+)$/.exec(line);

                    if (parts) {
                        files.push({
                            file: parts[1],
                            rules: parseInt(parts[2], 10)
                        });
                    }
                }
            });

            if (hasInline) {
                files.push({
                    file: 'inline CSS',
                    rules: inlineCount
                });
            }

            return {
                count: files.length,
                list: files
            };
        }
    },
    "cssComplexSelectors": {
        "tool": "phantomas",
        "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 an useful way to simplify your CSS.</p>",
        "isOkThreshold": 0,
        "isBadThreshold": 600,
        "isAbnormalThreshold": 2000,
        "hasOffenders": true,
        "offendersTransformFn": function(offenders) {
            var parsedOffenders = offenders.map(function(offender) {
                var splittedOffender = offendersHelpers.cssOffenderPattern(offender);
                return splittedOffender;
            });

            return offendersHelpers.orderByFile(parsedOffenders);
        }
    },
    "cssColors": {
        "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": 30,
        "isBadThreshold": 150,
        "isAbnormalThreshold": 400,
        "hasOffenders": true,
        "offendersTransformFn": function(offenders, ruleObject) {
            var deduplicatedObj = {};

            offenders.map(function(offender) {
                var parts = /^([^ ]*) \((\d+) times\)$/.exec(offender);

                if (!parts) {
                    debug('cssColors offenders transform function error with "%s"', offender);
                    return;
                }

                var color = parts[1];
                var count = parseInt(parts[2], 10);

                deduplicatedObj[color] = (deduplicatedObj[color] || 0) + count;
            });

            var deduplicatedTable = [];
            for (var color in deduplicatedObj) {
                deduplicatedTable.push({
                    color: color,
                    occurrences: deduplicatedObj[color]
                });
            }

            deduplicatedTable.sort(function(a, b) {
                return b.occurrences - a.occurrences;
            });

            // Override rules.value
            ruleObject.value = deduplicatedTable.length;

            return {
                count: deduplicatedTable.length,
                palette: deduplicatedTable
            };
        }
    },
    "similarColors": {
        "tool": "colorDiff",
        "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,
        "hasOffenders": true,
        "offendersTransformFn": function(offenders) {
            return {
                count: offenders.length,
                list: offenders
            };
        }
    },
    "cssBreakpoints": {
        "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,
        "hasOffenders": true,
        "offendersTransformFn": function(offenders) {
            var offendersTable = [];

            for (var offender in offenders) {
                offendersTable.push({
                    breakpoint: offender,
                    count: offenders[offender].count,
                    pixels: offenders[offender].pixels
                });
            }

            return offendersTable;
        }
    },
    "cssMobileFirst": {
        "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": 25,
        "isBadThreshold": 200,
        "isAbnormalThreshold": 1000,
        "hasOffenders": true,
        "offendersTransformFn": function(offenders) {
            return offendersHelpers.orderByFile(offenders);
        }
    },
    "cssImports": {
        "tool": "phantomas",
        "label": "Uses of @import",
        "message": "<p>It’s bad for performance to use @import because CSS files don't get downloaded in parallel.</p><p>You should use &lt;link rel='stylesheet' href='a.css'&gt; instead.</p>",
        "isOkThreshold": 0,
        "isBadThreshold": 1,
        "isAbnormalThreshold": 1,
        "hasOffenders": true,
        "offendersTransformFn": function(offenders) {
            return {
                count: offenders.length,
                list: offenders.map(function(offender) {
                    var splittedOffender = offendersHelpers.cssOffenderPattern(offender);
                    return splittedOffender;
                })
            };
        }
    },
    "cssDuplicatedSelectors": {
        "tool": "phantomas",
        "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,
        "hasOffenders": true,
        "offendersTransformFn": function(offenders) {
            return {
                count: offenders.length,
                list: offenders.map(function(offender) {
                    var parts = /^(.*) \((\d+) times\)$/.exec(offender);

                    if (!parts) {
                        debug('cssDuplicatedSelectors offenders transform function error with "%s"', offender);
                        return {
                            parseError: offender
                        };
                    }

                    return {
                        rule: parts[1],
                        occurrences: parseInt(parts[2], 10)
                    };
                })
            };
        }
    },
    "cssDuplicatedProperties": {
        "tool": "phantomas",
        "label": "Duplicated properties",
        "message": "<p>This is the number of property definitions duplicated within a selector.</p>",
        "isOkThreshold": 0,
        "isBadThreshold": 60,
        "isAbnormalThreshold": 120,
        "hasOffenders": true,
        "offendersTransformFn": function(offenders) {
            var parsedOffenders = offenders.map(function(offender) {
                var splittedOffender = offendersHelpers.cssOffenderPattern(offender);

                var parts = /^([^{]+) {([^ ]+): (.+)}$/.exec(splittedOffender.css);

                if (!parts) {
                    debug('cssDuplicatedProperties offenders transform function error with "%s"', offender);
                    return {
                        parseError: offender
                    };
                }

                return {
                    property: parts[2],
                    rule: parts[1],
                    file: splittedOffender.file,
                    line: splittedOffender.line,
                    column: splittedOffender.column
                };
            });

            return offendersHelpers.orderByFile(parsedOffenders);
        }
    },
    "cssEmptyRules": {
        "tool": "phantomas",
        "label": "Empty rules",
        "message": "<p>Very easy to fix: remove all empty rules.</p>",
        "isOkThreshold": 0,
        "isBadThreshold": 50,
        "isAbnormalThreshold": 100,
        "hasOffenders": true,
        "offendersTransformFn": function(offenders) {
            var parsedOffenders = offenders.map(offendersHelpers.cssOffenderPattern);
            return offendersHelpers.orderByFile(parsedOffenders);
        }
    },
    "cssExpressions": {
        "tool": "phantomas",
        "label": "CSS expressions",
        "message": "<p>Such as: expression( document.body.clientWidth > 600 ? \"600px\" : \"auto\" )</p><p>This is a bad practice as it slows down browsers. There are some simpler CSS3 methods for doing this.</p>",
        "isOkThreshold": 0,
        "isBadThreshold": 1,
        "isAbnormalThreshold": 20,
        "hasOffenders": true,
        "offendersTransformFn": function(offenders) {
            var parsedOffenders = offenders.map(function(offender) {
                var splittedOffender = offendersHelpers.cssOffenderPattern(offender);

                var parts = /^(.*) {([^ ]+): expression\((.*)\)}$/.exec(splittedOffender.css);

                if (!parts) {
                    debug('cssExpressions offenders transform function error with "%s"', offender);
                    return {
                        parseError: offender
                    };
                }

                return {
                    rule: parts[1],
                    property: parts[2],
                    expression: parts[3],
                    file: splittedOffender.file,
                    line: splittedOffender.line,
                    column: splittedOffender.column
                };
            });

            return offendersHelpers.orderByFile(parsedOffenders);
        }
    },
    "cssImportants": {
        "tool": "phantomas",
        "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,
        "hasOffenders": true,
        "offendersTransformFn": function(offenders) {
            var parsedOffenders = offenders.map(function(offender) {
                var splittedOffender = offendersHelpers.cssOffenderPattern(offender);

                var parts = /^(.*) {([^ ]+): (.*) ?\!important}$/.exec(splittedOffender.css);

                if (!parts) {
                    debug('cssImportants offenders transform function error with "%s"', offender);
                    return {
                        parseError: offender
                    };
                }

                return {
                    rule: parts[1],
                    property: parts[2],
                    value: parts[3],
                    file: splittedOffender.file,
                    line: splittedOffender.line,
                    column: splittedOffender.column
                };
            });

            return offendersHelpers.orderByFile(parsedOffenders);
        }
    },
    "cssOldIEFixes": {
        "tool": "phantomas",
        "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": 75,
        "isAbnormalThreshold": 300,
        "hasOffenders": true,
        "offendersTransformFn": function(offenders) {
            var parsedOffenders = offenders.map(function(offender) {
                var splittedOffender = offendersHelpers.cssOffenderPattern(offender);

                var parts = /^([^{]*)( {([^ ]+): (.*)})?$/.exec(splittedOffender.css);

                if (!parts) {
                    debug('cssOldIEFixes offenders transform function error with "%s"', offender);
                    return {
                        parseError: offender
                    };
                }

                var rule = parts[1];
                var property = parts[3];
                var value = parts[4];
                var browser = null;

                if (rule.indexOf('* html') === 0) {
                    rule = rule.replace(/^\* html/, '<b>* html</b>');
                    browser = 'IE6';
                } else if (rule.indexOf('html>body') === 0) {
                    rule = rule.replace(/^html>body/, '<b>html>body</b>');
                    browser = 'IE6';
                } else if (property.indexOf('*') === 0) {
                    property = '<b>' + property + '</b>';
                    browser = 'IE7';
                } else if (value.match(/\!ie$/)) {
                    value = value.replace(/\!ie$/, '<b>!ie</b>');
                    browser = 'IE7';
                } else if (property === '-ms-filter') {
                    property = '<b>-ms-filter</b>';
                    browser = 'IE9';
                } else if (value.indexOf('progid:DXImageTransform.Microsoft') >= 0) {
                    value = value.replace(/progid:DXImageTransform\.Microsoft/, '<b>progid:DXImageTransform.Microsoft</b>');
                    browser = 'IE9';
                }

                var propertyAndValue = (property && value) ? ' {' + property + ': ' + value + '}' : '';
                splittedOffender.bolded = rule + propertyAndValue;
                splittedOffender.browser = browser;

                return splittedOffender;
            });

            return offendersHelpers.orderByFile(parsedOffenders);
        }
    },
    "cssOldPropertyPrefixes": {
        "tool": "phantomas",
        "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": 75,
        "isAbnormalThreshold": 300,
        "hasOffenders": true,
        "offendersTransformFn": function(offenders) {
            var properties = {};
            offenders.forEach(function(offender) {
                var splittedOffender = offendersHelpers.cssOffenderPattern(offender);

                var parts = /^([^{]*)(?: ?{ ?([^ ]+): (.*) ?}) \/\/ (.*)$/.exec(splittedOffender.css);

                if (!parts) {
                    debug('cssOldPropertyPrefixes offenders transform function error with "%s"', offender);
                    return {
                        parseError: offender
                    };
                }

                var propertyName = parts[2];

                if (!properties[propertyName]) {
                    properties[propertyName] = {
                        property: propertyName,
                        message: parts[4],
                        rules: []
                    };
                }

                properties[propertyName].rules.push({
                    rule: parts[1],
                    value: parts[3],
                    file: splittedOffender.file,
                    line: splittedOffender.line,
                    column: splittedOffender.column
                });
            });

            // Object to array
            var list = [];
            for (var propertyName in properties) {
                list.push(properties[propertyName]);
            }

            return {
                count: offenders.length,
                list: list
            };
        }
    },
    "cssRedundantBodySelectors": {
        "tool": "phantomas",
        "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,
        "hasOffenders": true,
        "offendersTransformFn": function(offenders) {
            var parsedOffenders = offenders.map(function(offender) {
                var splittedOffender = offendersHelpers.cssOffenderPattern(offender);
                splittedOffender.bolded = splittedOffender.css.replace(/body/, '<b>body</b>');
                return splittedOffender;
            });

            return offendersHelpers.orderByFile(parsedOffenders);
        }
    },
    "cssRedundantChildNodesSelectors": {
        "tool": "phantomas",
        "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,
        "hasOffenders": true,
        "offendersTransformFn": function(offenders) {
            var parsedOffenders = offenders.map(function(offender) {
                var splittedOffender = offendersHelpers.cssOffenderPattern(offender);

                var rule = splittedOffender.css || '';
                var redundanters = [
                    ['ul', 'li'],
                    ['ol', 'li'],
                    ['select', 'option'],
                    ['table', 'tr'],
                    ['table', 'th'],
                ];

                redundanters.forEach(function(couple) {
                    rule = rule.replace(new RegExp('(^| |>)' + couple[0] + '([^ >]*)?([ >]| > )' + couple[1] + '([^\\w-]|$)', 'g'), '$1<b>' + couple[0] + '</b>$2$3<b>' + couple[1] + '</b>$4');
                });

                splittedOffender.bolded = rule;

                return splittedOffender;
            });

            return offendersHelpers.orderByFile(parsedOffenders);
        }
    },
    "totalWeight": {
        "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 alreay very long to download over a slow connection.</p><p>Please note that Yellow Lab Tools' engine (PhantomJS) is not compatible with image srcset (unless you use a polyfill). This can lead to incorrect page weight.</p>",
        "isOkThreshold": 716800,
        "isBadThreshold": 2097152,
        "isAbnormalThreshold": 3145728,
        "hasOffenders": true,
        "unit": 'bytes'
    },
    "imageOptimization": {
        "tool": "redownload",
        "label": "Image optimization",
        "message": "<p>This metric measures the number of bytes that could be saved by optimizing images.</p><p>Image optimization is generally one of the easiest way to reduce a page weight, and as a result, the page load time. Don't use Photoshop or other image editing tools, they're not very good for optimization. Use specialized tools such as <a href=\"https://kraken.io/\" target=\"_blank\">Kraken.io</a> or the excellent <a href=\"https://imageoptim.com/\" target=\"_blank\">ImageOptim</a> on Mac. For SVG images, you can use <a href=\"https://jakearchibald.github.io/svgomg/\" target=\"_blank\">SVGOMG</a></p><p>The tools in use in YellowLabTools are not set to their maximum optimization power (JPEG quality 85), so you might be able to compress even more!</p><p>Please note that Yellow Lab Tools' engine (PhantomJS) is not compatible with image srcset (unless you use a polyfill). This can lead to incorrect page weight.</p>",
        "isOkThreshold": 10240,
        "isBadThreshold": 122880,
        "isAbnormalThreshold": 307200,
        "hasOffenders": true,
        "unit": 'bytes'
    },
    "gzipCompression": {
        "tool": "redownload",
        "label": "Gzip compression",
        "message": "<p>Measures the number of bytes that could be saved by compressing file transfers.</p><p>Gzip is a powerfull weight reducer and should be enabled on text-based assets in your server's configuration. Note that gzipping small files (< 1 KB) is arguable, and that some assets such as images should not be gzipped as they are already compressed. <a href=\"https://gist.github.com/gmetais/971ce13a1fbeebd88445\" target=\"_blank\">Here</a> is a list of Content-Types that should be gzipped.</p>",
        "isOkThreshold": 5125,
        "isBadThreshold": 81920,
        "isAbnormalThreshold": 153600,
        "hasOffenders": true,
        "unit": 'bytes'
    },
    "fileMinification": {
        "tool": "redownload",
        "label": "File minification",
        "message": "<p>This is the weight that could be saved if all text resources were correctly minified.</p><p>The tools in use here are <b>UglifyJS</b>, <b>clean-css</b> and <b>HTMLMinifier</b>. These tools are so good that some of your minified files can be marked as unminified. Change your tool it this happens :)</p><p>The gains of minification are generally small, but the impact can be high when these text files are loaded on the critical path.</p>",
        "isOkThreshold": 5125,
        "isBadThreshold": 61440,
        "isAbnormalThreshold": 122880,
        "hasOffenders": true,
        "unit": 'bytes'
    },
    "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": 15,
        "isBadThreshold": 100,
        "isAbnormalThreshold": 180,
        "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,
        "hasOffenders": true,
        "offendersTransformFn": function(offenders) {
            return {
                count: offenders.length,
                list: offenders.map(function(offender) {
                    var parts = /^([^ ]*): (\d+) request\(s\)$/.exec(offender);

                    if (!parts) {
                        debug('domains offenders transform function error with "%s"', offender);
                        return {
                            file: offender
                        };
                    }

                    return {
                        domain: parts[1],
                        requests: parseInt(parts[2])
                    };
                })
            };
        }
    },
    "notFound": {
        "tool": "phantomas",
        "label": "404 not found",
        "message": "<p>404 errors are never cached, so each time a page ask for it, it hits the server. Even if it is behind a CDN or a reverse-proxy cache.</p>",
        "isOkThreshold": 0,
        "isBadThreshold": 1,
        "isAbnormalThreshold": 1,
        "hasOffenders": true
    },
    "closedConnections": {
        "tool": "phantomas",
        "label": "Connections closed",
        "message": "<p>This counts the number of requests not keeping the connection alive (specifying \"Connection: close\" in the response headers). It is only counting a request if it is followed by another request on the same domain.</p><p>This is slowing down the next request, because the brower needs to open a new connection to the server, which means an additional round-trip.</p><p>Correct the problem by setting a Keep-Alive header on the guilty server.</p>",
        "isOkThreshold": 0,
        "isBadThreshold": 7,
        "isAbnormalThreshold": 20,
        "hasOffenders": true
    },
    "identicalFiles": {
        "tool": "redownload",
        "label": "Identical content",
        "message": "<p>This is the number of requests that could be avoided, because of downloaded files that have the same content but are loaded from different URLs.</p><p>Try to load them from the same URL.</p>",
        "isOkThreshold": 0,
        "isBadThreshold": 5,
        "isAbnormalThreshold": 15,
        "hasOffenders": true,
        "offendersTransformFn": function(offenders) {
            return offenders;
        }
    },
    "emptyRequests": {
        "tool": "redownload",
        "label": "Empty requests",
        "message": "<p>List of GET requests that respond with an empty body. These are probably the easiest requests to remove.</p>",
        "isOkThreshold": 0,
        "isBadThreshold": 1,
        "isAbnormalThreshold": 5,
        "hasOffenders": true
    },
    "smallRequests": {
        "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": 4,
        "isBadThreshold": 30,
        "isAbnormalThreshold": 50,
        "hasOffenders": true
    },
    "lazyLoadableImagesBelowTheFold": {
        "tool": "phantomas",
        "label": "Below the fold images",
        "message": "<p>This is the number of images displayed below the fold that could be lazy-loaded. This is an excellent way to accelerate the loading time of an heavy page.</p><p>I recommend using <a href=\"https://github.com/vvo/lazyload\" target=\"_blank\">this lazyloader</a>.</p>",
        "isOkThreshold": 1,
        "isBadThreshold": 12,
        "isAbnormalThreshold": 30,
        "hasOffenders": true
    },
    "hiddenImages": {
        "tool": "phantomas",
        "label": "Hidden images",
        "message": "<p>List of all images that have a display:none property, or one of their parents. These images are loaded by the browser even if they're not visible. You might be able to find a way to lazy-load them, only when they get visible.</p><p>As images displayed in 1x1 pixels tend to be trackers, they are excluded from this rule.</p>",
        "isOkThreshold": 1,
        "isBadThreshold": 12,
        "isAbnormalThreshold": 30,
        "hasOffenders": true
    },
    "fontsCount": {
        "tool": "redownload",
        "label": "Webfonts number",
        "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,
        "hasOffenders": true,
        "offendersTransformFn": function(offenders) {
            return offenders;
        }
    },
    "heavyFonts": {
        "tool": "redownload",
        "label": "Overweighted webfonts",
        "message": "<p>This metric is the sum of all bytes above 40KB in loaded fonts. Over this size, the font is probably not optimized for the web.</p><p>It can be a compresson issue, a font that contains too many glyphs or a font with complex shapes.</p><p>Sorry, Yellow Lab Tools is not yet compatible with the WOFF2 font format that generates 20-30% smaller fonts. You can proceed to a manual verification on a modern browser.</p>",
        "isOkThreshold": 0,
        "isBadThreshold": 102400,
        "isAbnormalThreshold": 204800,
        "unit": 'bytes',
        "hasOffenders": true,
        "offendersTransformFn": function(offenders) {
            return offenders;
        }
    },
    "unusedUnicodeRanges": {
        "tool": "redownload",
        "label": "Unused Unicode ranges",
        "message": "<p>This metric counts the number of unused Unicode ranges inside each font. For example, one font could include Cyrillic glyphs but none of them are used on the page.</p><p>It also reveals the number of ligatures (letters that are represented differently when close to each other) and hidden chars (glyphs not linked to the unicode system that can't be displayed on the web).</p><p>Because of technical limitations, Yellow Lab Tools checks each font against the glyphs of the entire page. As a result, estimated use is >= to reality. For example, if you read that 10 glyphs are \"possibly used\", it means that these 10 glyphs are used on the page but nothing guaranties that they are displayed using this font.</p><p>Tools such as <a href=\"https://www.fontsquirrel.com/tools/webfont-generator\" target=\"_blank\">Font Squirrel</a> can remove some unicode ranges from a font.</p><p>In the case of an icon font, make sure you only keep the icons that are used on the website and to remove the others. Several tools are able to extract SVG images from a font, then some other tools can generate a font from the SVGs you want to keep.</p>",
        "isOkThreshold": 0,
        "isBadThreshold": 8,
        "isAbnormalThreshold": 12,
        "hasOffenders": true,
        "offendersTransformFn": function(offenders) {
            return offenders;
        }
    },
    "http2": {
        "label": "HTTP/2 or SPDY",
        "message": "<p>HTTP/2 is the latest version of the HTTP protocol and is designed to optimize load speed. SPDY is deprecated but still very well supported.</p><p>The latest versions of all major browsers are now compatible. The difficulty is on the server side, where technologies are not quite ready yet.</p>",
        "hasOffenders": true,
        "scoreFn": function(data) {
            if (!data.toolsResults.http2) {
                return null;
            }

            var isHttp2 = data.toolsResults.http2.metrics.http2;

            var result = {
                value: isHttp2 ? 'Yes' : 'No',
                score: isHttp2 ? 100 : 0,
                bad: !isHttp2,
                abnormal: false,
                abnormalityScore: 0
            };

            if (data.toolsResults.http2.offenders) {
                result.offendersObj = {
                    count: data.toolsResults.http2.offenders.http2.length,
                    list: data.toolsResults.http2.offenders.http2
                };
            }

            return result;
        }
    },
    "cachingDisabled": {
        "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,
        "hasOffenders": true
    },
    "cachingNotSpecified": {
        "tool": "phantomas",
        "label": "Caching not specified",
        "message": "<p>When no caching is specified, each browser will handle it differently. Most of the time, it will automatically add a cache for you, but a poor one. You'd better handle it yourself.</p>",
        "isOkThreshold": 5,
        "isBadThreshold": 20,
        "isAbnormalThreshold": 40,
        "hasOffenders": true
    },
    "cachingTooShort": {
        "tool": "phantomas",
        "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,
        "hasOffenders": true,
        "offendersTransformFn": function(offenders) {
            return {
                count: offenders.length,
                list: offenders
                    .map(function(offender) {
                        var parts = /^([^ ]*) cached for (-?\d+(\.\d+)?) s$/.exec(offender);

                        if (!parts) {
                            debug('cachingTooShort offenders transform function error with "%s"', offender);
                            return {
                                file: offender
                            };
                        }

                        return {
                            file: parts[1],
                            ttl: Math.round(parseFloat(parts[2]))
                        };

                    }).sort(function(a, b) {

                        return a.ttl - b.ttl;

                    }).map(function(obj) {

                        var duration = obj.ttl;
                        var unit = 'seconds';

                        if (duration >= 120) {
                            duration = Math.round(duration / 60);
                            unit = 'minutes';
                        }

                        if (duration >= 120) {
                            duration = Math.round(duration / 60);
                            unit = 'hours';
                        }

                        if (duration >= 48) {
                            duration = Math.round(duration / 24);
                            unit = 'days';
                        }

                        obj.ttlWithUnit = duration;
                        obj.unit = unit;

                        return obj;
                    })
            };
        }
    }
};

module.exports = policies;