WebP:网页压缩格式 WebP: The WebPage Compression Format

原始链接: https://purplesyringa.moe/blog/webp-the-webpage-compression-format/

为了提高网站加载速度,作者最大限度地减少了 HTML 代码,并使用 gzip 和 Brotli 等内容编码来处理图像。 然而,他们发现托管在 GitHub Pages 上的博客不支持 Brotli,导致“恢复乱码比特币地址”等较大帖子的加载时间更长。 尽管 GitHub Pages 可能通过预压缩数据或允许用户部署压缩文件来启用 Brotli,但此功能目前不可用。 为了解决这个问题,作者找到了两个选择:brotli-dec-wasm(WebAssembly 中的 200KB Brotli 解压缩器)或tiny-brotli-dec-wasm(更紧凑的 71KB 替代方案)。 通过使用这些工具,与原始 gzip 压缩版本相比,作者现在可以使用压缩的 Brotli 数据更快地加载相同的大型帖子。 作者计划实施此解决方案以减少整个博客的加载时间。

To improve website loading speeds, the author minimizes their HTML code and uses content encoding like gzip and Brotli for images. However, they find that their blog hosted on GitHub Pages does not support Brotli, causing longer load times for larger posts like "Recovering Garbled Bitcoin Addresses." Although GitHub Pages could potentially enable Brotli through pre-compressing data or allowing users to deploy compressed files, this feature isn't currently available. To solve this issue, the author finds two options: brotli-dec-wasm, a 200KB Brotli decompressor in WebAssembly, or tiny-brotli-dec-wasm, a more compact 71KB alternative. By using these tools, the author can now load the same large post more quickly with compressed Brotli data compared to the original gzipped version. The author plans to implement this solution to reduce loading times across their entire blog.


Discuss on Hacker News

I want to provide a smooth experience to my site visitors, so I work on accessibility and ensure it works without JavaScript enabled. I care about page load time because some pages contain large illustrations, so I minify my HTML.

But one thing makes turning my blog light as a feather a pain in the ass.

See, a major win in traffic reduction (and thus latency savings on mobile!) comes not from minification but from compression. HTTP supports gzip and Brotli via the Content-Encoding header. This is opt-in because compression takes resources, so transferring uncompressed data might be faster.

Typically, Brotli is better than gzip, and gzip is better than nothing. gzip is so cheap everyone enables it by default, but Brotli is way slower.

Annoyingly, I host my blog on GitHub pages, which doesn’t support Brotli. So Recovering garbled Bitcoin addresses, the longest post on my site, takes 92 KiB instead of 37 KiB. This amounts to an unnecessary 2.5x increase in load time.

There’s no reason why GitHub can’t support Brotli. Even if compressing files in-flight is slow, GitHub could still allow repo owners to upload pre-compressed data and use that.

GitHub doesn’t do that for us, but we can still take advantage of precompressed data. We’ll just have to manually decompress it in JavaScript on the client side.

Like a good developer, the first thing I do upon finding a problem is search for a solution on Google. brotli-dec-wasm turned up after a quick search, providing a 200 KB Brotli decompressor in WASM. tiny-brotli-dec-wasm is even smaller, at 71 KiB.

Alright, so we’re dealing with 92 KiB for gzip vs 37 + 71 KiB for Brotli. Umm…

相关文章
联系我们 contact @ memedata.com