ক্রমবর্ধমান লেআউট শিফট অপ্টিমাইজ করুন

ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে হঠাৎ লেআউট পরিবর্তন এড়াতে শিখুন

Addy Osmani

Barry Pollard

প্রকাশিত: ৫ মে, ২০২০, সর্বশেষ আপডেট: ৭ ফেব্রুয়ারী, ২০২৫

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

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

ব্যবহারকারীদের ভালো অভিজ্ঞতা প্রদানের জন্য, সাইটগুলিকে কমপক্ষে ৭৫% পৃষ্ঠা ভিজিটের জন্য 0.1 বা তার কম CLS রাখার চেষ্টা করা উচিত।

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

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

দুর্বল CLS-এর সবচেয়ে সাধারণ কারণগুলি হল:

• মাত্রাবিহীন ছবি।
• মাত্রা ছাড়াই বিজ্ঞাপন, এম্বেড এবং আইফ্রেম।
• ডাইমেনশন ছাড়াই বিজ্ঞাপন, এম্বেড এবং আইফ্রেমের মতো গতিশীলভাবে ইনজেক্ট করা কন্টেন্ট।
• ওয়েব ফন্ট।

লেআউট পরিবর্তনের কারণগুলি বুঝুন

সাধারণ CLS সমস্যার সমাধান খুঁজতে শুরু করার আগে, আপনার CLS স্কোর এবং পরিবর্তনগুলি কোথা থেকে আসছে তা বোঝা গুরুত্বপূর্ণ।

ল্যাব টুলস বনাম ফিল্ডে CLS

ডেভেলপারদের কাছে এটা শোনা যায় যে Chrome UX Report (CrUX) দ্বারা পরিমাপ করা CLS ভুল কারণ এটি Chrome DevTools বা অন্যান্য ল্যাব টুল ব্যবহার করে পরিমাপ করা CLS-এর সাথে মেলে না। Lighthouse-এর মতো ওয়েব পারফরম্যান্স ল্যাব টুলগুলি কোনও পৃষ্ঠার সম্পূর্ণ CLS নাও দেখাতে পারে কারণ তারা সাধারণত কিছু ওয়েব পারফরম্যান্স মেট্রিক্স পরিমাপ করার জন্য পৃষ্ঠার একটি মৌলিক লোড করে এবং কিছু নির্দেশিকা প্রদান করে (যদিও Lighthouse ব্যবহারকারীর প্রবাহ আপনাকে ডিফল্ট পৃষ্ঠা লোড অডিটের বাইরে পরিমাপ করার অনুমতি দেয়)।

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

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

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

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

লোড CLS সমস্যাগুলি চিহ্নিত করুন

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

DevTools-এর পারফরম্যান্স প্যানেল লেআউট পরিবর্তন সম্পর্কে প্রচুর তথ্য প্রদান করে:

লেআউট শিফট ট্র্যাকে লেআউট শিফট হাইলাইট করা হয়েছে। বেগুনি রেখাগুলি শিফট ক্লাস্টারে স্থানান্তরিত হয় এবং হীরাগুলি সেই ক্লাস্টারে পৃথক স্থানান্তর দেখায়। হীরার আকার শিফটের আকারের সমানুপাতিক যা আপনাকে সবচেয়ে বড় শিফটগুলিতে নিযুক্ত করার অনুমতি দেয়।

একটি শিফটে ক্লিক করলে শিফটের অ্যানিমেশন সহ একটি পপ-আপ দেখাবে এবং বেগুনি রঙে শিফটের উপাদানগুলিকে হাইলাইট করবে।

Additionally, the Summary view for a Layout Shift record includes the start time, the shift score as well as the elements shifted. This is particularly helpful to get more detail on load CLS issues since this is easily replicated with a reload performance profile.

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

লোড-পরবর্তী CLS সমস্যাগুলি চিহ্নিত করুন

CrUX এবং Lighthouse CLS স্কোরের মধ্যে মতবিরোধ প্রায়শই লোড-পরবর্তী CLS নির্দেশ করে। ফিল্ড ডেটা ছাড়া এই পরিবর্তনগুলি ট্র্যাক করা কঠিন হতে পারে। ফিল্ড ডেটা সংগ্রহের তথ্যের জন্য, ফিল্ডে CLS উপাদানগুলি পরিমাপ করুন দেখুন।

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

DevTools ব্যবহারের বিকল্প হিসেবে, আপনি কনসোলে পেস্ট করা একটি পারফরম্যান্স অবজারভার ব্যবহার করে লেআউট শিফট রেকর্ড করার সময় আপনার ওয়েব পৃষ্ঠা ব্রাউজ করতে পারেন।

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

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

