Update README (#19)

Add gzip comparison metrics
sensiolabs · Oct 30, 2024 · 8eb1e7b · 8eb1e7b
1 parent d91f58c
commit 8eb1e7b
Show file tree

Hide file tree

Showing 3 changed files with 87 additions and 30 deletions.
diff --git a/README.md b/README.md
@@ -21,39 +21,67 @@ SensioLabs Minify Bundle integrates [Minify](https://github.com/tdewolff/minify)
 
 ### Asset Minifier
 
- ✅ Minify `CSS` and `JS` files, remove whitespace, comments, and more..
+✅ Minify `CSS` and `JS` files, remove whitespace, comments, and more..
 
- 🌍🌍 Reduces the size of your assets by up to `70%` (see metrics below).  
+🌍 Reduces the size of your assets by up to `70%` (see metrics below).  
 
-🚀🚀🚀 Improves the loading time of your website, and the `user experience`.     
+🚀 Improves the loading time of your website, and the `user experience`.     
 
 ### Asset Mapper
 
 🎯 Automatically `minify` assets during the build process.   
 
-📦📦 Stores minified assets in the Symfony `cache`. 
+📦 Stores minified assets in the Symfony `cache`. 
 
-🌿🌿🌿 Download the Minify binary `automatically` from Github.
+🌿 Download the Minify binary `automatically` from Github.
 
 ## Minification
 
 ### JavaScript
 
-| Asset                  | Before |  After | Diff | Compression                              |  Time |
-|------------------------|-------:|-------:|-----:|------------------------------------------|------:|
-| [Autocomplete.js][1]   |  20 kB | 9.2 kB | -54% | ⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩 |  8 ms |
-| [Bootstrap.js][3]      | 145 kB |  62 kB | -57% | ⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩 | 10 ms |
-| [Video.js][5]          | 2.3 MB | 0.7 MB | -71% | ⬜️⬜️⬜️⬜️⬜️⬜️🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩 | 42 ms |
-| [w3c.org js][7]        |  44 kB |  19 kB | -57% | ⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩🟩 |  6 ms |
+| File                 |  Original |  Minified |  Ratio |   Gain |          Compression |  Time |
+|----------------------|----------:|----------:|-------:|-------:|---------------------:|------:|
+| [autocomplete.js][1] |  19.88 KB |   9.17 KB | 46.13% | 53.87% | 🟩🟩🟩🟩🟩⬜️⬜️⬜️⬜️⬜️ |  8 ms |
+| [bootstrap.js][3]    | 145.40 KB |  62.20 KB | 42.76% | 57.24% | 🟩🟩🟩🟩🟩🟩⬜️⬜️⬜️⬜️ | 10 ms |
+| [video.js][5]        |   2.35 MB | 690.10 KB | 29.33% | 70.67% | 🟩🟩🟩🟩🟩🟩🟩⬜️⬜️⬜️ | 42 ms |
+| [w3c.org js][7]      |  43.39 KB |  19.23 KB | 44.34% | 55.66% | 🟩🟩🟩🟩🟩🟩⬜️⬜️⬜️⬜️ |  6 ms |
+
+Even gzip compression is more efficient on minified assets (see metrics below).
+
+<details>
+
+<summary> See transfert comparaison (gzip) </summary>
+
+| File            |   Original |  Minified |  Ratio |   Gain |          Compression |
+|-----------------|-----------:|----------:|-------:|-------:|---------------------:|
+| autoComplete.js |    5.59 KB |   2.68 KB | 47.96% | 52.04% | 🟩🟩🟩🟩🟩⬜️⬜️⬜️⬜️⬜️ |
+| bootstrap.js    |   29.92 KB |  12.58 KB | 42.06% | 57.94% | 🟩🟩🟩🟩🟩🟩⬜️⬜️⬜️⬜️ |
+| video.js        |  538.83 KB | 202.62 KB | 37.61% | 62.39% | 🟩🟩🟩🟩🟩🟩⬜️⬜️⬜️⬜️ |
+| w3c.org.js      |   10.44 KB |   5.89 KB | 56.45% | 43.55% | 🟩🟩🟩🟩⬜️⬜️⬜️⬜️⬜️⬜️ |
+
+</details>
 
 ### CSS
 
-| Asset                 | Before |  After | Diff | Compression                               | Time |
-|-----------------------|-------:|-------:|-----:|-------------------------------------------|-----:|
-| [Autocomplete.css][2] | 3.1 kB | 2.5 kB | -19% | ⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️🟩🟩🟩🟩🟩 | 2 ms |
-| [Bootstrap.css][4]    | 281 kB | 232 kB | -18% | ⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️🟩🟩🟩🟩 | 9 ms |
-| [Video-js.css][6]     |  53 kB |  47 kB | -12% | ⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜⬜️⬜️⬜️⬜️⬜️⬜️⬜️️🟩🟩 | 4 ms |
-| [w3c.org css][8]      | 111 kB |  70 kB | -37% | ⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️🟩🟩🟩🟩🟩🟩🟩🟩 | 5 ms |
+| File                  |  Original |  Minified |  Ratio |   Gain |          Compression | Time |
+|-----------------------|----------:|----------:|-------:|-------:|---------------------:|-----:|
+| [autocomplete.css][2] |   3.09 KB |   2.51 KB | 81.33% | 18.67% | 🟩🟩⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️ | 2 ms |
+| [bootstrap.css][4]    | 281.05 KB | 231.89 KB | 82.51% | 17.49% | 🟩🟩⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️ | 9 ms |
+| [video-js.css][6]     |  53.37 KB |  47.06 KB | 88.24% | 11.76% | 🟩🟩⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️ | 4 ms |
+| [w3c.org css][8]      | 111.44 KB |  70.37 KB | 63.17% | 36.83% | 🟩🟩🟩🟩⬜️⬜️⬜️⬜️⬜️⬜️ | 5 ms |
+
+<details>
+
+<summary> See transfert comparaison (gzip) </summary>
+
+| File             |   Original |  Minified |  Ratio |   Gain |          Compression |
+|------------------|-----------:|----------:|-------:|-------:|---------------------:|
+| autoComplete.css |    1.08 KB |   0.89 KB | 82.41% | 17.59% | 🟩🟩⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️ |
+| bootstrap.css    |   33.56 KB |  28.94 KB | 86.08% | 13.92% | 🟩⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️ |
+| video-js.css     |   13.14 KB |  12.72 KB | 96.79% |  3.21% | 🟩⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️ |
+| w3c.org.css      |   21.98 KB |  13.65 KB | 62.13% | 37.87% | 🟩🟩🟩🟩⬜️⬜️⬜️⬜️⬜️⬜️ |
+
+</details>
 
 ## Installation
 
@@ -71,6 +99,10 @@ composer require sensiolabs/minify-bundle
 
 ### Without Symfony Flex
 
+<details>
+
+<summary> How to install without Symfony Flex</summary>
+
 #### Step 1: Download the Bundle
 
 Open a command console, enter your project directory and execute the
@@ -97,6 +129,8 @@ return [
 Depending on your deployment process, you might want to enable the 
 bundle only in the desired environment(s).
 
+</details>
+
 ## Usage
 
 If you use [AssetMapper][9], run the following command to minify all the assets:
@@ -130,7 +164,7 @@ php bin/console minify:asset css/main.css css/main.min.css
 
 ## Configuration
 
-### AssetMapper Settings
+### AssetMapper
 
 ```yaml
 # config/packages/sensiolabs_minify.yaml
@@ -154,6 +188,8 @@ sensiolabs_minify:
 
 ### Minify Binary
 
+#### Local binary
+
 The minification is performed by a binary file that can be installed on your
 computer/server or downloaded automatically by the bundle. This is the default
 configuration used by the bundle:

diff --git a/doc/bench.md b/doc/bench.md
@@ -1,6 +1,8 @@
 # Benchmarks
 
-## Download files
+## Setup
+
+### Download files
 
 ```
 curl -O https://cdn.jsdelivr.net/npm/@tarekraafat/[email protected]/dist/autoComplete.js
@@ -13,9 +15,36 @@ curl -O https://cdn.jsdelivr.net/npm/[email protected]/dist/video-js.css
 curl -O https://raw.githubusercontent.com/w3c/w3c-website-templates-bundle/refs/heads/main/public/dist/assets/styles/core.css
 ```
 
-
-## Minify files
+### Minify files
 
 ```
-minify -s -o min/ * 
+minify -s -o minify/ * 
 ```
+
+## Results
+
+### Size comparison
+
+| File             |  Original |  Minified |  Ratio |   Gain |          Compression |
+|------------------|----------:|----------:|-------:|-------:|---------------------:|
+| autoComplete.css |   3.09 KB |   2.51 KB | 81.33% | 18.67% | 🟩🟩⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️ |
+| autoComplete.js  |  19.88 KB |   9.17 KB | 46.13% | 53.87% | 🟩🟩🟩🟩🟩⬜️⬜️⬜️⬜️⬜️ |
+| bootstrap.css    | 281.05 KB | 231.89 KB | 82.51% | 17.49% | 🟩🟩⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️ |
+| bootstrap.js     | 145.40 KB |  62.20 KB | 42.76% | 57.24% | 🟩🟩🟩🟩🟩🟩⬜️⬜️⬜️⬜️ |
+| core.css         | 111.44 KB |  70.37 KB | 63.17% | 36.83% | 🟩🟩🟩🟩⬜️⬜️⬜️⬜️⬜️⬜️ |
+| main.js          |  43.39 KB |  19.23 KB | 44.34% | 55.66% | 🟩🟩🟩🟩🟩🟩⬜️⬜️⬜️⬜️ |
+| video-js.css     |  53.37 KB |  47.06 KB | 88.24% | 11.76% | 🟩🟩⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️ |
+| video.js         |   2.35 MB | 690.10 KB | 29.33% | 70.67% | 🟩🟩🟩🟩🟩🟩🟩⬜️⬜️⬜️ | 
+
+### Transfert comparison (gzip)
+
+| File             |   Original |  Minified |  Ratio |   Gain |          Compression |
+|------------------|-----------:|----------:|-------:|-------:|---------------------:|
+| autoComplete.css |    1.08 KB |   0.89 KB | 82.41% | 17.59% | 🟩🟩⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️ |
+| autoComplete.js  |    5.59 KB |   2.68 KB | 47.96% | 52.04% | 🟩🟩🟩🟩🟩⬜️⬜️⬜️⬜️⬜️ |
+| bootstrap.css    |   33.56 KB |  28.94 KB | 86.08% | 13.92% | 🟩⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️ |
+| bootstrap.js     |   29.92 KB |  12.58 KB | 42.06% | 57.94% | 🟩🟩🟩🟩🟩🟩⬜️⬜️⬜️⬜️ |
+| core.css         |   21.98 KB |  13.65 KB | 62.13% | 37.87% | 🟩🟩🟩🟩⬜️⬜️⬜️⬜️⬜️⬜️ |
+| main.js          |   10.44 KB |   5.89 KB | 56.45% | 43.55% | 🟩🟩🟩🟩⬜️⬜️⬜️⬜️⬜️⬜️ |
+| video-js.css     |   13.14 KB |  12.72 KB | 96.79% |  3.21% | 🟩⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️⬜️ |
+| video.js         |  538.83 KB | 202.62 KB | 37.61% | 62.39% | 🟩🟩🟩🟩🟩🟩⬜️⬜️⬜️⬜️ |
diff --git a/doc/index.md b/doc/index.md