Summary
The homepage loads fonts via an external Typekit (use.typekit.net/vxp7yul.css) stylesheet, which is a render-blocking request that Lighthouse flags as a performance issue. Additionally, FontAwesome icons are loaded from a kit CDN (kit.fontawesome.com). Both of these are third-party network dependencies that add latency on every page load and create single points of failure.
Current State
In app/layout.tsx:
<link rel="stylesheet" href="https://use.typekit.net/vxp7yul.css" precedence="default" />
<Script id="fontawesome" src="https://kit.fontawesome.com/cea9781086.js" ... />
Proposed Changes
1. Replace Typekit with next/font
- Use
next/font/google or next/font/local to load the equivalent font (or swap to a close match available on Google Fonts)
next/font automatically self-hosts, applies font-display: swap, and is zero render-blocking
- Eliminates the Typekit dependency entirely
2. Replace FontAwesome kit with @fortawesome/react-fontawesome
- Install
@fortawesome/fontawesome-svg-core, @fortawesome/free-brands-svg-icons, @fortawesome/free-solid-svg-icons, @fortawesome/react-fontawesome
- Import only the specific icons used (GitHub, PyPI, Bluesky, Telegram) — tree-shakeable SVGs, no CDN request
- Removes the
<Script> CDN tag from the layout entirely
Expected Impact
- Removes 2 render-blocking/external network requests per page load
- Reduces Cumulative Layout Shift (CLS) from font FOUT
- Page works correctly even when Typekit or FontAwesome CDN is unreachable (relevant for container deployments behind Cloudflare)
- Smaller JavaScript bundle (only the icons actually used, not the entire FA kit)
Acceptance Criteria
Summary
The homepage loads fonts via an external Typekit (
use.typekit.net/vxp7yul.css) stylesheet, which is a render-blocking request that Lighthouse flags as a performance issue. Additionally, FontAwesome icons are loaded from a kit CDN (kit.fontawesome.com). Both of these are third-party network dependencies that add latency on every page load and create single points of failure.Current State
In
app/layout.tsx:Proposed Changes
1. Replace Typekit with
next/fontnext/font/googleornext/font/localto load the equivalent font (or swap to a close match available on Google Fonts)next/fontautomatically self-hosts, appliesfont-display: swap, and is zero render-blocking2. Replace FontAwesome kit with
@fortawesome/react-fontawesome@fortawesome/fontawesome-svg-core,@fortawesome/free-brands-svg-icons,@fortawesome/free-solid-svg-icons,@fortawesome/react-fontawesome<Script>CDN tag from the layout entirelyExpected Impact
Acceptance Criteria
next/fontis used for body font; Typekit<link>is removed from layout<Script>is removed from layoutSocialIconandTelegramModaluse@fortawesome/react-fontawesomeSVG components