Rapid din start: performanță și SEO care supraviețuiesc unui crawlerRapid din start: performanță și SEO care supraviețuiesc unui crawlerRapid din start: performanță și SEO care supraviețuiesc unui crawler

Viteza și poziționarea în căutări nu sunt funcții pe care le adaugi la final. Sunt decizii de arhitectură pe care le iei din prima zi. Iată cum rămâne acest site rapid și ușor de găsit, și cum verific ambele în loc să ghicesc.

Randează o dată, servește pentru totdeauna

Cel mai rapid răspuns este un fișier static. Fiecare pagină de aici este pre-randată la build, un document HTML pentru fiecare rută și fiecare limbă. Fără muncă a serverului la fiecare cerere, fără drum până la bază de date, fără fetch în client înainte de primul paint. Un CDN o servește de la marginea rețelei, iar browserul începe să deseneze imediat.

De aceea site-ul funcționează și cu JavaScript dezactivat. Conținutul trăiește în HTML, nu este asamblat în browser, așa că roboții, cititoarele de ecran și conexiunile lente primesc pagina întreagă. Animațiile sunt un strat deasupra, niciodată o cerință.

export function generateStaticParams() {
  return routing.locales.map((locale) => ({locale}));
}

export default async function Page({params}) {
  const {locale} = await params;
  setRequestLocale(locale); // enables fully static rendering
  return <Sections />;
}

Imaginile sunt locul unde moare viteza

Cea mai frecventă greșeală de performanță este livrarea de imagini grele. Diagramele mele de proiect au pornit ca fișiere PNG de 1,7 MB, aproape 12 MB în total. Convertirea în WebP le-a coborât la 0,76 MB fără diferență vizibilă. Apoi fiecare imagine trece prin next/image, care dă browserului AVIF sau WebP exact la dimensiunea cerută de layout.

• AVIF sau WebP automat, niciodată fișierul original greu.
• Un atribut sizes explicit, deci o variantă potrivită pentru fiecare breakpoint.
• Încărcare lazy sub linia de pliere și priority doar pe hero, pentru un LCP rapid.
• Dimensiuni rezervate, ca layout-ul să nu sară în timp ce sosesc imaginile.

import Image from "next/image";

// Below the fold: lazy, sized, served as AVIF/WebP at the right width.
<Image
  src="/renders/rn-04.webp"
  alt="Polysong, system diagram"
  fill
  sizes="(max-width: 640px) 100vw, 50vw"
  className="object-cover"
/>

SEO este instalație, nu magie

Căutarea este în mare parte igienă făcută constant. Fiecare pagină își declară propriul URL canonic și alternativele hreflang pentru toate cele patru limbi, ca Google să indexeze pagina corectă pentru fiecare limbă în loc să le contopească. Un sitemap listează fiecare rută în fiecare limbă, datele structurate descriu cine sunt și unde lucrez, iar fiecare pagină poartă titlu, descriere și imagine Open Graph localizate.

Bug-ul care merită numit: un singur canonic moștenit din layout făcea ca fiecare articol de blog să trimită înapoi la pagina principală. Un canonic comun e mai rău decât niciunul, fiindcă îi spune activ lui Google să renunțe la pagină.

export async function generateMetadata({params}) {
  const {locale, slug} = await params;
  const path = "/blog/" + slug;
  return {
    title: post.title,
    description: post.excerpt,
    alternates: {
      canonical: localeUrl(locale, path),
      languages: {
        en: localeUrl("en", path),
        it: localeUrl("it", path),
        de: localeUrl("de", path),
        ro: localeUrl("ro", path)
      }
    },
    openGraph: { type: "article", images: [path + "/01.webp"] }
  };
}

Dă-i agentului o listă pe care o ține minte

Când un agent AI lucrează la acest cod, nu ar trebui să redescopere regulile de performanță și SEO la fiecare sesiune. Le țin într-un fișier de memorie markdown pe care îl citește primul, ca să persiste convențiile între sesiuni și ca agentul să acționeze pe baza lor, nu din ghicit.

# PERFORMANCE.md  (read me before touching the UI)

## Images
- Convert source art to WebP before commit, target under 200 KB.
- Always render through next/image with an explicit sizes attribute.
- Use priority only on the LCP image (the hero); everything else stays lazy.

## Rendering
- Pages must stay static: generateStaticParams + setRequestLocale.
- No client-side data fetching above the fold.

## SEO
- Every page sets its own canonical and hreflang for en, it, de, ro.
- Update the sitemap and JSON-LD whenever routes change.

Rapid și ușor de găsit se dovedesc a fi aceeași disciplină: fă munca plictisitoare la nivel de arhitectură, ține payload-ul mic și lasă platforma să servească fișiere statice. Partea remarcabilă e că nu există nimic remarcabil în asta.