এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

ক্যারোসেলের জন্য সেরা অনুশীলন

কর্মক্ষমতা এবং ব্যবহারযোগ্যতার জন্য ক্যারোসেল অপ্টিমাইজ করুন।

Katie Hempenius

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

এই নিবন্ধটি ক্যারোসেলগুলির জন্য পারফরম্যান্স এবং UX সেরা অনুশীলনগুলি নিয়ে আলোচনা করে৷

কর্মক্ষমতা

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

LCP (সবচেয়ে বড় বিষয়বস্তুর পেইন্ট)
বড়, ভাঁজের ওপরের ক্যারোসেলগুলিতে প্রায়শই পৃষ্ঠার LCP উপাদান থাকে এবং তাই LCP-তে উল্লেখযোগ্য প্রভাব ফেলতে পারে। এই পরিস্থিতিতে, ক্যারোজেল অপ্টিমাইজ করা উল্লেখযোগ্যভাবে LCP উন্নত করতে পারে। ক্যারোসেলযুক্ত পৃষ্ঠাগুলিতে কীভাবে LCP পরিমাপ কাজ করে তার একটি গভীর ব্যাখ্যার জন্য, ক্যারোসেলের জন্য LCP পরিমাপ পড়ুন।
INP (পরবর্তী পেইন্টের সাথে মিথস্ক্রিয়া)
ক্যারোসেলের ন্যূনতম জাভাস্ক্রিপ্ট প্রয়োজনীয়তা রয়েছে এবং তাই পৃষ্ঠার প্রতিক্রিয়াশীলতাকে প্রভাবিত করা উচিত নয়। আপনি যদি আবিষ্কার করেন যে আপনার সাইটের ক্যারোজেলে দীর্ঘদিন ধরে চলমান স্ক্রিপ্ট রয়েছে, তাহলে আপনার ক্যারোজেল টুলিং প্রতিস্থাপন করার কথা বিবেচনা করা উচিত।
CLS (ক্রমবর্ধমান লেআউট শিফট)
আশ্চর্যজনক সংখ্যক ক্যারোসেল জ্যাঙ্কি, নন-কম্পোজিটেড অ্যানিমেশন ব্যবহার করে যা CLS-এ অবদান রাখতে পারে। অটোপ্লেয়িং ক্যারোসেল সহ পৃষ্ঠাগুলিতে, এটি অসীম CLS সৃষ্টি করার সম্ভাবনা রয়েছে। এই ধরনের CLS সাধারণত মানুষের চোখে স্পষ্ট নয়, যা সমস্যাটিকে উপেক্ষা করা সহজ করে তোলে। এই সমস্যাটি এড়াতে, আপনার ক্যারোজেলে অ-সংযুক্ত অ্যানিমেশন ব্যবহার করা এড়িয়ে চলুন (উদাহরণস্বরূপ, স্লাইড ট্রানজিশনের সময়)।

কর্মক্ষমতা সেরা অনুশীলন

HTML ব্যবহার করে ক্যারোজেল সামগ্রী লোড করুন

ক্যারোজেল বিষয়বস্তু পৃষ্ঠার HTML মার্কআপের মাধ্যমে লোড করা উচিত যাতে এটি পৃষ্ঠা লোড প্রক্রিয়ার প্রথম দিকে ব্রাউজার দ্বারা আবিষ্কার করা যায়৷ ক্যারোজেল কন্টেন্ট লোড করার জন্য জাভাস্ক্রিপ্ট ব্যবহার করা সম্ভবত ক্যারোসেল ব্যবহার করার সময় এড়াতে সবচেয়ে বড় পারফরম্যান্স ভুল। এটি ইমেজ লোড হতে দেরি করে এবং LCP-কে নেতিবাচকভাবে প্রভাবিত করতে পারে।

করবেন

<div class="slides">
  <img src="https://example.com/cat1.jpg">
  <img src="https://example.com/cat2.jpg">
  <img src="https://example.com/cat3.jpg">
</div>

করবেন না

const slides = document.querySelector(".slides");
const newSlide = document.createElement("img");
newSlide.src = "htttp://example.com/cat1.jpg";
slides.appendChild(newSlide);

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

লেআউট শিফট এড়িয়ে চলুন

স্লাইড ট্রানজিশন এবং নেভিগেশন কন্ট্রোল হল ক্যারোসেলে লেআউট পরিবর্তনের দুটি সবচেয়ে সাধারণ উৎস:

স্লাইড ট্রানজিশন: স্লাইড ট্রানজিশনের সময় যে লেআউট পরিবর্তনগুলি ঘটে তা সাধারণত DOM উপাদানগুলির লেআউট-ইনডুসিং বৈশিষ্ট্য আপডেট করার কারণে ঘটে। এই বৈশিষ্ট্যগুলির কিছু উদাহরণের মধ্যে রয়েছে: left , top , width , এবং marginTop . লেআউট পরিবর্তন এড়াতে, পরিবর্তে এই উপাদানগুলি স্থানান্তর করতে CSS transform বৈশিষ্ট্য ব্যবহার করুন। এই ডেমো দেখায় কিভাবে একটি মৌলিক ক্যারোজেল তৈরি করতে transform ব্যবহার করতে হয়।
নেভিগেশন নিয়ন্ত্রণ: DOM থেকে ক্যারোজেল নেভিগেশন নিয়ন্ত্রণগুলি সরানো বা যোগ করা/সরানোর ফলে এই পরিবর্তনগুলি কীভাবে বাস্তবায়িত হয় তার উপর নির্ভর করে লেআউট পরিবর্তন হতে পারে। এই আচরণ প্রদর্শন করে এমন ক্যারোসেলগুলি সাধারণত ব্যবহারকারী হোভারের প্রতিক্রিয়া হিসাবে এটি করে।

