Lazy loading și preload, tehnici avansate de performanță

19/04/2026Actualizat: 23/03/2026Autor: MarketingOptimizare6 min citire
Lazy loading și preload, tehnici avansate de performanță

Lazy loading și preload, tehnici avansate de performanță sunt două abordări complementare care pot transforma viteza de încărcare a oricărui site web. Lazy loading întârzie încărcarea resurselor invizibile, iar preload accelerează încărcarea celor critice.

Implementate corect, aceste tehnici pot reduce timpul de încărcare cu 30-50% fără a afecta experiența utilizatorilor.

Lazy loading și preload, tehnici avansate de performanță

Browserele încarcă implicit toate resursele unei pagini, indiferent dacă utilizatorul le vede sau nu. Pe o pagină cu 30 de imagini, browserul descarcă toate 30, chiar dacă utilizatorul vede doar 3-4 fără a derula.

Lazy loading rezolvă această problemă prin încărcarea resurselor doar când sunt necesare. Preload face opusul: forțează încărcarea prioritară a resurselor critice.

Lazy loading pentru imagini

Atributul loading=”lazy” nativ

Browserele moderne suportă lazy loading nativ prin atributul loading:

<img src="imagine.webp" loading="lazy" alt="Descriere imagine" width="800" height="600">

Browserul va încărca imaginea doar când aceasta se apropie de viewport (zona vizibilă a ecranului). Este cea mai simplă metodă de implementare, fără dependență de JavaScript.

Regula importantă: nu aplicați lazy loading pe imaginile above-the-fold

Imaginile vizibile la încărcarea inițială (above-the-fold) nu trebuie să aibă loading="lazy". Aplicarea lazy loading pe aceste imagini întârzie LCP (Largest Contentful Paint) și penalizează Core Web Vitals.

De regulă, primele 1-2 imagini din pagină trebuie încărcate normal (fără lazy loading). Restul pot fi lazy loaded.

Implementare WordPress

Din WordPress 5.5, lazy loading este adăugat automat pe toate imaginile din conținut. Puteți controla acest comportament:

// Dezactivare lazy loading pe imaginea principala din articol
function disable_lazy_on_featured_image($attr, $attachment, $size) {
    if (is_singular() && has_post_thumbnail()) {
        $featured_id = get_post_thumbnail_id();
        if ($attachment->ID === $featured_id) {
            $attr['loading'] = 'eager';
            $attr['fetchpriority'] = 'high';
        }
    }
    return $attr;
}
add_filter('wp_get_attachment_image_attributes', 'disable_lazy_on_featured_image', 10, 3);

Lazy loading cu Intersection Observer API

Pentru control avansat, Intersection Observer API oferă flexibilitate maximă:

// Imaginile au data-src in loc de src
// <img data-src="imagine.webp" class="lazy" alt="...">

const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            const img = entry.target;
            img.src = img.dataset.src;
            img.classList.remove('lazy');
            observer.unobserve(img);
        }
    });
}, {rootMargin: '200px'});

document.querySelectorAll('img.lazy').forEach(img => observer.observe(img));

Valoarea rootMargin: '200px' începe încărcarea cu 200px înainte ca imaginea să devină vizibilă, prevenind afișarea unei zone goale la scroll rapid.

Lazy loading pentru iframe-uri și video

Iframe-urile YouTube sunt extrem de grele, adăugând 500KB-1MB la fiecare embed. Lazy loading-ul le amână până când utilizatorul ajunge la ele:

<iframe src="https://www.youtube.com/embed/ID_VIDEO" loading="lazy" title="Titlu video"></iframe>

Tehnica facade pentru YouTube

O abordare și mai eficientă este afișarea unei imagini thumbnail în locul iframe-ului, încărcând playerul doar la click:

<div class="youtube-facade" data-video-id="ID_VIDEO">
    <img src="https://img.youtube.com/vi/ID_VIDEO/hqdefault.jpg" alt="Titlu video" loading="lazy">
    <button aria-label="Redare video">▶</button>