CLS-এর সাধারণ কারণগুলি শনাক্ত করার পরে, লেআউট শিফট প্রবর্তন করে সাধারণ ব্যবহারকারীর প্রবাহ যাতে পিছিয়ে না যায় তা নিশ্চিত করতে Lighthouse-এর টাইমস্প্যান ব্যবহারকারী প্রবাহ মোডও ব্যবহার করা যেতে পারে।

ক্ষেত্রের মধ্যে CLS উপাদান পরিমাপ করুন

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

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

সিএলএসের সাধারণ কারণগুলি

একবার আপনি CLS এর কারণগুলি চিহ্নিত করার পরে, আপনি সমস্যাগুলি সমাধানের জন্য কাজ শুরু করতে পারেন। এই বিভাগে আমরা CLS এর কিছু সাধারণ কারণ এবং সেগুলি এড়াতে আপনি কী করতে পারেন তা দেখাব।

মাত্রাবিহীন ছবি

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

ছবিতে width এবং height বৈশিষ্ট্যের ইতিহাস

ওয়েবের প্রথম দিকে, ডেভেলপাররা তাদের <img> ট্যাগে width এবং height বৈশিষ্ট্য যোগ করত যাতে ব্রাউজার ছবি তোলা শুরু করার আগে পৃষ্ঠায় পর্যাপ্ত স্থান বরাদ্দ থাকে। এটি রিফ্লো এবং রি-লেআউটকে কমিয়ে আনবে।

<img src="puppy.jpg" width="640" height="360" alt="Puppy with balloons">

এই উদাহরণে width এবং height একক অন্তর্ভুক্ত করে না। এই "পিক্সেল" মাত্রাগুলি নিশ্চিত করবে যে ব্রাউজারটি পৃষ্ঠার লেআউটে একটি 640x360 এলাকা সংরক্ষণ করেছে। ছবিটি এই স্থানের সাথে মানানসইভাবে প্রসারিত হবে, প্রকৃত মাত্রাগুলি এর সাথে মিলেছে কিনা তা নির্বিশেষে।

যখন রেসপন্সিভ ওয়েব ডিজাইন চালু করা হয়েছিল, তখন ডেভেলপাররা width এবং height বাদ দিতে শুরু করেছিলেন এবং ছবির আকার পরিবর্তনের জন্য CSS ব্যবহার শুরু করেছিলেন:

img {
  width: 100%; /* or max-width: 100%; */
  height: auto;
}

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

এখানেই আকৃতির অনুপাতের কথা আসে। একটি ছবির আকৃতির অনুপাত হল তার প্রস্থ এবং উচ্চতার অনুপাত। এটিকে একটি কোলন দ্বারা পৃথক করা দুটি সংখ্যা হিসাবে প্রকাশ করা সাধারণ (উদাহরণস্বরূপ, 16:9 বা 4:3)। x:y আকৃতির অনুপাতের জন্য, ছবিটি x ইউনিট প্রস্থ এবং y ইউনিট উচ্চ।

এর মানে হল যদি আমরা একটি মাত্রা জানি, তাহলে অন্যটি নির্ধারণ করা যেতে পারে। ১৬:৯ আকৃতির অনুপাতের জন্য:

• যদি puppy.jpg এর উচ্চতা 360px হয়, তাহলে প্রস্থ 360 x (16 / 9) = 640px হবে।
• যদি puppy.jpg এর প্রস্থ 640px হয়, তাহলে উচ্চতা 640 x (9 / 16) = 360px হবে।

একটি ছবির আকৃতির অনুপাত জানা থাকলে ব্রাউজারটি উচ্চতা এবং সংশ্লিষ্ট এলাকার জন্য পর্যাপ্ত স্থান গণনা এবং সংরক্ষণ করতে পারে।

ছবির মাত্রা নির্ধারণের জন্য আধুনিক সেরা অনুশীলন

যেহেতু আধুনিক ব্রাউজারগুলি ছবির width এবং height বৈশিষ্ট্যের উপর ভিত্তি করে ছবির ডিফল্ট আকৃতির অনুপাত সেট করে, তাই আপনি ছবিতে সেই বৈশিষ্ট্যগুলি সেট করে এবং আপনার স্টাইল শীটে পূর্ববর্তী CSS অন্তর্ভুক্ত করে লেআউট পরিবর্তন রোধ করতে পারেন।