ক্যারোসেলের জন্য CLS পরিমাপ সংক্রান্ত বিভ্রান্তির কিছু সাধারণ বিষয় হল:

অটোপ্লে ক্যারোসেল: স্লাইড ট্রানজিশন হল ক্যারোজেল-সম্পর্কিত লেআউট শিফটের সবচেয়ে সাধারণ উৎস। একটি নন-অটোপ্লে ক্যারাউজেলে এই লেআউট শিফটগুলি সাধারণত ব্যবহারকারীর ইন্টারঅ্যাকশনের 500ms এর মধ্যে ঘটে এবং তাই ক্রমবর্ধমান লেআউট শিফট (CLS) এ গণনা করা হয় না । যাইহোক, অটোপ্লে ক্যারোসেলের জন্য, শুধুমাত্র এই লেআউটগুলিকে সম্ভাব্যভাবে CLS-এর দিকে গণনা করা যায় না - কিন্তু তারা অনির্দিষ্টকালের জন্য পুনরাবৃত্তি করতে পারে। এইভাবে, এটি যাচাই করা বিশেষভাবে গুরুত্বপূর্ণ যে একটি অটোপ্লে ক্যারোজেল লেআউট পরিবর্তনের উৎস নয়।
স্ক্রোলিং: কিছু ক্যারোসেল ব্যবহারকারীদের ক্যারোজেল স্লাইডের মাধ্যমে নেভিগেট করতে স্ক্রলিং ব্যবহার করার অনুমতি দেয়। যদি একটি উপাদানের শুরুর অবস্থান পরিবর্তিত হয় কিন্তু এর স্ক্রোল অফসেট (অর্থাৎ, scrollLeft বা scrollTop ) একই পরিমাণে পরিবর্তিত হয় (কিন্তু বিপরীত দিকে) তবে এটি একটি বিন্যাস স্থানান্তর হিসাবে বিবেচিত হবে না যদি তারা একই ফ্রেমে ঘটে।

লেআউট শিফট সম্পর্কে আরও তথ্যের জন্য, ডিবাগ লেআউট শিফট দেখুন।

আধুনিক প্রযুক্তি ব্যবহার করুন

অনেক সাইট ক্যারোসেল বাস্তবায়নের জন্য তৃতীয় পক্ষের জাভাস্ক্রিপ্ট লাইব্রেরি ব্যবহার করে। আপনি যদি বর্তমানে পুরানো ক্যারোজেল টুলিং ব্যবহার করেন, তাহলে আপনি নতুন টুলিং-এ স্যুইচ করে কর্মক্ষমতা উন্নত করতে সক্ষম হতে পারেন। নতুন টুলগুলি আরও দক্ষ API ব্যবহার করে এবং jQuery এর মত অতিরিক্ত নির্ভরতা প্রয়োজন হওয়ার সম্ভাবনা কম।

যাইহোক, আপনি যে ধরনের ক্যারোজেল তৈরি করছেন তার উপর নির্ভর করে, আপনার জাভাস্ক্রিপ্টের আদৌ প্রয়োজন নাও হতে পারে। নতুন স্ক্রোল স্ন্যাপ API শুধুমাত্র HTML এবং CSS ব্যবহার করে ক্যারোজেল-এর মতো রূপান্তরগুলি বাস্তবায়ন করা সম্ভব করে তোলে।

এখানে scroll-snap ব্যবহার করার কিছু সংস্থান রয়েছে যা আপনি সহায়ক বলে মনে করতে পারেন:

ক্যারোজেল সামগ্রী অপ্টিমাইজ করুন

Carousels প্রায়ই একটি সাইটের সবচেয়ে বড় কিছু ছবি ধারণ করে, তাই এই ছবিগুলি সম্পূর্ণরূপে অপ্টিমাইজ করা হয়েছে তা নিশ্চিত করতে আপনার সময় ব্যয় হতে পারে। সঠিক ইমেজ ফরম্যাট এবং কম্প্রেশন লেভেল নির্বাচন করা, একটি ইমেজ CDN ব্যবহার করা , এবং একাধিক ইমেজ ভার্সন পরিবেশন করার জন্য srcset ব্যবহার করা হল সমস্ত কৌশল যা ইমেজের ট্রান্সফার সাইজ কমাতে পারে।

কর্মক্ষমতা পরিমাপ

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

ক্যারোসেলের জন্য LCP পরিমাপ

ক্যারোসেলের জন্য LCP গণনা কীভাবে কাজ করে তা বোঝার জন্য এইগুলি হল মূল বিষয়গুলি:

