From ce16fa154c729d262b9660fea5a1cf32b8376cda Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABl=20M=C3=A9tais?= Date: Tue, 10 Jan 2017 13:54:43 +0800 Subject: [PATCH 1/6] Hiddenchars (#221) * Fix bug where an icons font is counted as two unused unicode ranges * Display the number of hidden chars --- front/src/views/rule.html | 5 +++++ lib/metadata/policies.js | 2 +- lib/tools/redownload/redownload.js | 20 ++++++++++++++++---- 3 files changed, 22 insertions(+), 5 deletions(-) diff --git a/front/src/views/rule.html b/front/src/views/rule.html index f8d33d8..c8c00fb 100644 --- a/front/src/views/rule.html +++ b/front/src/views/rule.html @@ -455,6 +455,11 @@ +
+
Ligatures or hidden chars
+
{{font.ligaturesOrHiddenChars}} glyphs
+
+
diff --git a/lib/metadata/policies.js b/lib/metadata/policies.js index 0bfa76f..d00f6e0 100644 --- a/lib/metadata/policies.js +++ b/lib/metadata/policies.js @@ -1062,7 +1062,7 @@ var policies = { "unusedUnicodeRanges": { "tool": "redownload", "label": "Unused Unicode ranges", - "message": "

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.

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.

Tools such as Font Squirrel can remove some unicode ranges from a font.

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.

", + "message": "

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.

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).

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.

Tools such as Font Squirrel can remove some unicode ranges from a font.

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.

", "isOkThreshold": 0, "isBadThreshold": 8, "isAbnormalThreshold": 12, diff --git a/lib/tools/redownload/redownload.js b/lib/tools/redownload/redownload.js index c79c71c..0e34fff 100644 --- a/lib/tools/redownload/redownload.js +++ b/lib/tools/redownload/redownload.js @@ -500,6 +500,8 @@ var Redownload = function() { var ranges = []; var others = null; var rangeNames = Object.keys(req.fontMetrics.unicodeRanges); + var unicodePointsCount = 0; + var unusedRangesInFont = 0; rangeNames.forEach(function(rangeName) { var range = req.fontMetrics.unicodeRanges[rangeName]; @@ -508,18 +510,20 @@ var Redownload = function() { if (rangeName === 'Others') { if (range.numGlyphsInCommonWithPageContent === 0 && range.charset.length > 50) { range.underused = true; - unusedUnicodeRanges ++; + unusedRangesInFont ++; } + unicodePointsCount += range.charset.length; others = range; } else if (range.charset.length > 0) { // Now lets detect if the current Unicode range is unused. // Reminder: range.coverage = glyphs declared in this range, divided by the range size if (range.coverage > 0.25 && range.numGlyphsInCommonWithPageContent === 0) { range.underused = true; - unusedUnicodeRanges ++; + unusedRangesInFont ++; } + unicodePointsCount += range.charset.length; ranges.push(range); } }); @@ -539,7 +543,7 @@ var Redownload = function() { // And if less than 5% of the icons are used, let's report it as underused if (others && others.numGlyphsInCommonWithPageContent / others.charset.length <= 0.05) { - unusedUnicodeRanges ++; + unusedRangesInFont = 1; } // Not an icons font @@ -549,13 +553,21 @@ var Redownload = function() { ranges.push(others); } + var ligaturesOrHiddenChars = req.fontMetrics.numGlyphs - unicodePointsCount; + if (ligaturesOrHiddenChars > 25) { + unusedUnicodeRanges ++; + } + list.push({ url: req.url, weight: req.weightCheck.bodySize, isIconFont: false, - unicodeRanges: ranges + unicodeRanges: ranges, + ligaturesOrHiddenChars: ligaturesOrHiddenChars }); } + + unusedUnicodeRanges += unusedRangesInFont; } }); From df4a45afb23a3a8e5614ff9225cc3301c82c8da2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABl=20M=C3=A9tais?= Date: Sat, 27 May 2017 18:18:09 +0100 Subject: [PATCH 2/6] Add file names to duplicated css selectors offenders (#233) --- front/src/views/rule.html | 8 ++++---- lib/metadata/policies.js | 30 +++++++++++++++--------------- package.json | 2 +- 3 files changed, 20 insertions(+), 20 deletions(-) diff --git a/front/src/views/rule.html b/front/src/views/rule.html index c8c00fb..f011a2a 100644 --- a/front/src/views/rule.html +++ b/front/src/views/rule.html @@ -117,10 +117,6 @@ -
- {{offender.rule}} (x{{offender.occurrences}}) -
-
{{offender.property}} {{offender.message}}
@@ -188,6 +184,10 @@ @ {{offender.line}}:{{offender.column}}
+
+ {{offender.rule}} (x{{offender.occurrences}}) +
+
Property {{offender.property}} duplicated in {{offender.rule}} { } @ {{offender.line}}:{{offender.column}} diff --git a/lib/metadata/policies.js b/lib/metadata/policies.js index d00f6e0..0a1df51 100644 --- a/lib/metadata/policies.js +++ b/lib/metadata/policies.js @@ -596,24 +596,24 @@ var policies = { "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 - }; - } + var parsedOffenders = offenders.map(function(offender) { + var parts = /^(.*) \((\d+) times\) ?<(.*)>$/.exec(offender); + if (!parts) { + debug('cssDuplicatedSelectors offenders transform function error with "%s"', offender); return { - rule: parts[1], - occurrences: parseInt(parts[2], 10) + parseError: offender }; - }) - }; + } + + return { + rule: parts[1], + occurrences: parseInt(parts[2], 10), + file: parts[3] + }; + }); + + return offendersHelpers.orderByFile(parsedOffenders); } }, "cssDuplicatedProperties": { diff --git a/package.json b/package.json index 23b089b..b8da64a 100644 --- a/package.json +++ b/package.json @@ -60,7 +60,7 @@ "meow": "3.7.0", "minimize": "2.0.0", "parse-color": "1.0.0", - "phantomas": "1.18.0", + "phantomas": "1.19.0", "ps-node": "0.1.4", "q": "1.4.1", "request": "2.79.0", From aa0233f49b39ddc9679fa53dbcc8864f8ac7c6db Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABl=20M=C3=A9tais?= Date: Sat, 27 May 2017 23:14:20 +0100 Subject: [PATCH 3/6] Ignore unused fonts (#234) --- lib/tools/redownload/fontAnalyzer.js | 11 ++++++++++- lib/tools/redownload/redownload.js | 8 ++++++++ 2 files changed, 18 insertions(+), 1 deletion(-) diff --git a/lib/tools/redownload/fontAnalyzer.js b/lib/tools/redownload/fontAnalyzer.js index d83d0a8..0fab2f5 100644 --- a/lib/tools/redownload/fontAnalyzer.js +++ b/lib/tools/redownload/fontAnalyzer.js @@ -57,8 +57,17 @@ var FontAnalyzer = function() { var endTime = Date.now(); debug('Font analysis took %dms', endTime - startTime); - deferred.resolve(result); + // Mark fonts that are not used on the page (#224) + var fontIsUsed = false; + for (var range in result.unicodeRanges) { + if (result.unicodeRanges[range].numGlyphsInCommonWithPageContent > 0) { + fontIsUsed = true; + break; + } + } + result.isUsed = fontIsUsed; + deferred.resolve(result); } catch(error) { deferred.reject(error); } diff --git a/lib/tools/redownload/redownload.js b/lib/tools/redownload/redownload.js index 0e34fff..824d6ed 100644 --- a/lib/tools/redownload/redownload.js +++ b/lib/tools/redownload/redownload.js @@ -103,6 +103,14 @@ var Redownload = function() { var metrics = {}; var offenders = {}; + // Remove unused fonts that a normal browser would not download (fix #224) + results = results.filter(function(result) { + if (result && result.fontMetrics) { + return result.fontMetrics.isUsed !== false; + } + return true; + }); + // Count requests offenders.totalRequests = listRequestsByType(results); metrics.totalRequests = offenders.totalRequests.total; From 89f79e0977176ae99e838e1817ea301819725996 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABl=20M=C3=A9tais?= Date: Sat, 27 May 2017 23:17:24 +0100 Subject: [PATCH 4/6] v1.12.2 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index b8da64a..403b787 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "yellowlabtools", - "version": "1.12.1", + "version": "1.12.2", "description": "Online tool to audit a webpage for performance and front-end quality issues", "license": "GPL-2.0", "author": { From 0ab019e5abc444091a81073e09fd0edcd4489a80 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABl=20M=C3=A9tais?= Date: Sun, 28 May 2017 09:33:52 +0100 Subject: [PATCH 5/6] Remove special char from XML --- bin/cli.js | 1 + 1 file changed, 1 insertion(+) diff --git a/bin/cli.js b/bin/cli.js index 7e7cfb9..a76b83d 100644 --- a/bin/cli.js +++ b/bin/cli.js @@ -111,6 +111,7 @@ if (cli.flags.reporter && cli.flags.reporter !== 'json' && cli.flags.reporter != xmlOutput = xmlOutput.replace(/(<[a-zA-Z]*>[^<]*)\n([^<]*<\/[a-zA-Z]*>)/g, '$1$2'); xmlOutput = xmlOutput.replace(/\0/g, ''); xmlOutput = xmlOutput.replace(/\uFFFF/g, ''); + xmlOutput = xmlOutput.replace(/\u0002/g, ''); console.log(xmlOutput); break; From 450c5c98290278e3995cd6b947eea33d2f1b39cf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABl=20M=C3=A9tais?= Date: Sun, 28 May 2017 09:35:45 +0100 Subject: [PATCH 6/6] v1.12.3 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 403b787..52bb7ae 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "yellowlabtools", - "version": "1.12.2", + "version": "1.12.3", "description": "Online tool to audit a webpage for performance and front-end quality issues", "license": "GPL-2.0", "author": {