লেআউট শিফট মিনিমাইজ করুন

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

এই নির্দেশিকা ব্যাখ্যা করে কিভাবে Google Publisher Tags (GPT) এর সাথে কাজ করার সময় লেআউট শিফট পরিমাপ করা যায় এবং কমানো যায়।

কিভাবে বিজ্ঞাপন লেআউট পরিবর্তন ঘটায়

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

Google প্রকাশক ট্যাগগুলির সাথে কাজ করার সময়, বিজ্ঞাপনের জীবনচক্রে কয়েকটি পয়েন্ট রয়েছে যেখানে লেআউট পরিবর্তন ঘটতে পারে:

1. যখন display() বলা হয়। একটি স্লট কীভাবে কনফিগার করা হয়েছে তার উপর নির্ভর করে প্রসারিত বা ভেঙে পড়তে পারে।
2. যখন বিজ্ঞাপন সামগ্রী রেন্ডার করা হয়। একটি তরল বিজ্ঞাপন পরিবেশন করা হলে বা অপর্যাপ্ত স্থান অন্যথায় উপলব্ধ থাকলে একটি স্লটের আকার পরিবর্তন করা হতে পারে। একটি স্লট কীভাবে কনফিগার করা হয়েছে তার উপর নির্ভর করে এই সময়ে প্রসারিত বা ভেঙে পড়তে পারে।
3. বিজ্ঞাপন সামগ্রী রেন্ডার করার পরে। কিছু সৃজনশীল প্রকারগুলি পৃষ্ঠায় প্রদর্শিত হওয়ার পরে প্রসারিত করার জন্য ডিজাইন করা হয়েছে৷

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

লেআউট স্থানান্তর পরিমাপ করা হচ্ছে

Cumulative Layout Shift (CLS) হল একটি Core Web Vitals মেট্রিক যা আপনি ল্যাব এবং ফিল্ড উভয় ক্ষেত্রেই আপনার সাইটে লেআউট শিফটের প্রভাব পরিমাপ করতে ব্যবহার করতে পারেন।

গুরুত্বপূর্ণ: Core Web Vitals-এর মানগুলি সুপারিশ করে যে আপনার সাইটের 75th পার্সেন্টাইল CLS 0.1-এর কম হলে "ভাল" বলে বিবেচিত হবে। এই স্ট্যান্ডার্ডটি আপনার সাইটের সমস্ত লেআউট পরিবর্তনগুলিকে কভার করে, শুধুমাত্র বিজ্ঞাপনগুলির কারণে নয়৷

ল্যাবে

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

Lighthouse-এর জন্য প্রকাশক বিজ্ঞাপন অডিট হল একটি টুল যা CLS পরিমাপ করতে ব্যবহার করা যেতে পারে বিশেষভাবে GPT বিজ্ঞাপনের জন্য দায়ী। বিশদ বিবরণের জন্য, বিজ্ঞাপন-সম্পর্কিত লেআউট শিফট অডিট ডকুমেন্টেশন হ্রাস দেখুন।

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

মাঠে

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

দ্রষ্টব্য: আপনি ক্ষেত্রের CLS ম্যানুয়ালি পরিমাপ করতে Layout Instability API ব্যবহার করতে পারেন।

লেআউট শিফট মিনিমাইজ করা হচ্ছে

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

মাল্টি সাইজের বিজ্ঞাপন স্লট

একাধিক মাপ গ্রহণকারী বিজ্ঞাপন স্লটগুলির জন্য, আমরা নিম্নলিখিত পদ্ধতিগুলির মধ্যে একটি সুপারিশ করি:

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

সতর্কতা: বিজ্ঞাপন স্লট সম্প্রসারণ এবং সংকোচন সেটিংস সম্পর্কে সচেতন থাকুন, যা আপনার বিজ্ঞাপন স্লটে পরিবেশন করার যোগ্য আকারের পরিসরকে প্রভাবিত করতে পারে।

সঠিক পদ্ধতি নির্বাচন

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

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

ফাঁকা স্থান এবং লেআউট শিফটের মধ্যে ভারসাম্য বজায় রাখতে, আপনি আপনার বিজ্ঞাপন স্লটের জন্য একটি "গড়" পরিমাণ স্থান সংরক্ষণ করতে পারেন। উদাহরণস্বরূপ, 320x50 সৃজনশীল পরিবেশন করা হলে 100px উল্লম্বভাবে সংরক্ষিত করার ফলে একটু ফাঁকা স্থান লাগে, কিন্তু কোনো স্থান সংরক্ষণ না করার তুলনায় CLS স্কোর কমিয়ে দেয়। আপনার নিজের সাইটের জন্য সেরা ব্যালেন্স খুঁজে পেতে আপনাকে বিভিন্ন আকারের সাথে পরীক্ষা করতে হবে।

