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 file content-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 than initSize
• extendsFile could be better than addtoFile

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

  • https://blog.usejournal.com/of-svg-minification-and-gzip-21cd26a5d007
  • https://nelsonslog.wordpress.com/2017/11/21/gzthermal-compression-visualization/