</div>

La click, JavaScript-ul înlocuiește div-ul cu iframe-ul YouTube. Această tehnică poate îmbunătăți LCP cu 2-3 secunde pe paginile cu embed-uri video.

Preload pentru resurse critice

Preload instruiește browserul să descarce o resursă cât mai devreme posibil, cu prioritate ridicată. Este ideal pentru resursele necesare la randarea inițială.

Preload pentru fonturi

Fonturile custom sunt descoperite târziu de browser, deoarece sunt referite din fișiere CSS. Preload-ul elimină această întârziere:

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

Atributul crossorigin este obligatoriu pentru fonturi, chiar dacă sunt servite de pe același domeniu. Fără el, browserul face o cerere suplimentară.

Preload pentru imaginea LCP

Identificați imaginea care constituie LCP (de obicei hero image sau featured image) și adăugați preload:

<link rel="preload" href="/hero-image.webp" as="image" type="image/webp" fetchpriority="high">

Atributul fetchpriority="high" (suportat din 2023) semnalează browserului că aceasta este o resursă de prioritate maximă.

Preload pentru CSS critic

Dacă folosiți CSS asincron (cu media=”print” hack sau loadCSS), preîncărcați fișierul CSS principal:

<link rel="preload" href="/style.css" as="style">
<link rel="stylesheet" href="/style.css" media="print" onload="this.media='all'">

Preconnect și DNS-Prefetch

Preconnect

Stabilește conexiunea completă (DNS lookup + TCP + TLS) cu un server extern înainte de a fi necesară:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://www.googletagmanager.com">

Folosiți preconnect doar pentru domeniile din care se încarcă resurse în primele secunde. Prea multe preconnect-uri consumă resurse fără beneficiu.

DNS-Prefetch

Rezolvă doar DNS-ul unui domeniu, fără a stabili conexiunea completă. Mai ușor, ideal pentru domenii accesate mai târziu:

<link rel="dns-prefetch" href="https://cdn.exemplu.ro">

Prefetch și Prerender

Prefetch

Descarcă resurse care vor fi probabil necesare la navigarea pe pagina următoare:

<link rel="prefetch" href="/pagina-urmatoare.html">
<link rel="prefetch" href="/script-pagina-2.js" as="script">

Browserul descarcă aceste resurse cu prioritate scăzută, fără a afecta performanța paginii curente.

Speculation Rules API

Înlocuiește prerender-ul depreciat cu o abordare mai granulară:

<script type="speculationrules">
{
  "prerender": [
    {"where": {"href_matches": "/servicii/*"}, "eagerness": "moderate"}
  ]
}
</script>

Această API permite navigare aproape instantanee pe paginile pre-randate.

Impactul asupra Core Web Vitals

  • LCP: preload pe imaginea principală poate reduce LCP cu 200-500ms
  • FID/INP: lazy loading reduce JavaScript-ul executat la încărcare
  • CLS: specificați width și height pe imaginile lazy loaded pentru a preveni layout shift

Măsurați impactul fiecărei modificări cu PageSpeed Insights înainte și după implementare.

Greșeli comune

  • Lazy loading pe imaginea LCP, ceea ce întârzie încărcarea ei
  • Prea multe preload-uri care concurează pentru lățime de bandă
  • Lipsa dimensiunilor (width/height) pe imagini lazy loaded, cauzând CLS
  • Preconnect către domenii care nu sunt accesate în primele secunde
  • Lazy loading pe imagini mici (icoane, logo) unde overhead-ul JavaScript depășește beneficiul

Concluzii

Lazy loading și preload sunt tehnici complementare care, aplicate corect, pot îmbunătăți dramatic performanța site-ului. Cheia este echilibrul: încărcați prioritar ce este critic și amânați ce nu este vizibil.

Pentru optimizarea profesională a performanței sau pentru optimizare WordPress specializată, echipa SEODNS vă poate ajuta. Contactați-ne pentru un audit de performanță detaliat.

Articole recomandate