Lazy-loading ஏதோ ஒன்று உண்மையில் தேவைப்படும் வரை — பொதுவாக அது view-க்குள் scroll ஆகப் போகும்போது — அதை download செய்வதை ஒத்திப்போடுகிறது. இது ஆரம்ப payload-ஐ சுருக்குகிறது, எனவே page-இன் காணக்கூடிய பகுதி வேகமாக load ஆகிறது.
browser இதை ஒரு attribute-உடன் native-ஆகவே செய்கிறது:
browser இடத்தை ஒதுக்கும்படி (layout shift-ஐ தவிர்க்க) எப்போதும் width/height-ஐ வைத்திருங்கள். உங்கள் LCP image-ஐ ஒருபோதும் lazy-load செய்யாதீர்கள் — அது அளக்கப்படும் விஷயத்தையே தாமதப்படுத்துகிறது.
கனமான அல்லது அரிதாகப் பயன்படுத்தப்படும் UI-ஐ (modal-கள், chart-கள்) தேவைக்கேற்ப load செய்யப்படும் தனி chunk-ஆக பிரியுங்கள்:
// 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>
dynamic import(), <Chart> முதலில் render ஆகும்போது மட்டுமே download ஆகும் ஒரு தனி file-ஐ உருவாக்கும்படி bundler-க்குச் சொல்கிறது.
Lazy-loading ஒரு கனமான page-க்கான எளிமையான, மிக-அதிக-தாக்க வெற்றி: முன்பே download செய்ய குறைவு என்பது வேகமான LCP மற்றும் parse செய்ய குறைவான JS. நீங்கள் hero image-ஐ lazy-load செய்யாமல் இருப்பதைப் பார்க்க interviewer-கள் விரும்புகிறார்கள் — நீங்கள் உதவ முயற்சிக்கும் metric-ஐயே பாதிக்கும் ஒரு classic தவறு.
விரிவான பதில்களுடன் கூடிய IT நேர்காணல் கேள்விகளின் நூலகம் — Junior முதல் Senior வரை.
நன்கொடை