কীভাবে নুভেমশপের ইমেজ অগ্রাধিকার কৌশল LCP-তে ৬৮% উন্নতি এবং ৮.৯% বেশি কনভার্সন এনেছে

Federico Iglesias

Jesus Biaggioni

Kaio Graco Cardamone

Lucas Demarchi

Mari Viana

প্রকাশিত: ২৪ জুন, ২০২৬

নুভেমশপ (স্প্যানিশ-ভাষী লাতিন আমেরিকায় তিয়েনদানুব নামে পরিচিত) এই অঞ্চলের শীর্ষস্থানীয় ইকমার্স প্ল্যাটফর্ম, যা ১,৮০,০০০-এরও বেশি অনলাইন স্টোর পরিচালনা করে। ব্যবসায়ীরা একাধিক থিম এবং ডাইনামিক কন্টেন্ট বিন্যাসের মাধ্যমে তাদের স্টোরফ্রন্ট কাস্টমাইজ করায়, এই বৈচিত্র্যের মধ্যে দ্রুত পেজ লোড নিশ্চিত করা কিছু স্বতন্ত্র প্রযুক্তিগত চ্যালেঞ্জ তৈরি করে।

• এক বছরে লার্জেস্ট কনটেন্টফুল পেইন্ট (LCP)-এর স্বাস্থ্য ৬৮% উন্নত হয়ে ৫৭% থেকে ৯৬%-এ পৌঁছেছে, যা প্রকৃত ব্যবহারকারীদের জন্য স্টোরগুলো ভিউপোর্টের শীর্ষে কনটেন্ট রেন্ডার করার পদ্ধতিতে একটি বড় পরিবর্তনকে প্রতিফলিত করে।
• কোর ওয়েব ভাইটালস-এর পাসের হার ৪৮% থেকে বেড়ে ৭২% হয়েছে , যার অর্থ হলো এখন প্রতি ৪টি স্টোরের মধ্যে প্রায় ৩টিই গুগলের ন্যূনতম পারফরম্যান্সের মানদণ্ড পূরণ করছে।
• কেনাকাটার সম্পৃক্ততা পরিমাপযোগ্যভাবে উন্নত হয়েছে: জানুয়ারি ২০২৫ এবং জানুয়ারি ২০২৬-এ সক্রিয় ব্রাজিলিয়ান স্টোরগুলোর একই দলকে বিশ্লেষণ করে দেখা গেছে যে, গুগল অর্গানিক সার্চ থেকে আসা মোবাইল ভিজিটররা নিম্নরূপ ফলাফল দেখিয়েছে:
  • রূপান্তর হারে ৮.৯% বৃদ্ধি (সেশন থেকে পেইড অর্ডার)
  • কার্ট এনগেজমেন্ট রেট (সেশন-টু-কার্ট) ৮.৪% বৃদ্ধি পেয়েছে
• মোবাইল সবচেয়ে বড় অগ্রগতি এনেছে , যা এলসিপি-র সবচেয়ে উল্লেখযোগ্য উন্নতির স্থানগুলোর সাথে সামঞ্জস্যপূর্ণ।

এই ফলাফলগুলো গুগলের পৃষ্ঠপোষকতায় ডেলয়েটের করা গবেষণার (৩৭টি ব্র্যান্ড জুড়ে ৩০ মিলিয়নেরও বেশি সেশন) সাথে সামঞ্জস্যপূর্ণ, যেখানে দেখা গেছে যে লোড স্পিডে ০.১ সেকেন্ডের উন্নতি রিটেইল কনভার্সন রেট ৮.৪% পর্যন্ত বাড়াতে পারে, যা আমাদের বিনিয়োগের দিকনির্দেশনাকে বৈধতা দেয়।

চ্যালেঞ্জ: ডাইনামিক ইকমার্স লেআউটে LCP সনাক্তকরণ