একটি প্রদত্ত স্লটের জন্য কতটা স্থান সংরক্ষণ করতে হবে তা নির্ধারণ করার সময়, Google অ্যাড ম্যানেজার রিপোর্টিং থেকে ঐতিহাসিক ফিল ডেটা পরীক্ষা করা আপনাকে আরও সচেতন সিদ্ধান্ত নিতে সাহায্য করতে পারে। এটি কিছু উদাহরণ অন্বেষণ দ্বারা সবচেয়ে ভাল চিত্রিত করা যেতে পারে.

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

উদাহরণ # 1

সৃজনশীল আকার (ডেলিভারি)	বিজ্ঞাপন সার্ভার ইমপ্রেশন (%)
300x250	70%
320x50	30%

এই ক্ষেত্রে, 250px উল্লম্বভাবে সংরক্ষণ করা CLSকে ব্যাপকভাবে হ্রাস করতে পারে যেহেতু পরিবেশিত ক্রিয়েটিভের সংখ্যা 300x250 ।

উদাহরণ #2

সৃজনশীল আকার (ডেলিভারি)	বিজ্ঞাপন সার্ভার ইমপ্রেশন (%)
970x90	৬০%
728x90	10%
320x50	20%
728x250	৫%
300x250	৫%

এই ক্ষেত্রে, বেশিরভাগ বিজ্ঞাপন সর্বাধিক 90px লম্বা হয়, তাই 90px উল্লম্বভাবে সংরক্ষণ করলে বেশিরভাগ সময় লেআউট শিফট এড়ানো উচিত।

কিভাবে জায়গা রিজার্ভ করা যায়

আমরা min-height এবং min-width CSS বৈশিষ্ট্যের মাধ্যমে আপনার বিজ্ঞাপন স্লটের আকার নির্দিষ্ট করে এই সমস্যাটি মোকাবেলা করার পরামর্শ দিই:

<div id="ad-slot" style="min-width: 300px; min-height: 250px;"></div>

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

আপনি বিভিন্ন স্ক্রীন আকারের জন্য বিভিন্ন ন্যূনতম নির্দিষ্ট করতে CSS মিডিয়া প্রশ্নের সাথে এই কৌশলটি একত্রিত করতে পারেন:

@media screen and (max-width: 960px) {
  #ad-slot {
    min-height: 100px;
  }
}

জাভাস্ক্রিপ্টের সাথে স্থান সংরক্ষণ করা এড়ানো উচিত, কারণ এটি করার ফলে স্ক্রিপ্ট লোড হওয়ার সময় লেআউট পরিবর্তন হতে পারে। CSS এর সাথে স্থান সংরক্ষণ করা এই ঝুঁকি এড়ায়।

তরল বিজ্ঞাপন স্লট

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

তরল বিজ্ঞাপন স্লটগুলির সাথে কাজ করার সময় লেআউট পরিবর্তনের প্রভাবগুলি কমাতে, আমরা নিম্নলিখিতগুলি সুপারিশ করি:

• ভাঁজের নিচের স্লটের জন্য শুধুমাত্র fluid আকার ব্যবহার করুন।
• তরল স্লটগুলি যত তাড়াতাড়ি সম্ভব আনুন যাতে কোনও ব্যবহারকারী স্লটের আকার পরিবর্তন করার আগে সেগুলিকে স্ক্রোল করার সম্ভাবনা কমিয়ে দেয়৷

বিজ্ঞাপন স্লটগুলিকে সঙ্কুচিত এবং প্রসারিত করা হচ্ছে

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

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

• যে স্লটগুলি পূরণ হওয়ার সম্ভাবনা রয়েছে তা সর্বদা প্রসারিত শুরু করা উচিত।
• যে স্লটগুলি পূরণ করার সম্ভাবনা নেই সেগুলি সর্বদা ভেঙে পড়া শুরু করা উচিত।

একটি উদাহরণ বাস্তবায়নের জন্য, খালি বিজ্ঞাপন স্লট সঙ্কুচিত করুন নমুনা দেখুন।