WEBDIENSTE/YellowLabTools
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare minification with brotli instead of gzip

Browse Source
This commit is contained in:
Gaël Métais
2020-12-22 00:00:44 +01:00
parent 6b58b72028
commit 8f06ceaedd
3 changed files with 78 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/metadata/policies.js
+3 -3
View File
@@ -770,7 +770,7 @@ var policies = {
"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>",
"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>",
"isOkThreshold": 20480,
"isBadThreshold": 204800,
"isAbnormalThreshold": 307200,
@@ -788,8 +788,8 @@ var policies = {
},
"compression": {
"tool": "redownload",
"label": "Gzip/Brotli compression",
"message": "<p>Measures the number of bytes that could be saved by compressing textual files.</p><p>Gzip is a good old weight reducer. But Brotli is a new-generation compression tool and it gives better results. All major server systems are now compatible with Brotli.</p><p>Note that compressing 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 compressed.</p>",
"label": "Brotli compression",
"message": "<p>Measures the number of bytes that could be saved by compressing textual files.</p><p>Gzip is a good old algorithm that offers great improvements. But Brotli is a new-generation algorithm and provides even better results. All major server systems are now compatible with Brotli.</p><p>Note that compressing 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 compressed.</p>",
"isOkThreshold": 20480,
"isBadThreshold": 204800,
"isAbnormalThreshold": 409600,
lib/tools/redownload/redownload.js
+62 -9
View File
@@ -340,9 +340,34 @@ var Redownload = function() {
};
requests.forEach(function(req) {
if (req.weightCheck.bodySize > 0 && imageOptimizer.entryTypeCanBeOptimized(req) && req.weightCheck.isOptimized === false) {
var before = req.weightCheck.afterGzipCompression || req.weightCheck.bodySize;
var after = req.weightCheck.afterOptimizationAndGzipCompression || req.weightCheck.optimized;
var before, after;
if (req.weightCheck.isCompressed === true) {
// The resource is compressed
before = req.weightCheck.bodySize;
if (req.weightCheck.compressionTool === 'brotli') {
after = req.weightCheck.afterOptimizationAndBrotliCompression;
} else {
after = req.weightCheck.afterOptimizationAndGzipCompression;
}
} else if (req.weightCheck.afterBrotliCompression) {
// The resource is not compressed but should be
before = req.weightCheck.afterBrotliCompression;
after = req.weightCheck.afterOptimizationAndBrotliCompression;
} else {
// The resource is not compressed but is not subject to compression
before = req.weightCheck.bodySize;
after = req.weightCheck.optimized;
}
var gain = before - after;
if (gain > 200) {
@@ -350,10 +375,11 @@ var Redownload = function() {
results.images.push({
url: req.url,
original: req.weightCheck.bodySize,
originalWeigth: req.weightCheck.bodySize,
isCompressible: (req.weightCheck.afterBrotliCompression > 0),
isCompressed: req.weightCheck.isCompressed,
afterGzipCompression: req.weightCheck.afterGzipCompression,
afterOptimizationAndGzipCompression: req.weightCheck.afterOptimizationAndGzipCompression,
originalCompressedWeight: before,
afterOptimizationAndCompression: after,
lossless: req.weightCheck.lossless,
lossy: req.weightCheck.lossy,
gain: gain
@@ -361,7 +387,6 @@ var Redownload = function() {
}
}
});
return results;
}
@@ -405,15 +430,43 @@ var Redownload = function() {
var after = req.weightCheck.afterOptimizationAndGzipCompression || req.weightCheck.optimized;
var gain = before - after;
var before, after;
if (req.weightCheck.isCompressed === true) {
// The resource is compressed
before = req.weightCheck.bodySize;
if (req.weightCheck.compressionTool === 'brotli') {
after = req.weightCheck.afterOptimizationAndBrotliCompression;
} else {
after = req.weightCheck.afterOptimizationAndGzipCompression;
}
} else if (req.weightCheck.afterBrotliCompression) {
// The resource is not compressed but should be
before = req.weightCheck.afterBrotliCompression;
after = req.weightCheck.afterOptimizationAndBrotliCompression;
} else {
// The resource is not compressed but is not subject to compression
before = req.weightCheck.bodySize;
after = req.weightCheck.optimized;
}
var gain = before - after;
if (gain > 200) {
results.totalGain += gain;
results.files.push({
url: req.url,
original: req.weightCheck.bodySize,
originalWeigth: req.weightCheck.bodySize,
isCompressible: (req.weightCheck.afterBrotliCompression > 0),
isCompressed: req.weightCheck.isCompressed,
afterGzipCompression: req.weightCheck.afterGzipCompression,
afterOptimizationAndGzipCompression: req.weightCheck.afterOptimizationAndGzipCompression,
originalCompressedWeight: before,
afterOptimizationAndCompression: after,
optimized: req.weightCheck.optimized,
gain: gain
});