Lazy Loading: কোন ছবিতে করবেন, কোনটায় কখনোই নয় (LCP image)

Speed বাড়ানোর পরামর্শ খুঁজলেই শুনবেন "lazy loading চালু করুন"। কথাটা ঠিক, কিন্তু অর্ধেক। ভুল জায়গায় lazy loading করলে আপনার product page আসলে ধীর মনে হতে পারে — বিশেষ করে উপরের বড় ছবিটা দেরিতে আসে। এই লেখায় দেখবেন lazy loading কী, কোন ছবিতে করবেন, কোনটায় কখনোই করবেন না, আর WordPress ও Laravel site-এ কীভাবে সঠিকভাবে সেট করবেন।

Lazy loading আসলে কী

সাধারণভাবে browser page খুললেই সব ছবি download শুরু করে — যেগুলো screen-এর অনেক নিচে, customer হয়তো কখনো scroll করে দেখবেনই না, সেগুলোও। Lazy loading মানে হলো: যে ছবি এখনো screen-এ আসেনি, সেটা পরে লোড করো; customer scroll করে কাছাকাছি গেলে তখন আনো।

এখন এর জন্য আলাদা JavaScript লাগে না। আধুনিক browser-এ HTML-এর একটা attribute দিয়েই কাজ হয়:

<img src="/img/panjabi-blue.webp" alt="নীল সুতি panjabi"
     width="600" height="600" loading="lazy">

loading="lazy" ছবি ও <iframe> (যেমন YouTube video embed, Google Map) দুটোতেই কাজ করে। Browser নিজেই ঠিক করে ছবিটা screen-এর কত কাছে এলে লোড শুরু করবে।

কেন এটা e-commerce-এ গুরুত্বপূর্ণ

Category page-এ ২০–৫০টা product thumbnail থাকে, home page-এ থাকে একাধিক section, banner, brand logo, Facebook review screenshot। প্রথম screen-এ দেখা যায় হয়তো ৪–৬টা ছবি। বাকিগুলো শুরুতেই লোড হলে প্রথম দৃশ্যমান অংশের জন্য bandwidth ভাগ হয়ে যায়, আর ধীর mobile data-তে সবকিছুই দেরিতে আসে।

Lazy loading নিচের ছবিগুলো পিছিয়ে দেয়, ফলে প্রথম screen দ্রুত তৈরি হয় এবং customer-এর data-ও বাঁচে। যাঁরা পুরো page scroll করেন না, তাঁদের জন্য অপ্রয়োজনীয় download হয়ই না।

কখন lazy loading করবেন না: LCP image

এটাই এই লেখার সবচেয়ে গুরুত্বপূর্ণ অংশ। Page খোলার সাথে সাথে screen-এ যে সবচেয়ে বড় ছবি বা text block দেখা যায়, Google সেটাকে LCP (Largest Contentful Paint) element ধরে এবং মাপে সেটা কত দ্রুত দেখা গেল। Product page-এ এটা সাধারণত main product ছবি, home page-এ বড় hero banner।

এই ছবিতে loading="lazy" দিলে browser আগে বুঝতে চায় ছবিটা screen-এ আছে কিনা — layout হিসাব হওয়ার পর তবেই download শুরু হয়। ফলে সবচেয়ে গুরুত্বপূর্ণ ছবিটাই দেরিতে আসে, আর LCP খারাপ হয়। Core Web Vitals-এ LCP-এর "ভালো" সীমা ২.৫ সেকেন্ড, তাই এই ভুলটা সরাসরি আপনার score-এ দেখা যায়।

উপরের ছবির জন্য সঠিক সেটিং

প্রথম screen-এর main ছবিতে lazy না দিয়ে বরং browser-কে বলুন এটা আগে আনতে:

<img src="/img/eid-sale-banner.webp" alt="Eid collection sale banner"
     width="1200" height="600" fetchpriority="high">

fetchpriority="high" browser-কে জানায় এই ছবি অগ্রাধিকার পাবে। পুরো page-এ শুধু ১টা (বড়জোর ২টা) ছবিতে এটা দিন — সবাইকে high দিলে কারও অগ্রাধিকার থাকে না।

সহজ নিয়ম

মনে রাখবেন, mobile আর desktop-এ "প্রথম screen" আলাদা। Desktop-এ category grid-এর প্রথম ৮টা ছবি দেখা গেলেও mobile-এ হয়তো ২–৪টা দেখা যায়। নিরাপদ পথ: grid-এর প্রথম কয়েকটা ছবি eager রাখুন, বাকিগুলো lazy।

