@@ -941,7 +941,7 @@ 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 or icon fonts</li><li>Base64 encode small images in HTML or stylesheets</li><li>Use lazyloading for images</li></ul></p>",
|
||||
"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,
|
||||
@@ -1042,6 +1042,43 @@ var policies = {
|
||||
"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>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>",
|
||||
|
||||
@@ -93,6 +93,14 @@
|
||||
"cssRedundantChildNodesSelectors": 1
|
||||
}
|
||||
},
|
||||
"fonts": {
|
||||
"label": "Web fonts",
|
||||
"policies": {
|
||||
"fontsCount": 1,
|
||||
"heavyFonts": 1,
|
||||
"unusedUnicodeRanges": 1
|
||||
}
|
||||
},
|
||||
"serverConfig": {
|
||||
"label": "Server config",
|
||||
"policies": {
|
||||
@@ -115,6 +123,7 @@
|
||||
"cssSyntaxError": 1,
|
||||
"cssComplexity": 1,
|
||||
"badCSS": 1,
|
||||
"fonts": 1,
|
||||
"serverConfig": 1
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,71 @@
|
||||
/**
|
||||
* Lists the number of different characters
|
||||
*/
|
||||
/* global document: true, Node: true, window: true */
|
||||
|
||||
exports.version = '1.0';
|
||||
|
||||
exports.module = function(phantomas) {
|
||||
'use strict';
|
||||
|
||||
//phantomas.setMetric('differentCharacters'); // @desc the number of different characters in the body @offenders
|
||||
|
||||
phantomas.on('report', function() {
|
||||
phantomas.log("charactersCount: starting to analyze characters on page...");
|
||||
|
||||
phantomas.evaluate(function() {
|
||||
(function(phantomas) {
|
||||
|
||||
phantomas.spyEnabled(false, 'analyzing characters on page');
|
||||
|
||||
function getLetterCount(arr){
|
||||
return arr.reduce(function(prev, next){
|
||||
prev[next] = 1;
|
||||
return prev;
|
||||
}, {});
|
||||
}
|
||||
|
||||
if (document.body && document.body.textContent) {
|
||||
var allText = '';
|
||||
|
||||
// Traverse all DOM Tree to read text
|
||||
var runner = new phantomas.nodeRunner();
|
||||
runner.walk(document.body, function(node, depth) {
|
||||
switch (node.nodeType) {
|
||||
|
||||
// Grabing text nodes
|
||||
case Node.TEXT_NODE:
|
||||
if (node.parentNode.tagName !== 'SCRIPT' && node.parentNode.tagName !== 'STYLE') {
|
||||
allText += node.nodeValue;
|
||||
}
|
||||
break;
|
||||
|
||||
// Grabing CSS content properties
|
||||
case Node.ELEMENT_NODE:
|
||||
if (node.tagName !== 'SCRIPT' && node.tagName !== 'STYLE') {
|
||||
allText += window.getComputedStyle(node).getPropertyValue('content');
|
||||
allText += window.getComputedStyle(node, ':before').getPropertyValue('content');
|
||||
allText += window.getComputedStyle(node, ':after').getPropertyValue('content');
|
||||
}
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
// Reduce all text found in page into a string of unique chars
|
||||
var charactersList = getLetterCount(allText.split(''));
|
||||
var charsetString = Object.keys(charactersList).sort().join('');
|
||||
|
||||
// Remove blank characters
|
||||
charsetString = charsetString.replace(/\s/g, '');
|
||||
|
||||
phantomas.setMetric('differentCharacters', charsetString.length);
|
||||
phantomas.addOffender('differentCharacters', charsetString);
|
||||
}
|
||||
|
||||
phantomas.spyEnabled(true);
|
||||
}(window.__phantomas));
|
||||
});
|
||||
|
||||
phantomas.log("charactersCount: analyzing characters done.");
|
||||
});
|
||||
};
|
||||
@@ -18,11 +18,11 @@ var ContentTypeChecker = function() {
|
||||
debug('Entering contentTypeChecker');
|
||||
|
||||
// Ignore very small files as they are generally tracking pixels
|
||||
if (entry.weightCheck && entry.weightCheck.body && entry.weightCheck.bodySize > 100) {
|
||||
if (entry.weightCheck && entry.weightCheck.bodyBuffer && entry.weightCheck.bodySize > 100) {
|
||||
var foundType;
|
||||
|
||||
try {
|
||||
foundType = findContentType(entry.weightCheck.body);
|
||||
foundType = findContentType(entry.weightCheck.bodyBuffer);
|
||||
|
||||
if (!entry.contentType || entry.contentType === '') {
|
||||
if (foundType === null) {
|
||||
@@ -51,43 +51,43 @@ var ContentTypeChecker = function() {
|
||||
return deferred.promise;
|
||||
}
|
||||
|
||||
function findContentType(body) {
|
||||
var buffer = new Buffer(body, 'binary');
|
||||
function findContentType(bodyBuffer) {
|
||||
var bodyStr = bodyBuffer.toString();
|
||||
|
||||
if (isJpg(buffer)) {
|
||||
if (isJpg(bodyBuffer)) {
|
||||
return contentTypes.jpeg;
|
||||
}
|
||||
|
||||
if (isPng(buffer)) {
|
||||
if (isPng(bodyBuffer)) {
|
||||
return contentTypes.png;
|
||||
}
|
||||
|
||||
// https://github.com/sindresorhus/is-svg/issues/7
|
||||
if (/<svg/.test(body) && isSvg(body)) {
|
||||
if (/<svg/.test(bodyStr) && isSvg(bodyStr)) {
|
||||
return contentTypes.svg;
|
||||
}
|
||||
|
||||
if (isGif(buffer)) {
|
||||
if (isGif(bodyBuffer)) {
|
||||
return contentTypes.gif;
|
||||
}
|
||||
|
||||
if (isWoff(buffer)) {
|
||||
if (isWoff(bodyBuffer)) {
|
||||
return contentTypes.woff;
|
||||
}
|
||||
|
||||
if (isWoff2(buffer)) {
|
||||
if (isWoff2(bodyBuffer)) {
|
||||
return contentTypes.woff2;
|
||||
}
|
||||
|
||||
if (isOtf(buffer)) {
|
||||
if (isOtf(bodyBuffer)) {
|
||||
return contentTypes.otf;
|
||||
}
|
||||
|
||||
if (isTtf(buffer)) {
|
||||
if (isTtf(bodyBuffer)) {
|
||||
return contentTypes.ttf;
|
||||
}
|
||||
|
||||
if (isEot(buffer)) {
|
||||
if (isEot(bodyBuffer)) {
|
||||
return contentTypes.eot;
|
||||
}
|
||||
|
||||
|
||||
@@ -11,22 +11,24 @@ var FileMinifier = function() {
|
||||
function minifyFile(entry) {
|
||||
var deferred = Q.defer();
|
||||
|
||||
if (!entry.weightCheck || !entry.weightCheck.body) {
|
||||
if (!entry.weightCheck || !entry.weightCheck.bodyBuffer) {
|
||||
// No valid file available
|
||||
deferred.resolve(entry);
|
||||
return deferred.promise;
|
||||
}
|
||||
|
||||
var fileSize = entry.weightCheck.uncompressedSize;
|
||||
var bodyString = entry.weightCheck.bodyBuffer.toString();
|
||||
|
||||
debug('Let\'s try to optimize %s', entry.url);
|
||||
debug('Current file size is %d', fileSize);
|
||||
var startTime = Date.now();
|
||||
|
||||
if (entry.isJS && !isKnownAsMinified(entry.url) && !looksAlreadyMinified(entry.weightCheck.body)) {
|
||||
if (entry.isJS && !isKnownAsMinified(entry.url) && !looksAlreadyMinified(bodyString)) {
|
||||
|
||||
debug('File is a JS');
|
||||
|
||||
return minifyJs(entry.weightCheck.body)
|
||||
return minifyJs(bodyString)
|
||||
|
||||
.then(function(newFile) {
|
||||
if (!newFile) {
|
||||
@@ -58,7 +60,7 @@ var FileMinifier = function() {
|
||||
|
||||
debug('File is a CSS');
|
||||
|
||||
return minifyCss(entry.weightCheck.body)
|
||||
return minifyCss(entry.weightCheck.bodyBuffer.toString())
|
||||
|
||||
.then(function(newFile) {
|
||||
if (!newFile) {
|
||||
@@ -91,7 +93,7 @@ var FileMinifier = function() {
|
||||
|
||||
debug('File is an HTML');
|
||||
|
||||
return minifyHtml(entry.weightCheck.body)
|
||||
return minifyHtml(entry.weightCheck.bodyBuffer.toString())
|
||||
|
||||
.then(function(newFile) {
|
||||
if (!newFile) {
|
||||
|
||||
@@ -0,0 +1,379 @@
|
||||
var debug = require('debug')('ylt:fontAnalyzer');
|
||||
|
||||
var Q = require('q');
|
||||
var fontkit = require('fontkit');
|
||||
|
||||
var FontAnalyzer = function() {
|
||||
|
||||
function analyzeFont(entry, charsListOnPage) {
|
||||
var deferred = Q.defer();
|
||||
|
||||
if (!entry.weightCheck || !entry.weightCheck.bodyBuffer) {
|
||||
// No valid file available
|
||||
deferred.resolve(entry);
|
||||
return deferred.promise;
|
||||
}
|
||||
|
||||
var fileSize = entry.weightCheck.uncompressedSize;
|
||||
|
||||
if (entry.isWebFont) {
|
||||
debug('File %s is a font. Let\'s have a look inside!', entry.url);
|
||||
|
||||
getMetricsFromFont(entry, charsListOnPage)
|
||||
|
||||
.then(function(fontMetrics) {
|
||||
entry.fontMetrics = fontMetrics;
|
||||
deferred.resolve(entry);
|
||||
})
|
||||
|
||||
.fail(function(error) {
|
||||
debug('Could not open the font: %s', error);
|
||||
deferred.resolve(entry);
|
||||
});
|
||||
|
||||
} else {
|
||||
deferred.resolve(entry);
|
||||
}
|
||||
|
||||
return deferred.promise;
|
||||
}
|
||||
|
||||
function getMetricsFromFont(entry, charsListOnPage) {
|
||||
var deferred = Q.defer();
|
||||
|
||||
try {
|
||||
var startTime = Date.now();
|
||||
var font = fontkit.create(entry.weightCheck.bodyBuffer);
|
||||
|
||||
var result = {
|
||||
name: font.fullName || font.postscriptName || font.familyName,
|
||||
numGlyphs: font.numGlyphs,
|
||||
averageGlyphComplexity: getAverageGlyphComplexity(font),
|
||||
compressedWeight: entry.weightCheck.afterCompression || entry.weightCheck.bodySize,
|
||||
unicodeRanges: readUnicodeRanges(font.characterSet, charsListOnPage),
|
||||
numGlyphsInCommonWithPageContent: countPossiblyUsedGlyphs(getCharacterSetAsString(font.characterSet), charsListOnPage)
|
||||
};
|
||||
|
||||
var endTime = Date.now();
|
||||
debug('Font analysis took %dms', endTime - startTime);
|
||||
|
||||
deferred.resolve(result);
|
||||
|
||||
} catch(error) {
|
||||
deferred.reject(error);
|
||||
}
|
||||
|
||||
return deferred.promise;
|
||||
}
|
||||
|
||||
// Reads the number of vector commands (complexity) needed to render glyphs and
|
||||
// returns the average. Only first 100 glyphes are tested, otherwise it would take tool long;
|
||||
function getAverageGlyphComplexity(font) {
|
||||
var max = Math.min(font.numGlyphs, 100);
|
||||
|
||||
var totalPathsCommands = 0;
|
||||
for (var i = 0; i < max; i++) {
|
||||
totalPathsCommands += font.getGlyph(i).path.commands.length;
|
||||
}
|
||||
return Math.round(totalPathsCommands / max * 10) / 10;
|
||||
}
|
||||
|
||||
function readUnicodeRanges(charsetInFont, charsListOnPage) {
|
||||
var ranges = {};
|
||||
|
||||
// Assign a range to each char found in the font
|
||||
charsetInFont.forEach(function(char) {
|
||||
|
||||
var currentRange = getUnicodeRangeFromChar(char);
|
||||
var currentRangeName = currentRange.name;
|
||||
|
||||
if (!ranges[currentRangeName]) {
|
||||
// Cloning the object
|
||||
ranges[currentRangeName] = Object.assign({}, currentRange);
|
||||
}
|
||||
|
||||
if (!ranges[currentRangeName].charset) {
|
||||
ranges[currentRangeName].charset = '';
|
||||
}
|
||||
|
||||
ranges[currentRangeName].charset += String.fromCharCode(char);
|
||||
});
|
||||
|
||||
var range;
|
||||
var expectedLength;
|
||||
var actualLength;
|
||||
|
||||
for (var rangeName in ranges) {
|
||||
/*jshint loopfunc: true */
|
||||
|
||||
range = ranges[rangeName];
|
||||
|
||||
// Estimate if range is used, based on the characters found in the page
|
||||
range.numGlyphsInCommonWithPageContent = countPossiblyUsedGlyphs(range.charset, charsListOnPage);
|
||||
|
||||
// Calculate coverage
|
||||
if (rangeName !== 'Others') {
|
||||
expectedLength = range.rangeEnd - range.rangeStart + 1;
|
||||
actualLength = range.charset.length;
|
||||
range.coverage = Math.min(actualLength / expectedLength, 1);
|
||||
}
|
||||
}
|
||||
|
||||
return ranges;
|
||||
}
|
||||
|
||||
function countPossiblyUsedGlyphs(charsetInFont, charsListOnPage) {
|
||||
var count = 0;
|
||||
charsListOnPage.split('').forEach(function(char) {
|
||||
if (charsetInFont.indexOf(char) >= 0) {
|
||||
count ++;
|
||||
}
|
||||
});
|
||||
return count;
|
||||
}
|
||||
|
||||
function getCharacterSetAsString(characterSet) {
|
||||
var str = '';
|
||||
characterSet.forEach(function(charCode) {
|
||||
str += String.fromCharCode(charCode);
|
||||
});
|
||||
return str;
|
||||
}
|
||||
|
||||
function getUnicodeRangeFromChar(char) {
|
||||
return UNICODE_RANGES.find(function(range) {
|
||||
return (char >= range.rangeStart && char <= range.rangeEnd);
|
||||
}) || {name: 'Others'};
|
||||
}
|
||||
|
||||
|
||||
var UNICODE_RANGES = [
|
||||
{
|
||||
name: 'Basic Latin',
|
||||
rangeStart: 0x0020,
|
||||
rangeEnd: 0x007F
|
||||
},
|
||||
{
|
||||
name: 'Latin-1 Supplement',
|
||||
rangeStart: 0x00A0,
|
||||
rangeEnd: 0x00FF
|
||||
},
|
||||
{
|
||||
name: 'Latin Extended',
|
||||
rangeStart: 0x0100,
|
||||
rangeEnd: 0x024F
|
||||
},
|
||||
{
|
||||
name: 'IPA Extensions',
|
||||
rangeStart: 0x0250,
|
||||
rangeEnd: 0x02AF
|
||||
},
|
||||
{
|
||||
name: 'Greek and Coptic',
|
||||
rangeStart: 0x0370,
|
||||
rangeEnd: 0x03FF
|
||||
},
|
||||
{
|
||||
name: 'Cyrillic',
|
||||
rangeStart: 0x0400,
|
||||
rangeEnd: 0x052F
|
||||
},
|
||||
{
|
||||
name: 'Armenian',
|
||||
rangeStart: 0x0530,
|
||||
rangeEnd: 0x058F
|
||||
},
|
||||
{
|
||||
name: 'Hebrew',
|
||||
rangeStart: 0x0590,
|
||||
rangeEnd: 0x05FF
|
||||
},
|
||||
{
|
||||
name: 'Arabic',
|
||||
rangeStart: 0x0600,
|
||||
rangeEnd: 0x06FF
|
||||
},
|
||||
{
|
||||
name: 'Syriac',
|
||||
rangeStart: 0x0700,
|
||||
rangeEnd: 0x074F
|
||||
},
|
||||
{
|
||||
name: 'Thaana',
|
||||
rangeStart: 0x0780,
|
||||
rangeEnd: 0x07BF
|
||||
},
|
||||
{
|
||||
name: 'Devanagari',
|
||||
rangeStart: 0x0900,
|
||||
rangeEnd: 0x097F
|
||||
},
|
||||
{
|
||||
name: 'Bengali',
|
||||
rangeStart: 0x0980,
|
||||
rangeEnd: 0x09FF
|
||||
},
|
||||
{
|
||||
name: 'Gurmukhi',
|
||||
rangeStart: 0x0A00,
|
||||
rangeEnd: 0x0A7F
|
||||
},
|
||||
{
|
||||
name: 'Gujarati',
|
||||
rangeStart: 0x0A80,
|
||||
rangeEnd: 0x0AFF
|
||||
},
|
||||
{
|
||||
name: 'Oriya',
|
||||
rangeStart: 0x0B00,
|
||||
rangeEnd: 0x0B7F
|
||||
},
|
||||
{
|
||||
name: 'Tamil',
|
||||
rangeStart: 0x0B80,
|
||||
rangeEnd: 0x0BFF
|
||||
},
|
||||
{
|
||||
name: 'Telugu',
|
||||
rangeStart: 0x0C00,
|
||||
rangeEnd: 0x0C7F
|
||||
},
|
||||
{
|
||||
name: 'Kannada',
|
||||
rangeStart: 0x0C80,
|
||||
rangeEnd: 0x0CFF
|
||||
},
|
||||
{
|
||||
name: 'Malayalam',
|
||||
rangeStart: 0x0D00,
|
||||
rangeEnd: 0x0D7F
|
||||
},
|
||||
{
|
||||
name: 'Sinhala',
|
||||
rangeStart: 0x0D80,
|
||||
rangeEnd: 0x0DFF
|
||||
},
|
||||
{
|
||||
name: 'Thai',
|
||||
rangeStart: 0x0E00,
|
||||
rangeEnd: 0x0E7F
|
||||
},
|
||||
{
|
||||
name: 'Lao',
|
||||
rangeStart: 0x0E80,
|
||||
rangeEnd: 0x0EFF
|
||||
},
|
||||
{
|
||||
name: 'Tibetan',
|
||||
rangeStart: 0x0F00,
|
||||
rangeEnd: 0x0FFF
|
||||
},
|
||||
{
|
||||
name: 'Myanmar',
|
||||
rangeStart: 0x1000,
|
||||
rangeEnd: 0x109F
|
||||
},
|
||||
{
|
||||
name: 'Georgian',
|
||||
rangeStart: 0x10A0,
|
||||
rangeEnd: 0x10FF
|
||||
},
|
||||
{
|
||||
name: 'Hangul Jamo',
|
||||
rangeStart: 0x1100,
|
||||
rangeEnd: 0x11FF
|
||||
},
|
||||
{
|
||||
name: 'Ethiopic',
|
||||
rangeStart: 0x1200,
|
||||
rangeEnd: 0x137F
|
||||
},
|
||||
{
|
||||
name: 'Cherokee',
|
||||
rangeStart: 0x13A0,
|
||||
rangeEnd: 0x13FF
|
||||
},
|
||||
{
|
||||
name: 'Unified Canadian Aboriginal Syllabics',
|
||||
rangeStart: 0x1400,
|
||||
rangeEnd: 0x167F
|
||||
},
|
||||
{
|
||||
name: 'Ogham',
|
||||
rangeStart: 0x1680,
|
||||
rangeEnd: 0x169F
|
||||
},
|
||||
{
|
||||
name: 'Runic',
|
||||
rangeStart: 0x16A0,
|
||||
rangeEnd: 0x16FF
|
||||
},
|
||||
{
|
||||
name: 'Tagalog',
|
||||
rangeStart: 0x1700,
|
||||
rangeEnd: 0x171F
|
||||
},
|
||||
{
|
||||
name: 'Hanunoo',
|
||||
rangeStart: 0x1720,
|
||||
rangeEnd: 0x173F
|
||||
},
|
||||
{
|
||||
name: 'Buhid',
|
||||
rangeStart: 0x1740,
|
||||
rangeEnd: 0x175F
|
||||
},
|
||||
{
|
||||
name: 'Tagbanwa',
|
||||
rangeStart: 0x1760,
|
||||
rangeEnd: 0x177F
|
||||
},
|
||||
{
|
||||
name: 'Khmer',
|
||||
rangeStart: 0x1780,
|
||||
rangeEnd: 0x17FF
|
||||
},
|
||||
{
|
||||
name: 'Mongolian',
|
||||
rangeStart: 0x1800,
|
||||
rangeEnd: 0x18AF
|
||||
},
|
||||
{
|
||||
name: 'Limbu',
|
||||
rangeStart: 0x1900,
|
||||
rangeEnd: 0x194F
|
||||
},
|
||||
{
|
||||
name: 'Tai Le',
|
||||
rangeStart: 0x1950,
|
||||
rangeEnd: 0x197F
|
||||
},
|
||||
{
|
||||
name: 'Hiragana',
|
||||
rangeStart: 0x3040,
|
||||
rangeEnd: 0x309F
|
||||
},
|
||||
{
|
||||
name: 'Katakana',
|
||||
rangeStart: 0x30A0,
|
||||
rangeEnd: 0x30FF
|
||||
},
|
||||
{
|
||||
name: 'Bopomofo',
|
||||
rangeStart: 0x3100,
|
||||
rangeEnd: 0x312F
|
||||
}
|
||||
];
|
||||
|
||||
return {
|
||||
analyzeFont: analyzeFont,
|
||||
getMetricsFromFont: getMetricsFromFont,
|
||||
readUnicodeRanges: readUnicodeRanges,
|
||||
getAverageGlyphComplexity: getAverageGlyphComplexity,
|
||||
countPossiblyUsedGlyphs: countPossiblyUsedGlyphs,
|
||||
getCharacterSetAsString: getCharacterSetAsString,
|
||||
getUnicodeRangeFromChar: getUnicodeRangeFromChar
|
||||
};
|
||||
};
|
||||
|
||||
module.exports = new FontAnalyzer();
|
||||
@@ -16,12 +16,12 @@ var GzipCompressor = function() {
|
||||
function gzipUncompressedFile(entry) {
|
||||
var deferred = Q.defer();
|
||||
|
||||
if (entryTypeCanBeGzipped(entry) && entry.weightCheck && !entry.weightCheck.isCompressed && entry.weightCheck.body) {
|
||||
if (entryTypeCanBeGzipped(entry) && entry.weightCheck && !entry.weightCheck.isCompressed && entry.weightCheck.bodyBuffer) {
|
||||
debug('Compression missing, trying to gzip file %s', entry.url);
|
||||
|
||||
var uncompressedSize = entry.weightCheck.uncompressedSize;
|
||||
|
||||
zlib.gzip(new Buffer(entry.weightCheck.body, 'utf8'), function(err, buffer) {
|
||||
zlib.gzip(entry.weightCheck.bodyBuffer, function(err, buffer) {
|
||||
if (err) {
|
||||
debug('Could not compress uncompressed file with gzip');
|
||||
debug(err);
|
||||
|
||||
@@ -14,7 +14,7 @@ var ImageOptimizer = function() {
|
||||
function optimizeImage(entry) {
|
||||
var deferred = Q.defer();
|
||||
|
||||
if (!entry.weightCheck || !entry.weightCheck.body) {
|
||||
if (!entry.weightCheck || !entry.weightCheck.bodyBuffer) {
|
||||
// No valid file available
|
||||
deferred.resolve(entry);
|
||||
return deferred.promise;
|
||||
@@ -28,7 +28,7 @@ var ImageOptimizer = function() {
|
||||
debug('File is a JPEG');
|
||||
|
||||
// Starting softly with a lossless compression
|
||||
return compressJpegLosslessly(new Buffer(entry.weightCheck.body, 'binary'))
|
||||
return compressJpegLosslessly(entry.weightCheck.bodyBuffer)
|
||||
|
||||
.then(function(newFile) {
|
||||
if (!newFile) {
|
||||
@@ -48,7 +48,7 @@ var ImageOptimizer = function() {
|
||||
|
||||
|
||||
// Now let's compress lossy to MAX_JPEG_QUALITY
|
||||
return compressJpegLossly(new Buffer(entry.weightCheck.body, 'binary'));
|
||||
return compressJpegLossly(entry.weightCheck.bodyBuffer);
|
||||
})
|
||||
|
||||
.then(function(newFile) {
|
||||
@@ -86,7 +86,7 @@ var ImageOptimizer = function() {
|
||||
debug('File is a PNG');
|
||||
|
||||
// Starting softly with a lossless compression
|
||||
return compressPngLosslessly(new Buffer(entry.weightCheck.body, 'binary'))
|
||||
return compressPngLosslessly(entry.weightCheck.bodyBuffer)
|
||||
|
||||
.then(function(newFile) {
|
||||
if (!newFile) {
|
||||
@@ -120,7 +120,7 @@ var ImageOptimizer = function() {
|
||||
debug('File is an SVG');
|
||||
|
||||
// Starting softly with a lossless compression
|
||||
return compressSvgLosslessly(new Buffer(entry.weightCheck.body, 'utf8'))
|
||||
return compressSvgLosslessly(entry.weightCheck.bodyBuffer)
|
||||
|
||||
.then(function(newFile) {
|
||||
if (!newFile) {
|
||||
|
||||
@@ -18,6 +18,7 @@ var imageOptimizer = require('./imageOptimizer');
|
||||
var fileMinifier = require('./fileMinifier');
|
||||
var gzipCompressor = require('./gzipCompressor');
|
||||
var contentTypeChecker = require('./contentTypeChecker');
|
||||
var fontAnalyzer = require('./fontAnalyzer');
|
||||
|
||||
|
||||
var Redownload = function() {
|
||||
@@ -44,6 +45,12 @@ var Redownload = function() {
|
||||
};
|
||||
}
|
||||
|
||||
// Prevent a bug with the font analyzer on empty pages
|
||||
var differentCharacters = '';
|
||||
if (data.toolsResults.phantomas.offenders.differentCharacters && data.toolsResults.phantomas.offenders.differentCharacters.length > 0) {
|
||||
differentCharacters = data.toolsResults.phantomas.offenders.differentCharacters[0];
|
||||
}
|
||||
|
||||
// Transform every request into a download function with a callback when done
|
||||
var redownloadList = requestsList.map(function(entry) {
|
||||
return function(callback) {
|
||||
@@ -58,8 +65,12 @@ var Redownload = function() {
|
||||
|
||||
.then(gzipCompressor.compressFile)
|
||||
|
||||
.then(function(entry) {
|
||||
return fontAnalyzer.analyzeFont(entry, differentCharacters);
|
||||
})
|
||||
|
||||
.then(function(newEntry) {
|
||||
debug('File %s - Redownloaded, optimized, minified, compressed: done', entry.url);
|
||||
debug('File %s - Redownloaded, optimized, minified, compressed, analyzed: done', entry.url);
|
||||
callback(null, newEntry);
|
||||
})
|
||||
|
||||
@@ -134,6 +145,18 @@ var Redownload = function() {
|
||||
offenders.identicalFiles = listIdenticalFiles(results);
|
||||
metrics.identicalFiles = offenders.identicalFiles.avoidableRequests;
|
||||
|
||||
// Fonts count
|
||||
offenders.fontsCount = listFonts(results);
|
||||
metrics.fontsCount = offenders.fontsCount.count;
|
||||
|
||||
// Heavy fonts
|
||||
offenders.heavyFonts = listHeavyFonts(results);
|
||||
metrics.heavyFonts = offenders.heavyFonts.totalGain;
|
||||
|
||||
// Unused Unicode ranges
|
||||
offenders.unusedUnicodeRanges = listUnusedUnicodeRanges(results);
|
||||
metrics.unusedUnicodeRanges = offenders.unusedUnicodeRanges.count;
|
||||
|
||||
|
||||
data.toolsResults.redownload = {
|
||||
metrics: metrics,
|
||||
@@ -381,7 +404,7 @@ var Redownload = function() {
|
||||
var avoidableRequestsCount = 0;
|
||||
|
||||
requests.forEach(function(req) {
|
||||
var requestHash = md5(req.weightCheck.body);
|
||||
var requestHash = md5(req.weightCheck.bodyBuffer);
|
||||
|
||||
// Try to exclude tracking pixels
|
||||
if (req.weightCheck.bodySize < 80 && req.type === 'image') {
|
||||
@@ -414,6 +437,126 @@ var Redownload = function() {
|
||||
};
|
||||
}
|
||||
|
||||
function listFonts(requests) {
|
||||
var list = [];
|
||||
|
||||
requests.forEach(function(req) {
|
||||
if (req.isWebFont) {
|
||||
list.push({
|
||||
url: req.url,
|
||||
size: req.weightCheck.bodySize
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
return {
|
||||
count: list.length,
|
||||
list: list
|
||||
};
|
||||
}
|
||||
|
||||
function listHeavyFonts(requests) {
|
||||
var list = [];
|
||||
var totalGain = 0;
|
||||
var heavyFontsCount = 0;
|
||||
var MAX_FONT_WEIGHT = 40 * 1024;
|
||||
|
||||
requests.forEach(function(req) {
|
||||
if (req.isWebFont && req.fontMetrics) {
|
||||
list.push({
|
||||
url: req.url,
|
||||
weight: req.weightCheck.bodySize,
|
||||
numGlyphs: req.fontMetrics.numGlyphs,
|
||||
averageGlyphComplexity: req.fontMetrics.averageGlyphComplexity
|
||||
});
|
||||
if (req.weightCheck.bodySize > MAX_FONT_WEIGHT) {
|
||||
totalGain += req.weightCheck.bodySize - MAX_FONT_WEIGHT;
|
||||
heavyFontsCount ++;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
return {
|
||||
count: heavyFontsCount,
|
||||
fonts: list,
|
||||
totalGain: totalGain
|
||||
};
|
||||
}
|
||||
|
||||
function listUnusedUnicodeRanges(requests) {
|
||||
var list = [];
|
||||
var unusedUnicodeRanges = 0;
|
||||
|
||||
requests.forEach(function(req) {
|
||||
if (req.isWebFont && req.fontMetrics && req.fontMetrics.unicodeRanges) {
|
||||
var ranges = [];
|
||||
var others = null;
|
||||
var rangeNames = Object.keys(req.fontMetrics.unicodeRanges);
|
||||
|
||||
rangeNames.forEach(function(rangeName) {
|
||||
var range = req.fontMetrics.unicodeRanges[rangeName];
|
||||
|
||||
// Exclude "Others"
|
||||
if (rangeName === 'Others') {
|
||||
if (range.numGlyphsInCommonWithPageContent === 0 && range.charset.length > 50) {
|
||||
range.underused = true;
|
||||
unusedUnicodeRanges ++;
|
||||
}
|
||||
|
||||
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 ++;
|
||||
}
|
||||
|
||||
ranges.push(range);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// Detect if it's a icons font : if more than 90% of the icons are
|
||||
// in the "Others", it looks like one.
|
||||
if (others && others.charset.length / req.fontMetrics.numGlyphs > 0.9) {
|
||||
|
||||
list.push({
|
||||
url: req.url,
|
||||
weight: req.weightCheck.bodySize,
|
||||
isIconFont: true,
|
||||
glyphs: req.fontMetrics.numGlyphs,
|
||||
numGlyphsInCommonWithPageContent: req.fontMetrics.numGlyphsInCommonWithPageContent
|
||||
});
|
||||
|
||||
// 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 ++;
|
||||
}
|
||||
|
||||
// Not an icons font
|
||||
} else {
|
||||
if (others) {
|
||||
// Insert back "Others" at the end of the list
|
||||
ranges.push(others);
|
||||
}
|
||||
|
||||
list.push({
|
||||
url: req.url,
|
||||
weight: req.weightCheck.bodySize,
|
||||
isIconFont: false,
|
||||
unicodeRanges: ranges
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
return {
|
||||
count: unusedUnicodeRanges,
|
||||
fonts: list
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
function redownloadEntry(entry, httpAuth) {
|
||||
var deferred = Q.defer();
|
||||
@@ -521,7 +664,7 @@ var Redownload = function() {
|
||||
|
||||
var uncompressedSize = 0; // size after uncompression
|
||||
var bodySize = 0; // bytes size over the wire
|
||||
var body = ''; // plain text body (after uncompressing gzip/deflate)
|
||||
var bodyChunks = []; // an array of buffers
|
||||
var isCompressed = false;
|
||||
|
||||
function tally() {
|
||||
@@ -531,8 +674,10 @@ var Redownload = function() {
|
||||
return;
|
||||
}
|
||||
|
||||
var body = Buffer.concat(bodyChunks);
|
||||
|
||||
var result = {
|
||||
body: body,
|
||||
bodyBuffer: body,
|
||||
headersSize: Buffer.byteLength(rawHeaders, 'utf8'),
|
||||
bodySize: bodySize,
|
||||
isCompressed: isCompressed,
|
||||
@@ -548,7 +693,8 @@ var Redownload = function() {
|
||||
var gzip = zlib.createGunzip();
|
||||
|
||||
gzip.on('data', function (data) {
|
||||
body += data;
|
||||
|
||||
bodyChunks.push(data);
|
||||
uncompressedSize += data.length;
|
||||
}).on('end', function () {
|
||||
isCompressed = true;
|
||||
@@ -570,7 +716,7 @@ var Redownload = function() {
|
||||
var deflate = zlib.createInflate();
|
||||
|
||||
deflate.on('data', function (data) {
|
||||
body += data;
|
||||
bodyChunks.push(data);
|
||||
uncompressedSize += data.length;
|
||||
}).on('end', function () {
|
||||
isCompressed = true;
|
||||
@@ -587,12 +733,8 @@ var Redownload = function() {
|
||||
|
||||
break;
|
||||
default:
|
||||
if (contentType === 'image/jpeg' || contentType === 'image/png') {
|
||||
res.setEncoding('binary');
|
||||
}
|
||||
|
||||
res.on('data', function (data) {
|
||||
body += data;
|
||||
bodyChunks.push(data);
|
||||
uncompressedSize += data.length;
|
||||
bodySize += data.length;
|
||||
}).on('end', function () {
|
||||
|
||||
Reference in New Issue
Block a user