কিমেলেটিভ শিফট লেআউট (CLS ) কি ও কিভাবে ইম্প্রোভ করবেন ? (পার্ট-২)

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

গুগলের জন্য, ব্যবহারকারীর ইউসার এক্সপেরিয়েন্স অভিজ্ঞতা স্পষ্টতই অগ্রাধিকার পায়  এবং ক্রোম টীম দলের বিভিন্ন সদস্যরা বছরের পর বছর ধরে লেআউট শিফট (CLS ) সম্পর্কে কথা বলছেন।

এই কারণেই গুগল কিউমুলেটিভ লেআউট শিফটকে পেজ এক্সপিরিয়েন্স সিগন্যালগুলির মধ্যে একটি করে তুলেছে। এই সংকেতগুলি ইউসার এক্সপেরিয়েন্স প্রযুক্তিগত দিকগুলি ক্যাপচার এবং পরিমাপ করার চেষ্টা করে।

কিউমুলেটিভ লেআউট শিফট (CLS ) কি?

(সিএলএস) একটি কোর ওয়েব ভাইটালস মেট্রিক যা ব্যবহারকারীর সম্পর্ক দ্বারা সৃষ্ট হয় না এমন সমস্ত লেআউট  শিফটের সংক্ষিপ্তসার দ্বারা গণনা করা হয়। সিএলএস ভিউপোর্টের অনুপাত দেখে যা লেআউট পরিবর্তনদ্বারা প্রভাবিত হয়েছিল। 

সিএলএস স্কোর কত হলে ভালো?

একটি সিএলএস স্কোর স্ট্যাটিক পেজের জন্য 0 হতে পারে এবং পেজ এর লেআউট শিফট গুলি যত বেশি ঘটে তত বেশি স্কোর হয়।

আপনার স্কোর যত কম হবে, আপনার লেআউট তত স্থিতিশীল হবে। গুগলের পারফরমেন্স টুলস দ্বারা ব্যবহৃত অফিসিয়াল সিএলএস স্কোরগুলি নিম্নরূপ:

Good – 0.1 এর নিচে সিএলএস,
Need improve – 0.1 থেকে 0.25 এর মধ্যে সিএলএস,
Poor – 0.25 এর উপরে সিএলএস।

গুগল সুপারিশ করে যে আপনি আপনার সিএলএস স্কোর 0.1 এর নীচে রাখতে।

সিএলএস স্কোর কি আপনার এসইওকে প্রভাবিত করে?  

২০২১ সালের জুন মাসে গুগলের পেজ এক্সপিরিয়েন্স আপডেট চালু হলে সিএলএস রাঙ্কিং ফ্যাক্টর হয়ে উঠেছে। তার মানে আপনার সিএলএস স্কোর (এলসিপি এবং এফআইডি মেট্রিক্স সহ) আপনার এসইওকে প্রভাবিত করবে। যদিও এটি একটি খুব সামান্য ফ্যাক্টর হতে পারে, আপনার সিএলএস স্কোর (অন্যান্য ওয়েব ভাইটালগুলির সাথে) গুগল এবং অন্যান্য সার্চ ইঞ্জিন থেকে আপনি যে ট্র্যাফিক পান তা রিফ্লেক্ট করতে পারে।

উপরন্তু, সিএলএস, ব্যবহারকারীর আচরণ মেট্রিক্স সঙ্গে সম্পর্কযুক্ত। যদিও গুগল দাবি করে যে তারা রাঙ্কিংয়ের উদ্দেশ্যে dwell time বা বাউন্স রেটের মতো মেট্রিকস ব্যবহার করে না, বিং-এর মতো অন্যান্য সার্চ ইঞ্জিনগুলি তাদের রাঙ্কিং অ্যালগরিদমগুলিতে সেই মেট্রিকগুলি ব্যবহার করে তা স্বীকার করে।

এই কারণে, সিএলএস অপ্টিমাইজ করা অবশ্যই আপনার এসইও স্ট্রেটেজিতে অগ্রাধিকার দেয়া উচিত।

কিভাবে আপনার সিএলএস ইম্প্রোভ করবেন ?

১) ফন্ট ব্যবহার করা:
ডিসপ্লে ভ্যালু এবং লিঙ্ক rel=preload ব্যবহার করা। 
যদি আপনার সাইট অনলাইনে হোস্ট করা ফন্ট ব্যবহার করে থাকে, তাহলে সেগুলি FOIT (Flashes Of the Invisible Text) এবং FOUT (Flashes Of the Unstyled Text) এর প্রধান কারণ হতে পারে।

ব্রাউজার সার্ভার থেকে ফন্ট ডাউনলোড করার সময়, এটি প্রায়ই কাস্টম ফন্ট লোড না হওয়া পর্যন্ত ফাঁকা স্থান দেখায়। ফন্ট ডাউনলোড এবং দেখানোর পর, লেআউট সাধারণত বেশ নড়াচড়া করে। এর নাম FOIT (Flashes Of the Invisible Text) 

