MODVIA AI ACADEMY

Nivel 6, Performance & Publishing

Modvia Academy | 2026

🟦NIVEL 6

Performance & Publishing

Site-uri rapide, domenii reale, indexate de Google, capitolul despre deploy.

🎯 XP la finalizare: 650•🏅 Badge deblocat

 

 

Lecția 1 • Core Web Vitals, carnetul de note al Google pentru viteză

Google clasează site-urile parțial pe baza a trei măsurători. Cunoaște-le, învinge-le.

MetricăCe înseamnă pe înțelesul tuturor
LCP (Largest Contentful Paint)Cât durează până apare cel mai mare element vizibil. Țintă < 2.5s.
INP (Interaction to Next Paint)Cât de responsivă se simte pagina după click/tap. Țintă < 200ms.
CLS (Cumulative Layout Shift)Cât de mult sar elementele în timpul încărcării. Țintă < 0.1.

Verifică-l gratuit pe pagespeed.web.dev. Lighthouse (din Chrome DevTools) îți dă aceleași cifre local.

 

Lecția 2 • Cei patru răufăcători ai greutății

RăufăcătorCum îl neutralizezi
Imagini neoptimizateLivrează AVIF sau WebP. Folosește <Image> în Next.js. Un hero de 150kb > un hero de 1.5MB.
Bundle-uri JS mariFă code-split. Importă dinamic componentele grele (Spline, Three.js). Tree-shake.
Fonturi care blocheazăFolosește next/font sau self-host cu font-display: swap. Nu folosi niciodată 6 greutăți de font.
Scripturi third-partyHeatmap-uri, chatboți, analytics, fiecare adaugă greutate. Ține maxim 3.
📜 Prompt Playbook, prompt de audit de performanță
Cel mai bun AI. Claude Opus 4.6 • De ce. Optimizarea performanței e o problemă de raționament; Opus dă sfaturi chirurgicale prioritizate.
Uite raportul meu Lighthouse mobil și rezumatul tab-ului Network.
[LIPEȘTE OUTPUT-UL LIGHTHOUSE]
[LIPEȘTE REZUMATUL WATERFALL-ULUI NETWORK]

Dă-mi:
1) Cel mai mare bottleneck de LCP și fix-ul de o linie
2) Cele 3 cele mai mari bundle-uri JS și dacă fiecare poate fi lazy-loaded
3) Orice probleme legate de fonturi, cu comenzi de fix
4) Câștigul așteptat per fix, în milisecunde
Ordonează după prioritate. Nu sugera nimic care câștigă < 100ms.

 

Lecția 3 • Deploy pe Vercel, ghidul click cu click

Vercel e cel mai ușor host gratuit pentru cod Next.js / React / exportat din Framer. Uite secvența literală:

PasCe faci
1Fă push la proiect pe GitHub (din Cursor: terminal → git init, git add ., git commit, gh repo create, git push).
2vercel.com → 'Add New Project' → selectează repo-ul tău.
3Vercel detectează automat framework-ul (Next.js, Vite, Astro). Lasă valorile default.
4Dă click pe 'Deploy'. ~60 de secunde mai târziu: ai un URL .vercel.app.
5Fiecare git push face deploy automat. Fiecare pull request primește un URL de preview.

 

Lecția 4 • Conectează un domeniu custom (pas cu pas)

Trecerea de la halo-coffee-xyz.vercel.app la halocoffee.co durează ~10 minute + $12/an.

PasCe faci
1. Cumpără domeniulnamecheap.com sau cloudflare.com (cel mai ieftin + cel mai curat). Plătește cu cardul. $12–$20/an.
2. Vercel → DomainsAdaugă halocoffee.co (și varianta www.).
3. Vercel arată înregistrările DNSDe obicei: un record A care indică spre 76.76.21.21, și un CNAME pentru www.
4. Mergi la registrar → DNSLipește înregistrările. Salvează.
5. Așteaptă 10 min până la 24 de oreDNS-ul se propagă. Vercel emite automat un certificat SSL gratuit (https).
6. Testeazăhalocoffee.co se încarcă, are lacătul verde, redirecționează www → apex.

 

Lecția 5 • SEO de bază, fii găsibil

Fă astaCum
<title> unic per paginăSub 60 de caractere. Include keyword-ul principal + brandul.
Meta descriptionSub 155 de caractere. Vinde click-ul, nu pagina.
H1 = keyword primarUn singur H1 per pagină. Se potrivește cu intenția de căutare a utilizatorului.
Text alt pe imaginiDescriptiv. Nu 'image1.jpg'.
Sitemap.xml + robots.txtNext.js: pachetul next-sitemap. Framer/Webflow: integrat.
Tag-uri Open Graphog:title, og:description, og:image, ca distribuirile să arate bine pe social.
Google Search ConsoleAdaugă site-ul, trimite sitemap-ul, urmărește indexarea. search.google.com/search-console.
📜 Prompt Playbook, Metadata + OG
Cel mai bun AI. ChatGPT 5 • De ce. Metadata e un joc de număr de cuvinte + keyword, modelele rapide o nimeresc.
Scrie metadata SEO pentru pagina principală Halo Coffee.
Vocea de brand: cinematic, cald, specific.
Keyword primar: 'specialty coffee subscription'.
Secundar: 'single origin espresso delivery'.