<!-- set a 640:360 i.e a 16:9 aspect ratio -->
<img src="puppy.jpg" width="640" height="360" alt="Puppy with balloons">

এরপর সকল ব্রাউজার এলিমেন্টের বিদ্যমান width এবং height বৈশিষ্ট্যের উপর ভিত্তি করে একটি ডিফল্ট আকৃতির অনুপাত যোগ করবে।

এটি ছবি লোড হওয়ার আগে width এবং height বৈশিষ্ট্যের উপর ভিত্তি করে একটি আকৃতির অনুপাত গণনা করে। লেআউট গণনার একেবারে শুরুতেই এটি এই তথ্য প্রদান করে। যখনই কোনও ছবিকে একটি নির্দিষ্ট প্রস্থ বলা হয় (উদাহরণস্বরূপ width: 100% ), তখন উচ্চতা গণনা করার জন্য আকৃতির অনুপাত ব্যবহার করা হয়।

এই aspect-ratio মানটি প্রধান ব্রাউজারগুলি HTML প্রক্রিয়াকরণের সময় গণনা করে, ডিফল্ট ইউজার এজেন্ট স্টাইল শিটের পরিবর্তে ( কেন তা গভীরভাবে জানতে এই পোস্টটি দেখুন), তাই মানটি একটু ভিন্নভাবে প্রদর্শিত হয়। উদাহরণস্বরূপ, Chrome এটিকে Element প্যানেলের Styles বিভাগে এভাবে প্রদর্শন করে:

img[Attributes Style] {
  aspect-ratio: auto 640 / 360;
}

সাফারি একইভাবে আচরণ করে, একটি HTML অ্যাট্রিবিউট স্টাইল সোর্স ব্যবহার করে। ফায়ারফক্স তার ইন্সপেক্টর প্যানেলে এই গণনা করা aspect-ratio মোটেও প্রদর্শন করে না, তবে লেআউটের জন্য এটি ব্যবহার করে।

পূর্ববর্তী কোডের auto অংশটি গুরুত্বপূর্ণ, কারণ এটি চিত্র ডাউনলোডের পরে ডিফল্ট আকৃতির অনুপাতকে ওভাররাইড করে ছবির মাত্রা। যদি চিত্রের মাত্রা ভিন্ন হয়, তবে চিত্র লোড হওয়ার পরেও এটি কিছু লেআউট পরিবর্তনের কারণ হতে পারে, তবে এটি নিশ্চিত করে যে HTML ভুল হলে, এটি উপলব্ধ হওয়ার পরেও চিত্রের আকৃতির অনুপাত ব্যবহার করা হচ্ছে। এমনকি যদি প্রকৃত আকৃতির অনুপাত ডিফল্ট থেকে আলাদা হয়, তবুও এটি কোনও মাত্রা প্রদান না করে একটি চিত্রের 0x0 ডিফল্ট আকারের তুলনায় কম লেআউট পরিবর্তন ঘটায়।

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

যদি আপনার ছবিটি একটি কন্টেইনারে থাকে, তাহলে আপনি CSS ব্যবহার করে ছবিটির আকার পরিবর্তন করে কন্টেইনারের প্রস্থ অনুযায়ী করতে পারেন। ছবির উচ্চতার জন্য একটি নির্দিষ্ট মান ব্যবহার না করার জন্য আমরা height: auto; সেট করেছি।

img {
  height: auto;
  width: 100%;
}

রেসপন্সিভ ছবিগুলো কেমন হবে?

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

<img
  width="1000"
  height="1000"
  src="puppy-1000.jpg"
  srcset="puppy-1000.jpg 1000w, puppy-2000.jpg 2000w, puppy-3000.jpg 3000w"
  alt="Puppy with balloons"
/>

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

<picture>
  <source media="(max-width: 799px)" srcset="puppy-480w-cropped.jpg" />
  <source media="(min-width: 800px)" srcset="puppy-800w.jpg" />
  <img src="puppy-800w.jpg" alt="Puppy with balloons" />
</picture>

ক্রোম, ফায়ারফক্স এবং সাফারি এখন একটি নির্দিষ্ট <picture> উপাদানের মধ্যে <source> উপাদানগুলিতে width এবং height সেট করা সমর্থন করে:

<picture>
  <source media="(max-width: 799px)" srcset="puppy-480w-cropped.jpg" width="480" height="400" />
  <source media="(min-width: 800px)" srcset="puppy-800w.jpg" width="800" height="400" />
  <img src="puppy-800w.jpg" alt="Puppy with balloons" width="800" height="400" />
