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

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

Addy Osmani

Barry Pollard

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

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

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

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

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

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

• মাত্রা ছাড়া ছবি.
• মাত্রা ছাড়া বিজ্ঞাপন, এম্বেড, এবং iframes.
• ডায়নামিকভাবে ইনজেক্ট করা বিষয়বস্তু যেমন বিজ্ঞাপন, এম্বেড এবং মাত্রা ছাড়া আইফ্রেম।
• ওয়েব ফন্ট।

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

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

ল্যাব টুল বনাম ক্ষেত্রের মধ্যে CLS

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ক্ষেত্রের CLS উপাদানগুলি পরিমাপ করুন

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

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

CLS এর সাধারণ কারণ

একবার আপনি 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 ইউনিট উচ্চ।

এর মানে যদি আমরা একটি মাত্রা জানি, অন্যটি নির্ধারণ করা যেতে পারে। একটি 16:9 অনুপাতের জন্য:

• 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 প্রক্রিয়া করা হয়, একটি ডিফল্ট ব্যবহারকারী এজেন্ট স্টাইল শীটের পরিবর্তে ( কেন এর গভীরে ডুব দেওয়ার জন্য এই পোস্টটি দেখুন), তাই মানটি একটু ভিন্নভাবে প্রদর্শিত হয়৷ উদাহরণস্বরূপ, এলিমেন্ট প্যানেলের শৈলী বিভাগে ক্রোম এটিকে এভাবে প্রদর্শন করে:

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>

Chrome, Firefox, এবং Safari এখন একটি প্রদত্ত <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>

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

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

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

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

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

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

বিষয়বস্তু প্রবাহে দেরী-লোডিং বিষয়বস্তু স্থাপন করার সময়, প্রাথমিক বিন্যাসে তাদের জন্য স্থান সংরক্ষিত করে বিন্যাস পরিবর্তন এড়ানো যেতে পারে।

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

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

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

আপনি পরিবর্তে ব্যবহার করা হবে এমন ক্ষুদ্রতম আকারে প্রাথমিক আকার সেট করতে পারেন এবং বড় সামগ্রীর জন্য কিছু স্তরের পরিবর্তন গ্রহণ করতে পারেন। min-height ব্যবহার করে, পূর্বে প্রস্তাবিত হিসাবে, একটি খালি উপাদানের 0px ডিফল্ট আকারের তুলনায় লেআউট শিফটের প্রভাব হ্রাস করার সময় প্যারেন্ট উপাদানটিকে প্রয়োজনীয় হিসাবে বৃদ্ধি পেতে দেয়৷

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

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

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

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

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

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

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

• একটি নির্দিষ্ট আকারের পাত্রের মধ্যে পুরানো সামগ্রীকে নতুন সামগ্রী দিয়ে প্রতিস্থাপন করুন বা একটি ক্যারোজেল ব্যবহার করুন এবং রূপান্তরের পরে পুরানো বিষয়বস্তু সরিয়ে দিন। নতুন বিষয়বস্তু আসার সময় দুর্ঘটনাজনিত ক্লিক বা ট্যাপ রোধ করতে রূপান্তর সম্পূর্ণ না হওয়া পর্যন্ত যেকোনো লিঙ্ক এবং নিয়ন্ত্রণ অক্ষম করতে ভুলবেন না।
• ব্যবহারকারীকে নতুন কন্টেন্ট লোড শুরু করতে বলুন, যাতে তারা শিফটে অবাক না হয় (উদাহরণস্বরূপ "আরো লোড করুন" বা "রিফ্রেশ" বোতাম দিয়ে)। ব্যবহারকারীর ইন্টারঅ্যাকশনের আগে বিষয়বস্তুটি প্রিফেচ করার পরামর্শ দেওয়া হয় যাতে এটি অবিলম্বে দেখা যায়। একটি অনুস্মারক হিসাবে, ব্যবহারকারীর ইনপুটের 500 মিলিসেকেন্ডের মধ্যে ঘটে যাওয়া বিন্যাস পরিবর্তনগুলি 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" এর অর্থ হবে ডিফল্ট ফন্ট ব্যবহার করা হয়েছে, যা ক্রোমে "টাইমস" - একটি সেরিফ ফন্ট যা ডিফল্ট sans-serif ফন্টের চেয়ে খারাপ মিল।
• ফলব্যাক ফন্ট এবং ওয়েব ফন্টের মধ্যে আকারের পার্থক্য ন্যূনতম করুন নতুন size-adjust , ascent-override , descent-override , এবং line-gap-override APIs ব্যবহার করে উন্নত ফন্ট ফলব্যাক পোস্টে বিস্তারিতভাবে।
• ফন্ট লোডিং API প্রয়োজনীয় ফন্ট পেতে সময় কমাতে পারে।
• <link rel=preload> ব্যবহার করে যত তাড়াতাড়ি সম্ভব জটিল ওয়েব ফন্ট লোড করুন। একটি প্রিলোড করা ফন্টের প্রথম পেইন্টের সাথে মিলিত হওয়ার একটি উচ্চ সুযোগ থাকবে, সেক্ষেত্রে কোন লেআউট স্থানান্তরিত হবে না।

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

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

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

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

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

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

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

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

উপসংহার

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