Ricardo 17c21b2b8f perf: fix desktop CLS (0.57) — grid match, font-display optional, avatar sizing ...

Three root causes identified via PageSpeed layout shift culprits:

1. Grid mismatch (CLS 0.495): Critical CSS used `2fr 1fr` but Tailwind
   compiles to `repeat(3, minmax(0, 1fr))` with `grid-column: span 2`.
   Updated critical CSS to match Tailwind's exact output.

2. Font swap FOUT (CLS 0.074): @font-face declarations were only in the
   deferred stylesheet. Moved to critical CSS with font-display:optional
   and added <link rel="preload"> for weights 400/600/700. Changed all
   font-display from swap to optional in tailwind.css source.

3. Avatar resize: HTML width/height was 96x96 but CSS sets sm:w-32/h-32
   (128px) on desktop. Updated attributes to 128x128.

Confab-Link: http://localhost:8080/sessions/edb1b7b0-da66-4486-bd9c-d1cfa7553b88

2026-03-09 00:19:20 +01:00

4.4 KiB

Raw Blame History

View Raw