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
front/src/views/rule.html
+13 -11
View File
@@ -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
+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
});