ওয়েবসাইট স্লাইডার: হোমপেজের ক্যারোসেল কেন বিক্রি কমায়
হোমপেজের উপরে ঘুরতে থাকা ওয়েবসাইট স্লাইডার দেখতে প্রফেশনাল লাগে, ক্লায়েন্টও খুশি হয়। সমস্যা একটাই: ভিজিটর প্রায় কেউই সেটা দেখে না, আর যারা দেখে, তারা প্রথম স্লাইডের পরে আর এগোয় না।
এটা রুচির প্রশ্ন না, ডেটার প্রশ্ন। হোমপেজ স্লাইডার একসাথে তিনটা জিনিস নষ্ট করে: আপনার মূল বার্তা, সাইটের স্পিড, আর মোবাইল অভিজ্ঞতা। চলুন দেখি কেন, আর এর বদলে কী বসালে আসলেই কাজ হয়।
ওয়েবসাইট স্লাইডার কেন কাজ করে না
সংক্ষেপে: ভিজিটর স্লাইডারে ক্লিক করে না, আর যে অল্প কয়জন করে, তারা প্রায় সবাই প্রথম স্লাইডেই করে। বাকি স্লাইডগুলো কার্যত অদৃশ্য।
এই বিষয়ে সবচেয়ে বেশি উদ্ধৃত ডেটা এসেছে University of Notre Dame-এর ওয়েব ডেভেলপার Erik Runyon-এর কাছ থেকে। তাদের হোমপেজ ক্যারোসেলে মোট ভিজিটরের মাত্র প্রায় ১% কোনো স্লাইডে ক্লিক করেছিল। সেই ক্লিকগুলোর ৮৪% গিয়েছিল প্রথম স্লাইডে, বাকি স্লাইডগুলো পেয়েছিল মাত্র কয়েক শতাংশ করে।
কারণটাও বোঝা কঠিন না। মানুষ ওয়েবসাইটে ঢোকে একটা নির্দিষ্ট কাজ নিয়ে। বড়, রঙিন, নড়াচড়া করা একটা ব্লক দেখলে চোখ সেটাকে বিজ্ঞাপন ভেবে এড়িয়ে যায়। এটাকে বলে banner blindness। আর স্লাইড যদি নিজে নিজে বদলায়, তাহলে কেউ লেখাটা পড়ে শেষ করার আগেই সেটা সরে যায়।
স্লাইডার আসলে কেন বানানো হয়
বেশিরভাগ স্লাইডার ভিজিটরের জন্য বানানো হয় না, বানানো হয় সিদ্ধান্ত এড়ানোর জন্য।
ধরুন একটা ছোট ব্যবসার মালিক চান হোমপেজের উপরে তার নতুন অফার থাকুক, পার্টনার চান সার্ভিস লিস্ট থাকুক, আর মার্কেটিংয়ের লোক চান ঈদের ক্যাম্পেইন থাকুক। কোনটা সবচেয়ে গুরুত্বপূর্ণ, এই সিদ্ধান্ত কেউ নিতে চায় না। সহজ সমাধান: তিনটাই স্লাইডারে ঢুকিয়ে দাও।
ফলাফল হলো, সবার বার্তা জায়গা পেল, কিন্তু ভিজিটর কোনোটাই ঠিকমতো পেল না। হোমপেজের সবচেয়ে দামি জায়গাটা একটা আপসের কাছে হেরে গেল। একটা ভালো হিরো সেকশন ডিজাইনের মূল নিয়মই হলো একটা স্পষ্ট বার্তা আর একটা CTA, স্লাইডার ঠিক এর উল্টোটা করে।
হোমপেজ স্লাইডার যেভাবে সাইট স্লো করে
স্লাইডার সাধারণত হোমপেজের সবচেয়ে ভারী এলিমেন্ট, আর এটা বসে ঠিক সেই জায়গায় যেটা Google-এর Largest Contentful Paint (LCP) মাপে।
সমস্যাগুলো এক জায়গায় জমা হয়:
এই কারণেই অনেক সাইটে ক্যাশ প্লাগইন বসানোর পরেও মোবাইল স্কোর নড়ে না। ছবি নিয়ে বিস্তারিত সমস্যা আর সমাধান ওয়ার্ডপ্রেস ইমেজ অপটিমাইজেশন গাইডে আলাদা করে দেখানো আছে।
মোবাইলে ইমেজ ক্যারোসেল আরও খারাপ
ডেস্কটপে যে স্লাইডার মোটামুটি চলে, মোবাইলে সেটা প্রায় সবসময় ভেঙে পড়ে।
চওড়া ব্যানার ছবি মোবাইলের সরু স্ক্রিনে এসে হয় ক্রপ হয়ে যায়, নয়তো এত ছোট হয় যে লেখা পড়া যায় না। ছোট ডট আর তীর চিহ্ন আঙুল দিয়ে চাপা কঠিন। আর ভিজিটর পেজ স্ক্রল করতে গিয়ে ভুল করে স্লাইড সোয়াইপ করে ফেলে।
বাংলাদেশে বেশিরভাগ ট্রাফিক আসে মোবাইল থেকে, অনেক সময় ধীর মোবাইল ডেটায়। সেখানে প্রথম স্ক্রিনটাই যদি কয়েক MB ছবির জন্য আটকে থাকে, ভিজিটর অপেক্ষা করবে না।
অটো-প্লে স্লাইডার আর এক্সেসিবিলিটি
নিজে নিজে ঘোরা স্লাইডারে যদি থামানোর অপশন না থাকে, সেটা এক্সেসিবিলিটি স্ট্যান্ডার্ড ভাঙে।
WCAG 2.2-এর 2.2.2 (Pause, Stop, Hide) নিয়ম অনুযায়ী, যে কনটেন্ট ৫ সেকেন্ডের বেশি সময় ধরে নিজে নিজে নড়ে, সেটা থামানো বা লুকানোর উপায় থাকতে হবে। ধীরে পড়েন এমন মানুষ, স্ক্রিন রিডার ব্যবহারকারী, বা যাদের মনোযোগ সহজে সরে যায়, তাদের জন্য অটো-প্লে স্লাইডার রীতিমতো বাধা।
স্লাইডারের বিকল্প: যা আসলেই কনভার্ট করে
সবচেয়ে ভালো বিকল্প হলো একটা স্থির হিরো সেকশন, যেখানে একটা বার্তা, একটা ছবি, আর একটা CTA। বাকি বার্তাগুলো নিচে নিজস্ব জায়গা পায়।
কখন ক্যারোসেল ব্যবহার করা ঠিক আছে
ক্যারোসেল নিজে খারাপ না। খারাপ হলো হোমপেজের মূল বার্তা লুকিয়ে রাখার জন্য এটা ব্যবহার করা।
যেখানে ভিজিটর নিজে থেকে একই ধরনের একাধিক জিনিস দেখতে চায়, সেখানে ক্যারোসেল ভালো কাজ করে। যেমন WooCommerce প্রোডাক্ট পেজে একই প্রোডাক্টের কয়েকটা ছবি, রিভিউ বা টেস্টিমোনিয়ালের সারি, অথবা ক্লায়েন্ট লোগোর স্ট্রিপ। শর্ত তিনটা: অটো-প্লে বন্ধ, কন্ট্রোল স্পষ্ট, আর প্রথম আইটেমটাই সবচেয়ে শক্তিশালী।
স্লাইডার রাখতেই হলে: স্পিড বাঁচানোর ধাপ
ক্লায়েন্ট যদি কোনোভাবেই স্লাইডার ছাড়তে না চান, তাহলে অন্তত ক্ষতি কমানো যায়।
- স্লাইড সংখ্যা সর্বোচ্চ ৩টায় নামিয়ে আনুন, আর সবচেয়ে গুরুত্বপূর্ণ বার্তা প্রথম স্লাইডে রাখুন।
- অটো-প্লে বন্ধ করুন। চালু রাখতেই হলে স্লাইডের সময় অন্তত ৬-৭ সেকেন্ড দিন আর একটা Pause বাটন রাখুন।
- প্রথম স্লাইডের ছবি থেকে lazy loading বাদ দিন, আর সেটাকে সাধারণ img ট্যাগ হিসেবে বসান, CSS ব্যাকগ্রাউন্ড হিসেবে না।
- সব স্লাইডের ছবি WebP-তে কনভার্ট করুন আর মোবাইলের জন্য আলাদা ছোট সাইজ দিন।
- স্লাইডার প্লাগইনের JS আর CSS শুধু হোমপেজে লোড হতে দিন। Perfmatters-এর মতো টুলের Script Manager দিয়ে বাকি পেজ থেকে এগুলো বন্ধ করা যায়।
- পরিবর্তনের আগে আর পরে PageSpeed Insights-এ মোবাইল LCP মেপে তুলনা করুন।
প্রথম স্লাইডের ছবি এভাবে বসালে ব্রাউজার শুরুতেই এটাকে গুরুত্ব দিয়ে লোড করে:
<img src="slide-1.webp" width="1600" height="700"
alt="অফারের বর্ণনা"
loading="eager" fetchpriority="high">width আর height দিলে লেআউট সরে যাওয়া (CLS) কমে, আর fetchpriority=”high” ব্রাউজারকে বলে এই ছবিটা আগে আনতে। বাকি স্লাইডগুলো lazy load থাকতে পারে।
ক্লায়েন্ট স্লাইডার চাইলে কী বলবেন
ফ্রিল্যান্সার বা ওয়েব ডিজাইনার হিসেবে “স্লাইডার খারাপ” বলে তর্ক করলে লাভ নেই। ক্লায়েন্টের আসল চাওয়াটা বোঝা দরকার।
ক্লায়েন্ট স্লাইডার চান কারণ তিনি চান সাইটটা “প্রিমিয়াম” দেখাক আর তার সব অফার চোখে পড়ুক। এই দুটো চাওয়া স্ট্যাটিক হিরো আর পরিষ্কার সেকশন দিয়েই পূরণ করা যায়। Notre Dame-এর ক্লিক ডেটা আর স্লাইডার বসানোর আগে-পরের PageSpeed স্কোর পাশাপাশি দেখালে বেশিরভাগ ক্লায়েন্ট নিজেই মত বদলান। তর্কের চেয়ে সংখ্যা অনেক বেশি কাজ করে।
শেষ কথা
১০+ বছর ওয়ার্ডপ্রেস সাইট বানানো আর ৯৫০+ Fiverr ক্লায়েন্ট প্রজেক্টের পর মতটা পরিষ্কার: হোমপেজে স্লাইডার সাধারণত একটা সিদ্ধান্ত না নেওয়ার চিহ্ন। একটা বার্তা বেছে নিন, সেটাকে স্থির রাখুন, আর বাকিটা নিচে সাজান।
স্লাইডারের কারণে সাইট ইতিমধ্যে স্লো হয়ে থাকলে আমাদের ওয়ার্ডপ্রেস স্পিড অপটিমাইজেশন সার্ভিস দেখে নিতে পারেন। পুরো হোমপেজ বা অফার পেজ নতুন করে কনভার্সন মাথায় রেখে বানাতে চাইলে আছে ল্যান্ডিং পেজ ডিজাইন সার্ভিস। আর নিজে হাতে এমন সাইট বানানো শিখতে চাইলে WordPress Pro কোর্সটা শুরু থেকে ধাপে ধাপে শেখায়।
