loading="lazy" பண்புசொல் உலாவிக்கு பெருமளவில் நிலுவையிலுள்ள ஏற்றம் ஒரு படம் அல்லது iframe க்கு அது viewport க்கு நுழைய உள்ளது வரை — bandwidth சேமிக்க மற்றும் ஆரம்ப ஏற்றம் வேகப்படுத்த, JavaScript இல்லாமல்.
html
loading="lazy" பண்புசொல் உலாவிக்கு பெருமளவில் நிலுவையிலுள்ள ஏற்றம் ஒரு படம் அல்லது iframe க்கு அது viewport க்கு நுழைய உள்ளது வரை — bandwidth சேமிக்க மற்றும் ஆரம்ப ஏற்றம் வேகப்படுத்த, JavaScript இல்லாமல்.
lazy — viewport க்கு அருகே வரும் போது மட்டுமே ஏற்றவும்.eager (இயல்புநிலை) — நிலைமை பொருட்படாமல் உடனடியாக ஏற்றவும்।உலாவி ஓரத்தைப் பயன்படுத்துகிறது (உறுப்பு viewport ஆக உருள்வதற்கு முன்பு சிறிது ஏற்றவும்) எனவே பயனர் அதைப் பார்க்கும் போது படம் பொதுவாக தயாரிக்கப்பட்டிருக்கும்.
<img src="x.jpg" loading="lazy" width="800" height="600" />
பரிமாணம் இல்லாமல் (அல்லது aspect-ratio), விலகிய ஏற்றப்பட்ட படம் முன்பக்கப்பெறப்பட்ட இடம் இல்லாமல், எனவே அது ஏற்றும் போது பக்கம் குதிக்கிறது — Cumulative Layout Shift (CLS) க்கு சேதம் செய்கிறது। எப்போதும் இடம் முன்பக்கப்பெறவும்.
<!-- ❌ the hero/LCP image should load eagerly — lazy delays it -->
<img src="hero.jpg" loading="lazy" />
<!-- ✅ -->
<img src="hero.jpg" loading="eager" fetchpriority="high" />
Largest Contentful Paint படத்தின் விலகிய ஏற்றம் உண்மையில் செயல்பாடு ஐ சேதம் செய்கிறது — மிக முக்கியமான பிக்சலைத் தாமதப்படுத்துகிறது। வெளிப்புற மீடியா மட்டுமே விலகிய ஏற்றவும்.
// the old manual approach native lazy-loading replaced
const io = new IntersectionObserver((entries) => {
entries.forEach((e) => { if (e.isIntersecting) e.target.src = e.target.dataset.src; });
});
குரல் loading="lazy" பெரும்பாலான வழக்குகளில் இதற்கான தேவை நீக்கப்பட்டது (IntersectionObserver தனிப்பயன் தர்க்கத்திற்கு இன்னும் பயனுள்ளதாக இருந்தாலும்).
குரல் விலகிய ஏற்றம் நீண்ட பக்கங்களுக்கான ஆரம்ப பைट் மற்றும் பல படங்களைக் கோரிக்கைகள் — மொபைலுக்கான பெரிய வெற்றி — இலவசமாக குறைக்கிறது।
நுணுக்கங்கள் முக்கியம்: CLS ஐ பாதுகாக்க பரிமாணம் முன்பக்கப்பெறவும், மற்றும் மடல் மேல்/LCP படங்கள் eager ஐ பராமரிக்கவும் (यहाँ तक fetchpriority="high") முக்கியமான உள்ளடக்கம் இன்னும் வேகமாக ஏற்றுகிறது.