- Published on
記錄一次首頁 CSS 背景圖的 LCP 優化：將 PNG 改成 WebP、透過 SSR preload 提早下載，並釐清 Lighthouse headline LCP 與 observed breakdown 為何可能相差十幾秒。
Web-vitals
All Posts
- claude-code (6)
- typescript (5)
- settings (4)
- error-handling (3)
- lighthouse (3)
- memory (3)
- rollbar (3)
- essay (2)
- facebook-sdk (2)
- github-actions (2)
- js (2)
- observability (2)
- react (2)
- ssr (2)
web-vitals (2)
- api-design (1)
- arch (1)
- argo-cd (1)
- arm64 (1)
- backend-architecture (1)
- brotli (1)
- cli (1)
- cloudflare (1)
- cls (1)
- compression (1)
- cross-env (1)
- css (1)
- cursor (1)
- debugging (1)
- docker (1)
- dotenv (1)
- e2e (1)
- environment-variables (1)
- express (1)
- git (1)
- gzip (1)
- https (1)
- i386 (1)
- iframe (1)
- javascript (1)
- jest (1)
- keyboard-shortcuts (1)
- kubernetes (1)
- lcp (1)
- localhost (1)
- mac-tips (1)
- mongodb (1)
- nodejs (1)
- performance (1)
- postmessage (1)
- pubsub (1)
- puppeteer (1)
- python (1)
- razzle (1)
- rosetta (1)
- scraper (1)
- seo (1)
- shadow-dom (1)
- sitemap (1)
- ssh (1)
- tanstack-query (1)
- try-catch (1)
- validation (1)
- web-components (1)
- web-performance (1)
- webp (1)
- yup (1)
- zod (1)
- Published on
記錄一次 React SSR 首頁的 CLS 優化：從 Lighthouse 標記的位移元素往上追查原因，讓首屏資料在 SSR 階段完成，並替非同步載入的圖表預留空間。