LCP পৃষ্ঠা উপাদানগুলিকে বিবেচনা করে কারণ সেগুলি ফ্রেমে আঁকা হয়৷ ব্যবহারকারী যখন পৃষ্ঠার সাথে ইন্টারঅ্যাক্ট করে (ট্যাপ, স্ক্রোল বা কী চেপে) তখন LCP উপাদানের জন্য নতুন প্রার্থীদের আর বিবেচনা করা হয় না। এইভাবে, একটি অটোপ্লেয়িং ক্যারোজেলের যেকোনো স্লাইডের চূড়ান্ত LCP উপাদান হওয়ার সম্ভাবনা রয়েছে—যেখানে একটি স্ট্যাটিক ক্যারোজেলে শুধুমাত্র প্রথম স্লাইডটি একজন সম্ভাব্য LCP প্রার্থী হবে।
যদি দুটি সমান আকারের ছবি রেন্ডার করা হয়, তাহলে প্রথম ছবিটি LCP উপাদান হিসেবে বিবেচিত হবে। LCP এলিমেন্ট শুধুমাত্র তখনই আপডেট করা হয় যখন LCP প্রার্থী বর্তমান LCP এলিমেন্টের থেকে বড় হয়। এইভাবে, সমস্ত ক্যারোজেল উপাদান সমান আকারের হলে, LCP উপাদানটি প্রদর্শিত হওয়া প্রথম চিত্র হওয়া উচিত।
LCP প্রার্থীদের মূল্যায়ন করার সময়, LCP বিবেচনা করে " দৃশ্যমান আকার বা অন্তর্নিহিত আকার, যেটি ছোট হয় ।" এইভাবে, যদি একটি অটোপ্লেয়িং ক্যারাউজেল একটি সামঞ্জস্যপূর্ণ আকারে চিত্রগুলি প্রদর্শন করে, কিন্তু বিভিন্ন অন্তর্নিহিত আকারের চিত্রগুলি ধারণ করে যা প্রদর্শনের আকারের চেয়ে ছোট, তবে নতুন স্লাইডগুলি প্রদর্শিত হওয়ার সাথে সাথে LCP উপাদানটি পরিবর্তিত হতে পারে। এই ক্ষেত্রে, সমস্ত ছবি একই আকারে প্রদর্শিত হলে, সবচেয়ে বড় অভ্যন্তরীণ আকারের চিত্রটিকে LCP উপাদান হিসাবে বিবেচনা করা হবে। LCP কম রাখতে, আপনাকে নিশ্চিত করতে হবে যে একটি অটোপ্লেয়িং ক্যারোজেলের সমস্ত আইটেম একই অন্তর্নিহিত আকারের।

Chrome 88-এ ক্যারোসেলের জন্য LCP গণনার পরিবর্তন

ক্রোম 88- এর হিসাবে, যে ছবিগুলি পরে DOM থেকে সরানো হয় সেগুলিকে সম্ভাব্য বৃহত্তম সামগ্রীপূর্ণ পেইন্ট হিসাবে বিবেচনা করা হয়। Chrome 88-এর আগে, এই ছবিগুলি বিবেচনার বাইরে ছিল। অটোপ্লেয়িং ক্যারোসেল ব্যবহার করে এমন সাইটগুলির জন্য, এই সংজ্ঞা পরিবর্তনটি LCP স্কোরের উপর নিরপেক্ষ বা ইতিবাচক প্রভাব ফেলবে।

এই পরিবর্তনটি পর্যবেক্ষণের প্রতিক্রিয়া হিসাবে করা হয়েছিল যে অনেক সাইট DOM গাছ থেকে পূর্বে প্রদর্শিত চিত্রটি সরিয়ে ক্যারোজেল রূপান্তরগুলি প্রয়োগ করে৷ Chrome 88 এর আগে, প্রতিবার যখন একটি নতুন স্লাইড উপস্থাপন করা হয়েছিল, পূর্ববর্তী উপাদানটি অপসারণ একটি LCP আপডেট ট্রিগার করবে। এই পরিবর্তনটি শুধুমাত্র অটোপ্লেয়িং ক্যারোসেলকে প্রভাবিত করে- সংজ্ঞা অনুসারে, সম্ভাব্য সবচেয়ে বড় কন্টেন্টফুল পেইন্টগুলি শুধুমাত্র একজন ব্যবহারকারী প্রথম পৃষ্ঠার সাথে ইন্টারঅ্যাক্ট করার আগে ঘটতে পারে।

Chrome 121-এ থ্রেশহোল্ডে পরিবর্তন

ক্রোম 121 ক্যারোসেলের মতো অনুভূমিক-স্ক্রলিং চিত্রগুলির আচরণ পরিবর্তন করেছে। এগুলি এখন উল্লম্ব স্ক্রোলিং হিসাবে একই থ্রেশহোল্ড ব্যবহার করে। এর অর্থ হল ক্যারোজেল ব্যবহারের ক্ষেত্রে, ছবিগুলি ভিউপোর্টে দৃশ্যমান হওয়ার আগে লোড করা হবে৷ এর মানে হল ইমেজ লোডিং ব্যবহারকারীর কাছে লক্ষণীয় হওয়ার সম্ভাবনা কম, কিন্তু বেশি ডাউনলোডের খরচে। Chrome বনাম Safari এবং Firefox-এ আচরণের তুলনা করতে অনুভূমিক অলস লোডিং ডেমো ব্যবহার করুন।

অন্যান্য বিবেচনা

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

নেভিগেশন সেরা অনুশীলন

বিশিষ্ট নেভিগেশন নিয়ন্ত্রণ প্রদান

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

নেভিগেশন অগ্রগতি নির্দেশ করুন

ক্যারোজেল নেভিগেশন নিয়ন্ত্রণগুলি স্লাইডের মোট সংখ্যা এবং সেগুলির মাধ্যমে ব্যবহারকারীর অগ্রগতি সম্পর্কে প্রসঙ্গ সরবরাহ করা উচিত। এই তথ্যটি ব্যবহারকারীর জন্য একটি নির্দিষ্ট স্লাইডে নেভিগেট করা এবং কোন সামগ্রীটি ইতিমধ্যে দেখা হয়েছে তা বুঝতে সহজ করে তোলে৷ কিছু পরিস্থিতিতে আসন্ন বিষয়বস্তুর পূর্বরূপ প্রদান করা - তা পরবর্তী স্লাইডের একটি উদ্ধৃতি বা থাম্বনেইলের একটি তালিকা-ও সহায়ক হতে পারে এবং ব্যস্ততা বাড়াতে পারে৷

