The <file-size> Web Component
Keep a watch on how many bytes you send down the wire,
when you deliver Web Components.
<!-- Load the <file-size> Web Component -->
<script src="https://file-size.github.io/element.js"></script>
<!-- Use the <file-size> Web Component -->
<file-size src="https://file-size.github.io/element.js"></file-size>
✔️ displays the file content-length
in Bytes
(only if the server allows CORS requests and provides the header)
✔️ Displays a thermal image, showing how well the file is GZIP compressed
- (dark)blue = repetitive strings, optimal compression
- red = can't be compressed, one Byte used to encode one Byte
✔️ alt + click
the IMG opens original source file in another Browser Tab
Optional <file-size> attributes:
-
gz
- open GZthermal image by default<file-size gz src="https://file-size.github.io/element.js"></filesize>
-
max=[bytes]
- green/red display of filecontent-length
<file-size max="64000" src="https://file-size.github.io/element.js"></filesize>
default value is 48000 Bytes because the first computer I programmed in 1979, had 48 kiloBytes of RAM; and gzthermal errors on larger files.
Tips for better compression
🤏 Online tools that can help
https://try.terser.org/ - minify your code
https://dafrok.github.io/gzip-size-online/ - paste your minified code
🤏 Look for repereperepetitions
DRY is great from a Code Maintenance and Repetitive Strain Injury Point of View
But when you deliver, you want as many repetitions as possible.
this.setAttribute("one","ONE");
this.setAttribute("two","TWO");
this.setAttribute("three","THREE");
this.setAttribute("four","FOUR");
Compresses better (and is faster!) than:
const setAttr = (x,y) => this.setAttribute(x,y);
setAttr("one","ONE");
setAttr("two","TWO");
setAttr("three","THREE");
setAttr("four","FOUR");
Sure, the minified file is smaller, but the compressed file is larger
But... compression is done on the whole file, so your mileage may vary!
🤏 Name you methods well
If you already have the default boilerplate code
customElements.define("file-size", class extends HTMLElement {
connectedCallback(){}
);
Then try to re-use those strings in your method names and properties
-
defineSize
could be better thaninitSize
-
extendsFile
could be better thanaddtoFile
Again, compression is done on the whole file, so your mileage may vary!
🤏 Get rid of CAPITALS
Not because they are CAPITALS, but because CAPITALS are less used in code.
Here is an example from Lit, where 7 Bytes are used to encode 7 Uppercase characters.
Changing them to lowercase would most likely save 2 or 3 bytes in this code fragment, and more in the whole file.
🤏 Use onevent listeners
prepend on to all default Events.
details.ontoggle = (e) => details.open && gzthermal();
does the same as:
details.addEventListener("toggle", (e) => details.open && gzthermal());
Note the difference; onevent sets/overwrites a single handler; addEventListener
allows for multiple handlers.
🤏 Be careful with Strings
let html = `
<div>
content
</div>
`;
looks great in your IDE, but the minified and GZipped files will contain those totally useless EndOfLine and Space characters
AFAIK, there is no IDE command that fixes this for you; you have to do it by hand.
let html=`<div>content</div>`;
Or use: https://github.com/asyncLiz/minify-html-literals
A good minifier will concatenate these type of String notations:
let html = `<div>`+ // my
`content` + // comments here
`</div>`;
output:
let html=`<div>content</div>`;
🤏 Be smart, hunt for longer strings
<div class="...">
<div onclick="..." class="...">
<div style="..." class="...">
can be written as:
<div class="...">
<div class="..." onclick="...">
<div class="..." style="...">
Pay close attention to CSS strings; a good order can save serious bytes
🤏 Know what Browsers do
Browsers do not need quotes for attributes,
unless the value contains spaces or % characters (and maybe more)
When parsing, Browsers will add quotes
<div class="fancy">
can be written as: <div class=fancy>
A space will create another attribute:
let attrs = x => `class=${className}`;
let html = `<div ${attrs("fancy style=display:none")}>`;
outputs
<div class="fancy" style="display:none">
<div style="font:16px Arial">
can be written as:
<div style=font:16px,arial>
🤏 delete the last /
Some HTML tags are selfclosing and do not need a closing slash
<area>,<base>,<br>,<col>,<embed>,<hr>,<img>,<input>,<link>,<meta>,<param>,<source>,<track>,<wbr>
Credits
- GZThermal Web Interface by: SimonW - https://github.com/simonw/gzthermal-web
-
Using GZThermal
Top comments (2)
If you choose to use Template Literals, you can use this library to minify strings which already has implementations for other builders:
github.com/asyncLiz/minify-html-li...
I can help you.
senior.dev950102@gmail.com