/application.min.js is huge (102kB)

[tnir]

As of writing (Bootstrap 3.4), it is 133kB (136701 bytes), which is huge.

$ curl -sv https://bundler.io/application.min.js -o /dev/null
*   Trying 185.199.110.153:443...
* TCP_NODELAY set
* Connected to bundler.io (185.199.110.153) port 443 (#0)
* ALPN, offering h2
* ALPN, offering http/1.1
[...]
> GET /application.min.js HTTP/2
> Host: bundler.io
> user-agent: curl/7.68.0
> accept: */*
> 
[...]
< HTTP/2 200 
< server: GitHub.com
< content-type: application/javascript; charset=utf-8
< last-modified: Sun, 10 Jul 2022 23:46:52 GMT
< access-control-allow-origin: *
< etag: "62cb64ec-215fd"
< expires: Mon, 11 Jul 2022 06:13:23 GMT
< cache-control: max-age=600
< x-proxy-cache: MISS
< x-github-request-id: A112:0BAF:1D5A37:637A31:62CBBD2B
< accept-ranges: bytes
< date: Mon, 11 Jul 2022 06:04:20 GMT
< via: 1.1 varnish
< age: 57
< x-served-by: cache-sea4471-SEA
< x-cache: HIT
< x-cache-hits: 1
< x-timer: S1657519461.531781,VS0,VE1
< vary: Accept-Encoding
< x-fastly-request-id: b1866e08efec64eb721e84a83a81f14d6e618fd3
< content-length: 136701
< 
[...]
* Connection #0 to host bundler.io left intact

• Convert jQuery code with vanilla #653
• meta: Replace lunr (middleman-search) with DocSearch #691

[tnir]

Probably updating Bootstrap from 3.4 to 4.6 in #644, the size of bundled JS increased 😢 :

$ curl -sv https://bundler.io/application.min.js -o /dev/null
*   Trying 185.199.108.153:443...
* TCP_NODELAY set
* Connected to bundler.io (185.199.108.153) port 443 (#0)
* ALPN, offering h2
* ALPN, offering http/1.1
* successfully set certificate verify locations:
*   CAfile: /etc/ssl/certs/ca-certificates.crt
  CApath: /etc/ssl/certs
} [5 bytes data]
* TLSv1.3 (OUT), TLS handshake, Client hello (1):
} [512 bytes data]
* TLSv1.3 (IN), TLS handshake, Server hello (2):
{ [122 bytes data]
* TLSv1.3 (IN), TLS handshake, Encrypted Extensions (8):
{ [19 bytes data]
* TLSv1.3 (IN), TLS handshake, Certificate (11):
{ [4018 bytes data]
* TLSv1.3 (IN), TLS handshake, CERT verify (15):
{ [264 bytes data]
* TLSv1.3 (IN), TLS handshake, Finished (20):
{ [52 bytes data]
* TLSv1.3 (OUT), TLS change cipher, Change cipher spec (1):
} [1 bytes data]
* TLSv1.3 (OUT), TLS handshake, Finished (20):
} [52 bytes data]
* SSL connection using TLSv1.3 / TLS_AES_256_GCM_SHA384
* ALPN, server accepted to use h2
* Server certificate:
*  subject: CN=bundler.io
*  start date: May 21 11:44:07 2022 GMT
*  expire date: Aug 19 11:44:06 2022 GMT
*  subjectAltName: host "bundler.io" matched cert's "bundler.io"
*  issuer: C=US; O=Let's Encrypt; CN=R3
*  SSL certificate verify ok.
* Using HTTP2, server supports multi-use
* Connection state changed (HTTP/2 confirmed)
* Copying HTTP/2 data in stream buffer to connection buffer after upgrade: len=0
} [5 bytes data]
* Using Stream ID: 1 (easy handle 0x55a4abcd42f0)
} [5 bytes data]
> GET /application.min.js HTTP/2
> Host: bundler.io
> user-agent: curl/7.68.0
> accept: */*
> 
{ [5 bytes data]
* TLSv1.3 (IN), TLS handshake, Newsession Ticket (4):
{ [177 bytes data]
* Connection state changed (MAX_CONCURRENT_STREAMS == 100)!
} [5 bytes data]
< HTTP/2 200 
< server: GitHub.com
< content-type: application/javascript; charset=utf-8
< last-modified: Tue, 12 Jul 2022 12:27:09 GMT
< access-control-allow-origin: *
< etag: "62cd689d-29d41"
< expires: Tue, 12 Jul 2022 13:02:22 GMT
< cache-control: max-age=600
< x-proxy-cache: MISS
< x-github-request-id: 55FA:32D3:14481D:299E4C:62CD6E86
< accept-ranges: bytes
< date: Tue, 12 Jul 2022 12:55:12 GMT
< via: 1.1 varnish
< age: 170
< x-served-by: cache-sea4432-SEA
< x-cache: HIT
< x-cache-hits: 1
< x-timer: S1657630513.975396,VS0,VE1
< vary: Accept-Encoding
< x-fastly-request-id: aaab5e29964d7289bc6a9557859ba278a6a357f0
< content-length: 171329
< 
{ [998 bytes data]
* Connection #0 to host bundler.io left intact

[tnir]

#681 increased more 23kB from 167kB to 190kB 😭 😭

$ curl -sv https://bundler.io/application.min.js -o /dev/null
*   Trying 185.199.110.153:443...
* TCP_NODELAY set
* Connected to bundler.io (185.199.110.153) port 443 (#0)
[...]
> GET /application.min.js HTTP/2
> Host: bundler.io
> user-agent: curl/7.68.0
> accept: */*
> 
[...]
< HTTP/2 200 
< server: GitHub.com
< content-type: application/javascript; charset=utf-8
< x-origin-cache: HIT
< last-modified: Fri, 15 Jul 2022 01:43:24 GMT
< access-control-allow-origin: *
< etag: "62d0c63c-2f831"
< expires: Fri, 15 Jul 2022 02:42:35 GMT
< cache-control: max-age=600
< x-proxy-cache: MISS
< x-github-request-id: 60C8:29E6:2074F9:457B87:62D0D1C3
< accept-ranges: bytes
< date: Fri, 15 Jul 2022 02:32:35 GMT
< via: 1.1 varnish
< age: 0
< x-served-by: cache-sea4439-SEA
< x-cache: MISS
< x-cache-hits: 0
< x-timer: S1657852356.536237,VS0,VE96
< vary: Accept-Encoding
< x-fastly-request-id: 817b380c34d995277680217337c4c5aff3cdcb77
< content-length: 194609
< 
{ [980 bytes data]
* Connection #0 to host bundler.io left intact

[tnir]

#665 reduced the size (from 190kB) to 102kB 🎉

$ curl -sv https://bundler.io/application.min.js -o /dev/null
[...]
< HTTP/2 200 
< date: Fri, 15 Jul 2022 15:42:06 GMT
< content-length: 105196

[simi]

What's the gzip size?

[tnir]

Deflation rate of the minified JavaScript would be almost the same, so I did not add accept-encoding in curl.

$ curl -sv https://bundler.io/application.min.js -H "Accept-Encoding: gzip" -o /dev/null
[...]
< content-length: 31445

For what it is worth, today I found GitHub Pages does not support accept-encoding: br 😀

[tnir]

With #653, I did it. Actually, the biggest problem as of writing is the transfer the size of the image (106kB).

And the second one is CSS now.

So I may close this...

[tnir]

102kB (raw) or 30kB (gzip) looks enough for the site, closing.