Imagini, fonturi, JS: quick wins de viteză

Reguli simple

• Dimensiune corectă: nu încărca poze uriașe pentru un card mic.
• Format modern: folosește WebP/AVIF, păstrând un fallback JPG/PNG.
• Încărcare întârziată: imaginile de mai jos în pagină cu loading="lazy".
• Descrieri scurte: text alternativ care spune „ce se vede”.

Dacă ai multe imagini vechi, procesăm în lot cu compresie sigură.

Exemplu simplu (picture)

<picture>
  <source srcset="/img/hero.avif" type="image/avif">
  <source srcset="/img/hero.webp" type="image/webp">
  <img src="/img/hero.jpg"
       alt="Ecran de site rapid pe telefon"
       width="1200" height="700"
       loading="lazy" decoding="async" />
</picture>

Dimensiunile declarate ajută la stabilitate (nu „saltă” layout-ul).

Galerii & listări

• folosește srcset + sizes pentru imagini responsive
• nu încărca 10 imagini deodată: afișează primele, restul la scroll
• evită caruselul greu dacă nu e necesar

Exemplu responsive

<img
  src="/img/card-800.webp"
  srcset="/img/card-400.webp 400w, /img/card-800.webp 800w, /img/card-1200.webp 1200w"
  sizes="(max-width: 680px) 100vw, 400px"
  alt="Exemplu card"
  loading="lazy" decoding="async" />

Ce funcționează

• font-display: swap — textul apare imediat cu un font de rezervă, apoi se schimbă fin.
• mai puține variante — regular + bold sunt adesea suficiente.
• self-host — găzduiește fontul pe același domeniu, unde e posibil.
• preload pentru fontul esențial (un singur fișier, varianta de bază).

Exemple rapide

<link rel="preload" href="/fonts/brand-regular.woff2"
      as="font" type="font/woff2" crossorigin>

@font-face{
  font-family:"Brand";
  src:url("/fonts/brand-regular.woff2") format("woff2");
  font-display:swap; /* textul apare imediat */
  font-weight:400; font-style:normal;
}

Evita fonturile externe „grele” dacă nu sunt necesare.

Alegerea fontului

• folosește system UI când e cazul (zero fișiere de font)
• limitează variantele (regular/bold/italic doar dacă e nevoie)
• evită icon-font-urile mari — folosește SVG-uri punctuale

Semn că e bine

• textul nu „clipește” gol
• pagina rămâne lizibilă chiar fără fontul personalizat
• nu încarci 5-10 fișiere de font pentru o singură pagină

Mută scripturile în spate

Scripturile grele pot bloca afișarea paginii. Soluția: marchează-le pentru încărcare întârziată și ține doar ce e necesar.

• defer — așteaptă, dar păstrează ordinea; se execută după ce pagina este gata.
• async — se încarcă în paralel și rulează când e gata (atenție la dependențe).
• elimină plugin-urile nefolosite; înlocuiește librării masive cu variante mici.

Exemplu: <script> corect

<!-- librărie necesară peste tot -->
<script src="/js/app.min.js" defer></script>

<!-- widget de pe pagini secundare -->
<script src="/js/widget.js" async></script>

Dacă ai un singur fișier uriaș, împarte-l: „critic” vs. „opțional”.

Cum reduci „greutatea”

• dezactivează carusele/efecte pe mobil dacă nu sunt esențiale
• folosește CSS pentru animații simple (mai ieftin decât JS)
• încarcă scripturi terțe doar acolo unde chiar ai nevoie

Semne că ai reușit

• prima parte a paginii apare rapid
• derularea este fluidă
• evenimentele (click, deschidere meniu) răspund repede

Imagini

• comprimă 3–5 imagini mari de pe homepage
• pune loading="lazy" pe imaginile din josul paginii
• adaugă lățime/înălțime pe imaginea din hero

Fonturi

• activează font-display: swap
• dezactivează greutăți pe care nu le folosești
• preîncarcă un singur font esențial

JavaScript

• adaugă defer pe scriptul principal
• oprește un plugin pe care nu-l folosești
• mută widgeturile „opționale” pe async