perf(mobile): self-host fonts, preconnect API, fix yellow contrast#17
Merged
Conversation
Three fixes targeting the PageSpeed Insights mobile score: 1. Self-host Google Fonts via @fontsource Removes the @import url('https://fonts.googleapis.com/...') from src/index.css and replaces it with local imports from the @fontsource/playfair-display and @fontsource/roboto packages. The WOFF2 files are now served from the same origin with font-display: swap, eliminating a ~750 ms render-blocking request and a critical-path DNS handshake to Google. Packages: @fontsource/playfair-display@5.2.8, @fontsource/roboto@5.2.10. 64 WOFF2 files now bundled locally in dist/assets/. Estimated LCP improvement on mobile: −750 ms. 2. Preconnect to api.cercol.team Adds <link rel='preconnect' href='https://api.cercol.team' crossorigin> to index.html. The browser opens the TLS handshake to the API origin during initial HTML parsing, so the first API call (auth, blog, witness sessions) does not pay the connection setup cost. Estimated LCP improvement on mobile: −300 ms. 3. Fix yellow text contrast (WCAG AA) The Full Moon instrument card title used colors.yellow (#f1c22f) on white background, which is 1.65:1 contrast — fails WCAG AA (requires ≥ 3:1 for large text). Added a titleColor prop to InstrumentCard that overrides accentColor for the h2 only. Full Moon card now passes titleColor="#8a6100" (5.12:1), while the border, icon, and hover fill remain yellow (#f1c22f). All other cards are unaffected. No token changes needed. Accessibility score: 96 → ~100. Expected combined PageSpeed mobile delta: 71 → ~85. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
5 tasks
miquelmatoses
added a commit
that referenced
this pull request
May 16, 2026
…18) mm-design v0.2.0 removes the @import url('fonts.googleapis.com/...') from tokens/typography.css. Font provisioning is now the consumer's responsibility — @fontsource packages already added in #17 handle this. Result: zero Google Fonts requests in the built bundle. Co-authored-by: miquelmatoses <miquelmatoses@users.noreply.github.com> Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Three fixes for the PageSpeed Insights mobile score (71 → expected ~85):
@fontsource/playfair-display+@fontsource/roboto: removes the render-blocking request to fonts.googleapis.com. 64 WOFF2 files now served from the same origin withfont-display: swap. Est. −750 ms LCP on mobile.<link rel="preconnect" crossorigin>in index.html so the TLS handshake fires during HTML parsing. Est. −300 ms LCP on mobile.#f1c22fon white (1.65:1, fails AA). AddedtitleColorprop toInstrumentCard; Full Moon now uses#8a6100(5.12:1, passes AA) for the h2 only — border, icon, and hover fill remain yellow. Accessibility: 96 → ~100.Also adds
.claude/to.gitignore(machine-local Claude Code settings were accidentally untracked).Test plan
npx vitest run)python -m pytest)npm run build:fullsucceeds; 64 WOFF2 files indist/assets/🤖 Generated with Claude Code