২০২৫ সালের শুরুতে, আমাদের স্টোরগুলোর মাত্র ৪৮% কোর ওয়েব ভাইটালস থ্রেশহোল্ড অতিক্রম করেছিল এবং ৫৭%-এর এলসিপি স্কোর ভালো ছিল। আমাদের প্রাথমিক অনুমান ছিল ইমেজ ওয়েট অথবা সার্ভার ল্যাটেন্সি। আমরা ভুল ছিলাম।

হাজার হাজার স্টোরের উপর PageSpeed ​​Insights-এর বিশ্লেষণের মাধ্যমে আমরা দেখেছি যে, আমাদের প্ল্যাটফর্ম ব্যবসায়ীদের হোমপেজের বিভিন্ন অংশ গতিশীলভাবে সাজানোর সুযোগ দেয়: ক্যারোসেল, ব্যানার, প্রোডাক্ট গ্রিড এবং কাস্টম মডিউল যেকোনো ক্রমে প্রদর্শিত হতে পারে।

এই নমনীয়তার কারণে একটি অপ্রত্যাশিত সমস্যা দেখা দেয়: সঠিক এলিমেন্টটি সবসময় LCP হিসেবে চিহ্নিত হচ্ছিল না। যেসব স্টোরে ক্যারোসেল ছিল, যা আমাদের স্টোরফ্রন্টগুলোর ৮৫% ছিল, সেখানে বিভিন্ন স্ক্রিন ও ডিভাইসে পেজটি কীভাবে রেন্ডার হচ্ছে তার ওপর নির্ভর করে, ভিউপোর্টের নিচের দিকের কোনো ব্যানারকে প্রথম ক্যারোসেল ইমেজটির পরিবর্তে মাঝে মাঝে LCP হিসেবে চিহ্নিত করা হচ্ছিল। এর মানে হলো, আমাদের অপটিমাইজেশনের প্রচেষ্টাগুলো কাঙ্ক্ষিত ফল দিচ্ছিল না: আমরা এমন সব এলিমেন্ট অপটিমাইজ করছিলাম যেগুলো আসলে LCP এলিমেন্ট ছিল না।

সাধারণ SaaS প্ল্যাটফর্মগুলোর মতো, আমরা শুধু হোমপেজটি ঠিক করতে পারতাম না। আমাদের এমন একটি সমাধান প্রয়োজন ছিল যা বিদ্যমান স্টোরগুলোকে অচল না করে বা সৃজনশীল স্বাধীনতা সীমিত না করে, সম্ভাব্য প্রতিটি থিম কনফিগারেশন, সেকশন বিন্যাস এবং মার্চেন্ট কাস্টমাইজেশন জুড়ে কাজ করবে।

ডাইনামিক লেআউটগুলি কীভাবে LCP এলিমেন্ট নির্বাচনকে প্রভাবিত করে

PageSpeed ​​Insights-এর বিশ্লেষণ এবং প্রকৃত ব্যবহারকারীদের পর্যবেক্ষণের মাধ্যমে আমরা দেখেছি যে, ব্রাউজারের LCP শনাক্তকরণ অ্যালগরিদমের কাছে এলিমেন্টগুলো দৃশ্যমান হওয়ার সময় ক্যারোসেল ও ব্যানারের CSS ট্রানজিশনগুলো বিলম্বিত হচ্ছিল। যদিও ব্যবহারকারীরা মনে করছিলেন যে ক্যারোসেলটি প্রথমে লোড হচ্ছে, ব্রাউজারটি মাঝে মাঝে দ্বিতীয় সেকশনের একটি ব্যানারকে LCP এলিমেন্ট হিসেবে চিহ্নিত করছিল—কারণ ট্রানজিশন ইফেক্টের কারণে সেই এলিমেন্টটির দৃশ্যমানতা বিলম্বিত হচ্ছিল না।

আমরা তিনটি মূল কারণ চিহ্নিত করেছি:

• যখন এলিমেন্টগুলোকে দৃশ্যমান বলে মনে করা হতো, তখন CSS ট্রানজিশনগুলো বিলম্বিত হচ্ছিল, যার ফলে LCP ডিটেকশন ভুল ফ্রেমে চলে যাচ্ছিল।
• ভিউপোর্টের শীর্ষে থাকা যে ছবিগুলো অবিলম্বে লোড হওয়া প্রয়োজন ছিল, সেগুলোর ক্ষেত্রে লেজি লোডিং প্রয়োগ করা হয়েছিল।
• অগ্রাধিকার সংকেত না থাকার কারণে সবচেয়ে গুরুত্বপূর্ণ ছবিগুলো প্রথমে লোড হচ্ছিল না।

আমরা আরও দেখেছি যে, এলসিপি পরিমাপের একটি উল্লেখযোগ্য অংশ শুধু হোমপেজ থেকেই নয়, বরং ক্যাটাগরি এবং প্রোডাক্ট পেজ থেকেও এসেছে, যার অর্থ হলো আমাদের সমাধানগুলো সব ধরনের উচ্চ-ট্র্যাফিকযুক্ত পেজে ধারাবাহিকভাবে প্রয়োগ করা প্রয়োজন ছিল।

বাস্তবায়ন: বৃহৎ পরিসরে তিনটি মূল কারণের সমাধান করা

কারণগুলো চিহ্নিত হওয়ার পর সমাধানগুলো ছিল সহজ। আমরা সমস্ত কোর থিম এবং পেজ টাইপ জুড়ে সেগুলো ধারাবাহিকভাবে প্রয়োগ করেছি, কিন্তু নতুন কোনো সমস্যা তৈরি হওয়া এড়াতে প্রতিটির জন্য সতর্ক পরিধি নির্ধারণের প্রয়োজন ছিল।

• প্রথম অবস্থানে থাকা সেকশনগুলো থেকে CSS ট্রানজিশন সরিয়ে ফেলা হয়েছে। এখন পেজের শুরুতে থাকা সেকশনগুলো সঙ্গে সঙ্গে রেন্ডার হয়, ফলে ব্রাউজার কোনো কৃত্রিম বিলম্ব ছাড়াই সেগুলোকে LCP ক্যান্ডিডেট হিসেবে শনাক্ত করতে পারে।

• ভিউপোর্টের উপরের দিকের ছবিগুলো থেকে লেজি লোডিং সরিয়ে দেওয়া হয়েছে। প্রথম সেকশনের ছবিগুলোর ক্ষেত্রে, রিসোর্স লোডের বিলম্ব দূর করার জন্য আমরা শর্তসাপেক্ষে loading="lazy" সরিয়ে দিই। আমরা সতর্ক ছিলাম যেন এটি শুধুমাত্র প্রথম-অবস্থানের সেকশনগুলোর প্রথম ছবির মধ্যেই সীমাবদ্ধ থাকে:

  <!-- Before -->
  <img src="slide-1.webp" loading="lazy" alt="Featured product">
  <!-- After -->
  <img src="slide-1.webp" alt="Featured product">
  

• সুস্পষ্ট অগ্রাধিকার সংকেত যোগ করা হয়েছে। fetchpriority="high" যোগ করার মাধ্যমে, আমরা ব্রাউজারের প্রিলোড স্ক্যানারকে জানাই যে LCP ইমেজটি একটি সর্বোচ্চ অগ্রাধিকারের রিসোর্স, যার ফলে লেআউট এবং রেন্ডারিং শেষ হওয়ার আগেই এটি দ্রুত খুঁজে পাওয়া এবং ডাউনলোড করা যায়। আমরা ভ্যালিডেশন লজিক যোগ করেছি এটা নিশ্চিত করার জন্য যে, অগ্রাধিকার সংকেতগুলো কেবল তখনই প্রয়োগ হবে যখন এলিমেন্টটি প্রকৃতপক্ষে এমন একটি অবস্থানে থাকবে যেখানে এটি LCP ক্যান্ডিডেট হতে পারে: অনেক বেশি ইমেজে fetchpriority="high" যোগ করাটা হিতে বিপরীত হবে, কারণ যদি সবকিছুই উচ্চ অগ্রাধিকারের হয়, তবে কোনো কিছুই আর উচ্চ অগ্রাধিকার পাবে না।

  <!-- Before -->
  <img src="slide-1.webp" alt="Featured product">
  <!-- After -->
  <img src="slide-1.webp" fetchpriority="high" alt="Featured product">
  