মোবাইল অঙ্গভঙ্গি সমর্থন

মোবাইলে, সোয়াইপ অঙ্গভঙ্গিগুলি প্রথাগত নেভিগেশন নিয়ন্ত্রণগুলি ছাড়াও সমর্থিত হওয়া উচিত (যেমন স্ক্রিন বোতামগুলি)৷

বিকল্প নেভিগেশন পাথ প্রদান

কারণ এটি অসম্ভাব্য যে বেশিরভাগ ব্যবহারকারী সমস্ত ক্যারোজেল সামগ্রীর সাথে জড়িত থাকবেন, ক্যারোজেল স্লাইডগুলি যে সামগ্রীতে লিঙ্ক করে তা অন্যান্য নেভিগেশন পথ থেকে অ্যাক্সেসযোগ্য হওয়া উচিত৷

পঠনযোগ্যতার সর্বোত্তম অনুশীলন

অটোপ্লে ব্যবহার করবেন না

অটোপ্লে ব্যবহার দুটি প্রায় বিরোধপূর্ণ সমস্যা তৈরি করে: অন-স্ক্রীন অ্যানিমেশনগুলি ব্যবহারকারীদের বিভ্রান্ত করে এবং আরও গুরুত্বপূর্ণ বিষয়বস্তু থেকে চোখ সরিয়ে দেয়; একই সাথে, যেহেতু ব্যবহারকারীরা প্রায়শই বিজ্ঞাপনের সাথে অ্যানিমেশন যুক্ত করে, তারা অটোপ্লে হওয়া ক্যারোসেলগুলিকে উপেক্ষা করবে৷

এইভাবে, এটি বিরল যে অটোপ্লে একটি ভাল পছন্দ। যদি বিষয়বস্তু গুরুত্বপূর্ণ হয়, অটোপ্লে ব্যবহার না করা তার এক্সপোজার সর্বাধিক করবে; যদি ক্যারোজেল বিষয়বস্তু গুরুত্বপূর্ণ না হয়, তাহলে অটোপ্লে ব্যবহার আরও গুরুত্বপূর্ণ বিষয়বস্তু থেকে বিরত থাকবে। উপরন্তু, অটোপ্লে করা ক্যারোসেল পড়া কঠিন হতে পারে (এবং বিরক্তিকরও)। লোকেরা বিভিন্ন গতিতে পড়ে, তাই এটি বিরল যে একটি ক্যারোজেল ধারাবাহিকভাবে বিভিন্ন ব্যবহারকারীদের জন্য "সঠিক" সময়ে পরিবর্তন করে।

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

লেখা এবং ছবি আলাদা রাখুন

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

সংক্ষিপ্ত হোন

ব্যবহারকারীর দৃষ্টি আকর্ষণ করার জন্য আপনার কাছে মাত্র এক সেকেন্ডের ভগ্নাংশ আছে। সংক্ষিপ্ত, টু-দ্য-পয়েন্ট অনুলিপি আপনার বার্তা জুড়ে যাওয়ার সম্ভাবনা বাড়িয়ে তুলবে।

পণ্য সেরা অনুশীলন

ক্যারোসেলগুলি এমন পরিস্থিতিতে ভাল কাজ করে যেখানে অতিরিক্ত সামগ্রী প্রদর্শনের জন্য অতিরিক্ত উল্লম্ব স্থান ব্যবহার করা একটি বিকল্প নয়। পণ্য পৃষ্ঠাগুলিতে ক্যারোসেল প্রায়শই এই ব্যবহারের ক্ষেত্রে একটি ভাল উদাহরণ।

যাইহোক, ক্যারোসেল সবসময় কার্যকরভাবে ব্যবহার করা হয় না।

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

আপনার অনুমান পরীক্ষা করুন

ক্যারোসেলের ব্যবসায়িক প্রভাব, বিশেষ করে হোমপেজে যা, মূল্যায়ন এবং পরীক্ষা করা উচিত। ক্যারোজেল ক্লিকথ্রু রেট আপনাকে ক্যারোজেল এবং এর বিষয়বস্তু কার্যকর কিনা তা নির্ধারণ করতে সাহায্য করতে পারে।

প্রাসঙ্গিক হতে

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

কর্মক্ষমতা এবং ব্যবহারযোগ্যতার জন্য ক্যারোসেল অপ্টিমাইজ করুন।

Katie Hempenius

কর্মক্ষমতা

LCP (সবচেয়ে বড় বিষয়বস্তুর পেইন্ট)
বড়, ভাঁজের ওপরের ক্যারোসেলগুলিতে প্রায়শই পৃষ্ঠার LCP উপাদান থাকে এবং তাই LCP-তে উল্লেখযোগ্য প্রভাব ফেলতে পারে। এই পরিস্থিতিতে, ক্যারোজেল অপ্টিমাইজ করা উল্লেখযোগ্যভাবে LCP উন্নত করতে পারে। ক্যারোসেলযুক্ত পৃষ্ঠাগুলিতে কীভাবে LCP পরিমাপ কাজ করে তার একটি গভীর ব্যাখ্যার জন্য, ক্যারোসেলের জন্য LCP পরিমাপ পড়ুন।
INP (পরবর্তী পেইন্টের সাথে মিথস্ক্রিয়া)
ক্যারোসেলের ন্যূনতম জাভাস্ক্রিপ্ট প্রয়োজনীয়তা রয়েছে এবং তাই পৃষ্ঠার প্রতিক্রিয়াশীলতাকে প্রভাবিত করা উচিত নয়। আপনি যদি আবিষ্কার করেন যে আপনার সাইটের ক্যারোজেলে দীর্ঘদিন ধরে চলমান স্ক্রিপ্ট রয়েছে, তাহলে আপনার ক্যারোজেল টুলিং প্রতিস্থাপন করার কথা বিবেচনা করা উচিত।
CLS (ক্রমবর্ধমান লেআউট শিফট)
আশ্চর্যজনক সংখ্যক ক্যারোসেল জ্যাঙ্কি, নন-কম্পোজিটেড অ্যানিমেশন ব্যবহার করে যা CLS-এ অবদান রাখতে পারে। অটোপ্লেয়িং ক্যারোসেল সহ পৃষ্ঠাগুলিতে, এটি অসীম CLS সৃষ্টি করার সম্ভাবনা রয়েছে। এই ধরনের CLS সাধারণত মানুষের চোখে স্পষ্ট নয়, যা সমস্যাটিকে উপেক্ষা করা সহজ করে তোলে। এই সমস্যাটি এড়াতে, আপনার ক্যারোজেলে অ-সংযুক্ত অ্যানিমেশন ব্যবহার করা এড়িয়ে চলুন (উদাহরণস্বরূপ, স্লাইড ট্রানজিশনের সময়)।

