perf: phase 1 - compression & image optimization (@abdo-spices)

[abdo-spices]

Description

• optimized merch images (AVIF)
• enabled global image optimization
• and added Brotli compression for improved LCP

Checks

• Adding quotes?
  • Make sure to include translations for the quotes in the description (or another comment) so we can verify their content.
• Adding a language?
  • Make sure to follow the languages documentation
  • Add language to packages/schemas/src/languages.ts
  • Add language to exactly one group in frontend/src/ts/constants/languages.ts
  • Add language json file to frontend/static/languages
• Adding a theme?
  • Make sure to follow the themes documentation
  • Add theme to packages/schemas/src/themes.ts
  • Add theme to frontend/src/ts/constants/themes.ts
  • Add theme css file to frontend/static/themes
  • Add some screenshot of the theme, especially with different test settings (colorful, flip colors) to your pull request
• Adding a layout?
  • Make sure to follow the layouts documentation
  • Add layout to packages/schemas/src/layouts.ts
  • Add layout json file to frontend/static/layouts
• Adding a font?
  • Make sure to follow the themes documentation
  • Add font file to frontend/static/webfonts
  • Add font to packages/schemas/src/fonts.ts
  • Add font to frontend/src/ts/constants/fonts.ts
• Check if any open issues are related to this PR; if so, be sure to tag them below.
• Make sure the PR title follows the Conventional Commits standard. (https://www.conventionalcommits.org for more info)
• Make sure to include your GitHub username prefixed with @ inside parentheses at the end of the PR title.

Closes #

[fehmer]

I don't think this is needed. Compression is already handled by the webserver/cdn

This adds ~70s build time on my machine.

[abdo-spices]

Takes about 26s on my machine, and yeah, the Spanish list file (~1MB) is the main bottleneck at ~80% of compression time.

I think pre-compression is worth it though
latency: whether it's the server or CDN doing compression on-the-fly, you're adding 5-50ms per request. pre-compressed files skip that entirely.

server load (if it's not the CDN): If the server is handling compression instead of the CDN, that's CPU being used on every request. Pre-compression moves that work to build time, which happens way less frequently.
26s at build time vs. guaranteed fast response times without any runtime processing seems like a decent trade-off.

[fehmer]

I think pre-compression is worth it though
latency: whether it's the server or CDN doing compression on-the-fly, you're adding 5-50ms per request. pre-compressed files skip that entirely.

any source on that? I'd hope firebase would cache the compressed file and not compress it each time it is requested.

Besided, how is it working? The plugin generates an additional .br file for styles, json etc. How is it used?

[abdo-spices]

Besided, how is it working? The plugin generates an additional .br file for styles, json etc. How is it used?

All files can be compressed not just JS or CSS, but also images and JSON. When the browser detects a .br version, it automatically requests that instead of the original file. This significantly reduces bandwidth usage, which is important since Firebase charges based on bandwidth.

[Miodec]

Firebase is already compressing files on upload. When i check a url that bypasses cloudflare everything is already compressed. So im not sure this is needed.

[fehmer]

is there a reason for this two year old version of sharp? the current version is 0.34.4

[abdo-spices]

there is bug in modern sharp binary that specific version do not have it so we need 0.32.6

[fehmer]

which bug, please link the source

[abdo-spices]

which bug, please link the source

the bug is mainly with build script in sharp i can fix it in my device but well break on other people machines

lovell/sharp#1783

lovell/sharp#400

lovell/sharp#1627 (comment)

there is more cases

it also happen on windows, the it's also known bug in astro since a lot of astro projects uses image component that's powered by sharp

[Miodec]

Youre linking very old issues here. Are you sure this is a problem?

[fehmer]

please delete the replaced .png files

[abdo-spices]

I think it's better to keep the original images

[fehmer]

why? Image optimization will pick them up and they are not used.

[abdo-spices]

why? Image optimization will pick them up and they are not used.

I can delete them, but it's better to keep them we might switch the image optimizer or convert them to other formats later if needed.

[Miodec]

I think ideally we would keep the originals, but also dont commit the compressed files, only output them to the dist directory when deploying.

[fehmer]

It kind of feels wasteful to run the image optimization for each build instead of doing it once when we add a new image (which is not very often). That said, the overhead is 1s on my machine for this, so this is more a workflow question, @Miodec what is your opinion?

This is the result of the image compression

[abdo-spices]

It kind of feels wasteful to run the image optimization for each build instead of doing it once when we add a new image (which is not very often). That said, the overhead is 1s on my machine for this, so this is more a workflow question, @Miodec what is your opinion?

not very often that's right but we need to keep the original images

[Miodec]

Youre linking a closed issues from 4 years ago, are you sure this is needed?