Compare minification with brotli instead of gzip

front/src/views/rule.html

@@ -311,12 +311,14 @@
                     <div><a href="{{image.url}}" target="_blank"><img ng-src="{{image.url | https}}" class="checker" /></a></div>
                 </div>
                 <div>
-                    <p ng-if="!image.afterGzipCompression">Current weight: {{image.original | bytes}}</p>
-                    <p ng-if="image.afterGzipCompression">Current weight: {{image.original | bytes}} ({{image.afterGzipCompression | bytes}} gzipped)</p>
-                    <p ng-if="image.lossless && image.afterOptimizationAndGzipCompression">With a lossless optimization:<br/>{{image.afterOptimizationAndGzipCompression | bytes}} gzipped (<b>-{{image.gain | bytes}}</b> gzipped)</p>
-                    <p ng-if="image.lossless && !image.afterOptimizationAndGzipCompression">With a lossless optimization:<br/>{{image.lossless | bytes}} <span ng-if="!image.lossy">(<b>-{{image.gain | bytes}}</b>)</span></p>
-                    <p ng-if="image.lossy && image.afterOptimizationAndGzipCompression">With a lossy optimization:<br/>{{image.afterOptimizationAndGzipCompression | bytes}} gzipped (<b>-{{image.gain | bytes}} gzipped</b>)</p>
-                    <p ng-if="image.lossy && !image.afterOptimizationAndGzipCompression">With a lossy optimization:<br/>{{image.lossy | bytes}} (<b>-{{image.gain | bytes}}</b>)</p>
+                    <p ng-if="!image.isCompressible || image.isCompressed">Current weight: {{image.originalWeigth | bytes}}</p>
+                    <p ng-if="image.isCompressible && !image.isCompressed">Current weight: {{image.originalWeigth | bytes}} ({{image.originalCompressedWeight | bytes}} compressed)</p>
+
+                    <p ng-if="image.lossless && image.isCompressible">With a lossless optimization:<br/>{{image.afterOptimizationAndCompression | bytes}} compressed (<b>-{{image.gain | bytes}}</b> compressed)</p>
+                    <p ng-if="image.lossless && !image.isCompressible">With a lossless optimization:<br/>{{image.lossless | bytes}} <span ng-if="!image.lossy">(<b>-{{image.gain | bytes}}</b>)</span></p>
+
+                    <p ng-if="image.lossy && image.isCompressible">With a lossy optimization:<br/>{{image.afterOptimizationAndCompression | bytes}} compressed (<b>-{{image.gain | bytes}} compressed</b>)</p>
+                    <p ng-if="image.lossy && !image.isCompressible">With a lossy optimization:<br/>{{image.lossy | bytes}} (<b>-{{image.gain | bytes}}</b>)</p>
                 </div>
             </div>
         </div>
@@ -359,12 +361,12 @@
             </div>
             <div ng-repeat="file in rule.offendersObj.list.files | orderBy:'-gain'">
                 <div>
-                    <url-link url="file.url" max-length="70"></url-link>
+                    <url-link url="file.url" max-length="60"></url-link>
                 </div>
-                <div ng-if="!file.afterGzipCompression">{{file.original | bytes}} (gzipped)</div>
-                <div ng-if="file.afterGzipCompression">{{file.original | bytes}} ({{file.afterGzipCompression | bytes}} gzipped)</div>
-                <div ng-if="!file.afterGzipCompression">{{file.afterOptimizationAndGzipCompression | bytes}} (gzipped)</div>
-                <div ng-if="file.afterGzipCompression">{{file.optimized | bytes}} ({{file.afterOptimizationAndGzipCompression | bytes}} gzipped)</div>
+                <div ng-if="file.isCompressed">{{file.originalWeigth | bytes}} (compressed)</div>
+                <div ng-if="!file.isCompressed">{{file.originalWeigth | bytes}} ({{file.originalCompressedWeight | bytes}} compressed)</div>
+                <div ng-if="file.isCompressed">{{file.afterOptimizationAndCompression | bytes}} (compressed)</div>
+                <div ng-if="!file.isCompressed">{{file.optimized | bytes}} ({{file.afterOptimizationAndCompression | bytes}} compressed)</div>
                 <div><b>-{{file.gain | bytes}}</b></div>
             </div>
         </div>

lib/metadata/policies.js

@@ -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

@@ -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
                     });