কর্মক্ষমতা সেরা অনুশীলন

HTML ব্যবহার করে ক্যারোজেল সামগ্রী লোড করুন

করবেন

<div class="slides">
  <img src="https://example.com/cat1.jpg">
  <img src="https://example.com/cat2.jpg">
  <img src="https://example.com/cat3.jpg">
</div>

করবেন না

const slides = document.querySelector(".slides");
const newSlide = document.createElement("img");
newSlide.src = "htttp://example.com/cat1.jpg";
slides.appendChild(newSlide);

লেআউট শিফট এড়িয়ে চলুন

স্লাইড ট্রানজিশন: স্লাইড ট্রানজিশনের সময় যে লেআউট পরিবর্তনগুলি ঘটে তা সাধারণত DOM উপাদানগুলির লেআউট-ইনডুসিং বৈশিষ্ট্য আপডেট করার কারণে ঘটে। এই বৈশিষ্ট্যগুলির কিছু উদাহরণের মধ্যে রয়েছে: left , top , width , এবং marginTop . লেআউট পরিবর্তন এড়াতে, পরিবর্তে এই উপাদানগুলি স্থানান্তর করতে CSS transform বৈশিষ্ট্য ব্যবহার করুন। এই ডেমো দেখায় কিভাবে একটি মৌলিক ক্যারোজেল তৈরি করতে transform ব্যবহার করতে হয়।
নেভিগেশন নিয়ন্ত্রণ: DOM থেকে ক্যারোজেল নেভিগেশন নিয়ন্ত্রণগুলি সরানো বা যোগ করা/সরানোর ফলে এই পরিবর্তনগুলি কীভাবে বাস্তবায়িত হয় তার উপর নির্ভর করে লেআউট পরিবর্তন হতে পারে। এই আচরণ প্রদর্শন করে এমন ক্যারোসেলগুলি সাধারণত ব্যবহারকারী হোভারের প্রতিক্রিয়া হিসাবে এটি করে।

ক্যারোসেলের জন্য CLS পরিমাপ সংক্রান্ত বিভ্রান্তির কিছু সাধারণ বিষয় হল:

অটোপ্লে ক্যারোসেল: স্লাইড ট্রানজিশন হল ক্যারোজেল-সম্পর্কিত লেআউট শিফটের সবচেয়ে সাধারণ উৎস। একটি নন-অটোপ্লে ক্যারাউজেলে এই লেআউট শিফটগুলি সাধারণত ব্যবহারকারীর ইন্টারঅ্যাকশনের 500ms এর মধ্যে ঘটে এবং তাই ক্রমবর্ধমান লেআউট শিফট (CLS) এ গণনা করা হয় না । যাইহোক, অটোপ্লে ক্যারোসেলের জন্য, শুধুমাত্র এই লেআউটগুলিকে সম্ভাব্যভাবে CLS-এর দিকে গণনা করা যায় না - কিন্তু তারা অনির্দিষ্টকালের জন্য পুনরাবৃত্তি করতে পারে। এইভাবে, এটি যাচাই করা বিশেষভাবে গুরুত্বপূর্ণ যে একটি অটোপ্লে ক্যারোজেল লেআউট পরিবর্তনের উৎস নয়।
স্ক্রোলিং: কিছু ক্যারোসেল ব্যবহারকারীদের ক্যারোজেল স্লাইডের মাধ্যমে নেভিগেট করতে স্ক্রলিং ব্যবহার করার অনুমতি দেয়। যদি একটি উপাদানের শুরুর অবস্থান পরিবর্তিত হয় কিন্তু এর স্ক্রোল অফসেট (অর্থাৎ, scrollLeft বা scrollTop ) একই পরিমাণে পরিবর্তিত হয় (কিন্তু বিপরীত দিকে) তবে এটি একটি বিন্যাস স্থানান্তর হিসাবে বিবেচিত হবে না যদি তারা একই ফ্রেমে ঘটে।

লেআউট শিফট সম্পর্কে আরও তথ্যের জন্য, ডিবাগ লেআউট শিফট দেখুন।

আধুনিক প্রযুক্তি ব্যবহার করুন

ক্যারোজেল সামগ্রী অপ্টিমাইজ করুন

কর্মক্ষমতা পরিমাপ

ক্যারোসেলের জন্য LCP পরিমাপ

