Website-এ image lazy loading থাকলে page প্রথমে হালকা হতে পারে, কিন্তু ভুল setup-এ hero দেরিতে আসে, scroll করার পরে ফাঁকা box দেখা যায় বা layout হঠাৎ নড়ে যায়। শুধু DevTools-এ loading="lazy" দেখলেই test শেষ নয়। Real phone, slow network এবং বিভিন্ন viewport-এ কোন ছবি কখন load হচ্ছে, তার size reserve আছে কি না এবং content বোঝা যাচ্ছে কি না—সব মিলিয়ে দেখুন। এই guide developer, content editor এবং small business owner-কে একটি repeatable test দেবে।

প্রথমে image inventory ছোট করুন

একটি representative page নিন: hero, card grid, article image, logo এবং footer image থাকলে ভাল। প্রতিটির expected position, source file, alt text ও mobile crop লিখুন। Homepage-এর সঙ্গে একটি detail page-ও test করুন। একসঙ্গে গোটা site ধরলে failure-এর কারণ বোঝা কঠিন হয়। Cache clear করে logged-out visitor-এর মতো page খুলুন।

Hero image-কে lazy করবেন না

Initial viewport-এর প্রধান বা Largest Contentful Paint candidate image সাধারণত সঙ্গে সঙ্গে request হওয়া দরকার। web.dev-এর browser-level lazy-loading guidance প্রথম viewport-এর image-এ lazy loading না দিতে বলে। Hero-তে eager loading বা appropriate priority ব্যবহার হলেও file size, format এবং responsive source ঠিক রাখতে হবে। শুধু high priority দিয়ে 2 MB photo দ্রুত হয় না। Desktop ও mobile-এ কোন element LCP হচ্ছে তা আলাদা হতে পারে, তাই দুটো viewport মাপুন।

Below-the-fold image scroll করে দেখুন

Page load হওয়ার সঙ্গে সঙ্গে নিচের সব image network request করছে কি না দেখুন। তারপর ধীরে scroll করুন। Image viewport-এর কাছে এলে request শুরু হওয়া স্বাভাবিক; একেবারে সামনে এসে blank থেকে গেলে user-visible delay বেশি। খুব আগে সব load হলে bandwidth saving কমে যায়। Browser timing implementation-specific, তাই exact pixel threshold ধরে pass/fail বানাবেন না। Slow 4G throttling-এ card image, caption এবং link usable আছে কি না দেখুন। একই image বারবার request হলে markup বা cache header review করুন।

Width ও height দিয়ে জায়গা reserve করুন

Image আসার আগে browser যেন aspect ratio জানে। HTML width-height attributes বা CSS aspect-ratio দিয়ে stable box রাখুন। Placeholder-এর ratio এবং final crop আলাদা হলে content নিচে সরে যায়। LCP, INP ও CLS measurement ধরে layout shift record করুন। Fixed height দিয়ে portrait image চেপে দেবেন না; object-fit ও focal point review করুন। Ad, font বা cookie banner-এর shift-কে ভুল করে image issue মনে না করে recording-এ কোন element নড়েছে দেখুন।

Responsive source এবং fallback পরীক্ষা করুন

srcset ও sizes থাকলে 360px phone-এ অযথা 1600px asset download হচ্ছে কি না Network panel-এ দেখুন। CSS-এ image যতটা render হচ্ছে তার কাছাকাছি candidate browser বেছে নিচ্ছে কি না মিলান। JavaScript disabled test applicable হলে native markup-এ meaningful fallback আছে কি না দেখুন। Broken source দিলে alt text দেখা যায় এবং link/card usable থাকে কি না পরীক্ষা করুন। Decorative image-এর alt খালি হতে পারে; content image-এর alt ছবির প্রয়োজনীয় অর্থ সংক্ষেপে বলবে।

Lazy-loaded image test checklist

  • Hero: initial viewport-এর প্রধান image lazy নয়।
  • Scroll: নিচের image সময়মতো load হয়, blank অপেক্ষা নেই।
  • Layout: width-height বা aspect ratio দিয়ে space reserved।
  • Responsive: phone অযথা oversized source নেয় না।
  • Fallback: failed image-এ alt ও surrounding content usable।
  • Metrics: mobile ও desktop LCP/CLS আলাদা দেখা হয়েছে।
  • Record: route, viewport, network ও result লেখা আছে।

Test result প্রমাণসহ লিখুন

“Images okay” না লিখে route, viewport, connection profile, cache state এবং observed behaviour দিন। যেমন: 360px, slow 4G, cold load-এ hero immediately requested; তৃতীয় card scroll-এর আগে requested; visible blank নেই। Screenshot-এর সঙ্গে Network request order বা performance trace রাখুন। Failure intermittent হলে video capture useful। Third-party widget image আলাদা owner-এর হলেও user experience-এ তার effect record করুন। Fix-এর পরে একই condition-এ retest করুন।

Release-এর পরে ছোট monitoring রাখুন

Local test pass হলেও production CDN, cache এবং real device আলাদা হতে পারে। অনুমোদিত release-এর পরে representative route-এ field data, image errors এবং LCP trend দেখুন। নতুন CMS template বা component এলে inventory আবার চালান। Editor-কে hero ও below-fold placement-এর সহজ rule দিন। লক্ষ্য সব image-এ lazy attribute বসানো নয়; first screen দ্রুত meaningful রাখা, নিচের bandwidth প্রয়োজনমতো ব্যবহার করা এবং scroll-এর সময় stable experience দেওয়া।