Lecția 1, Cele 4 proprietăți pe care le poți anima ieftin

Proprietăți care sunt SCUMPE și pe care n-ar trebui să le animezi niciodată: width, height, top, left, padding, margin, font-size. Declanșează reflow-uri de layout.

Lecția 2, will-change, indiciul care ajută

.animated-card {
  will-change: transform, opacity;
}
/* Scoate will-change DUPĂ ce se termină animația, altfel rezervă memorie GPU permanent. */

Lecția 3, Checklist-ul pentru imagini și fonturi

• Folosește formate moderne, AVIF sau WebP. Niciodată PNG pentru fotografii.

• Atribute width și height pe fiecare <img>, previne CLS.

• Încarcă lazy imaginile de sub fold, loading='lazy'.

• Găzduiește-ți fonturile local. Folosește font-display: swap. Fă subset la caracterele de care ai nevoie.

• Preîncarcă imaginea hero și fontul principal.

Lecția 4, Code-split la librăriile grele de animație

Three.js + R3F e greu (~200KB). Nu-l încărca pe fiecare pagină.

import { lazy, Suspense } from 'react';
const ThreeScene = lazy(() => import('./ThreeScene'));

<Suspense fallback={<div className='h-[500px]' />}>
  <ThreeScene />
</Suspense>

Lecția 5, Linia de accesibilitate pe care trebuie s-o ții

• Toate animațiile respectă prefers-reduced-motion (reamintire de la Nivel 1).

• Toate SVG-urile și Lottie-urile decorative au aria-hidden='true'.

• Toate scenele 3D interactive au un fallback non-3D (o imagine statică).

• Toate animațiile sub 5 secunde. Orice rulează la infinit are nevoie de un control de pauză.

• Contrast de culoare pe text-peste-video, raporturile WCAG rămân valabile.

Lecția 6, Lighthouse, carnetul de note

Rulează Lighthouse la fiecare commit. Cel mai simplu, instalează extensia Lighthouse pentru Chrome. Sau rulează-l în CI cu @lhci/cli.

npm install -D @lhci/cli

# .lighthouserc.json
{
  "ci": {
    "collect": { "url": ["http://localhost:5173/"], "numberOfRuns": 3 },
    "assert": {
      "assertions": {
        "categories:performance": ["error", { "minScore": 0.85 }],
        "categories:accessibility": ["error", { "minScore": 0.95 }]
      }
    }
  }
}

# In CI, npx lhci autorun

🎯 Pachet de quest-uri Nivel 6