LCP পৃষ্ঠা উপাদানগুলিকে বিবেচনা করে কারণ সেগুলি ফ্রেমে আঁকা হয়৷ ব্যবহারকারী যখন পৃষ্ঠার সাথে ইন্টারঅ্যাক্ট করে (ট্যাপ, স্ক্রোল বা কী চেপে) তখন LCP উপাদানের জন্য নতুন প্রার্থীদের আর বিবেচনা করা হয় না। এইভাবে, একটি অটোপ্লেয়িং ক্যারোজেলের যেকোনো স্লাইডের চূড়ান্ত LCP উপাদান হওয়ার সম্ভাবনা রয়েছে—যেখানে একটি স্ট্যাটিক ক্যারোজেলে শুধুমাত্র প্রথম স্লাইডটি একজন সম্ভাব্য LCP প্রার্থী হবে।
যদি দুটি সমান আকারের ছবি রেন্ডার করা হয়, তাহলে প্রথম ছবিটি LCP উপাদান হিসেবে বিবেচিত হবে। LCP এলিমেন্ট শুধুমাত্র তখনই আপডেট করা হয় যখন LCP প্রার্থী বর্তমান LCP এলিমেন্টের থেকে বড় হয়। এইভাবে, সমস্ত ক্যারোজেল উপাদান সমান আকারের হলে, LCP উপাদানটি প্রদর্শিত হওয়া প্রথম চিত্র হওয়া উচিত।
LCP প্রার্থীদের মূল্যায়ন করার সময়, LCP বিবেচনা করে " দৃশ্যমান আকার বা অন্তর্নিহিত আকার, যেটি ছোট হয় ।" এইভাবে, যদি একটি অটোপ্লেয়িং ক্যারাউজেল একটি সামঞ্জস্যপূর্ণ আকারে চিত্রগুলি প্রদর্শন করে, কিন্তু বিভিন্ন অন্তর্নিহিত আকারের চিত্রগুলি ধারণ করে যা প্রদর্শনের আকারের চেয়ে ছোট, তবে নতুন স্লাইডগুলি প্রদর্শিত হওয়ার সাথে সাথে LCP উপাদানটি পরিবর্তিত হতে পারে। এই ক্ষেত্রে, সমস্ত ছবি একই আকারে প্রদর্শিত হলে, সবচেয়ে বড় অভ্যন্তরীণ আকারের চিত্রটিকে LCP উপাদান হিসাবে বিবেচনা করা হবে। LCP কম রাখতে, আপনাকে নিশ্চিত করতে হবে যে একটি অটোপ্লেয়িং ক্যারোজেলের সমস্ত আইটেম একই অন্তর্নিহিত আকারের।

Chrome 88-এ ক্যারোসেলের জন্য LCP গণনার পরিবর্তন

Chrome 121-এ থ্রেশহোল্ডে পরিবর্তন

অন্যান্য বিবেচনা

নেভিগেশন সেরা অনুশীলন

বিশিষ্ট নেভিগেশন নিয়ন্ত্রণ প্রদান

নেভিগেশন অগ্রগতি নির্দেশ করুন

মোবাইল অঙ্গভঙ্গি সমর্থন

বিকল্প নেভিগেশন পাথ প্রদান

পঠনযোগ্যতার সর্বোত্তম অনুশীলন

অটোপ্লে ব্যবহার করবেন না

লেখা এবং ছবি আলাদা রাখুন

সংক্ষিপ্ত হোন

পণ্য সেরা অনুশীলন

যাইহোক, ক্যারোসেল সবসময় কার্যকরভাবে ব্যবহার করা হয় না।

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

আপনার অনুমান পরীক্ষা করুন

প্রাসঙ্গিক হতে

কর্মক্ষমতা এবং ব্যবহারযোগ্যতার জন্য ক্যারোসেল অপ্টিমাইজ করুন।

Katie Hempenius

কর্মক্ষমতা

LCP (সবচেয়ে বড় বিষয়বস্তুর পেইন্ট)
বড়, ভাঁজের ওপরের ক্যারোসেলগুলিতে প্রায়শই পৃষ্ঠার LCP উপাদান থাকে এবং তাই LCP-তে উল্লেখযোগ্য প্রভাব ফেলতে পারে। এই পরিস্থিতিতে, ক্যারোজেল অপ্টিমাইজ করা উল্লেখযোগ্যভাবে LCP উন্নত করতে পারে। ক্যারোসেলযুক্ত পৃষ্ঠাগুলিতে কীভাবে LCP পরিমাপ কাজ করে তার একটি গভীর ব্যাখ্যার জন্য, ক্যারোসেলের জন্য LCP পরিমাপ পড়ুন।
INP (পরবর্তী পেইন্টের সাথে মিথস্ক্রিয়া)
ক্যারোসেলের ন্যূনতম জাভাস্ক্রিপ্ট প্রয়োজনীয়তা রয়েছে এবং তাই পৃষ্ঠার প্রতিক্রিয়াশীলতাকে প্রভাবিত করা উচিত নয়। আপনি যদি আবিষ্কার করেন যে আপনার সাইটের ক্যারোজেলে দীর্ঘদিন ধরে চলমান স্ক্রিপ্ট রয়েছে, তাহলে আপনার ক্যারোজেল টুলিং প্রতিস্থাপন করার কথা বিবেচনা করা উচিত।
CLS (ক্রমবর্ধমান লেআউট শিফট)
আশ্চর্যজনক সংখ্যক ক্যারোসেল জ্যাঙ্কি, নন-কম্পোজিটেড অ্যানিমেশন ব্যবহার করে যা CLS-এ অবদান রাখতে পারে। অটোপ্লেয়িং ক্যারোসেল সহ পৃষ্ঠাগুলিতে, এটি অসীম CLS সৃষ্টি করার সম্ভাবনা রয়েছে। এই ধরনের CLS সাধারণত মানুষের চোখে স্পষ্ট নয়, যা সমস্যাটিকে উপেক্ষা করা সহজ করে তোলে। এই সমস্যাটি এড়াতে, আপনার ক্যারোজেলে অ-সংযুক্ত অ্যানিমেশন ব্যবহার করা এড়িয়ে চলুন (উদাহরণস্বরূপ, স্লাইড ট্রানজিশনের সময়)।

