image-கள் பொதுவாக ஒரு page-இல் மிகக் கனமான byte-கள், எனவே அவற்றை optimize செய்வது மிகப்பெரிய LCP வெற்றி. மூன்று lever-கள்: நவீன format-கள், responsive sizing, மற்றும் loading priority.
AVIF மற்றும் WebP அதே quality-இல் JPEG/PNG-ஐ விட மிகச் சிறியதாக compress செய்கின்றன (AVIF பெரும்பாலும் JPEG-ஐ விட 50% சிறியது). பழைய browser-கள் இன்னும் வேலை செய்யும்படி ஒரு fallback-உடன் அவற்றை serve செய்யுங்கள்:
ஒரு 400px phone-க்கு ஒரு 2000px image-ஐ அனுப்பாதீர்கள். srcset, device-க்கு சரியான size-ஐ தேர்ந்தெடுக்க browser-ஐ அனுமதிக்கிறது:
<img
srcset="/p-400.jpg 400w, /p-800.jpg 800w, /p-1600.jpg 1600w"
sizes="(max-width: 600px) 100vw, 800px"
src="/p-800.jpg" width="800" height="600" alt="...">
sizes, image எவ்வளவு அகலமாக render ஆகிறது என்பதை browser-க்குச் சொல்கிறது, எனவே அது போதுமான மிகச் சிறிய source-ஐ தேர்ந்தெடுக்க முடியும்.
fetchpriority="high", loading="eager", மற்றும் ஒரு preload-ஐ கருத்தில் கொள்ளுங்கள்.loading="lazy", எனவே தேவைப்படும் வரை அது fetch ஆகாது.CLS-ஐ தடுக்க எப்போதும் width/height-ஐ வைத்திருங்கள்.
ஒரு மெதுவான LCP பெரும்பாலும் ஒரு அளவுக்கு அதிகமான hero image மட்டுமே. format-கள் (AVIF/WebP), சரியான resolution-க்கான srcset, மற்றும் சரியான priority-ஐ அறிவது — மேலும் LCP image-ஐ lazy-load செய்யாமல் இருப்பது — interviewer-கள் எதிர்பார்க்கும் நடைமுறை toolkit, மேலும் இது பொதுவாக ஒரு உண்மையான site-இல் ஒற்றை மிக-அதிக-தாக்க மாற்றம்.
விரிவான பதில்களுடன் கூடிய IT நேர்காணல் கேள்விகளின் நூலகம் — Junior முதல் Senior வரை.
நன்கொடை