Image সাধারণত একটি page-এর সবচেয়ে ভারী byte, তাই সেগুলো অপ্টিমাইজ করা হলো সবচেয়ে বড় LCP জয়। তিনটি লিভার: আধুনিক format, responsive sizing, এবং loading priority।
AVIF ও WebP একই quality-তে JPEG/PNG-এর চেয়ে অনেক ছোট compress হয় (AVIF প্রায়ই JPEG-এর চেয়ে ৫০% ছোট)। একটি fallback সহ পরিবেশন করুন যাতে পুরোনো browser-ও কাজ করে:
একটি 400px phone-এ একটি 2000px image পাঠাবেন না। srcset browser-কে device-এর জন্য সঠিক আকার বেছে নিতে দেয়:
<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 browser-কে বলে image কত চওড়া render হয় যাতে এটি সবচেয়ে ছোট যথেষ্ট 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 না করা — হলো ইন্টারভিউয়ারদের প্রত্যাশিত ব্যবহারিক toolkit, এবং এটি সাধারণত একটি প্রকৃত site-এ সবচেয়ে বেশি প্রভাবের একক পরিবর্তন।
বিস্তারিত উত্তরসহ IT ইন্টারভিউ প্রশ্নের একটি লাইব্রেরি — জুনিয়র থেকে সিনিয়র পর্যন্ত।
দান করুন