কর্মক্ষমতা সেরা অনুশীলন

HTML ব্যবহার করে ক্যারোজেল সামগ্রী লোড করুন

করবেন

<div class="slides">
  <img src="https://example.com/cat1.jpg">
  <img src="https://example.com/cat2.jpg">
  <img src="https://example.com/cat3.jpg">
</div>

করবেন না

const slides = document.querySelector(".slides");
const newSlide = document.createElement("img");
newSlide.src = "htttp://example.com/cat1.jpg";
slides.appendChild(newSlide);

লেআউট শিফট এড়িয়ে চলুন

স্লাইড ট্রানজিশন: স্লাইড ট্রানজিশনের সময় যে লেআউট পরিবর্তনগুলি ঘটে তা সাধারণত DOM উপাদানগুলির লেআউট-ইনডুসিং বৈশিষ্ট্য আপডেট করার কারণে ঘটে। এই বৈশিষ্ট্যগুলির কিছু উদাহরণের মধ্যে রয়েছে: left , top , width , এবং marginTop . লেআউট পরিবর্তন এড়াতে, পরিবর্তে এই উপাদানগুলি স্থানান্তর করতে CSS transform বৈশিষ্ট্য ব্যবহার করুন। এই ডেমো দেখায় কিভাবে একটি মৌলিক ক্যারোজেল তৈরি করতে transform ব্যবহার করতে হয়।
নেভিগেশন নিয়ন্ত্রণ: DOM থেকে ক্যারোজেল নেভিগেশন নিয়ন্ত্রণগুলি সরানো বা যোগ করা/সরানোর ফলে এই পরিবর্তনগুলি কীভাবে বাস্তবায়িত হয় তার উপর নির্ভর করে লেআউট পরিবর্তন হতে পারে। এই আচরণ প্রদর্শন করে এমন ক্যারোসেলগুলি সাধারণত ব্যবহারকারী হোভারের প্রতিক্রিয়া হিসাবে এটি করে।

ক্যারোসেলের জন্য CLS পরিমাপ সংক্রান্ত বিভ্রান্তির কিছু সাধারণ বিষয় হল:

অটোপ্লে ক্যারোসেল: স্লাইড ট্রানজিশন হল ক্যারোজেল-সম্পর্কিত লেআউট শিফটের সবচেয়ে সাধারণ উৎস। একটি নন-অটোপ্লে ক্যারাউজেলে এই লেআউট শিফটগুলি সাধারণত ব্যবহারকারীর ইন্টারঅ্যাকশনের 500ms এর মধ্যে ঘটে এবং তাই ক্রমবর্ধমান লেআউট শিফট (CLS) এ গণনা করা হয় না । যাইহোক, অটোপ্লে ক্যারোসেলের জন্য, শুধুমাত্র এই লেআউটগুলিকে সম্ভাব্যভাবে CLS-এর দিকে গণনা করা যায় না - কিন্তু তারা অনির্দিষ্টকালের জন্য পুনরাবৃত্তি করতে পারে। এইভাবে, এটি যাচাই করা বিশেষভাবে গুরুত্বপূর্ণ যে একটি অটোপ্লে ক্যারোজেল লেআউট পরিবর্তনের উৎস নয়।
স্ক্রোলিং: কিছু ক্যারোসেল ব্যবহারকারীদের ক্যারোজেল স্লাইডের মাধ্যমে নেভিগেট করতে স্ক্রলিং ব্যবহার করার অনুমতি দেয়। যদি একটি উপাদানের শুরুর অবস্থান পরিবর্তিত হয় কিন্তু এর স্ক্রোল অফসেট (অর্থাৎ, scrollLeft বা scrollTop ) একই পরিমাণে পরিবর্তিত হয় (কিন্তু বিপরীত দিকে) তবে এটি একটি বিন্যাস স্থানান্তর হিসাবে বিবেচিত হবে না যদি তারা একই ফ্রেমে ঘটে।

লেআউট শিফট সম্পর্কে আরও তথ্যের জন্য, ডিবাগ লেআউট শিফট দেখুন।

আধুনিক প্রযুক্তি ব্যবহার করুন

ক্যারোজেল সামগ্রী অপ্টিমাইজ করুন

কর্মক্ষমতা পরিমাপ

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

ক্যারোসেলগুলির জন্য এলসিপি পরিমাপ

এলসিপি গণনা কীভাবে ক্যারোসেলগুলির জন্য কাজ করে তা বোঝার মূল বিষয়গুলি:

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

Chrome 88 এ ক্যারোসেলগুলির জন্য এলসিপি গণনার পরিবর্তন

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

এই পরিবর্তনটি পর্যবেক্ষণের প্রতিক্রিয়া হিসাবে তৈরি করা হয়েছিল যে অনেক সাইট ডিওএম গাছ থেকে পূর্বে প্রদর্শিত চিত্রটি সরিয়ে কারাউসেল ট্রানজিশনগুলি প্রয়োগ করে। ক্রোম 88 এর আগে, প্রতিবার যখন একটি নতুন স্লাইড উপস্থাপন করা হয়েছিল, পূর্ববর্তী উপাদানটি অপসারণ একটি এলসিপি আপডেটকে ট্রিগার করবে। এই পরিবর্তনটি কেবল অটোপ্লেিং ক্যারোসেলস দ্বারা সংজ্ঞাটিকে প্রভাবিত করে, সম্ভাব্য বৃহত্তম সামগ্রী পেইন্টগুলি কেবল কোনও ব্যবহারকারী প্রথম পৃষ্ঠার সাথে ইন্টারেক্ট করার আগে ঘটতে পারে।

