perf(web): improve lighthouse performance score

[koutyuke]

Summary

Lighthouse の mobile Performance score を改善するため、Google Fonts の外部読み込みをやめ、ローカル font asset を build 時に subset 化する構成へ変更しました。

Background

Mobile Lighthouse で font の読み込みが初期表示の大きなボトルネックになっていました。font を無効化すると score が大きく改善したため、font payload と critical request chain の削減を主目的にしています。

Closes #9

Change Details

• Google Fonts の preconnect / stylesheet 読み込みを削除
• Caveat / Zen Maru Gothic を local asset として repository に追加
• rollup-plugin-font-subsetter を導入し、build 時に .woff2 を使用文字に基づいて subset 化
• @font-face を local bundled asset 参照へ変更
• Tailwind CSS v4 の source detection を index.html と src/**/*.ts(x) に限定し、不要 utility の混入を抑制
• Codex の一時成果物 cleanup 方針を AGENTS.md に追記

Result

Target	Before	After
Mobile Performance	59	95
Desktop Performance	93	100
Mobile total byte weight	1,229 KiB	325 KiB
Mobile FCP	7.1s	2.4s
Mobile LCP	7.5s	2.4s

Build output の subset 後 font はおおむね 42-46 KiB まで縮小しています。

Impact Area

• 初期表示 performance
• font loading / font rendering
• Vite/Rolldown build output
• Tailwind CSS の class 検出範囲

Testing

• node_modules/.bin/vp build
• node_modules/.bin/vp check
• node_modules/.bin/vp preview
• bunx --bun lighthouse http://127.0.0.1:4173/ --output=json --output=html --output-path=.koutyuke/lighthouse-score/mobile-tailwind-source --chrome-flags="--headless=new --no-sandbox --disable-gpu" --quiet

Notes

• Accessibility と Agentic Browsing の残課題はこの performance branch では対象外です。
• rollup-plugin-font-subsetter はまだ小規模な package のため、今後 dynamic text が増える場合は subset 漏れに注意が必要です。

[coderabbitai]

📝 Walkthrough

Walkthrough

Removed Google Fonts links from index.html, added three local @font-face declarations for Caveat and Zen Maru Gothic, updated Tailwind import and added @source directives in global CSS, and integrated rollup-plugin-font-subsetter into Vite with a matching devDependency.

Changes

Font Loading Modernization

Layer / File(s)	Summary
Tailwind Import src/app/styles/global.css	Updated @import "tailwindcss" to @import "tailwindcss" source(none);.
@source Directives src/app/styles/global.css	Added @source "../../../index.html"; and @source "../../**/*.{ts,tsx}"; before font rules.
Local Font Declarations src/app/styles/global.css	Added @font-face rules for Caveat (400) and Zen Maru Gothic (400, 500) pointing to ../../shared/assets/fonts/*.woff2 with font-display: swap.
HTML Head Cleanup index.html	Removed Google Fonts rel="preconnect" and external stylesheet <link> tags from the document head.
Vite Plugin Import vite.config.ts	Imported fontSubsetter from rollup-plugin-font-subsetter.
Vite Plugin Integration vite.config.ts	Added fontSubsetter() to the Vite plugins array.
Dev Dependency Addition package.json	Added rollup-plugin-font-subsetter to devDependencies (^0.2.0).
Docs / Safety Rule AGENTS.md	Adjusted Safety wording to refer to temporary Codex artifacts that are not git-ignored and removed the old phrasing.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Suggested labels

T-Chore, A-App

Poem

🐰 I nibble fonts and stash them near,
Caveat loops and Zen Maru clear.
No far-off links to make us wait,
Local .woff2 helps pages skate.
Hop, build, serve — the site's first-rate!

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Out of Scope Changes check	⚠️ Warning	The AGENTS.md change regarding temporary artifact cleanup rules is unrelated to the Lighthouse performance improvement objective and appears to be an out-of-scope modification.	Remove the AGENTS.md change or move it to a separate PR focused on documentation updates, keeping this PR focused solely on Lighthouse performance improvements.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main objective of the PR - improving Lighthouse performance score - which aligns with the changes made to optimize fonts and web performance.
Linked Issues check	✅ Passed	The PR addresses issue #9 by implementing font optimization (subsetting fonts and removing Google Fonts) and modifying build configuration, which directly targets font loading improvement as one of the key bottlenecks mentioned in the issue.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description check	✅ Passed	The pull request description is comprehensive and well-structured, following the repository's template with all major sections completed including Summary, Background, Change Details, Related Issue, Impact Area, Testing, and Notes.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch 9-perf/improve-lighthouse-performance-score

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[cloudflare-workers-and-pages]

Deploying koutyuke-dev with    Cloudflare Pages

Latest commit:	a0cfc1b
Status:	✅  Deploy successful!
Preview URL:	https://c195a4ea.koutyuke-dev.pages.dev
Branch Preview URL:	https://9-perf-improve-lighthouse-pe.koutyuke-dev.pages.dev

View logs

[github-actions]

🗼 Lighthouse Preview Report 🗼

Latest Commit:	a0cfc1b
Status:	✅ Successful!
Target URL:	https://c195a4ea.koutyuke-dev.pages.dev

Analyze Report

Category	Score
Performance	95
Accessibility	95
Best Practices	100
SEO	66

Metric	Value
First Contentful Paint	1.8 s
Largest Contentful Paint	1.8 s
Total Blocking Time	200 ms
Cumulative Layout Shift	0.029
Speed Index	1.8 s

Detailed Report

Report Artifact
Workflow Run

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@AGENTS.md`:
- Line 80: Replace the grammatically incorrect phrase "git追跡外になっていないの一時成果物"
found in AGENTS.md with a clear expression; locate that exact string and change
it to either "git追跡外の一時成果物" (preferred) or "git追跡外になっている一時成果物" depending on
intended meaning so the sentence reads correctly (e.g., "Codex が生成した
git追跡外の一時成果物（`.tmp/`, `result`）は、検証後に不要なら削除する。").

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 8cf76952-c9ad-4370-a25d-a7c686287acf

📥 Commits

Reviewing files that changed from the base of the PR and between 0eeb6c4 and e8d4106.

⛔ Files ignored due to path filters (4)

• pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml
• src/shared/assets/fonts/Caveat-Regular.woff2 is excluded by !**/*.woff2
• src/shared/assets/fonts/ZenMaruGothic-Medium.woff2 is excluded by !**/*.woff2
• src/shared/assets/fonts/ZenMaruGothic-Regular.woff2 is excluded by !**/*.woff2

📒 Files selected for processing (5)

• AGENTS.md
• index.html
• package.json
• src/app/styles/global.css
• vite.config.ts

💤 Files with no reviewable changes (1)

• index.html

🚧 Files skipped from review as they are similar to previous changes (2)

• package.json
• vite.config.ts