</picture>

বিজ্ঞাপন, এম্বেড এবং অন্যান্য দেরিতে লোড হওয়া সামগ্রী

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

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

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

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

দেরিতে লোড হওয়া কন্টেন্টের জন্য জায়গা সংরক্ষণ করুন

কন্টেন্ট ফ্লোতে দেরিতে লোড হওয়া কন্টেন্ট রাখার সময়, প্রাথমিক লেআউটে তাদের জন্য স্থান সংরক্ষণ করে লেআউট পরিবর্তন এড়ানো যেতে পারে।

একটি পদ্ধতি হল স্থান সংরক্ষণের জন্য একটি min-height CSS নিয়ম যোগ করা অথবা—উদাহরণস্বরূপ, বিজ্ঞাপনের মতো প্রতিক্রিয়াশীল সামগ্রীর জন্য— aspect-ratio CSS বৈশিষ্ট্যটি একইভাবে ব্যবহার করা যা ব্রাউজারগুলি স্বয়ংক্রিয়ভাবে প্রদত্ত মাত্রা সহ চিত্রগুলির জন্য এটি ব্যবহার করে।

মিডিয়া কোয়েরি ব্যবহার করে আপনাকে ফর্ম ফ্যাক্টর জুড়ে বিজ্ঞাপন বা প্লেসহোল্ডারের আকারের সূক্ষ্ম পার্থক্যের জন্য হিসাব করতে হতে পারে।

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

You can instead set the initial size to the smallest size that will be used, and accept some level of shift for larger content. Using min-height , as suggested previously, allows the parent element to grow as necessary while reducing the impact of layout shifts, compared to the 0px default size of an empty element.

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

ভিউপোর্টে দেরিতে লোড হওয়া কন্টেন্ট নীচে রাখুন

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

ব্যবহারকারীর সাথে যোগাযোগ ছাড়াই নতুন কন্টেন্ট সন্নিবেশ করা এড়িয়ে চলুন

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

If you need to display these types of UI affordances, reserve sufficient space in the viewport for it in advance (for example, using a placeholder or skeleton UI) so that when it loads, it does not cause content in the page to surprisingly shift around. Alternatively, ensure the element is not part of the document flow by overlaying the content where this makes sense. See the Best practices for cookie notices post for more recommendations on these types of components.

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

• একটি নির্দিষ্ট আকারের পাত্রের মধ্যে পুরানো কন্টেন্টটি নতুন কন্টেন্ট দিয়ে প্রতিস্থাপন করুন অথবা একটি ক্যারোজেল ব্যবহার করুন এবং ট্রানজিশনের পরে পুরানো কন্টেন্টটি সরিয়ে ফেলুন। নতুন কন্টেন্ট আসার সময় দুর্ঘটনাজনিত ক্লিক বা ট্যাপ প্রতিরোধ করার জন্য ট্রানজিশনটি সম্পূর্ণ না হওয়া পর্যন্ত যেকোনো লিঙ্ক এবং নিয়ন্ত্রণ অক্ষম করতে ভুলবেন না।
• Have the user initiate the load of new content, so they are not surprised by the shift (for example with a "Load more" or "Refresh" button). It's recommended to prefetch the content before the user interaction so that it shows up immediately. As a reminder, layout shifts that occur within 500 milliseconds of user input are not counted towards CLS.
• পর্দার বাইরের দিকে কন্টেন্টটি নির্বিঘ্নে লোড করুন এবং ব্যবহারকারীকে এটি উপলব্ধ রয়েছে বলে একটি নোটিশ ওভারলে করুন (উদাহরণস্বরূপ, "শীর্ষে স্ক্রোল করুন" বোতামটি ব্যবহার করে)।

অ্যানিমেশন

CSS প্রোপার্টি ভ্যালুতে পরিবর্তনের ফলে ব্রাউজারকে এই পরিবর্তনগুলিতে প্রতিক্রিয়া জানাতে হতে পারে। কিছু ভ্যালু, যেমন box-shadow এবং box-sizing , রি-লেআউট, পেইন্ট এবং কম্পোজিট ট্রিগার করে। top এবং left প্রোপার্টি পরিবর্তন করলেও লেআউট পরিবর্তন হতে পারে, এমনকি যখন এলিমেন্টটি সরানো হচ্ছে তখনও। এই প্রোপার্টি ব্যবহার করে অ্যানিমেটিং এড়িয়ে চলুন।

