Blowfish 已經衰退

Follows up on #3091
Fixes #3086

Scope

1. Blur: site-background.svg, feature shortcode, stat shortcode, pill-style tag page links
2. Avoiding repaints: hero-scroll-fade.js
3. WebP support: site logo, hero, homepage
4. Network loading: defer Firebase with the load event
5. JS: inline critical script

A Few Notes

The reasons for each change are in the commit messages. Some highlights:

1. Animated SVGs are computed in real time at the pixel level, so they can be very resource-intensive. site-background.svg was the main source of power draw. At about 124 GFLOPS, it is in the same range as a ViT-L16 network.
2. Frosted-glass blur (backdrop-blur) is also computed in real time, which makes it costly too.
3. Firebase used to be deferred with requestIdleCallback, which only watches the main thread, not the network. The load event is the better fit.
4. The LCP images now uses WebP.
5. When generating UI with AI, it may help to steer away from frosted-glass effects. Most of the issues here came from it (feTurbulence and backdrop-blur).

Screenshots

PageSpeed Insights

v3.8.0

This PR

Power consumption

v3.8.0

This PR

FPS

https://github.com/user-attachments/assets/1d4aa136-01f1-4c69-b1e7-137b4016e982

回應

Owner 的回應擺明就是 AI，標準的開頭感謝、無意義的重複列出 PR 改動、破折號、列表、粗體、無意義的 main branch 提醒，不會有人會覺得這是真人寫的吧。

Thank you so much for this, @ZhenShuo2021 - the investigation and the numbers here are fantastic (LCP 12.3s → 1.7s, ~14W → 3W), and the write-up on SVG filters and backdrop-blur costs is really valuable. I genuinely want these improvements in.

That said, this PR bundles too many independent changes to review and merge safely in one go, so I'm closing it and would love to see it split into smaller, focused PRs, e.g.:

1. SVG background + blur removal (site-background.svg, feature/stat shortcodes, term pills)
2. JS changes (critical.js inline split, hero-scroll-fade.js, mermaid/appearance moves, Firebase on load)
3. WebP / <picture> images

A few things to address along the way:

• backgroundImageWidth is a documented config option - the hardcoded 1320/1920 widths would silently ignore it. Please keep honoring it.
• Keep the try fallback: functions/resize.html wraps .Resize in try so unprocessable images degrade instead of failing the build; calling .Resize directly loses that.
• Extract the resize + <picture> block into a partial rather than repeating it in 9 templates (that would also fix the two points above in one place).
• .prettierignore: assets/js/appearance.js still contains Go template syntax so it needs to stay ignored, and appearance-switcher.js doesn't exist.
• Minor: the media queries (width >= 853px) / (width < 852px) leave a 1px gap; inline critical.js has no SRI, which may matter for strict-CSP sites.

Also note main has moved since (#3107 touched hero/background.html, #3118 touched baseof.html and the compiled CSS), so please branch from latest main.

Thanks again for the great work - looking forward to the follow-ups! 🙏