From d32b9f78a41362eb8158317228ee847ca1f5ca66 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABl=20M=C3=A9tais?= Date: Fri, 18 Sep 2015 18:51:41 +0200 Subject: [PATCH] New metric: hiddenImages --- front/src/css/rule.css | 7 ++-- front/src/less/rule.less | 7 ++-- front/src/views/rule.html | 4 +- lib/metadata/policies.js | 11 ++++- lib/metadata/scoreProfileGeneric.json | 3 +- .../modules/domHiddenYLT/domHiddenYLT.js | 40 +++++++++++++++++-- 6 files changed, 59 insertions(+), 13 deletions(-) diff --git a/front/src/css/rule.css b/front/src/css/rule.css index ccc72a5..24137f4 100644 --- a/front/src/css/rule.css +++ b/front/src/css/rule.css @@ -244,8 +244,9 @@ margin-top: 0.5em; } .smallPreview { - max-height: 1.6em; - max-width: 4em; + display: block; + max-height: 4em; + max-width: 8em; border: 1px solid #000; - margin-top: 0.2em; + margin: 1em auto 0.2em; } diff --git a/front/src/less/rule.less b/front/src/less/rule.less index 7a2571f..6f1fe61 100644 --- a/front/src/less/rule.less +++ b/front/src/less/rule.less @@ -271,8 +271,9 @@ } .smallPreview { - max-height: 1.6em; - max-width: 4em; + display: block; + max-height: 4em; + max-width: 8em; border: 1px solid #000; - margin-top: 0.2em; + margin: 1em auto 0.2em; } \ No newline at end of file diff --git a/front/src/views/rule.html b/front/src/views/rule.html index b484ead..0ca11f6 100644 --- a/front/src/views/rule.html +++ b/front/src/views/rule.html @@ -145,9 +145,9 @@ -
- +
+
diff --git a/lib/metadata/policies.js b/lib/metadata/policies.js index e7aab2c..fc6bbf0 100644 --- a/lib/metadata/policies.js +++ b/lib/metadata/policies.js @@ -959,13 +959,22 @@ var policies = { }, "lazyLoadableImagesBelowTheFold": { "tool": "phantomas", - "label": "Not lazyloaded images", + "label": "Below the fold images", "message": "

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.

I recommend using this lazyloader.

", "isOkThreshold": 1, "isBadThreshold": 12, "isAbnormalThreshold": 30, "hasOffenders": true }, + "hiddenImages": { + "tool": "phantomas", + "label": "Hidden images", + "message": "

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.

Trackers are an exception, you'd better hide them.

", + "isOkThreshold": 3, + "isBadThreshold": 12, + "isAbnormalThreshold": 30, + "hasOffenders": true + }, "cachingDisabled": { "tool": "phantomas", "label": "Caching disabled", diff --git a/lib/metadata/scoreProfileGeneric.json b/lib/metadata/scoreProfileGeneric.json index eed3045..8dd9670 100644 --- a/lib/metadata/scoreProfileGeneric.json +++ b/lib/metadata/scoreProfileGeneric.json @@ -17,7 +17,8 @@ "notFound": 3, "multipleRequests": 2, "smallRequests": 1, - "lazyLoadableImagesBelowTheFold": 2 + "lazyLoadableImagesBelowTheFold": 2, + "hiddenImages": 1 } }, "domComplexity": { diff --git a/lib/tools/phantomas/custom_modules/modules/domHiddenYLT/domHiddenYLT.js b/lib/tools/phantomas/custom_modules/modules/domHiddenYLT/domHiddenYLT.js index 56aafd5..097aef7 100644 --- a/lib/tools/phantomas/custom_modules/modules/domHiddenYLT/domHiddenYLT.js +++ b/lib/tools/phantomas/custom_modules/modules/domHiddenYLT/domHiddenYLT.js @@ -3,21 +3,23 @@ */ /* global document: true, Node: true, window: true */ -exports.version = '0.1.a'; +exports.version = '1.0.a'; exports.module = function(phantomas) { 'use strict'; // total length of HTML of hidden elements (i.e. display: none) phantomas.setMetric('hiddenContentSize'); // @desc the size of content of hidden elements on the page (with CSS display: none) @offenders + phantomas.setMetric('hiddenImages'); // @desc number of hidden images that can be lazy-loaded @offenders // HTML size phantomas.on('report', function() { phantomas.evaluate(function() { (function(phantomas) { - phantomas.spyEnabled(false, 'checking the hiddenContentSize'); + var runner = new phantomas.nodeRunner(), + lazyLoadableImages = {}; - var runner = new phantomas.nodeRunner(); + phantomas.spyEnabled(false, 'analyzing hidden content'); runner.walk(document.body, function(node, depth) { switch (node.nodeType) { @@ -36,6 +38,29 @@ exports.module = function(phantomas) { } } + // count hidden images that can be lazy loaded (issue #524) + var images = []; + if (node.tagName === 'IMG') { + images = [node]; + } else if (typeof node.querySelectorAll === 'function') { + images = node.querySelectorAll('img') || []; + } + + for (var i = 0, len = images.length; i < len; i++) { + var src = images[i].src, + path; + + if (src === '' || src.indexOf('data:image') === 0) continue; + + if (!lazyLoadableImages[src]) { + path = phantomas.getDOMPath(images[i]); + + lazyLoadableImages[src] = { + path: path + }; + } + } + // don't run for child nodes as they're hidden as well return false; } @@ -43,6 +68,15 @@ exports.module = function(phantomas) { } }); + Object.keys(lazyLoadableImages).forEach(function(img) { + var entry = lazyLoadableImages[img]; + + phantomas.incrMetric('hiddenImages'); + phantomas.addOffender('hiddenImages', img); + + phantomas.log('hiddenImages: <%s> image (%s) is hidden and can be lazy-loaded', img, entry.path); + }); + phantomas.spyEnabled(true); }(window.__phantomas)); });