Layout shift এড়াতে width ও height

Lazy ছবি পরে লোড হয়। যদি ছবির জায়গা আগে থেকে ঠিক করা না থাকে, ছবি আসার সাথে সাথে নিচের text ও "Order Now" button নিচে সরে যায় — customer ভুল জায়গায় tap করে ফেলেন। এটাকে বলে layout shift, যা Core Web Vitals-এর CLS মাপে।

সমাধান সহজ: প্রতিটা <img>-এ width ও height attribute দিন (ছবির আসল ratio অনুযায়ী), অথবা CSS-এ aspect-ratio দিন। তাহলে browser আগেই জায়গা রেখে দেয়।

WordPress/WooCommerce-এ কীভাবে সেট করবেন

WordPress 5.5 থেকে core নিজেই ছবিতে loading="lazy" যোগ করে, পরে 5.9 থেকে প্রথম দিকের ছবিকে lazy না করার ব্যবস্থা আসে (6.3-এ তা আরও নির্ভুল করা হয়), আর 6.3 থেকে core LCP-সম্ভাব্য ছবিতে নিজেই fetchpriority="high" যোগ করে। সমস্যা হয় যখন theme, page builder বা optimization plugin নিজের মতো করে আবার lazy loading চাপায় — বিশেষ করে slider-এর ছবিতে।

1. 1
   WordPress, theme ও plugin update করুন, যাতে core-এর নতুন lazy loading আচরণ কাজ করে।
2. 2
   PageSpeed Insights-এ home ও একটা product page test করে LCP element কোনটা তা দেখুন।
3. 3
   Cache/optimization plugin (যেমন LiteSpeed Cache, WP Rocket, Perfmatters)-এ lazy loading সেটিং খুঁজুন; সেখানে "exclude" বা "skip first X images" অপশন থাকলে প্রথম ১–৩টা ছবি বাদ দিন।
4. 4
   Hero slider ব্যবহার করলে প্রথম slide-এর ছবি lazy থেকে বাদ দিন; সম্ভব হলে slider-এর বদলে একটা static banner ব্যবহার করুন।
5. 5
   একাধিক plugin একসাথে lazy loading করছে কিনা দেখুন — একটাই রাখুন।
6. 6
   Page source-এ (Ctrl+U) main ছবির tag-এ loading="lazy" আছে কিনা খুঁজে নিশ্চিত হোন।
7. 7
   Cache clear করে আবার test করুন এবং LCP-এর পরামর্শ চলে গেছে কিনা দেখুন।

Custom site (Laravel/Blade)-এ

Custom template-এ নিয়ন্ত্রণ আপনার হাতে। Product grid loop-এ index দেখে প্রথম কয়েকটা ছবিকে eager, বাকিগুলোকে lazy করতে পারেন:

@foreach ($products as $product)
  <img src="{{ $product->thumb_url }}" alt="{{ $product->name }}"
       width="400" height="400"
       loading="{{ $loop->index < 4 ? 'eager' : 'lazy' }}">
@endforeach

Product detail page-এর main ছবিতে কখনো lazy দেবেন না, বরং fetchpriority="high" দিন। পুরনো JavaScript lazy-load library (যেমন data-src দিয়ে কাজ করে এমন) ব্যবহার করলে সেটা সরিয়ে native attribute-এ যাওয়া ভালো — JS-নির্ভর lazy loading-এ ছবি আসতে আরও দেরি হতে পারে, আর JS কোনো কারণে ব্যর্থ হলে ছবি আসেই না।

সাধারণ ভুলগুলো

পরবর্তী পদক্ষেপ

আপনার সবচেয়ে গুরুত্বপূর্ণ ২–৩টা page (যেখানে ad-এর traffic যায়) PageSpeed Insights-এ test করুন, আর LCP element কোনটা এবং সেটা lazy কিনা দেখুন। তারপর উপরের টেবিল অনুযায়ী সেটিং ঠিক করুন। Lazy loading page speed-এর একটা অংশ মাত্র — hosting, JavaScript, font ও cache নিয়ে পুরো পরিকল্পনা পাবেন PageSpeed optimization for online shops গাইডে, আর site এখনো ধীর হলে কারণ খুঁজতে দেখুন ধীর e-commerce website: কারণ ও সমাধান।