Cum implementați lazy loading corect pe un website WordPress fără plugin-uri

Lazy loading este tehnica prin care browserul amână încărcarea imaginilor și altor resurse media până când utilizatorul scrollează spre zona în care se află acestea. Efectul: la încărcarea inițială a paginii se descarcă numai resursele vizibile în viewport (zona afișată fără scroll), reducând dramatic numărul de cereri HTTP și dimensiunea datelor transferate la prima vizită.

Pe un articol de blog cu 20 de imagini, lazy loading poate reduce numărul de cereri HTTP la prima încărcare cu 85% sau mai mult, ceea ce contribuie direct la îmbunătățirea LCP-ului (Largest Contentful Paint) și la un TTFB mai mic perceput de utilizator.

Cum implementați lazy loading corect pe un website WordPress fără plugin-uri

Vestea bună: dacă folosiți WordPress 5.5 sau o versiune mai recentă, lazy loading pentru imagini este activat nativ, fără niciun plugin. WordPress adaugă automat atributul loading=lazy la toate tag-urile img din conținutul posturilor, paginilor și widgeturilor. Nu trebuie să faceți nimic pentru a activa această funcționalitate.

Verificați că lazy loading nativ funcționează pe site-ul dvs.: deschideți un articol, click-dreapta, Inspect Element (sau F12), selectați o imagine din articol și verificați că codul HTML conține loading=lazy. Dacă atributul este prezent, lazy loading nativ este activ.

Cum funcționează lazy loading nativ în browser

Atributul loading=lazy este o funcție nativă a browserului modern, fără JavaScript suplimentar. Browserul decide automat care imagini sunt în viewport la momentul încărcării și le descarcă imediat, și care sunt suficient de departe pentru a fi amânate. Decizia se bazează pe dimensiunea viewport-ului și pe distanța estimată față de limita inferioară a ecranului.

Toate browserele moderne (Chrome, Firefox, Safari, Edge) suportă loading=lazy din 2021. Suportul global în 2026 depășește 96% din browsere, ceea ce înseamnă că puteți conta pe această funcție fără fallback-uri suplimentare.

Problema critică: imaginea LCP nu trebuie lazy-loaded

Aceasta este cea mai frecventă eroare de implementare a lazy loading: aplicarea lui și pe imaginea principală a paginii, cea vizibilă imediat la încărcare (above the fold). Dacă imaginea cu cel mai mare impact vizual din viewport este lazy-loaded, browserul va amâna încărcarea ei tocmai ea, ceea ce deteriorează semnificativ LCP-ul.

Începând cu WordPress 5.9, platforma exclude automat prima imagine din conținut de la lazy loading, adăugând loading=eager în loc de loading=lazy. Această excludere automată acoperă cazul cel mai comun, dar nu toate scenariile. Dacă folosiți o imagine hero definită în temă sau un bloc special în blocul Gutenberg care nu face parte din conținutul standard, verificați că aceasta nu are atributul loading=lazy.

Verificarea: în DevTools, Network tab, filtrați după img și reîncărcați pagina. Imaginile cu loading=eager sau fără atribut loading se descarcă imediat. Imaginile cu loading=lazy se descarcă numai când utilizatorul scrollează spre ele.

Adăugarea atributului fetchpriority pentru imaginea LCP

Pe lângă excluderea din lazy loading, imaginea LCP beneficiază și de atributul fetchpriority=high, care instruiește browserul să o descarce cu prioritate maximă, înaintea altor resurse. Aceasta poate reduce LCP-ul cu 100-300ms pe paginile unde imaginea principală este o resursă critică.

Implementarea manuală în WordPress se face prin adăugarea atributului în blocul imagine din Gutenberg via Custom CSS class sau printr-un filtru PHP în functions.php:

// Adauga fetchpriority=high la prima imagine din continut
function add_fetchpriority_to_lcp_image($content) {
    if (is_singular() && !is_admin()) {
        $content = preg_replace(
            '/]+)class="([^"]*wp-image[^"]*)"/i',
            '