|
|
@@ -6,18 +6,18 @@ var policies = {
|
|
|
"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,
|
|
|
+ "isOkThreshold": 1500,
|
|
|
+ "isBadThreshold": 3000,
|
|
|
+ "isAbnormalThreshold": 4500,
|
|
|
"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,
|
|
|
+ "isOkThreshold": 12,
|
|
|
+ "isBadThreshold": 22,
|
|
|
+ "isAbnormalThreshold": 30,
|
|
|
"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": 2,
|
|
|
+ "isOkThreshold": 3,
|
|
|
"isBadThreshold": 15,
|
|
|
"isAbnormalThreshold": 30,
|
|
|
"hasOffenders": false
|
|
|
@@ -70,9 +70,9 @@ var policies = {
|
|
|
"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,
|
|
|
+ "isOkThreshold": 200,
|
|
|
+ "isBadThreshold": 2000,
|
|
|
+ "isAbnormalThreshold": 4000,
|
|
|
"hasOffenders": false
|
|
|
},
|
|
|
"queriesWithoutResults": {
|
|
|
@@ -80,8 +80,8 @@ var policies = {
|
|
|
"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,
|
|
|
+ "isBadThreshold": 150,
|
|
|
+ "isAbnormalThreshold": 250,
|
|
|
"hasOffenders": false
|
|
|
},
|
|
|
"DOMqueriesAvoidable": {
|
|
|
@@ -89,8 +89,8 @@ var policies = {
|
|
|
"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,
|
|
|
+ "isBadThreshold": 300,
|
|
|
+ "isAbnormalThreshold": 600,
|
|
|
"hasOffenders": true,
|
|
|
"takeOffendersFrom": "DOMqueriesDuplicated",
|
|
|
"offendersTransformFn": function(offenders) {
|
|
|
@@ -121,7 +121,7 @@ var policies = {
|
|
|
"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,
|
|
|
+ "isBadThreshold": 8,
|
|
|
"isAbnormalThreshold": 15,
|
|
|
"hasOffenders": true,
|
|
|
"offendersTransformFn": function(offenders) {
|
|
|
@@ -195,8 +195,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": 5,
|
|
|
- "isAbnormalThreshold": 10,
|
|
|
+ "isBadThreshold": 3,
|
|
|
+ "isAbnormalThreshold": 8,
|
|
|
"hasOffenders": true,
|
|
|
"offendersTransformFn": function(offenders) {
|
|
|
return {
|
|
|
@@ -254,8 +254,8 @@ var policies = {
|
|
|
"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,
|
|
|
+ "isOkThreshold": 3,
|
|
|
+ "isBadThreshold": 20,
|
|
|
"isAbnormalThreshold": 50,
|
|
|
"hasOffenders": false
|
|
|
},
|
|
|
@@ -423,7 +423,7 @@ 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": 750,
|
|
|
+ "isOkThreshold": 1000,
|
|
|
"isBadThreshold": 3000,
|
|
|
"isAbnormalThreshold": 4500,
|
|
|
"hasOffenders": true,
|
|
|
@@ -466,7 +466,7 @@ 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 an useful way to simplify your CSS.</p>",
|
|
|
"isOkThreshold": 0,
|
|
|
- "isBadThreshold": 600,
|
|
|
+ "isBadThreshold": 800,
|
|
|
"isAbnormalThreshold": 2000,
|
|
|
"hasOffenders": true,
|
|
|
"offendersTransformFn": function(offenders) {
|
|
|
@@ -482,7 +482,7 @@ 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": 30,
|
|
|
+ "isOkThreshold": 50,
|
|
|
"isBadThreshold": 150,
|
|
|
"isAbnormalThreshold": 400,
|
|
|
"hasOffenders": true,
|
|
|
@@ -565,8 +565,8 @@ 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": 25,
|
|
|
- "isBadThreshold": 200,
|
|
|
+ "isOkThreshold": 50,
|
|
|
+ "isBadThreshold": 250,
|
|
|
"isAbnormalThreshold": 1000,
|
|
|
"hasOffenders": true,
|
|
|
"offendersTransformFn": function(offenders) {
|
|
|
@@ -739,8 +739,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": 75,
|
|
|
- "isAbnormalThreshold": 300,
|
|
|
+ "isBadThreshold": 50,
|
|
|
+ "isAbnormalThreshold": 150,
|
|
|
"hasOffenders": true,
|
|
|
"offendersTransformFn": function(offenders) {
|
|
|
var parsedOffenders = offenders.map(function(offender) {
|
|
|
@@ -795,8 +795,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": 75,
|
|
|
- "isAbnormalThreshold": 300,
|
|
|
+ "isBadThreshold": 50,
|
|
|
+ "isAbnormalThreshold": 200,
|
|
|
"hasOffenders": true,
|
|
|
"offendersTransformFn": function(offenders) {
|
|
|
var properties = {};
|
|
|
@@ -898,9 +898,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><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,
|
|
|
+ "isOkThreshold": 1048576,
|
|
|
+ "isBadThreshold": 2621440,
|
|
|
+ "isAbnormalThreshold": 4194304,
|
|
|
"hasOffenders": true,
|
|
|
"unit": 'bytes'
|
|
|
},
|
|
|
@@ -908,8 +908,8 @@ var policies = {
|
|
|
"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,
|
|
|
+ "isOkThreshold": 20480,
|
|
|
+ "isBadThreshold": 204800,
|
|
|
"isAbnormalThreshold": 307200,
|
|
|
"hasOffenders": true,
|
|
|
"unit": 'bytes'
|
|
|
@@ -938,9 +938,9 @@ var policies = {
|
|
|
"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,
|
|
|
+ "isOkThreshold": 20,
|
|
|
+ "isBadThreshold": 120,
|
|
|
+ "isAbnormalThreshold": 200,
|
|
|
"hasOffenders": true
|
|
|
},
|
|
|
"domains": {
|
|
|
@@ -986,8 +986,8 @@ var policies = {
|
|
|
"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,
|
|
|
+ "isBadThreshold": 4,
|
|
|
+ "isAbnormalThreshold": 15,
|
|
|
"hasOffenders": true
|
|
|
},
|
|
|
"identicalFiles": {
|
|
|
@@ -1015,9 +1015,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": 4,
|
|
|
- "isBadThreshold": 30,
|
|
|
- "isAbnormalThreshold": 50,
|
|
|
+ "isOkThreshold": 10,
|
|
|
+ "isBadThreshold": 50,
|
|
|
+ "isAbnormalThreshold": 80,
|
|
|
"hasOffenders": true
|
|
|
},
|
|
|
"lazyLoadableImagesBelowTheFold": {
|
Gaël Métais