• এজ ক্যাশিংয়ের মাধ্যমে ল্যাটেন্সি হ্রাস করা হয়েছে। লোড টাইম কমানোর জন্য ক্যাশিং কার্যকর, কিন্তু ই-কমার্সে এর একটি বাস্তব ঝুঁকি রয়েছে: পুরনো মূল্য এবং ইনভেন্টরি ডেটা পরিবেশন করা সরাসরি গ্রাহকের আস্থা এবং রাজস্বকে প্রভাবিত করে। আমরা পারফরম্যান্স ডেটার পাশাপাশি ব্যবসায়িক মেট্রিক্স পর্যবেক্ষণ করে, ক্যাশ হিট রেট সর্বোচ্চ করে এবং একই সাথে এমন কোনো কন্টেন্ট ক্যাশ না করার বিষয়টি নিশ্চিত করে যা মার্চেন্ট বা ক্রেতার অভিজ্ঞতাকে ক্ষতিগ্রস্ত করতে পারে—এই বিষয়গুলো সতর্কতার সাথে মোকাবেলা করেছি।

প্রভাব ও ফলাফল: এলসিপি উন্নতি ৫৭% থেকে ৯৬%

এই উন্নতিগুলো নুভেমশপ এবং টিয়েনডানুবকে ব্রাজিল, আর্জেন্টিনা এবং মেক্সিকোতে পারফরম্যান্সের দিক থেকে এক নম্বর ইকমার্স প্ল্যাটফর্ম হিসেবে প্রতিষ্ঠিত করেছে।

মূল শিক্ষা এবং মরণোত্তর পর্যালোচনা

নুভেমশপের অত্যন্ত কাস্টমাইজযোগ্য আর্কিটেকচারের কারণে আমরা স্ট্যান্ডার্ড অপটিমাইজেশন প্লেবুকের উপর নির্ভর করতে পারছিলাম না। আসল সমস্যাটি ছবির ওজন বা সার্ভার ল্যাটেন্সি ছিল না: সমস্যাটি ছিল যে, CSS ট্রানজিশন, প্রায়োরিটি সিগন্যালের অনুপস্থিতি এবং ভিউপোর্টের উপরের দিকের ছবিগুলিতে লেজি লোডিং প্রয়োগের ফলে ব্রাউজারগুলি অপ্রত্যাশিত এলিমেন্টকে LCP হিসেবে নির্বাচন করছিল।

মূল কারণগুলো বুঝতে পারার পর সমাধানটি বেশ সহজ ছিল: প্রথম-অবস্থানের সেকশনগুলো থেকে ট্রানজিশন সরিয়ে ফেলা, ভিউপোর্টের শীর্ষে থাকা ছবিগুলো থেকে লেজি লোডিং বাদ দেওয়া এবং সুস্পষ্ট প্রায়োরিটি সিগন্যাল যোগ করা। আমরা আমাদের প্ল্যাটফর্মের সমস্ত কোর থিম, পেজ টাইপ এবং ১,৮০,০০০-এরও বেশি স্টোরে ধারাবাহিকভাবে এটি প্রয়োগ করেছি।

ফলাফলই সব বলে দেয়: এলসিপি (LCP) পাসের হার ৫৭% থেকে বেড়ে ৯৬% হয়েছে, সামগ্রিক কোর ওয়েব ভাইটালস (Core Web Vitals) পাসের হার ৪৮% থেকে বেড়ে ৭২% হয়েছে, এবং ব্যবসায়ীরা পরিমাপযোগ্য লাভ দেখেছেন: কনভার্সন রেটে ৮.৯% বৃদ্ধি এবং মোবাইলে কার্ট এনগেজমেন্টে ৮.৪% বৃদ্ধি। দ্রুতগতির স্টোরফ্রন্টগুলো শুধু একটি প্রযুক্তিগত সাফল্যই নয়, এগুলো সরাসরি ব্যবসায়ীদের সাফল্যকে চালিত করে।