Skip to content

Comments

perf: Font display swap + eliminate remaining non-composited animations#123

Merged
vibemarketerpromax merged 1 commit intomainfrom
perf/lcp-and-remaining-diagnostics
Feb 23, 2026
Merged

perf: Font display swap + eliminate remaining non-composited animations#123
vibemarketerpromax merged 1 commit intomainfrom
perf/lcp-and-remaining-diagnostics

Conversation

@vibemarketerpromax
Copy link
Collaborator

Summary

  • Font display optionalswap for Outfit and Inter fonts — eliminates ~100ms FOIT (Flash of Invisible Text) block period, rendering fallback font immediately then swapping when custom fonts load. adjustFontFallback: true minimizes CLS during the swap.
  • Replaced transition-all with property-specific transitions across all homepage components — eliminates non-composited animation warnings from PageSpeed Insights. Affected: Navigation header, HeroContent CTAs, CTA section button, AboutTeaser buttons, HowWeWork cards, FeaturedCaseStudies links, CaseStudyCard links, and the base Button component.
  • Converted CaseStudyCard decorative line from width animation to scaleX transform for GPU-composited rendering (same pattern used in PR perf: Fix non-composited animations and reduce critical-path waste #122).

Impact

Metric Before (PR #122) Expected
Non-composited animations (mobile) 2 0 (hero CTA fixed)
Non-composited animations (desktop) 1 0
Font FOIT block period ~100ms 0ms
Text paint Delayed until font loads or timeout Immediate (fallback → swap)

What's NOT fixable from code

  • Unused JS (237 KiB): Lighthouse variance — was 23 KiB in prior run. Inherent cost of React + framer-motion; already code-split aggressively.
  • Legacy JS (13 KiB): Pre-compiled ES5 from dependencies. Browserslist already targets modern browsers.
  • Cloudflare email-decode.min.js (~150ms): Render-blocking script injected by Cloudflare. Must be disabled in Cloudflare Dashboard → Scrape Shield → Email Address Obfuscation.
  • scrollbar-color PageSpeed flag: Benign progressive enhancement (Chrome 121+).

Files changed (9)

  • app/layout.tsx — font display swap
  • components/navigation/Navigation.tsx — header transition
  • components/sections/HeroContent.tsx — CTA button transitions
  • components/sections/CTA.tsx — CTA button transition
  • components/sections/AboutTeaser.tsx — button transitions
  • components/sections/HowWeWork.tsx — card transitions
  • components/sections/FeaturedCaseStudies.tsx — link transitions
  • components/ui/CaseStudyCard.tsx — link + decorative line transitions
  • components/ui/Button.tsx — base button transition

Test plan

  • TypeScript compiles clean
  • ESLint: 0 errors (3 pre-existing warnings)
  • Playwright: homepage renders all sections, 0 console errors
  • CI build passes
  • Verify PageSpeed after deploy: 0 non-composited animations on mobile/desktop

- Switch font display from optional → swap for Outfit and Inter,
  eliminating ~100ms FOIT block period for faster text paint
- Replace transition-all with property-specific transitions across
  all homepage components (Navigation, HeroContent, CTA, AboutTeaser,
  HowWeWork, FeaturedCaseStudies, CaseStudyCard, Button base)
- Convert CaseStudyCard decorative line from width animation to
  scaleX transform for GPU-composited rendering
@cloudflare-workers-and-pages
Copy link

Deploying website with  Cloudflare Pages  Cloudflare Pages

Latest commit: 64cefd0
Status: ✅  Deploy successful!
Preview URL: https://d0a19f89.website-yiq.pages.dev
Branch Preview URL: https://perf-lcp-and-remaining-diagn.website-yiq.pages.dev

View logs

@vibemarketerpromax vibemarketerpromax merged commit 18f4768 into main Feb 23, 2026
5 checks passed
@vibemarketerpromax vibemarketerpromax deleted the perf/lcp-and-remaining-diagnostics branch February 23, 2026 15:09
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant