Lazy-loading amână descărcarea a ceva până când este cu adevărat necesar — de obicei când e pe cale să intre în câmpul vizual la scroll. Asta micșorează payload-ul inițial, astfel încât partea vizibilă a paginii se încarcă mai repede.
Browserul o face nativ cu un singur atribut:
Păstrează întotdeauna width/height ca browserul să rezerve spațiul (evită layout shift). Nu face niciodată lazy-load la imaginea ta LCP — asta întârzie exact lucrul măsurat.
Împarte UI-ul greu sau rar folosit (modale, grafice) într-un chunk separat, încărcat la cerere:
// Instead of a static import that ships in the main bundle:
const Chart = React.lazy(() => import("./Chart")); // separate chunk, fetched when rendered
<Suspense fallback={<Spinner />}>
<Chart data={data} />
</Suspense>
import() dinamic îi spune bundler-ului să creeze un fișier separat care se descarcă doar când <Chart> este randat prima dată.
Lazy-loading este câștigul cel mai simplu și cu efect de levier maxim pentru o pagină grea: mai puțin de descărcat la început înseamnă LCP mai rapid și mai puțin JS de parsat. Intervievatorii vor să vadă că nu faci lazy-load la imaginea hero — o greșeală clasică ce dăunează exact metricii pe care încerci să o ajuți.
O bibliotecă de întrebări de interviu IT cu răspunsuri detaliate — de la Junior la Senior.
Donează