mirror of
https://github.com/affaan-m/everything-claude-code.git
synced 2026-05-19 05:41:14 +08:00
ec9ace9c54
Translate everything-claude-code repository to Japanese including: - 17 root documentation files - 60 agent documentation files - 80 command documentation files - 99 rule files across 18 language directories (common, angular, arkts, cpp, csharp, dart, fsharp, golang, java, kotlin, perl, php, python, ruby, rust, swift, typescript, web) - 199 skill documentation files Total: 455 files translated to Japanese with: - Consistent terminology glossary applied throughout - YAML field names preserved in English (name, description, etc.) - Code blocks and examples untouched (comments translated) - Markdown structure and relative links preserved - Professional translation maintaining technical accuracy This translation expands ECC accessibility to Japanese-speaking developers and teams. Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
65 lines
2.7 KiB
Markdown
65 lines
2.7 KiB
Markdown
> このファイルは [common/performance.md](../common/performance.md) を Web 固有のパフォーマンスコンテンツで拡張します。
|
||
|
||
# Web パフォーマンスルール
|
||
|
||
## Core Web Vitals 目標
|
||
|
||
| メトリクス | 目標 |
|
||
|-----------|------|
|
||
| LCP | < 2.5秒 |
|
||
| INP | < 200ms |
|
||
| CLS | < 0.1 |
|
||
| FCP | < 1.5秒 |
|
||
| TBT | < 200ms |
|
||
|
||
## バンドルバジェット
|
||
|
||
| ページタイプ | JS バジェット（gzip 圧縮後） | CSS バジェット |
|
||
|-------------|---------------------------|--------------|
|
||
| ランディングページ | < 150kb | < 30kb |
|
||
| アプリページ | < 300kb | < 50kb |
|
||
| マイクロサイト | < 80kb | < 15kb |
|
||
|
||
## ローディング戦略
|
||
|
||
1. 正当な場合、クリティカルなアバブ・ザ・フォールド CSS をインライン化する
|
||
2. ヒーロー画像とプライマリフォントのみをプリロードする
|
||
3. 非クリティカルな CSS や JS を遅延読み込みする
|
||
4. 重いライブラリを動的インポートする
|
||
|
||
```js
|
||
const gsapModule = await import('gsap');
|
||
const { ScrollTrigger } = await import('gsap/ScrollTrigger');
|
||
```
|
||
|
||
## 画像最適化
|
||
|
||
- 明示的な `width` と `height`
|
||
- ヒーローメディアのみに `loading="eager"` と `fetchpriority="high"`
|
||
- ビロウ・ザ・フォールドのアセットには `loading="lazy"`
|
||
- フォールバック付きで AVIF または WebP を優先する
|
||
- レンダリングサイズを大幅に超えるソース画像を配信しない
|
||
|
||
## フォント読み込み
|
||
|
||
- 明確な例外がない限り、フォントファミリーは最大2つ
|
||
- `font-display: swap`
|
||
- 可能な場合はサブセット化する
|
||
- 本当にクリティカルなウェイト/スタイルのみをプリロードする
|
||
|
||
## アニメーションパフォーマンス
|
||
|
||
- コンポジタフレンドリーなプロパティのみをアニメーションする
|
||
- `will-change` は狭い範囲で使用し、完了時に削除する
|
||
- シンプルなトランジションには CSS を優先する
|
||
- JS モーションには `requestAnimationFrame` または確立されたアニメーションライブラリを使用する
|
||
- スクロールハンドラの乱発を避ける。IntersectionObserver または行儀の良いライブラリを使用する
|
||
|
||
## パフォーマンスチェックリスト
|
||
|
||
- [ ] すべての画像に明示的なサイズがある
|
||
- [ ] 意図しないレンダーブロッキングリソースがない
|
||
- [ ] 動的コンテンツによるレイアウトシフトがない
|
||
- [ ] モーションがコンポジタフレンドリーなプロパティにとどまっている
|
||
- [ ] サードパーティスクリプトが async/defer で読み込まれ、必要な場合のみ使用されている
|