zsp/everything-claude-code
1
0
Fork 0
mirror of https://github.com/affaan-m/everything-claude-code.git synced 2026-05-18 06:43:05 +08:00
Code Issues Packages Projects Releases Wiki Activity
Files
ec9ace9c544e00ffa03ad2933efd98ddb14f4279
everything-claude-code/docs/ja-JP/rules/web/performance.md
Claude ec9ace9c54 docs: add native Japanese translation of ECC documentation (ja-JP) 
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>
2026-05-17 02:31:40 -04:00

2.7 KiB
Raw Blame History

このファイルは 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. 重いライブラリを動的インポートする
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 で読み込まれ、必要な場合のみ使用されている
Reference in New Issue View Git Blame Copy Permalink