অন্যান্য CSS বৈশিষ্ট্যগুলি রি-লেআউট ট্রিগার না করেই পরিবর্তন করা যেতে পারে। এর মধ্যে রয়েছে transform অ্যানিমেশন ব্যবহার করে উপাদানগুলিকে অনুবাদ, স্কেল, ঘোরানো বা স্কিউ করা।

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

ওয়েব ফন্ট

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

• ফলব্যাক ফন্টটি ওয়েব ফন্টের সাথে অদলবদল করা হয়, যার ফলে ফ্ল্যাশ অফ আনস্টাইলড টেক্সট (FOUT) দেখা দেয়।
• "অদৃশ্য" লেখাটি ফলব্যাক ফন্ট ব্যবহার করে প্রদর্শিত হয় যতক্ষণ না একটি ওয়েব ফন্ট পাওয়া যায় এবং লেখাটি দৃশ্যমান হয় (FOIT—অদৃশ্য লেখার ফ্ল্যাশ)।

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

নিম্নলিখিত সরঞ্জামগুলি আপনাকে টেক্সটের স্থানান্তর কমাতে সাহায্য করতে পারে:

• font-display: optional পুনরায় লেআউট এড়ানো যেতে পারে কারণ ওয়েব ফন্টটি শুধুমাত্র তখনই ব্যবহৃত হয় যদি এটি প্রাথমিক লেআউটের সময় উপলব্ধ থাকে।
• যথাযথ ফলব্যাক ফন্ট ব্যবহার করা হয়েছে কিনা তা নিশ্চিত করুন। উদাহরণস্বরূপ, font-family: "Google Sans", sans-serif; ব্যবহার করলে "Google Sans" লোড হওয়ার সময় ব্রাউজারের sans-serif ফলব্যাক ফন্ট ব্যবহার করা হবে। শুধুমাত্র font-family: "Google Sans" ডিফল্ট ফন্ট ব্যবহার করা হবে, যা Chrome-এ "Times" - একটি সেরিফ ফন্ট যা ডিফল্ট sans-serif ফন্টের চেয়ে খারাপ মিল।
• উন্নত ফন্ট ফলব্যাক পোস্টে বিস্তারিতভাবে বর্ণনা করা নতুন size-adjust , ascent-override , descent-override , এবং line-gap-override API ব্যবহার করে ফলব্যাক ফন্ট এবং ওয়েব ফন্টের মধ্যে আকারের পার্থক্য কমিয়ে আনুন।
• ফন্ট লোডিং এপিআই প্রয়োজনীয় ফন্ট পেতে যে সময় লাগে তা কমিয়ে আনতে পারে।
• <link rel=preload> ব্যবহার করে যত তাড়াতাড়ি সম্ভব গুরুত্বপূর্ণ ওয়েব ফন্টগুলি লোড করুন। একটি প্রিলোডেড ফন্টের প্রথম রঙটি পূরণ করার সম্ভাবনা বেশি থাকে, সেক্ষেত্রে কোনও লেআউট পরিবর্তন হয় না।

অন্যান্য ফন্টের সেরা অনুশীলনের জন্য "ফন্টের জন্য সেরা অনুশীলন" পড়ুন।

পৃষ্ঠাগুলি bfcache-এর জন্য যোগ্য কিনা তা নিশ্চিত করে CLS হ্রাস করুন।

CLS স্কোর কম রাখার জন্য একটি অত্যন্ত কার্যকর কৌশল হল আপনার ওয়েব পৃষ্ঠাগুলি ব্যাক/ফরোয়ার্ড ক্যাশে (bfcache) এর জন্য যোগ্য কিনা তা নিশ্চিত করা।

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

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

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

যখন এটি Chrome-এ চালু করা হয়েছিল , তখন আমরা CLS-এ লক্ষণীয় উন্নতি দেখতে পেয়েছি।

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

উপসংহার

এই নির্দেশিকায় আগে যেমনটি বর্ণনা করা হয়েছে, CLS শনাক্ত এবং উন্নত করার জন্য বেশ কিছু কৌশল রয়েছে। Core Web Vitals-এ কিছু সুবিধা রয়েছে, তাই আপনি যদি CLS সম্পূর্ণরূপে নির্মূল করতে না পারেন, তবুও এই কৌশলগুলির কিছু ব্যবহার আপনাকে প্রভাব কমাতে সাহায্য করবে। আশা করি এটি আপনাকে সেই সীমার মধ্যে থাকতে সাহায্য করবে, যা আপনার ওয়েবসাইটের ব্যবহারকারীদের জন্য আরও ভালো অভিজ্ঞতা তৈরি করবে।