〈file-size〉 Web Component, because size does matter
Tags: webcomponents, javascript, webdev, showdev
Published: 2021-05-21 17:31:39

---
title: 〈file-size〉 Web Component, because size does matter
published: true
description: file-size Web Component and GZip analysis
tags: webcomponents,javascript,webdev,showdev
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/otapqi0qqcum8hmq61ip.png
---

## The &lt;file-size> Web Component

Keep a watch on how many bytes you send down the wire, 
when you deliver Web Components.

```html
<!-- 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

{% jsfiddle https://jsfiddle.net/WebComponents/tmq6cao3 result,html,js %}

## Optional &lt;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.

<hr>

# Tips for better compression

## 🤏 Online tools that can help

* [https://try.terser.org/](https://try.terser.org/) - minify your code

* [https://dafrok.github.io/gzip-size-online/](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**.

```js
this.setAttribute("one","ONE");
this.setAttribute("two","TWO");
this.setAttribute("three","THREE");
this.setAttribute("four","FOUR");
```

Compresses better (_and is faster!_) than:

```js
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

```js
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.

![](https://i.imgur.com/8De1hdo.png)

## 🤏 Use _**on**event_ listeners

prepend **on** to all default Events.

```js
details.ontoggle = (e) => details.open && gzthermal();
```
does the same as:

```js
details.addEventListener("toggle", (e) => details.open && gzthermal());
```

Note the difference; **on**event sets/overwrites a **single** handler; ``addEventListener`` allows for **multiple** handlers.

## 🤏 Be careful with Strings

```js
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.

```js
let html=`<div>content</div>`;
```

Or use: https://github.com/asyncLiz/minify-html-literals

A good minifier will **concatenate** these type of String notations:

```js
let html = `<div>`+ // my
    `content` + // comments here
    `</div>`;
```
output:

```js
let html=`<div>content</div>`;
```

## 🤏 Be smart, hunt for longer strings

```html
<div class="...">
<div onclick="..." class="...">
<div style="..." class="...">
```

can be written as:

```html
<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:

```js
let attrs = x => `class=${className}`;
let html = `<div ${attrs("fancy style=display:none")}>`;
```

outputs

```html
<div class="fancy" style="display:none">
```

```html
<div style="font:16px Arial">
```

can be written as:

```html
<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>``

<hr>

# 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/


<br>
<hr>
<br>

{% jsfiddle https://jsfiddle.net/WebComponents/62f1eLay result,html,js %}