Livrează:
- <title> (≤60 caractere)
- meta description (≤155 caractere)
- variante og:title + og:description + twitter:description
- Concept sugerat pentru og:image (ce ar trebui să arate, textul de pe ea)
- Schemă JSON-LD pentru tipul 'Organization'

 

Lecția 6 • Analytics, află ce funcționează

UnealtăCând
Vercel AnalyticsTier gratuit inclus cu deploy-urile Vercel. Vizualizări de pagină + Core Web Vitals.
Plausible / UmamiPrietenos cu confidențialitatea, fără banner de cookie-uri. ~$9/lună sau self-host gratuit.
PostHogTier gratuit generos; product analytics + session replay.
Google Analytics 4Gratuit, puternic, UI lent, necesită banner de cookie-uri.

Începe cu una. Nu instala patru heatmap-uri. Observă 2 săptămâni înainte să schimbi ceva.

 

🎯 Pachetul de quest-uri Nivel 6

 

🥉 QUEST BRONZ +30 XP
🚀Fă deploy la Halo Coffee pe Vercel

Obiectiv. Obține un URL de producție care face deploy automat la push.

Pași
  1. Fă push la codul Halo Coffee pe GitHub.
  2. Conectează repo-ul la Vercel.
  3. Dă click pe deploy.
  4. Deschide URL-ul .vercel.app pe telefon.
Gata când…
  • ☐ URL-ul live funcționează
  • ☐ Un commit pe main declanșează un deploy nou

 

🥈 QUEST ARGINT +50 XP
🌐Conectează un domeniu real

Obiectiv. Un domeniu real halocoffee.orice îndreptat spre site-ul tău.

Pași
  1. Cumpără un domeniu de la Namecheap sau Cloudflare.
  2. În Vercel → Settings → Domains, adaugă-l.
  3. Lipește înregistrările DNS la registrarul tău.
  4. Așteaptă, apoi verifică lacătul + redirecționarea www → apex.
Gata când…
  • ☐ Domeniul custom încarcă site-ul prin HTTPS
  • ☐ www redirecționează curat

 

🥈 QUEST ARGINT +55 XP
🔍Treci de Lighthouse mobil 85+

Obiectiv. Transformă-ți site-ul din 'frumos dar lent' în 'frumos ȘI rapid'.

Pași
  1. Rulează Lighthouse mobil (Chrome DevTools).
  2. Lipește raportul în promptul de audit Claude (Lecția 2).
  3. Aplică primele 3 fix-uri.
  4. Rulează din nou. Repetă până la ≥ 85.
Gata când…
  • ☐ Lighthouse mobil Performance ≥ 85
  • ☐ LCP < 2.5s
  • ☐ CLS < 0.1

 

🥇 QUEST AUR +80 XP
📈Checklist de lansare SEO + Analytics

Obiectiv. Stare de lansare gata-pentru-Google.

Pași
  1. Adaugă metadata (title, description, og, twitter) pe fiecare pagină.
  2. Livrează sitemap.xml și robots.txt.
  3. Înregistrează-te la Google Search Console, trimite sitemap-ul.
  4. Adaugă Vercel Analytics SAU Plausible.
  5. Verifică Core Web Vitals 'Good' în date reale după 48h.
Gata când…
  • ☐ Search Console arată site-ul verificat
  • ☐ Analytics primește date
  • ☐ Preview-ul OG arată corect când distribui URL-ul pe Twitter/LinkedIn/WhatsApp

 

🥇 QUEST AUR +70 XP
🛡️Trecere de hardening

Obiectiv. Trecerea 'nu mă fac de râs'.

Pași
  1. Pagină 404 custom.
  2. Pagină de eroare cu branding (nu default-ul Next.js).
  3. Favicon + apple-touch-icon.
  4. Security headers (Vercel → Settings → Response Headers, adaugă X-Content-Type-Options, Referrer-Policy, Permissions-Policy).
  5. Link-uri Privacy + Terms în footer (folosește un generator de șabloane).
  6. Trimiterile de formular ajung undeva real (Supabase, Resend, sau chiar un fallback de Google Form).
Gata când…
  • ☐ securityheaders.com notă A sau mai bine
  • ☐ 404-ul are branding
  • ☐ Trimiterile de formular ajung într-un inbox sau DB