ওয়েবসাইট ভিজিটর ঢুকলো… স্ক্রল করতে করতে হঠাৎ বাটন নিচে সরে গেলো, হেডলাইন লাফ মারলো, টেক্সট চাপা পড়লো অ্যাড ব্যানারের নিচে।
Buyer click করতে চেয়েছিল “Buy Now”, ক্লিক পড়ে “Cancel Order” এ 😐
এই জিনিসটাই হল Layout Shift.
Google এই জিনিসকে বলে Cumulative Layout Shift (CLS). আর Lighthouse report-এ আপনি যে “Avoid large layout shifts” / “CLS issue” / “Needs improvement” দেখেন, ওটাই হচ্ছে proof যে আপনার সাইট ইউজারকে বিরক্ত করছে এবং Google আপনার সাইটকে কম র্যাঙ্ক দিচ্ছে।
এই আর্টিকেলে আমরা খুব ক্লিয়ার করে দেখবো:
CLS আসলে কী
কেন এটা আপনার business-এর জন্য dangerous in Bangladesh
Real-life CLS causes (Bangladeshi website এর common ভুল)
কিভাবে Lighthouse CLS Fix করবেন (step by step, Bangla-English mixed)
Bonus: কিভাবে BD IT CENTER এই সমস্যা permanent ভাবে solve করে দেয়, with security, support, best price, এবং live fixing support Bangladesh এ
এটা শুধু থিওরি না — এটা একেবারে sales-impact topic. কারণ CLS high মানে আপনি বিক্রি হারাচ্ছেন।
CLS মানে হলো: পেজ লোড হওয়ার সময় বা স্ক্রল করার সময় আপনার কন্টেন্ট হঠাৎ move করে কিনা।
যত বেশি move করে, তত বেশি CLS স্কোর ↑
রুল অফ thumb (Google Core Web Vitals অনুযায়ী):
CLS 0.1 বা নিচে = Good
CLS 0.1 - 0.25 = Needs Improvement
CLS 0.25+ = Bad (rank down, trust down, conversion down)
👉 মানে, আপনার পেজ যদি নড়াচড়া করে, Google ভাবে এটা “unstable experience” এবং আপনাকে SEO-তে penalty দেয়. [এটাই Core Web Vitals signal, যা Google র্যাঙ্কিং-এ ব্যবহার করে, June 2021 থেকে rolling, এবং এখনও অত্যন্ত গুরুত্বপূর্ণ for mobile SEO in Bangladesh. এই সিগন্যালগুলোকে Google ‘page experience signals’ হিসেবে গণ্য করে, যেখানে CLS হল visual stability মেট্রিক।]
বাংলাদেশি ইউজাররা সাধারণত mobile + slow network (3G/4G spotty, কখনো WiFi low bandwidth) থেকে browse করে।
Slow network মানে elements আসতে দেরি করে → দেরিতে আসা জিনিস হঠাৎ ঢুকে পড়ে স্ক্রিনে → Layout ঝাঁকুনি খায় → CLS বেড়ে যায়।
ফলাফল কী হয়?
Low Trust = কম বিক্রি
Buyer ভাবে “এই সাইটটা কি fake নাকি? কেন সবকিছু লাফাচ্ছে?”
Wrong Tap = Refund/Complaint
একবার ভুল বাটনে টাচ পড়ে গেলে order cancel, বা ভুল product add to cart.
SEO down = কম organic traffic
CLS খারাপ মানে আপনার competitor যে একটু clean layout বানিয়েছে, ওরটাই আগে rank করবে।
Ad Spend Waste
আপনি Facebook Ads / TikTok Ads চালালেন। Visitor এলো landing page এ। Page jump করলো → সে রাগ করে বেরিয়ে গেলো। Bounce rate ↑, ROAS ↓.
Bangladesh-এর eCommerce business, service business, even portfolio website — সব জায়গায় এটা হচ্ছে প্রতিদিন।
আপনার যদি eCommerce বা business website লাগে যার UI stable, আপনি চাইলে আগে দেখতে পারেন আমাদের Ecommerce Websites Development service: https://bditcenter.com/Web-Development/ecommerce-websites
এখানে আমরা layout stability মাথায় রেখে build করি যাতে CLS শুরু থেকেই কম থাকে, পরে fix করতে না দৌড়াতে হয়।
চলুন আসল জিনিসে আসি। Lighthouse report সাধারণত যে জিনিসগুলোর জন্য আপনাকে CLS warning দেয়, Bangladesh-এ এগুলাই সবচেয়ে common:
অনেক admin সাইটে image আপলোড করে, কিন্তু <img> tag এ width / height set করে না।
Result: Browser আগে জায়গা রিজার্ভ করে না → ইমেজ যখন লোড হলো তখন হঠাৎ জায়গা নিয়ে নেয় → পুরো কন্টেন্ট নিচে সরে যায় → Layout Shift.
Fix:
HTML এ সরাসরি dimension দিন:
<img src="hero-banner.jpg" width="1200" height="500" alt="Hero Banner" />
এতে ব্রাউজার আগে থেকেই সেই স্পেস ধরে রাখে।
আমরা যখন Business Website বানাই (https://bditcenter.com/Web-Development/business-websites), আমরা সব hero/banner image responsive ratio সহ দিই যাতে CLS zero-এর কাছাকাছি থাকে even on 360px mobile screen.
অনেক দোকান (specially cosmetics, clothing, electronics in Bangladesh) হঠাৎ header-এর নিচে একটা offer bar inject করে:
“🔥 50% OFF Today Only! Cash On Delivery Nationwide 🔥”
এটা যদি DOM-এ dynamically insert হয় page render-এর পরে (JS দিয়ে), পুরো কন্টেন্ট নিচে চাপা পড়ে। Boom — CLS spike.
Fix:
Reserve space for promo bar from the beginning with CSS (fixed height).
বা overlay হিসেবে show করুন absolute/fixed positioning এ, main layout push না করে।
Custom Bangla/English font (বা শুধু সুন্দর ইংরেজি font যেমন Poppins, Inter, DM Sans ইত্যাদি) অনেক দেরিতে লোড হয়। আগে fallback font (e.g. sans-serif) দিয়ে layout render হয়, পরে actual font লোড হয়ে টেক্সটের width পরিবর্তন করে → lines wrap করে → layout jump.
Fix Quick Tips:
font-display: swap carefully use করুন।
Preload critical font:
<link rel="preload" href="/fonts/Inter-regular.woff2" as="font" type="font/woff2" crossorigin>
Self-host করুন instead of 3rd party slow CDN (specially on BD ISP routes).
ফন্ট লোডিং নিয়ে যদি already সমস্যা থাকে (“Font Not Loading (CSP) Fix Web BD” type issue), আপনি আমাদের এই আর্টিকেলও দেখতে পারেন: [Font Not Loading (CSP) Fix Web Bd] — এখানে আমরা Content Security Policy সহ ফন্ট লোডের safe तरीका নিয়ে কথা বলেছি, যা CLS কমাতেও indirectly help করে। (Internal backlink to that page when live.)
Lazy load ভালো, কিন্তু আপনি যদি কোন placeholder skeleton না দেন, তখন iframe/video আসার সময় কন্টেন্ট নিচে সরে যাবে।
Fix:
নির্দিষ্ট height সহ container দিন আগে থেকেই:
<div style="width:100%;max-width:560px;height:315px;background:#eee;"> <!-- later YouTube iframe inject here --> </div>
এটা করলে user scroll করার সময় হঠাৎ jump করবে না।
অনেক WooCommerce / custom Ecommerce সাইটে স্ক্রল ডাউন করলে নিচ থেকে sticky CTA উঠে আসে (e.g. “Buy Now on bKash/Nagad”).
যদি এই CTA reflow করে বাকি layout কে push করে, আবার CLS.
Fix:
CTA কে position: fixed; দিয়ে viewport overlay করুন, main content এর ভেতরে push করবেন না।
আমরা যখন Dropshipping Website বা Affiliate Marketing Website design করি (https://bditcenter.com/Web-Development/dropshipping এবং https://bditcenter.com/Web-Development/affiliate-websites), আমরা CTA কে overlay pattern এ দিই যাতে Google CLS safe থাকে এবং mobile conversion high থাকে।
Scroll করলে header ছোট হয়ে যায়, বা অন্য menu bar add হয় → content jerk.
Solution:
Sticky header-এর final height আগে থেকেই declare করুন।
Transition smooth করুন (CSS transform scale/opacity) instead of height collapse.
এই টপিকেও আমরা আলাদা করে লিখেছি “Header Sticky/Menu Dropdown Fix Bd” যেটা আপনি দেখতে পারেন (Internal backlink)।
এটা একই family problem as CLS.
Chrome খুলুন → আপনার সাইট ওপেন করুন।
Right click → Inspect → Lighthouse tab অথবা “Performance” → Core Web Vitals overlay.
Lighthouse “Desktop” এবং “Mobile” দুটোই রান করুন।
“Avoid large layout shifts” বা “Cumulative Layout Shift” সেকশন খুঁজুন।
ওখানে exact কোন element শিফট করেছে তার list দেখাবে (DOM node previews সহ)।
মানে Lighthouse নিজেই বলে দেয় “এই div হঠাৎ নড়েছিল।”
Pro Tip:
Mobile রিপোর্টটাই বেশি গুরুত্বপূর্ণ Bangladesh এর জন্য, কারণ আপনার বেশিরভাগ ট্র্যাফিক মোবাইল থেকে আসবে (ই-কমার্স, নিউজ পোর্টাল, জব পোর্টাল সবখানে)।
যদি আপনার সাইট News Portal বা Job Portal type heavy content site হয় যেখানে অনেক ad slot আছে, এটা আরও critical.
আপনি চাইলে দেখতে পারেন আমাদের:
News Website Development সার্ভিস: https://bditcenter.com/Web-Development/news-portal
Job Portal Development সার্ভিস: https://bditcenter.com/Web-Development/job-portal
ওখানে আমরা ad-slot / sponsored content এর জন্য pre-reserved container ব্যবহার করি যাতে CLS না বাড়ে, এবং page scroll smooth থাকে even with multiple ad impressions.
এখন আমরা আপনাকে exact কাজের লিস্ট দিচ্ছি যা আমরা client সাইটে করি Bangladesh market এর জন্য।
এই লিস্ট follow করলে 90% সাইটের CLS সমস্যা কমে যায়.
Banner, product thumbnail, blog thumbnail, slider images — সবকিছুর জন্য।
Responsive layout? Use CSS max-width:100% but keep the intrinsic dimension attributes in HTML.
যেকোন top bar, offer bar, cookie consent bar, newsletter popup bar এর জন্য fixed height declare করুন from first render.
আপনার heading font আর body font preload করুন।
System font fallback এমন বাছুন যার metrics close to final font (layout কম নড়ে) — যেমন Inter fallback vs Arial is closer than vs Times.
Don’t inject something at top.
Need to show discount? Show as overlay (fixed bottom/right corner) or pre-rendered hidden block that toggles visibility, not total new block that shifts everything.
YouTube, Facebook embed, TikTok embed, Google Map iframe — সবকিছুর জন্য আগে থেকে ডেডিকেটেড div height set করুন।
Header final collapsed height = declare with CSS from load 0ms.
Avoid “auto height then shrink”.
Live chat bubble, WhatsApp bubble, Messenger bubble, tracking pixel-based widgets — এগুলো অনেক সময় random জায়গায় DOM inject করে।
High CLS? Replace with self-hosted, lighter widget OR load them after main layout is visually stable (e.g. after window.onload) using position: fixed.
এই ৭টা step করলে আপনি already Lighthouse CLS score massively improve করতে পারবেন।
এখন keyword part. CLS fix শুধু design না — এটা pure SEO ROI.
Google Core Web Vitals এখন ranking signal. মানে আপনি যদি দুইটা একই niche ওয়েবসাইট compare করেন (ধরি দুইটিই “best skin care shop Bangladesh”), যার CLS কম তার mobile ranking advantage থাকবে। এটা already proved in competitive niches like ecommerce Bangladesh where even 0.05 CLS improvement can lower bounce and boost conversions. এই competitive niches-এ ছোট UX improvement মানেই বেশি order per ad spend। এইটা pure money.
Stable layout মানে user longer time সাইটে থাকে, bounce কমে। Lower bounce = Google thinks “people like this content”.
ভালো CLS মানে Trust factor ↑. Trust factor ↑ মানে COD order cancel rate ↓ (Bangladesh এ COD order cancel হচ্ছে একটা বড় সমস্যা, আপনি জানেন 😉).
অর্থাৎ: CLS fix = better rank + better conversion = বেশি সেল।
এটাই reason আমরা আমাদের Ecommerce Websites এবং Business Website ডেভেলপমেন্ট সার্ভিসে শুরু থেকেই CLS optimized layout দিয়ে দিই, so later আপনাকে আর panic করে Lighthouse report নিয়ে ছুটতে না হয়:
Ecommerce Websites: https://bditcenter.com/Web-Development/ecommerce-websites
Business Website: https://bditcenter.com/Web-Development/business-websites
Portfolio Websites (যেখানে first impression matters, no jump allowed): https://bditcenter.com/Web-Development/portfolio-websites
শুনতে অদ্ভুত লাগবে, কিন্তু হ্যাঁ।
Bangladesh এ অনেক WordPress সাইট, ছোট হোস্টিং বা nulled theme/plugin ব্যবহার করার কারণে malware inject হয়ে যায়। সেই malware অনেক সময় random ad script, popup script, বা hidden iframe ঢুকায় আপনার পেজে।
যেগুলো DOM-এ পরে insert হয় → Layout Shift বাড়ে → CLS sky high.
মানে আপনার সাইট hack হলে শুধু security ঝুঁকি না, SEO র্যাঙ্কও পড়ে যায় কারণ CLS explode করে।
BD IT CENTER যেটা করে:
আমরা hacked / injected কোড identify করি
unauthorized popup/ad script remove করি
clean CDN / clean font serve করি
তারপর Core Web Vitals পুনরায় audit করি
এই সার্ভিস পড়ে আপনি দেখতে পারেন আমাদের Website Error Fixing / Fix Website Errors সার্ভিস:
https://bditcenter.com/Web-Development/fix-website-errors
এখানে আমরা শুধু visual bug না, security clean-up ও করি যাতে আপনার layout stable থাকে and Google আবার trust করে।
আরেকটা জিনিস Bangladesh এ অনেকেই ignore করে: hosting quality.
Slow / overloaded shared hosting মানে assets লোড হতে দেরি করে। যখন asset দেরিতে আসে, layout পরে adjust করে → visible shift ↑.
BD IT CENTER নিজস্বভাবে Best Web Hosting in Bangladesh (BDIX optimized, high-speed, secure) provide করে যাতে static asset, fonts, CSS দ্রুত লোড হয়। দ্রুত লোড = কম late injection = কম CLS.
High-security hosting মানে শুধু firewall না।
এটা মানে:
আপনার CSS/JS delivery consistent
no malicious injected banners
predictable layout timing
Result: CLS stability.
আমাদের কাছে অনেক ব্যবসায়ী / startup founder / in-house IT staff / marketing team বলে:
“Brother, আমরা চাই না সব ছোট ছোট জিনিসের জন্য আপনাদের ডাকতে। আপনি কি আমাদের টিমকে train করে দিতে পারবেন কিভাবে CLS কম রাখতে হয়, কিভাবে Lighthouse report পড়তে হয়?”
Answer: হ্যাঁ ✅
BD IT CENTER এর training & onboarding সেশনে আমরা দেখাই:
কিভাবে নিজেরাই Lighthouse চালাবেন
কোন plugin কতটা ক্ষতি করছে
কোন theme layout shifting করছে
কিভাবে mobile hero section safe করবেন
কিভাবে popup run করবেন without killing CLS
Because আমরা শুধু একবার ঠিক করে চলে যাই না — আমরা চাই আপনি বুঝতে পারেন কী করলে আবার নষ্ট হবে না।
CLS সমস্যা সাধারণত দেখা দেয় হঠাৎ:
আপনি নতুন plugin দিলেন,
নতুন banner দিলেন,
নতুন sticky offer দিলেন,
তারপর হঠাৎ Lighthouse score লাল হয়ে গেলো 😳
আমরা Bangladesh based হওয়ায় আপনি সরাসরি আমাদের সাথে যোগাযোগ করতে পারেন real-time help এর জন্য (live chat / phone / WhatsApp)।
মানে আপনাকে আর “international agency reply দেবে কি দেবে না” এই tension নিতে হবে না।
We understand BD payment, BD hosting, BDIX, BD device sizes. You’re not generic to us.
অনেকে ভাবে “Core Web Vitals optimize মানে তো অনেক expensive কাজ।”
Reality কী?
একটা high CLS website মানে:
Ad budget loss
Organic rank drop
User trust drop
COD cancel rate up
Brand value কমে যায় (“ভাই সাইটটা unstable লাগলো, আমি bkash দিব না”)
আমরা usually CLS Fix + Security Audit + Performance Tuning একসাথে করি একটি practical budget এ, যা আলাদা আলাদা freelancer patchwork থেকে অনেক বেশি cost-effective for Bangladeshi SMB / SME / personal brand / news portal.
একদম এখনই আপনি এই চেকলিস্ট রান করতে পারেন:
Lighthouse Mobile রান করুন → CLS score লিখে রাখুন।
কোন element shift করেছে সেটা identify করুন report থেকে।
চেক করুন ওই element কি dynamically inject হয় (JS দিয়ে পরে আসে?)
ওই element-এর জন্য fix plan করুন:
Fixed height?
Preload font?
Pre-reserved div?
Make it overlay, not inline push?
আবার Lighthouse রান করুন।
স্কোর improve না হলে → এটা হয়তো security issue / unexpected script / external widget based.
যদি এখানে আটকে যান, that’s exactly where BD IT CENTER jumps in and fixes it for you in production without guesswork.
1. Bangladesh-Focused UX
আমরা Bangladeshi real devices (common Android resolutions, low-end phone viewport) এ টেস্ট করি। শুধু Macbook-Pro স্ক্রীন না।
2. High-Security + Malware Cleanup
We scan, clean, secure এবং malicious popup/ad script ব্লক করি যাতে CLS এর root-causeও মরে যায়, শুধু symptom না।
3. Best Price for SME / Startup
You don’t need Silicon Valley budget. আপনি Rajshahi হোন বা Dhaka হোন, আমরা SME-friendly.
4. Training Facility
We don’t keep you blind. আপনি চাইলে আপনার ইন-হাউস স্টাফকে শেখাই কীভাবে ভবিষ্যতে CLS না বাড়ে।
5. 24/7 Style Support (Live Chat / Phone Support)
Midnight sale চলছে? Banner লাগাতে হবে? Popup লাগাতে হবে? আমরা আপনাকে বলে দেব কীভাবে করবেন যাতে layout jump না করে।
6. SEO Impact First Mindset
আমরা শুধু “দেখতে সুন্দর” বানাই না — আমরা Core Web Vitals safe করি কারণ SEO র্যাঙ্কিং আর কনভার্শনই তো আসল টাকা।
7. End-to-End Service, Not Patch
Web development (https://bditcenter.com/Web-Development),
Custom web application (https://bditcenter.com/Web-Development/web-application),
Affiliate / Dropshipping / News / Job Portal / Portfolio —
সবকিছুর জন্য আমরা একই স্ট্যান্ডার্ড follow করি so আপনার পুরো digital presence consistent থাকে।
আমাদের যেসব ক্লায়েন্ট আগে বলেছে “ভাই Facebook ads এ টাকা পুড়তেছে, কিন্তু add to cart কম”, তাদের সাইটে আমরা CLS ফিক্স, sticky CTA overlay, secure hosting, এবং malware cleanup করার পর ২টা জিনিস সাথে সাথে চোখে পড়ে:
Add to Cart tap accuracy বেড়ে যায় (ভুল বাটন ক্লিক কমে যায়)
Bounce rate কমে যায় কারণ user আর বিরক্ত হয় না layout jump দেখে
আমরা প্রায় সবসময় এই ফিডব্যাকটাই শুনি:
“আগে সাইট লাফাচ্ছিলো, এখন stable. এখন গ্রাহক ট্রাস্ট করছে।”
That’s literally CLS → money.
Q: আমার CLS যদি 0.25+ হয়, এটা কি খুব খারাপ?
A: হ্যাঁ। Lighthouse এটাকে “Poor” বলে। Real users already annoyed. Mobile SEO এ আপনার competitor আপনাকে পেরিয়ে যাবে।
Q: শুধু একটাই পেজ fix করলেই হবে নাকি পুরো সাইট করতে হবে?
A: আপনার top money pages আগে ঠিক করুন: Home, Product Page, Checkout, Lead Capture Page. পরে ব্লগ / নিউজ / long-form content fix করতে পারেন স্টেপ-বাই-স্টেপ.
Q: Elementor / Page Builder দিয়ে বানানো হলে কি CLS কমানো যায়?
A: যায়। আমরা Elementor site এও CLS কমিয়ে দিই by reserving image container sizes, stabilizing sticky headers, and controlling popup timing. একই জিনিস আমরা Portfolio Website ও Corporate Website project এ করি: https://bditcenter.com/Web-Development/portfolio-websites
Q: আমার সাইটে হ্যাকার ঢুকেছিল, এখন random popup আসে, CLS score লাল — একসাথে ঠিক হবে?
A: হ্যাঁ। আমরা malware cleanup + CLS fix parallel করি. এইটার জন্য দেখুন: https://bditcenter.com/Web-Development/fix-website-errors
Q: আমি কি নিজে শিখে নিতে পারব নাকি সবসময় আপনাদের ডাকতে হবে?
A: আপনি চাইলে আমরা আপনার টিমকে train করি। আমরা কাজ শেষ করে গায়েব হয়ে যাই না, আমরা knowledge হস্তান্তর করি।
Bangladesh মার্কেটে এখন আর শুধু “সাইট আছে” এটা enough না. আপনার সাইটকে stable, trusted, fast, conversion-optimized হতে হবে — না হলে আপনি নিজের টাকাই নিজের সাইটের বিরুদ্ধে খরচ করছেন।
Lighthouse Layout Shift (CLS) Fix BD মানে শুধু একটা টেকনিক্যাল কাজ না। এটা মানে:
আপনার ইউজার ভয় পাবে না
আপনার বাটনে ভুল ক্লিক হবে না
আপনার SEO down হবে না
আপনার মার্কেটিং বাজেট নষ্ট হবে না
BD IT CENTER হল একটি Top-Rated Web Development Company in Bangladesh, এবং আমরা একই সাথে Best Web Hosting in Bangladesh (secure, fast, BDIX-optimized) দিয়ে থাকি — so আমরা শুধু রিপোর্ট দেখাই না, আমরা আসল সমস্যাটা production-এ ঠিক করে দেই।
আপনি যদি চান আপনার ecommerce store, business website, news portal, job portal, portfolio, অথবা custom web application যেন jump না করে এবং Google Lighthouse CLS score সবুজ থাকে:
👉 এখনই আপনার সাইটের URL + সমস্যাটা আমাদের পাঠান
👉 আর দেখে নিন আমরা কত দ্রুত লাইভ সাইটে Layout Shift ঠিক করি, secure করি, আর SEO কনভার্শন ready করে দিই।
চেষ্টা করে দেখুন। আপনার ভিজিটরকে বিরক্ত হতে দেবেন না 🙂
For urgent CLS / Lighthouse / malware / hacked / checkout-break issue:
BD IT CENTER · Website Error Fixing & Core Web Vitals Optimization
https://bditcenter.com/Web-Development/fix-website-errors