অপরপক্ষে, ব্রাউজারে ডাউনলোড না হওয়া পর্যন্ত সিস্টেমফন্টগুলির মধ্যে কাস্টমটি দেখায়। আমরা এটিকে  FOUT (Flashes Of the Unstyled Text) বলি। যেহেতু সিস্টেম ফন্ট কাস্টম থেকে পৃথক হতে পারে, এটি একটি নির্দিষ্ট পরিমাণ স্থান নিতে পারে। সেই কারণে, আপনার কাস্টম ফন্ট লোড হওয়ার পরে আপনার সাইটের লেআউট উল্লেখযোগ্যভাবে মুভ হতে পারে।

এটি এড়াতে, আপনি ফন্ট ডিসপ্লে ভ্যালু গুলা ব্যবহার করতে পারেন: auto, swap, block, fallback, and optional আরও ভাল ফলাফলের জন্য, আপনি <link rel=preload> ব্যবহার করে ফন্ট ফাইলগুলি প্রিলোড করতে পারেন। 

২) ইমেজ ও ভিডিও এর প্রস্থ এবং উচ্চতার এট্রিবিউট অন্তর্ভুক্ত করা 

ইমেজ বা ভিডিও এর প্রস্থ এবং উচ্চতা নির্ধারণ করে দেয়া ছিল আগেকার দিনের প্রাকটিস কিন্তু বর্তমানে রেস্পন্সিভ ওয়েব ডিসাইন এর কারণে এই প্রাকটিসটি এখন আর নেই বললেই চলে। 
যেমন < img src=”xyz-home-page.jpg” width=”1440″ height=”810″ alt=”xyz Home Hero Image”>   

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

৩) বিজ্ঞাপন এবং এম্বেডগুলিতে ডাইমেনশন নির্ধারণ করা 

বিজ্ঞাপনগুলি লেআউট শিফটগুলিতে সবচেয়ে বড় সমস্যার সৃষ্টি করে। প্রকাশক এবং বিজ্ঞাপন নেটওয়ার্কগুলি প্রায়ই ডাইনামিক  বিজ্ঞাপন সমর্থন করে এর ফলে আপনার ওয়েবসাইট এর  সিএলএস বেড়ে যাবার সম্ভবনা থাকে। 

বিজ্ঞাপনের কারণে উচ্চ সিএলএস-এর সম্ভাবনা কমাতে আপনি এই পদক্ষেপগুলি চেষ্টা করতে পারেন:

-বিজ্ঞাপন স্লটের জন্য স্ট্যাটিকভাবে স্থান সংরক্ষণ করুন। অর্থাৎ, বিজ্ঞাপন ট্যাগ লাইব্রেরি লোড করার আগে আইটেমটি স্টাইল করুন।

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

-ভিউপোর্টের উপরে স্টিকি নয় এমন বিজ্ঞাপন গুলি রাখার সময়, অতিরিক্ত যত্ন নিন।

-সর্বাধিক সম্ভাব্য সময়কাল সহ বিজ্ঞাপন স্লটটি সংরক্ষণ করে লেআউট শিফটগুলি দূর করুন।

-বিজ্ঞাপন স্লটের জন্য সম্ভাব্য আকার আগের তথ্য উপাত্ত ব্যবহার করে নিন।

৪) HTTP রেস্পন্স ইম্প্রোভ করুন এবং এলিমেন্টগুলো সিঙ্ক্রোনাইজ করুন

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

৫) ডাইনামিক ইনজেক্ট কনটেন্ট না করা 

এক্সিস্টিং কনটেন্ট এর উপর অন্য একটি কনটেন্ট ইনজেক্ট করবেন না। যেমনঃ বিভিন্ন ওয়েবসাইট এ দেখা যায় কনটেন্ট ওপেন হবার পর পপ-আপ এড শো করে থাকে যেটা লেআউট শিফট সমস্যাটি সৃষ্টি করে থাকে। 

সারসংক্ষেপ:
১) ফন্ট ডিসপ্লে ভ্যালু গুলা ব্যবহার, তার জন্য আপনি <link rel=preload> ব্যবহার করতে পারেন 
২) ইমেজ কম্প্রেসসর ব্যবহার ও ওয়ার্ডপ্রেস প্লাগিন এর ব্যবহার 
৩) এড গুলার প্লেসমেন্ট এর জন্য নিধারিত স্থান বরাদ্ধ করা বা থিম এর দেয়া স্থান এ এড প্লেসমেন্ট করা 
৪) স্লো সার্ভার কিনা লক্ষ্য রাখুন 
৫) পপ-আপ এড থেকে বিরত থাকুন  

Yaqub Nipu
আপনার ইমেইলে বাংলায় ইন্টারনেট মার্কেটিং এবং এসইও রিলেটেড লেটেস্ট খবর ও আপডেট পেতে চান? সাবস্ক্রাইব করে রাখুন।

Leave a Comment

Share via
Copy link
Powered by Social Snap