From 8f06ceaeddd87f9608dbfdb26117d5197d622a2e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABl=20M=C3=A9tais?= Date: Tue, 22 Dec 2020 00:00:44 +0100 Subject: [PATCH] Compare minification with brotli instead of gzip --- front/src/views/rule.html | 24 +++++----- lib/metadata/policies.js | 6 +-- lib/tools/redownload/redownload.js | 71 ++++++++++++++++++++++++++---- 3 files changed, 78 insertions(+), 23 deletions(-) diff --git a/front/src/views/rule.html b/front/src/views/rule.html index 19e653b..d2c8c77 100644 --- a/front/src/views/rule.html +++ b/front/src/views/rule.html @@ -311,12 +311,14 @@
-

Current weight: {{image.original | bytes}}

-

Current weight: {{image.original | bytes}} ({{image.afterGzipCompression | bytes}} gzipped)

-

With a lossless optimization:
{{image.afterOptimizationAndGzipCompression | bytes}} gzipped (-{{image.gain | bytes}} gzipped)

-

With a lossless optimization:
{{image.lossless | bytes}} (-{{image.gain | bytes}})

-

With a lossy optimization:
{{image.afterOptimizationAndGzipCompression | bytes}} gzipped (-{{image.gain | bytes}} gzipped)

-

With a lossy optimization:
{{image.lossy | bytes}} (-{{image.gain | bytes}})

+

Current weight: {{image.originalWeigth | bytes}}

+

Current weight: {{image.originalWeigth | bytes}} ({{image.originalCompressedWeight | bytes}} compressed)

+ +

With a lossless optimization:
{{image.afterOptimizationAndCompression | bytes}} compressed (-{{image.gain | bytes}} compressed)

+

With a lossless optimization:
{{image.lossless | bytes}} (-{{image.gain | bytes}})

+ +

With a lossy optimization:
{{image.afterOptimizationAndCompression | bytes}} compressed (-{{image.gain | bytes}} compressed)

+

With a lossy optimization:
{{image.lossy | bytes}} (-{{image.gain | bytes}})

@@ -359,12 +361,12 @@
- +
-
{{file.original | bytes}} (gzipped)
-
{{file.original | bytes}} ({{file.afterGzipCompression | bytes}} gzipped)
-
{{file.afterOptimizationAndGzipCompression | bytes}} (gzipped)
-
{{file.optimized | bytes}} ({{file.afterOptimizationAndGzipCompression | bytes}} gzipped)
+
{{file.originalWeigth | bytes}} (compressed)
+
{{file.originalWeigth | bytes}} ({{file.originalCompressedWeight | bytes}} compressed)
+
{{file.afterOptimizationAndCompression | bytes}} (compressed)
+
{{file.optimized | bytes}} ({{file.afterOptimizationAndCompression | bytes}} compressed)
-{{file.gain | bytes}}
diff --git a/lib/metadata/policies.js b/lib/metadata/policies.js index 4ab47be..358b748 100644 --- a/lib/metadata/policies.js +++ b/lib/metadata/policies.js @@ -770,7 +770,7 @@ var policies = { "imageOptimization": { "tool": "redownload", "label": "Image optimization", - "message": "

This metric measures the number of bytes that could be saved by optimizing images.

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 Kraken.io or the excellent ImageOptim on Mac. For SVG images, you can use SVGOMG

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!

", + "message": "

This metric measures the number of bytes that could be saved by optimizing images.

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 Kraken.io or the excellent ImageOptim on Mac. For SVG images, you can use SVGOMG.

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!

", "isOkThreshold": 20480, "isBadThreshold": 204800, "isAbnormalThreshold": 307200, @@ -788,8 +788,8 @@ var policies = { }, "compression": { "tool": "redownload", - "label": "Gzip/Brotli compression", - "message": "

Measures the number of bytes that could be saved by compressing textual files.

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.

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. Here is a list of Content-Types that should be compressed.

", + "label": "Brotli compression", + "message": "

Measures the number of bytes that could be saved by compressing textual files.

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.

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. Here is a list of Content-Types that should be compressed.

", "isOkThreshold": 20480, "isBadThreshold": 204800, "isAbnormalThreshold": 409600, diff --git a/lib/tools/redownload/redownload.js b/lib/tools/redownload/redownload.js index 89ceff9..ee07e10 100644 --- a/lib/tools/redownload/redownload.js +++ b/lib/tools/redownload/redownload.js @@ -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 });