ক্রোম 121 এ থ্রেশহোল্ডে পরিবর্তন

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

অন্যান্য বিবেচনা

এই বিভাগটি ইউএক্স এবং পণ্যের সেরা অনুশীলনগুলি নিয়ে আলোচনা করে যা ক্যারোসেলগুলি প্রয়োগ করার সময় আপনার মনে রাখা উচিত। ক্যারোসেলগুলি আপনার ব্যবসায়ের লক্ষ্যগুলি অগ্রসর করতে হবে এবং এমনভাবে সামগ্রী উপস্থাপন করা উচিত যা নেভিগেট করা এবং পড়া সহজ।

নেভিগেশন সেরা অনুশীলন

বিশিষ্ট নেভিগেশন নিয়ন্ত্রণ সরবরাহ করুন

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

নেভিগেশন অগ্রগতি নির্দেশ করুন

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

মোবাইল অঙ্গভঙ্গি সমর্থন করুন

মোবাইলে, সোয়াইপ অঙ্গভঙ্গিগুলি traditional তিহ্যবাহী নেভিগেশন নিয়ন্ত্রণগুলি (যেমন স্ক্রিন বোতামগুলিতে) ছাড়াও সমর্থন করা উচিত।

বিকল্প নেভিগেশন পাথ সরবরাহ করুন

যেহেতু বেশিরভাগ ব্যবহারকারী সমস্ত কারাউসেল সামগ্রীর সাথে জড়িত থাকবেন এমন সম্ভাবনা নেই, তাই ক্যারোসেল যে সামগ্রীটি লিঙ্ক করতে স্লাইড করে তা অন্যান্য নেভিগেশন পাথ থেকে অ্যাক্সেসযোগ্য হওয়া উচিত।

পঠনযোগ্যতা সেরা অনুশীলন

অটোপ্লে ব্যবহার করবেন না

অটোপ্লে ব্যবহার দুটি প্রায় প্যারাডক্সিকাল সমস্যা তৈরি করে: অন-স্ক্রিন অ্যানিমেশনগুলি ব্যবহারকারীদের বিভ্রান্ত করে এবং আরও গুরুত্বপূর্ণ বিষয়বস্তু থেকে চোখকে সরিয়ে নিয়ে যায়; একই সাথে, যেহেতু ব্যবহারকারীরা প্রায়শই বিজ্ঞাপনগুলির সাথে অ্যানিমেশনগুলি সংযুক্ত করে, তারা অটোপ্লে সেই ক্যারোসেলগুলি উপেক্ষা করবে।

সুতরাং, এটি বিরল যে অটোপ্লে একটি ভাল পছন্দ। যদি বিষয়বস্তু গুরুত্বপূর্ণ হয় তবে অটোপ্লে ব্যবহার না করা তার এক্সপোজারকে সর্বাধিক করে তুলবে; যদি ক্যারোসেল সামগ্রী গুরুত্বপূর্ণ না হয় তবে অটোপ্লে ব্যবহার আরও গুরুত্বপূর্ণ সামগ্রী থেকে বিরত থাকবে। তদতিরিক্ত, অটোপ্লেইং ক্যারোসেলগুলি পড়া (এবং বিরক্তিকরও) পড়া কঠিন হতে পারে। লোকেরা বিভিন্ন গতিতে পড়েন, সুতরাং এটি বিরল যে একটি ক্যারোসেল ধারাবাহিকভাবে বিভিন্ন ব্যবহারকারীর জন্য "সঠিক" সময়ে রূপান্তর করে।

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

পাঠ্য এবং চিত্র পৃথক রাখুন

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

সংক্ষিপ্ত হোন

ব্যবহারকারীর দৃষ্টি আকর্ষণ করার জন্য আপনার কাছে কেবল এক সেকেন্ডের একটি ভগ্নাংশ রয়েছে। সংক্ষিপ্ত, পয়েন্ট অনুলিপিটি আপনার বার্তাটি জুড়ে যে প্রতিকূলতাকে বাড়িয়ে তুলবে তা বাড়িয়ে তুলবে।

পণ্য সেরা অনুশীলন

ক্যারোসেলগুলি এমন পরিস্থিতিতে ভাল কাজ করে যেখানে অতিরিক্ত সামগ্রী প্রদর্শনের জন্য অতিরিক্ত উল্লম্ব স্থান ব্যবহার করা কোনও বিকল্প নয়। পণ্য পৃষ্ঠাগুলিতে ক্যারোসেলগুলি প্রায়শই এই ব্যবহারের ক্ষেত্রে একটি ভাল উদাহরণ।

তবে ক্যারোসেলগুলি সর্বদা কার্যকরভাবে ব্যবহৃত হয় না।

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

আপনার অনুমান পরীক্ষা করুন

ক্যারোসেলগুলির ব্যবসায়ের প্রভাব, বিশেষত হোমপেজগুলিতে যারা তাদের মূল্যায়ন ও পরীক্ষা করা উচিত। ক্যারোসেল ক্লিকথ্রু হারগুলি আপনাকে কোনও ক্যারোসেল এবং এর সামগ্রী কার্যকর কিনা তা নির্ধারণ করতে সহায়তা করতে পারে।

প্রাসঙ্গিক হতে

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