I’m trying to speed my website by using brotli static compression. It works fine in Safari (content-type is br in response headers) but there’s no mention of it in chrome and firefox. I was wondering if it was working fine because using compression didn’t improve my pagespeed lighthouse score. Any tips?
I see (via visiting it) no issues with the load time of the site. Using web.dev also shows good speed (this is mobile)
pagespeed.web.dev shows slightly higher for mobile performance, and even higher for desktop.
I don’t see this is Safari. For
Nicolas-Sursock-small.jpg I see
Content-Type: image/jpeg. I do see
br in the
Accept-Encoding request header
Accept-Encoding: gzip, deflate, br (as is also present in Chrome)
This is the only image I can see that comes from Netlify. All other images come from Unsplash which in the case of Safari are
Content-Type: image/webp and Chrome
Hey, I was talking about js, css and html. I didn’t compress images using brotli since they’re already compressed.
main.bundle.js I see
in Chrome and Safari, but not Firefox.
But as Firefox can use it I cannot explain the missing header.
Firefox does show this header for
But using compression had no impact on the speed of the website. How come? Everything seems fine: I generated br version of all js/css assets and html files. Compressing the js and css results in files 5 times smaller than the original.
We automatically brotli or gzip request most suitable asset types for you if the browser requests it; no additional config required or possible.
curl as shown in Bundle file not served GZIP - #4 by luke the gzip version is 45917 and brotli version 44308—or about 4% smaller—as opposed to 212343 uncompressed (all in bytes.) Given the compressed size is 44/45KB and only 4% difference between the two, I see this having a negligible impact on load performance.