Initial commit with translated description

performance.md

@@ -0,0 +1,44 @@
+# Performance, SEO, and Accessibility
+
+## Core Web Vitals
+
+| Metric | Target | How to improve |
+|--------|--------|----------------|
+| LCP (Largest Contentful Paint) | < 2.5s | Preload hero image, optimize server response, avoid render-blocking JS |
+| FID (First Input Delay) | < 100ms | Break up long tasks, defer non-critical JS, use web workers |
+| CLS (Cumulative Layout Shift) | < 0.1 | Set explicit image dimensions, reserve space for ads/embeds |
+
+## Image Optimization
+
+- **Format** — Use WebP/AVIF with fallbacks; JPEG for photos, PNG only for transparency
+- **Sizing** — Serve appropriately sized images; don't scale 2000px to 200px in CSS
+- **Lazy loading** — Add `loading="lazy"` to below-fold images
+- **Dimensions** — Always include `width` and `height` attributes to prevent CLS
+- **Next.js Image** — Use `<Image>` component for automatic optimization and formats
+
+## JavaScript Performance
+
+- **Defer non-critical** — Use `defer` or `async` on scripts; or load at end of body
+- **Code split** — Lazy-load routes and heavy components
+- **Tree shake** — Use ES modules; avoid default exports from barrel files
+- **Avoid layout thrashing** — Batch DOM reads before writes; avoid interleaved read-write
+
+## SEO Essentials
+
+- **Unique title per page** — 50-60 characters, include primary keyword
+- **Meta description** — 150-160 characters, compelling for click-through
+- **Semantic HTML** — `<h1>` once per page, proper heading hierarchy
+- **Canonical URL** — Set `<link rel="canonical">` to prevent duplicate content
+- **Open Graph tags** — `og:title`, `og:description`, `og:image` for social sharing
+- **Sitemap** — Generate `sitemap.xml`, submit to Search Console
+- **Robots.txt** — Don't accidentally block important pages
+
+## Accessibility (a11y)
+
+- **Keyboard navigation** — All interactive elements focusable and operable with keyboard
+- **Color contrast** — 4.5:1 minimum for normal text, 3:1 for large text
+- **Alt text** — Descriptive for content images, empty for decorative
+- **Focus indicators** — Don't remove outlines; use `:focus-visible` for keyboard-only
+- **ARIA labels** — Use when semantic HTML isn't enough; `aria-label`, `aria-describedby`
+- **Form labels** — Every input needs associated `<label>` or `aria-label`
+- **Heading order** — Don't skip levels; `<h1>` → `<h2>` → `<h3>`, not `<h1>` → `<h3>`