ব্যবহারকারী-অভিজ্ঞতা উন্নত করতে আকস্মিক লেআউট পরিবর্তন এড়াতে শিখুন
প্রকাশিত: মে 5, 2020, শেষ আপডেট: ফেব্রুয়ারী 7, 2025
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 এর ফলাফল।
![পেজস্পিড ইনসাইট ইউআরএল-স্তরের ডেটা দেখাচ্ছে যা প্রকৃত ব্যবহারকারী সিএলএস হাইলাইট করে যা লাইটহাউস সিএলএস থেকে যথেষ্ট বড়](https://web.developers.google.cn/static/articles/optimize-cls/image/screenshot-pagespeed-ins-1b9715cccc402.png?hl=bn)
লোড CLS সমস্যা চিহ্নিত করুন
যখন PageSpeed Insights-এর CrUX এবং Lighthouse CLS স্কোরগুলি বিস্তৃতভাবে সারিবদ্ধ করা হয়, তখন এটি সাধারণত নির্দেশ করে যে একটি লোড CLS সমস্যা আছে যা Lighthouse দ্বারা শনাক্ত করা হয়েছে। এই ক্ষেত্রে Lighthouse প্রস্থ এবং উচ্চতা অনুপস্থিত থাকার কারণে CLS সৃষ্টিকারী চিত্রগুলির বিষয়ে আরও তথ্য প্রদান করতে দুটি অডিটের সাহায্য করবে এবং তাদের CLS অবদান সহ পৃষ্ঠা লোডের জন্য স্থানান্তরিত সমস্ত উপাদানের তালিকাও করবে৷ আপনি CLS অডিটগুলিতে ফিল্টার করে এই অডিটগুলি দেখতে পারেন:
![লাইটহাউস স্ক্রিনশট সিএলএস অডিট দেখায় যা আপনাকে সিএলএস সমস্যা সনাক্ত করতে এবং সমাধান করতে সহায়তা করার জন্য আরও তথ্য প্রদান করে](https://web.developers.google.cn/static/articles/optimize-cls/image/lighthouse-screenshot-sho-1c6eeefdc4b1b.png?hl=bn)
DevTools-এর পারফরম্যান্স প্যানেল লেআউট পরিবর্তনের বিষয়ে প্রচুর তথ্য প্রদান করে:
![লেআউট শিফট রেকর্ডগুলি Chrome DevTools পারফরম্যান্স প্যানেলে প্রদর্শিত হচ্ছে৷](https://web.developers.google.cn/static/articles/optimize-cls/image/devtools-cls-debugging.png?hl=bn)
Layout Shift
ক্লাস্টারগুলি প্রদর্শন করে বেগুনি বার দ্বারা পরিপূর্ণ হয়। হীরাতে ক্লিক করলে সারাংশ প্যানেলে স্থানান্তরের একটি অ্যানিমেশন এবং বিশদ বিবরণ দেখায়।লেআউট শিফটগুলি লেআউট শিফট ট্র্যাকে হাইলাইট করা হয়। বেগুনি রেখা গোষ্ঠীগুলি শিফট ক্লাস্টারে স্থানান্তরিত হয় এবং হীরা সেই ক্লাস্টারে পৃথক স্থানান্তর দেখায়। হীরার আকার শিফটের আকারের সমানুপাতিক যা আপনাকে সবচেয়ে বড় শিফটে প্রবেশ করতে দেয়।
একটি শিফটে ক্লিক করা শিফটের একটি অ্যানিমেশন সহ একটি পপ আপ দেখায় এবং বেগুনি রঙে স্থানান্তরিত উপাদানগুলিকে হাইলাইট করে৷
অতিরিক্তভাবে, Layout Shift
রেকর্ডের সারাংশ ভিউতে শুরুর সময়, শিফট স্কোর এবং সেইসাথে স্থানান্তরিত উপাদান অন্তর্ভুক্ত থাকে। এটি লোড সিএলএস সমস্যা সম্পর্কে আরও বিস্তারিত জানার জন্য বিশেষভাবে সহায়ক কারণ এটি একটি পুনরায় লোড কর্মক্ষমতা প্রোফাইলের সাথে সহজেই প্রতিলিপি করা হয়।
এটি বাম দিকের অন্তর্দৃষ্টি প্যানেলে প্রদর্শিত লেআউট শিফট অপরাধীদের অন্তর্দৃষ্টির সাথেও লিঙ্ক করে, যা শীর্ষে মোট CLS দেখায়, সেইসাথে লেআউট পরিবর্তনের সম্ভাব্য কারণগুলিও দেখায়৷
পোস্ট-লোড CLS সমস্যা চিহ্নিত করুন
CrUX এবং Lighthouse CLS স্কোরের মধ্যে মতানৈক্য প্রায়ই পোস্ট-লোড CLS নির্দেশ করে। এই স্থানান্তরগুলি ফিল্ড ডেটা ছাড়াই ট্র্যাক করা কঠিন হতে পারে। ক্ষেত্রের তথ্য সংগ্রহের তথ্যের জন্য, ক্ষেত্রের CLS উপাদানগুলি পরিমাপ করুন দেখুন।
পারফরম্যান্স প্যানেলের লাইভ মেট্রিক্স ভিউ আপনাকে পৃষ্ঠার সাথে ইন্টারঅ্যাক্ট করতে এবং বড় লেআউট shfts সৃষ্টিকারী মিথস্ক্রিয়া সনাক্ত করতে CLS স্কোর নিরীক্ষণ করতে দেয়।
![Chrome DevTools পারফরম্যান্স প্যানেলের লাইভ মেট্রিক্স স্ক্রিনে লেআউট শিফট রেকর্ডগুলি প্রদর্শিত হচ্ছে৷](https://web.developers.google.cn/static/articles/optimize-cls/image/live-metrics-cls.png?hl=bn)
DevTools ব্যবহার করার বিকল্প হিসেবে, কনসোলে আটকানো একটি পারফরম্যান্স অবজারভার ব্যবহার করে লেআউট শিফট রেকর্ড করার সময় আপনি আপনার ওয়েব পৃষ্ঠা ব্রাউজ করতে পারেন।
আপনি শিফট মনিটরিং সেট আপ করার পরে, আপনি পোস্ট-লোড CLS সমস্যাগুলির প্রতিলিপি করার চেষ্টা করতে পারেন। CLS প্রায়ই ঘটে যখন ব্যবহারকারী একটি পৃষ্ঠার মাধ্যমে স্ক্রোল করে, যখন অলস-লোড করা বিষয়বস্তু এটির জন্য সংরক্ষিত স্থান ছাড়াই সম্পূর্ণরূপে লোড হয়। ব্যবহারকারী যখন এটির উপর পয়েন্টার ধরে রাখে তখন বিষয়বস্তু স্থানান্তরিত হওয়া আরেকটি সাধারণ পোস্ট-লোড CLS কারণ। এই ইন্টারঅ্যাকশনগুলির মধ্যে যেকোনও বিষয়বস্তুর পরিবর্তন অপ্রত্যাশিত হিসাবে গণনা করা হয়, এমনকি যদি এটি 500 মিলিসেকেন্ডের মধ্যে ঘটে।
আরও তথ্যের জন্য, ডিবাগ লেআউট শিফট দেখুন।
আপনি CLS-এর সাধারণ কারণগুলি চিহ্নিত করার পরে, Lighthouse-এর টাইমস্প্যান ইউজার ফ্লো মোডও ব্যবহার করা যেতে পারে যাতে সাধারণ ব্যবহারকারীর প্রবাহ লেআউট শিফ্ট প্রবর্তন করে প্রত্যাবর্তন না করে।
ক্ষেত্রের CLS উপাদানগুলি পরিমাপ করুন
সিএলএস কী পরিস্থিতিতে ঘটবে তা নির্ধারণ করতে এবং সম্ভাব্য কারণগুলিকে সংকুচিত করতে ক্ষেত্রের মধ্যে CLS পর্যবেক্ষণ করা অমূল্য হতে পারে। বেশিরভাগ ল্যাব সরঞ্জামের মতো, ফিল্ড টুলগুলি শুধুমাত্র স্থানান্তরিত উপাদানগুলিকে পরিমাপ করে, তবে এটি সাধারণত কারণ সনাক্ত করার জন্য যথেষ্ট তথ্য প্রদান করে। কোন সমস্যাগুলি সমাধানের জন্য সর্বোচ্চ অগ্রাধিকার তা নির্ধারণ করতে আপনি CLS ক্ষেত্রের পরিমাপও ব্যবহার করতে পারেন।
web-vitals
লাইব্রেরিতে অ্যাট্রিবিউশন ফাংশন রয়েছে যা আপনাকে এই অতিরিক্ত তথ্য সংগ্রহ করতে দেয়। আরও তথ্যের জন্য, ক্ষেত্রের ডিবাগ কর্মক্ষমতা দেখুন। অন্যান্য RUM প্রদানকারীরাও একইভাবে এই ডেটা সংগ্রহ এবং উপস্থাপন করা শুরু করেছে।
CLS এর সাধারণ কারণ
একবার আপনি CLS এর কারণগুলি চিহ্নিত করার পরে, আপনি সমস্যাগুলি সমাধানের জন্য কাজ শুরু করতে পারেন৷ এই বিভাগে আমরা CLS-এর আরও কিছু সাধারণ কারণ দেখাব এবং সেগুলি এড়াতে আপনি কী করতে পারেন।
মাত্রা ছাড়া ছবি
আপনার ছবি এবং ভিডিও উপাদানগুলিতে সর্বদা width
এবং height
আকারের বৈশিষ্ট্যগুলি অন্তর্ভুক্ত করুন। বিকল্পভাবে, CSS aspect-ratio
বা অনুরূপ সহ প্রয়োজনীয় স্থান সংরক্ষণ করুন। এই পদ্ধতিটি নিশ্চিত করে যে ইমেজ লোড হওয়ার সময় ব্রাউজার নথিতে সঠিক পরিমাণ স্থান বরাদ্দ করতে পারে।
![বাতিঘর প্রতিবেদন চিত্রগুলিতে মাত্রা সেট করার পরে ক্রমবর্ধমান লেআউট শিফটে প্রভাবের আগে/পরে দেখায়](https://web.developers.google.cn/static/articles/optimize-cls/image/lighthouse-report-showing-9556bbb060b37.png?hl=bn)
চিত্রগুলিতে 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-এর জন্য গণনা করা হয় না।
- নিরবিচ্ছিন্নভাবে কন্টেন্টটি অফস্ক্রিনে লোড করুন এবং ব্যবহারকারীর কাছে একটি নোটিশ ওভারলে করুন যে এটি উপলব্ধ রয়েছে (উদাহরণস্বরূপ, "উপরে স্ক্রোল করুন" বোতাম সহ)।
![টুইটার এবং ক্লোয়ে ওয়েবসাইট থেকে অপ্রত্যাশিত লেআউট পরিবর্তন না করেই ডায়নামিক কন্টেন্ট লোড হওয়ার উদাহরণ](https://web.developers.google.cn/static/articles/optimize-cls/image/examples-dynamic-content-4d11ddda2fa94.png?hl=bn)
অ্যানিমেশন
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 সম্পূর্ণরূপে নির্মূল করতে না পারলেও, এই কৌশলগুলির কিছু ব্যবহার করে আপনাকে প্রভাব কমাতে অনুমতি দেওয়া উচিত। আশা করি এটি আপনাকে সেই সীমার মধ্যে থাকার অনুমতি দেবে, আপনার ওয়েবসাইটের ব্যবহারকারীদের জন্য আরও ভাল অভিজ্ঞতা তৈরি করবে।
,ব্যবহারকারী-অভিজ্ঞতা উন্নত করতে আকস্মিক লেআউট পরিবর্তন এড়াতে শিখুন
প্রকাশিত: মে 5, 2020, শেষ আপডেট: ফেব্রুয়ারী 7, 2025
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 এর ফলাফল।
![পেজস্পিড ইনসাইট ইউআরএল-স্তরের ডেটা দেখাচ্ছে যা প্রকৃত ব্যবহারকারী সিএলএস হাইলাইট করে যা লাইটহাউস সিএলএস থেকে যথেষ্ট বড়](https://web.developers.google.cn/static/articles/optimize-cls/image/screenshot-pagespeed-ins-1b9715cccc402.png?hl=bn)
লোড CLS সমস্যা চিহ্নিত করুন
যখন PageSpeed Insights-এর CrUX এবং Lighthouse CLS স্কোরগুলি বিস্তৃতভাবে সারিবদ্ধ করা হয়, তখন এটি সাধারণত নির্দেশ করে যে একটি লোড CLS সমস্যা আছে যা Lighthouse দ্বারা শনাক্ত করা হয়েছে। এই ক্ষেত্রে Lighthouse প্রস্থ এবং উচ্চতা অনুপস্থিত থাকার কারণে CLS সৃষ্টিকারী চিত্রগুলির বিষয়ে আরও তথ্য প্রদান করতে দুটি অডিটের সাহায্য করবে এবং তাদের CLS অবদান সহ পৃষ্ঠা লোডের জন্য স্থানান্তরিত সমস্ত উপাদানের তালিকাও করবে৷ আপনি CLS অডিটগুলিতে ফিল্টার করে এই অডিটগুলি দেখতে পারেন:
![লাইটহাউস স্ক্রিনশট সিএলএস অডিট দেখায় যা আপনাকে সিএলএস সমস্যা সনাক্ত করতে এবং সমাধান করতে সহায়তা করার জন্য আরও তথ্য প্রদান করে](https://web.developers.google.cn/static/articles/optimize-cls/image/lighthouse-screenshot-sho-1c6eeefdc4b1b.png?hl=bn)
DevTools-এর পারফরম্যান্স প্যানেল লেআউট পরিবর্তনের বিষয়ে প্রচুর তথ্য প্রদান করে:
![লেআউট শিফট রেকর্ডগুলি Chrome DevTools পারফরম্যান্স প্যানেলে প্রদর্শিত হচ্ছে৷](https://web.developers.google.cn/static/articles/optimize-cls/image/devtools-cls-debugging.png?hl=bn)
Layout Shift
ক্লাস্টারগুলি প্রদর্শন করে বেগুনি বার দ্বারা পরিপূর্ণ হয়। হীরাতে ক্লিক করলে সারাংশ প্যানেলে স্থানান্তরের একটি অ্যানিমেশন এবং বিশদ বিবরণ দেখায়।লেআউট শিফটগুলি লেআউট শিফট ট্র্যাকে হাইলাইট করা হয়। বেগুনি রেখা গোষ্ঠীগুলি শিফট ক্লাস্টারে স্থানান্তরিত হয় এবং হীরা সেই ক্লাস্টারে পৃথক স্থানান্তর দেখায়। হীরার আকার শিফটের আকারের সমানুপাতিক যা আপনাকে সবচেয়ে বড় শিফটে প্রবেশ করতে দেয়।
একটি শিফটে ক্লিক করা শিফটের একটি অ্যানিমেশন সহ একটি পপ আপ দেখায় এবং বেগুনি রঙে স্থানান্তরিত উপাদানগুলিকে হাইলাইট করে৷
অতিরিক্তভাবে, Layout Shift
রেকর্ডের সারাংশ ভিউতে শুরুর সময়, শিফট স্কোর এবং সেইসাথে স্থানান্তরিত উপাদান অন্তর্ভুক্ত থাকে। এটি লোড সিএলএস সমস্যা সম্পর্কে আরও বিস্তারিত জানার জন্য বিশেষভাবে সহায়ক কারণ এটি একটি পুনরায় লোড কর্মক্ষমতা প্রোফাইলের সাথে সহজেই প্রতিলিপি করা হয়।
এটি বাম দিকের অন্তর্দৃষ্টি প্যানেলে প্রদর্শিত লেআউট শিফট অপরাধীদের অন্তর্দৃষ্টির সাথেও লিঙ্ক করে, যা শীর্ষে মোট CLS দেখায়, সেইসাথে লেআউট পরিবর্তনের সম্ভাব্য কারণগুলিও দেখায়৷
পোস্ট-লোড CLS সমস্যা চিহ্নিত করুন
ক্রাক্স এবং বাতিঘর সিএলএস স্কোরগুলির মধ্যে মতবিরোধ প্রায়শই পোস্ট-লোড সিএলএসকে নির্দেশ করে। এই শিফটগুলি মাঠের ডেটা ছাড়াই ট্র্যাক করতে জটিল হতে পারে। ক্ষেত্রের ডেটা সংগ্রহের তথ্যের জন্য, ক্ষেত্রের সিএলএস উপাদানগুলি পরিমাপ করুন ।
পারফরম্যান্স প্যানেলের লাইভ মেট্রিক্স ভিউ আপনাকে পৃষ্ঠার সাথে ইন্টারঅ্যাক্ট করতে দেয় এবং বড় লেআউট শ্যাফ্টগুলির কারণে মিথস্ক্রিয়াগুলি সনাক্ত করতে সিএলএস স্কোরটি পর্যবেক্ষণ করতে দেয়।
![ক্রোম ডিভটুলস পারফরম্যান্স প্যানেলের লাইভ মেট্রিক্স স্ক্রিনে লেআউট শিফট রেকর্ড প্রদর্শিত হচ্ছে।](https://web.developers.google.cn/static/articles/optimize-cls/image/live-metrics-cls.png?hl=bn)
ডেভটুলগুলি ব্যবহারের বিকল্প হিসাবে, কনসোলে আটকানো পারফরম্যান্স পর্যবেক্ষক ব্যবহার করে লেআউট শিফটগুলি রেকর্ড করার সময় আপনি আপনার ওয়েব পৃষ্ঠাটি ব্রাউজ করতে পারেন।
আপনি শিফট মনিটরিং সেট আপ করার পরে, আপনি কোনও লোড পোস্ট সিএলএস সমস্যাগুলি প্রতিলিপি করার চেষ্টা করতে পারেন। সিএলএস প্রায়শই ঘটে যখন ব্যবহারকারী কোনও পৃষ্ঠার মাধ্যমে স্ক্রোল করে, যখন অলস-লোডযুক্ত সামগ্রীটি এর জন্য সংরক্ষিত স্থান ছাড়াই পুরোপুরি লোড হয়। সামগ্রী স্থানান্তরিত যখন ব্যবহারকারী পয়েন্টারটি ধরে রাখেন তখন এটি আরও একটি সাধারণ লোড-লোড সিএলএস কারণ। এই ইন্টারঅ্যাকশনগুলির মধ্যে যে কোনও একটির সময় কোনও সামগ্রী স্থানান্তর অপ্রত্যাশিত হিসাবে গণ্য হয়, এমনকি এটি 500 মিলিসেকেন্ডের মধ্যে ঘটে।
আরও তথ্যের জন্য, ডিবাগ লেআউট শিফটগুলি দেখুন।
আপনি সিএলএসের কোনও সাধারণ কারণ চিহ্নিত করার পরে, লাইটহাউসের টাইমস্প্যানস ব্যবহারকারী প্রবাহ মোডটি লেআউট শিফটগুলি প্রবর্তন করে সাধারণ ব্যবহারকারীর প্রবাহগুলি পুনরায় চাপ না দেওয়ার বিষয়টি নিশ্চিত করতেও ব্যবহার করা যেতে পারে।
ক্ষেত্রের সিএলএস উপাদানগুলি পরিমাপ করুন
ক্ষেত্রের সিএলগুলি পর্যবেক্ষণ করা সিএলএস কী পরিস্থিতিতে ঘটে তা নির্ধারণে এবং সম্ভাব্য কারণগুলি সংকুচিত করে তা নির্ধারণে অমূল্য হতে পারে। বেশিরভাগ ল্যাব সরঞ্জামগুলির মতো, ক্ষেত্রের সরঞ্জামগুলি কেবল স্থানান্তরিত উপাদানগুলি পরিমাপ করে তবে এটি সাধারণত কারণটি সনাক্ত করার জন্য পর্যাপ্ত তথ্য সরবরাহ করে। কোন সমস্যাগুলি ঠিক করার জন্য সর্বোচ্চ অগ্রাধিকার তা নির্ধারণ করতে আপনি সিএলএস ক্ষেত্রের পরিমাপও ব্যবহার করতে পারেন।
web-vitals
লাইব্রেরিতে অ্যাট্রিবিউশন ফাংশন রয়েছে যা আপনাকে এই অতিরিক্ত তথ্য সংগ্রহ করতে দেয়। আরও তথ্যের জন্য, ক্ষেত্রটিতে ডিবাগ পারফরম্যান্স দেখুন। অন্যান্য রম সরবরাহকারীরাও একইভাবে এই ডেটা সংগ্রহ এবং উপস্থাপন শুরু করেছেন।
সিএলএসের সাধারণ কারণ
একবার আপনি সিএলএসের কারণগুলি চিহ্নিত করার পরে, আপনি সমস্যাগুলি ঠিক করার বিষয়ে কাজ শুরু করতে পারেন। এই বিভাগে আমরা সিএলএসের আরও কয়েকটি সাধারণ কারণগুলি দেখাব এবং সেগুলি এড়াতে আপনি কী করতে পারেন।
মাত্রা ছাড়া ছবি
আপনার চিত্র এবং ভিডিও উপাদানগুলিতে সর্বদা width
এবং height
আকারের বৈশিষ্ট্যগুলি অন্তর্ভুক্ত করুন। বিকল্পভাবে, সিএসএস aspect-ratio
বা অনুরূপ সহ প্রয়োজনীয় স্থানটি সংরক্ষণ করুন। এই পদ্ধতির বিষয়টি নিশ্চিত করে যে চিত্রটি লোড হওয়ার সময় ব্রাউজারটি নথিতে সঠিক পরিমাণ স্থান বরাদ্দ করতে পারে।
![চিত্রগুলিতে মাত্রা নির্ধারণের পরে ক্রমবর্ধমান লেআউট শিফটে প্রভাবের আগে/পরে দেখানো বাতিঘর প্রতিবেদন](https://web.developers.google.cn/static/articles/optimize-cls/image/lighthouse-report-showing-9556bbb060b37.png?hl=bn)
চিত্রগুলিতে width
এবং height
বৈশিষ্ট্যগুলির ইতিহাস
ওয়েবের প্রথম দিনগুলিতে, বিকাশকারীরা ব্রাউজারটি চিত্রগুলি আনতে শুরু করার আগে পৃষ্ঠায় পর্যাপ্ত জায়গা বরাদ্দ করা হয়েছে তা নিশ্চিত করার জন্য তাদের <img>
ট্যাগগুলিতে width
এবং height
বৈশিষ্ট্য যুক্ত করবে। এটি রিফ্লো এবং পুনরায় লেআউটকে হ্রাস করবে।
<img src="puppy.jpg" width="640" height="360" alt="Puppy with balloons">
এই উদাহরণে width
এবং height
ইউনিট অন্তর্ভুক্ত করে না। এই "পিক্সেল" মাত্রাগুলি নিশ্চিত করবে যে ব্রাউজারটি পৃষ্ঠার বিন্যাসে একটি 640x360 অঞ্চল সংরক্ষণ করেছে। সত্য মাত্রা এটির সাথে মেলে কিনা তা বিবেচনা না করেই চিত্রটি এই জায়গার সাথে ফিট করার জন্য প্রসারিত হবে।
যখন প্রতিক্রিয়াশীল ওয়েব ডিজাইন চালু করা হয়েছিল, বিকাশকারীরা width
এবং height
বাদ দিতে শুরু করে এবং পরিবর্তে চিত্রগুলি আকার পরিবর্তন করতে সিএসএস ব্যবহার শুরু করে:
img {
width: 100%; /* or max-width: 100%; */
height: auto;
}
তবে, চিত্রের আকার নির্দিষ্ট না করা হওয়ায় ব্রাউজারটি এটি ডাউনলোড করা শুরু না করে এবং এর মাত্রা নির্ধারণ করতে না পারা পর্যন্ত এটির জন্য স্থান বরাদ্দ করা যাবে না। চিত্রগুলি লোড হওয়ার সাথে সাথে পাঠ্যগুলি তাদের জন্য জায়গা তৈরি করতে পৃষ্ঠাটি নীচে স্থানান্তরিত করে, একটি বিভ্রান্তিকর এবং হতাশার ব্যবহারকারীর অভিজ্ঞতা তৈরি করে।
এখানেই দিক অনুপাত আসে a একটি চিত্রের দিক অনুপাতটি তার প্রস্থের উচ্চতার অনুপাত। এটি একটি কোলন দ্বারা পৃথক দুটি সংখ্যা হিসাবে প্রকাশিত হওয়া সাধারণ (উদাহরণস্বরূপ, 16: 9 বা 4: 3)। একটি x: y দিক অনুপাতের জন্য, চিত্রটি এক্স ইউনিট প্রশস্ত এবং y ইউনিটগুলি উচ্চ।
এর অর্থ যদি আমরা একটি মাত্রা জানি তবে অন্যটি নির্ধারণ করা যেতে পারে। একটি 16: 9 দিক অনুপাতের জন্য:
- যদি কুকুরছানা.জেপিজির একটি 360px উচ্চতা থাকে তবে প্রস্থটি 360 x (16/9) = 640px হয়
- যদি PUPPY.JPG এর 640px প্রস্থ থাকে তবে উচ্চতা 640 x (9 /16) = 360px
কোনও চিত্রের জন্য দিক অনুপাতটি জানার ফলে ব্রাউজারটিকে উচ্চতা এবং সম্পর্কিত অঞ্চলের জন্য পর্যাপ্ত জায়গা গণনা করতে এবং সংরক্ষণ করতে দেয়।
চিত্রের মাত্রা নির্ধারণের জন্য আধুনিক সেরা অনুশীলন
যেহেতু আধুনিক ব্রাউজারগুলি কোনও চিত্রের width
এবং height
বৈশিষ্ট্যের উপর ভিত্তি করে চিত্রগুলির ডিফল্ট দিক অনুপাত সেট করে, আপনি চিত্রের উপর সেই বৈশিষ্ট্যগুলি সেট করে এবং আপনার স্টাইলের শীটে পূর্ববর্তী সিএসএস সহ লেআউট শিফটগুলি প্রতিরোধ করতে পারেন।
<!-- 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
মানটি প্রধান ব্রাউজারগুলি দ্বারা গণনা করা হয় কারণ এইচটিএমএল প্রক্রিয়া করা হয়, পরিবর্তে ডিফল্ট ব্যবহারকারী এজেন্ট স্টাইলের শীট ( কেন একটি গভীর ডাইভের জন্য এই পোস্টটি দেখুন), সুতরাং মানটি কিছুটা আলাদাভাবে প্রদর্শিত হয়। উদাহরণস্বরূপ, ক্রোম এটি উপাদান প্যানেলের স্টাইল বিভাগে এটি প্রদর্শন করে:
img[Attributes Style] {
aspect-ratio: auto 640 / 360;
}
একটি এইচটিএমএল বৈশিষ্ট্য স্টাইল উত্স ব্যবহার করে সাফারি একইভাবে আচরণ করে। ফায়ারফক্স তার পরিদর্শক প্যানেলে এই গণনা করা aspect-ratio
মোটেই প্রদর্শন করে না, তবে এটি বিন্যাসের জন্য ব্যবহার করে না।
পূর্ববর্তী কোডের auto
অংশটি গুরুত্বপূর্ণ, কারণ এটি চিত্রের ডাউনলোডের পরে চিত্রের মাত্রাগুলি ডিফল্ট দিক অনুপাতকে ওভাররাইড করে তোলে। যদি চিত্রের মাত্রাগুলি আলাদা হয় তবে এটি চিত্রের লোড হওয়ার পরে এখনও কিছু লেআউট শিফট সৃষ্টি করে, তবে এটি নিশ্চিত করে যে এইচটিএমএল ভুল হলে চিত্রের দিক অনুপাতটি এখনও পাওয়া যায়। এমনকি যদি প্রকৃত দিকের অনুপাতটি ডিফল্ট থেকে পৃথক হয় তবে এটি এখনও কোনও চিত্র ছাড়াই কোনও চিত্রের 0x0 ডিফল্ট আকারের চেয়ে কম লেআউট শিফট সৃষ্টি করে।
প্রতিক্রিয়াশীল চিত্রগুলির চারপাশে আরও চিন্তাভাবনা সহ একটি দুর্দান্ত গভীর ডাইভের জন্য, মিডিয়া দিক অনুপাতের সাথে জ্যাঙ্ক-মুক্ত পৃষ্ঠা লোডিং দেখুন।
যদি আপনার চিত্রটি কোনও পাত্রে থাকে তবে আপনি চিত্রটি ধারকটির প্রস্থে আকার পরিবর্তন করতে সিএসএস ব্যবহার করতে পারেন। আমরা 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>
বিজ্ঞাপন, এম্বেড এবং অন্যান্য দেরী-লোডযুক্ত সামগ্রী
চিত্রগুলি একমাত্র ধরণের সামগ্রী নয় যা লেআউট শিফটগুলির কারণ হতে পারে। বিজ্ঞাপন, এম্বেডস, আইফ্রেমস এবং অন্যান্য গতিশীল ইনজেকশনযুক্ত সামগ্রীগুলি আপনার সিএলএসকে বাড়িয়ে তুলতে সমস্ত বিষয়বস্তু উপস্থিত হওয়ার পরে উপস্থিত হতে পারে।
বিজ্ঞাপনগুলি ওয়েবে লেআউট শিফটে অন্যতম বৃহত্তম অবদানকারী। বিজ্ঞাপন নেটওয়ার্ক এবং প্রকাশকরা প্রায়শই গতিশীল বিজ্ঞাপন আকারগুলিকে সমর্থন করে। উচ্চতর ক্লিকের হার এবং নিলামে প্রতিযোগিতায় আরও বিজ্ঞাপনের কারণে বিজ্ঞাপনের আকারগুলি কর্মক্ষমতা এবং উপার্জন বাড়ায়। দুর্ভাগ্যক্রমে, আপনি পৃষ্ঠাটি নিচে দেখছেন এমন দৃশ্যমান সামগ্রীকে ধাক্কা দেওয়ার কারণে এটি একটি সাবঅপটিমাল ব্যবহারকারীর অভিজ্ঞতার দিকে নিয়ে যেতে পারে।
এম্বেডডেবল উইজেটগুলি আপনাকে আপনার পৃষ্ঠায় পোর্টেবল ওয়েব সামগ্রী অন্তর্ভুক্ত করার অনুমতি দেয় যেমন ইউটিউবের ভিডিও, গুগল মানচিত্রের মানচিত্র এবং সোশ্যাল মিডিয়া পোস্টগুলি। যাইহোক, এই উইজেটগুলি প্রায়শই লোড হওয়ার আগে তাদের সামগ্রীগুলি কত বড় তা সম্পর্কে সচেতন হয় না। ফলস্বরূপ, এম্বেড সরবরাহকারী প্ল্যাটফর্মগুলি সর্বদা তাদের উইজেটগুলির জন্য স্থান সংরক্ষণ করে না, যা অবশেষে লোড হলে লেআউট শিফটগুলির কারণ করে।
এগুলির সাথে ডিল করার কৌশলগুলি সব মিল। প্রধান পার্থক্যগুলি হ'ল যে সামগ্রীটি সন্নিবেশ করা হবে তার উপর আপনার কতটা নিয়ন্ত্রণ রয়েছে। যদি এটি কোনও বিজ্ঞাপন অংশীদারের মতো তৃতীয় পক্ষের দ্বারা serted োকানো হয় তবে আপনি হয়ত on োকানো হবে এমন সামগ্রীর সঠিক আকারটি জানেন না, বা এম্বেডগুলির মধ্যে ঘটে যাওয়া কোনও লেআউট শিফট নিয়ন্ত্রণ করতে সক্ষম হবেন না।
দেরী-লোডিং সামগ্রীর জন্য স্থান সংরক্ষণ করুন
বিষয়বস্তু প্রবাহে দেরী-লোডিং সামগ্রী স্থাপন করার সময়, প্রাথমিক বিন্যাসে তাদের জন্য স্থান সংরক্ষণ করে লেআউট শিফটগুলি এড়ানো যায়।
একটি পদ্ধতি হ'ল স্থান সংরক্ষণের জন্য একটি min-height
সিএসএস নিয়ম যুক্ত করা বা ads যেমন বিজ্ঞাপনগুলির মতো প্রতিক্রিয়াশীল সামগ্রীর জন্য, উদাহরণস্বরূপ-ব্রাউজারগুলি যেভাবে সরবরাহ করা মাত্রা সহ চিত্রগুলির জন্য স্বয়ংক্রিয়ভাবে এটি ব্যবহার করে তার অনুরূপ পদ্ধতিতে aspect-ratio
সিএসএস সম্পত্তি ব্যবহার করে।
মিডিয়া ক্যোয়ারীগুলি ব্যবহার করে ফর্ম ফ্যাক্টরগুলিতে এডি বা স্থানধারক আকারের সূক্ষ্ম পার্থক্যের জন্য আপনাকে অ্যাকাউন্ট করতে হবে।
বিজ্ঞাপনগুলির মতো একটি নির্দিষ্ট উচ্চতা নাও থাকতে পারে এমন সামগ্রীর জন্য, আপনি সম্পূর্ণরূপে লেআউট শিফটটি নির্মূল করার জন্য প্রয়োজনীয় জায়গাগুলির সঠিক পরিমাণ সংরক্ষণ করতে পারবেন না। যদি একটি ছোট বিজ্ঞাপন পরিবেশন করা হয়, তবে কোনও প্রকাশক লেআউট শিফটগুলি এড়াতে একটি বৃহত্তর ধারক স্টাইল করতে পারেন, বা historical তিহাসিক তথ্যের উপর ভিত্তি করে বিজ্ঞাপন স্লটের জন্য সবচেয়ে সম্ভাব্য আকার চয়ন করতে পারেন। এই পদ্ধতির নেতিবাচক দিকটি হ'ল এটি পৃষ্ঠায় ফাঁকা জায়গার পরিমাণ বাড়িয়ে তোলে।
পরিবর্তে আপনি প্রাথমিক আকারটি ব্যবহার করা হবে এমন ক্ষুদ্রতম আকারে সেট করতে পারেন এবং বৃহত্তর সামগ্রীর জন্য কিছু স্তরের শিফট গ্রহণ করতে পারেন। পূর্বে প্রস্তাবিত হিসাবে min-height
ব্যবহার করা, খালি উপাদানের 0 পিএক্স ডিফল্ট আকারের তুলনায় লেআউট শিফটের প্রভাব হ্রাস করার সময় পিতামাতার উপাদানগুলিকে প্রয়োজনীয় হিসাবে বাড়তে দেয়।
কোনও স্থানধারক দেখিয়ে সংরক্ষিত স্থানটি ভেঙে ফেলা এড়ানোর চেষ্টা করুন যদি উদাহরণস্বরূপ, কোনও বিজ্ঞাপন ফেরত না দেওয়া হয়। উপাদানগুলির জন্য আলাদা করা স্থান অপসারণ করা সামগ্রী যেমন CLS সন্নিবেশকারী সামগ্রী হিসাবে তৈরি করতে পারে।
ভিউপোর্টে লেট-লোডিং সামগ্রী কম রাখুন
ভিউপোর্টের শীর্ষের কাছাকাছি গতিশীলভাবে ইনজেকশনযুক্ত সামগ্রীটি সাধারণত ভিউপোর্টে ইনজেকশনযুক্ত সামগ্রীর চেয়ে বৃহত্তর লেআউট শিফট সৃষ্টি করে। যাইহোক, ভিউপোর্টের যে কোনও জায়গায় ইনজেকশন সামগ্রী এখনও কিছুটা স্থানান্তরিত করে। যদি আপনি ইনজেকশনযুক্ত সামগ্রীর জন্য স্থান সংরক্ষণ করতে না পারেন তবে আমরা এর সিএলএসের প্রভাব হ্রাস করতে পৃষ্ঠায় এটি পরে রাখার পরামর্শ দিই।
ব্যবহারকারীর ইন্টারঅ্যাকশন ছাড়াই নতুন সামগ্রী সন্নিবেশ করা এড়িয়ে চলুন
আপনি যখন কোনও সাইট লোড করার চেষ্টা করছেন তখন ভিউপোর্টের শীর্ষে বা নীচে পপ-ইন করার কারণে আপনি সম্ভবত লেআউট শিফটগুলি অনুভব করেছেন। বিজ্ঞাপনগুলির মতো, এটি প্রায়শই ব্যানার এবং ফর্মগুলির সাথে ঘটে যা পৃষ্ঠার বাকী বিষয়বস্তু স্থানান্তরিত করে:
আপনার যদি এই ধরণের ইউআই সাশ্রয়ী ব্যয়গুলি প্রদর্শন করতে হয় তবে এটির জন্য ভিউপোর্টে পর্যাপ্ত জায়গা সংরক্ষণ করুন (উদাহরণস্বরূপ, স্থানধারক বা কঙ্কাল ইউআই ব্যবহার করে) যাতে এটি যখন লোড হয় তখন এটি পৃষ্ঠায় সামগ্রীকে আশ্চর্যজনকভাবে চারপাশে স্থানান্তরিত করে না। বিকল্পভাবে, নিশ্চিত করুন যে উপাদানটি যে বিষয়বস্তু বোঝায় সেখানে ওভারলাই করে উপাদানটি প্রবাহের অংশ নয়। এই ধরণের উপাদানগুলিতে আরও সুপারিশের জন্য কুকি নোটিশ পোস্টের জন্য সেরা অনুশীলনগুলি দেখুন।
কিছু ক্ষেত্রে গতিশীলভাবে সামগ্রী যুক্ত করা ব্যবহারকারীর অভিজ্ঞতার একটি গুরুত্বপূর্ণ অঙ্গ। উদাহরণস্বরূপ, আইটেমগুলির তালিকায় আরও পণ্য লোড করার সময় বা লাইভ ফিড সামগ্রী আপডেট করার সময়। এই ক্ষেত্রে অপ্রত্যাশিত লেআউট শিফট এড়ানোর বিভিন্ন উপায় রয়েছে:
- একটি নির্দিষ্ট আকারের পাত্রে নতুন সামগ্রীর সাথে পুরানো সামগ্রীটি প্রতিস্থাপন করুন বা একটি ক্যারোসেল ব্যবহার করুন এবং পরিবর্তনের পরে পুরানো সামগ্রীটি সরান। নতুন সামগ্রীটি আসার সময় দুর্ঘটনাজনিত ক্লিক বা ট্যাপগুলি রোধ করতে রূপান্তরটি সম্পূর্ণ না হওয়া পর্যন্ত কোনও লিঙ্ক এবং নিয়ন্ত্রণগুলি অক্ষম করার কথা মনে রাখবেন।
- ব্যবহারকারীকে নতুন সামগ্রীর বোঝা শুরু করুন, তাই তারা শিফট দ্বারা অবাক হয় না (উদাহরণস্বরূপ "লোড আরও" বা "রিফ্রেশ" বোতাম সহ)। ব্যবহারকারীর মিথস্ক্রিয়াটির আগে সামগ্রীটি প্রিফেচ করার পরামর্শ দেওয়া হয় যাতে এটি তাত্ক্ষণিকভাবে প্রদর্শিত হয়। অনুস্মারক হিসাবে, ব্যবহারকারী ইনপুটটির 500 মিলিসেকেন্ডের মধ্যে ঘটে এমন লেআউট শিফটগুলি সিএলএসের দিকে গণনা করা হয় না।
- নির্বিঘ্নে সামগ্রীটি অফস্ক্রিনটি লোড করুন এবং এটি উপলব্ধ যে ব্যবহারকারীকে একটি নোটিশ ওভারলে করুন (উদাহরণস্বরূপ, "শীর্ষে স্ক্রোল টু টপ" বোতাম সহ)।
![টুইটার এবং ক্লো ওয়েবসাইট থেকে অপ্রত্যাশিত লেআউট শিফট তৈরি না করে গতিশীল সামগ্রী লোডিংয়ের উদাহরণ](https://web.developers.google.cn/static/articles/optimize-cls/image/examples-dynamic-content-4d11ddda2fa94.png?hl=bn)
অ্যানিমেশন
সিএসএস সম্পত্তির মানগুলিতে পরিবর্তনগুলি এই পরিবর্তনগুলিতে প্রতিক্রিয়া জানাতে ব্রাউজারটির প্রয়োজন হতে পারে। কিছু মান যেমন box-shadow
এবং box-sizing
, ট্রিগার পুনরায় লেআউট, পেইন্ট এবং সংমিশ্রণ। top
এবং left
বৈশিষ্ট্যগুলি পরিবর্তন করাও লেআউট শিফটগুলির কারণ হয়, এমনকি যখন উপাদানটি সরানো হচ্ছে তখনও তার নিজস্ব স্তরে থাকে। এই বৈশিষ্ট্যগুলি ব্যবহার করে অ্যানিমেটিং এড়িয়ে চলুন।
অন্যান্য সিএসএস বৈশিষ্ট্যগুলি পুনরায় লেআউটগুলি ট্রিগার না করে পরিবর্তন করা যেতে পারে। এর মধ্যে রয়েছে রূপান্তর, স্কেল, ঘোরানো বা স্কিউ উপাদানগুলির জন্য transform
অ্যানিমেশনগুলি ব্যবহার করা।
translate
ব্যবহার করে কমপোজিটেড অ্যানিমেশনগুলি অন্যান্য উপাদানগুলিকে প্রভাবিত করতে পারে না এবং তাই সিএলএসের দিকে গণনা করবেন না। নন-কম্পোজিটেড অ্যানিমেশনগুলিও পুনরায় লেআউট সৃষ্টি করে না। কোন সিএসএস বৈশিষ্ট্যগুলি লেআউট শিফটগুলি ট্রিগার করে সে সম্পর্কে আরও জানতে, উচ্চ-পারফরম্যান্স অ্যানিমেশনগুলি দেখুন।
ওয়েব ফন্ট
ওয়েব ফন্টগুলি ডাউনলোড এবং রেন্ডারিং করা সাধারণত ওয়েব ফন্টটি ডাউনলোড হওয়ার আগে দুটি উপায়ে একটিতে পরিচালনা করা হয়:
- ফ্যালব্যাক ফন্টটি ওয়েব ফন্টের সাথে অদলবদল করে, আনস্টাইলযুক্ত পাঠ্যের একটি ফ্ল্যাশ (এফআউট)।
- "অদৃশ্য" পাঠ্যটি কোনও ওয়েব ফন্ট উপলব্ধ না হওয়া এবং পাঠ্যটি দৃশ্যমান করা না হওয়া পর্যন্ত ফ্যালব্যাক ফন্ট ব্যবহার করে প্রদর্শিত হয় (ফয়েট - অদৃশ্য পাঠ্যের ফ্ল্যাশ)।
উভয় পদ্ধতির লেআউট শিফট হতে পারে । এমনকি পাঠ্যটি অদৃশ্য হলেও, এটি ফ্যালব্যাক ফন্টটি ব্যবহার করে এখনও স্থাপন করা হয়েছে, সুতরাং যখন ওয়েব ফন্টটি লোড হয়, তখন টেক্সট ব্লক এবং আশেপাশের সামগ্রীগুলি দৃশ্যমান ফন্টের মতো একইভাবে স্থানান্তরিত হয়।
নিম্নলিখিত সরঞ্জামগুলি আপনাকে পাঠ্য স্থানান্তরকে হ্রাস করতে সহায়তা করতে পারে:
-
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
এপিআই ব্যবহার করে ফ্যালব্যাক ফন্ট এবং ওয়েব ফন্টের মধ্যে আকারের পার্থক্য হ্রাস করুন। - ফন্ট লোডিং এপিআই প্রয়োজনীয় ফন্ট পেতে সময় লাগে।
-
<link rel=preload>
ব্যবহার করে যত তাড়াতাড়ি সম্ভব সমালোচনামূলক ওয়েব ফন্টগুলি লোড করুন। একটি প্রিললোডেড ফন্টের প্রথম পেইন্টটি পূরণ করার উচ্চতর সুযোগ থাকবে, সেক্ষেত্রে কোনও লেআউট স্থানান্তর নেই।
অন্যান্য ফন্ট সেরা অনুশীলনের জন্য ফন্টের জন্য সেরা অনুশীলনগুলি পড়ুন।
পৃষ্ঠাগুলি নিশ্চিত করে সিএলএস হ্রাস করুন বিএফসিচের জন্য যোগ্য
সিএলএসের স্কোর কম রাখার জন্য একটি অত্যন্ত কার্যকর কৌশল হ'ল আপনার ওয়েব পৃষ্ঠাগুলি ব্যাক/ফরোয়ার্ড ক্যাশে (বিএফসিএএচি) জন্য যোগ্য কিনা তা নিশ্চিত করা।
বিএফসিএএইসিএইচ ব্রাউজারের মেমরিতে পৃষ্ঠাগুলি অল্প সময়ের জন্য রাখে আপনি দূরে সরে যাওয়ার পরে যাতে আপনি যদি সেগুলিতে ফিরে যান তবে সেগুলি আপনি যেমন রেখেছেন ঠিক তেমনই পুনরুদ্ধার করা হবে। এর অর্থ সম্পূর্ণরূপে লোড হওয়া পৃষ্ঠাটি তাত্ক্ষণিকভাবে উপলভ্য - এমন কোনও শিফট ছাড়াই যা সাধারণত প্রদত্ত যে কোনও কারণে লোডের সময় দেখা যায়।
যদিও এটি সম্ভাব্যভাবে এখনও প্রাথমিক পৃষ্ঠার লোডের মুখোমুখি লেআউট শিফটগুলির অর্থ বোঝায়, যখন কোনও ব্যবহারকারী পৃষ্ঠাগুলি দিয়ে ফিরে যায় তারা বারবার একই লেআউট শিফটগুলি দেখছে না। প্রাথমিক লোডেও শিফটগুলি এড়ানোর জন্য আপনার সর্বদা লক্ষ্য করা উচিত, তবে যেখানে এটি পুরোপুরি সমাধান করা আরও জটিল, আপনি কমপক্ষে কোনও বিএফসিএসি নেভিগেশনে এড়িয়ে প্রভাবকে হ্রাস করতে পারেন।
ব্যাক এবং ফরোয়ার্ড নেভিগেশনগুলি অনেকগুলি সাইটে সাধারণ। উদাহরণস্বরূপ, কোনও বিষয়বস্তু পৃষ্ঠা, বা একটি বিভাগ পৃষ্ঠা, বা অনুসন্ধান ফলাফলগুলিতে ফিরে আসা।
যখন এটি ক্রোমে পরিণত হয়েছিল , আমরা সিএলএসে লক্ষণীয় উন্নতি দেখেছি।
বিএফসিচে সমস্ত ব্রাউজার দ্বারা ডিফল্টরূপে ব্যবহৃত হয়, তবে কিছু সাইট বিভিন্ন কারণে বিএফসিচের জন্য অযোগ্য। আপনার সাইটের জন্য আপনার সামগ্রিক সিএলএস স্কোরকে সহায়তা করার জন্য আপনি এই বৈশিষ্ট্যটির সম্পূর্ণ ব্যবহার করছেন তা নিশ্চিত করার জন্য কীভাবে বিএফসিএসি ব্যবহার প্রতিরোধকারী যে কোনও সমস্যা পরীক্ষা এবং সনাক্ত করতে হবে সে সম্পর্কে আরও বিশদ জানতে বিএফসিএসি গাইডটি পড়ুন।
উপসংহার
এই গাইডের আগে বিশদ হিসাবে সিএলএস সনাক্ত এবং উন্নত করার জন্য অনেকগুলি কৌশল রয়েছে। মূল ওয়েব ভাইটালগুলিতে ভাতাগুলি অন্তর্নির্মিত রয়েছে, সুতরাং আপনি সিএলএসকে পুরোপুরি অপসারণ করতে না পারলেও, এই কৌশলগুলির কয়েকটি ব্যবহার করা আপনাকে প্রভাব হ্রাস করতে দেয়। এটি আশাবাদী আপনাকে আপনার ওয়েবসাইটের ব্যবহারকারীদের জন্য আরও ভাল অভিজ্ঞতা তৈরি করে এই সীমাতে থাকতে দেবে।
,ব্যবহারকারী-অভিজ্ঞতার উন্নতি করতে হঠাৎ লেআউট শিফটগুলি কীভাবে এড়াতে হয় তা শিখুন
প্রকাশিত: মে 5, 2020, সর্বশেষ আপডেট হয়েছে: ফেব্রুয়ারী 7, 2025
ক্রমবর্ধমান লেআউট শিফট (সিএলএস) তিনটি মূল ওয়েব ভাইটাল মেট্রিকগুলির মধ্যে একটি। এটি ক্ষতিগ্রস্থ উপাদানগুলি যে দূরত্বে সরানো হয়েছে তার দূরত্বের সাথে ভিউপোর্টে কতটা দৃশ্যমান সামগ্রী স্থানান্তরিত হয়েছে তা একত্রিত করে সামগ্রীর অস্থিরতা পরিমাপ করে।
লেআউট শিফট ব্যবহারকারীদের কাছে বিভ্রান্ত হতে পারে। কল্পনা করুন যে আপনি একটি নিবন্ধ পড়তে শুরু করেছেন যখন হঠাৎ সমস্ত উপাদানগুলি পৃষ্ঠার চারপাশে স্থানান্তরিত করে, আপনাকে ফেলে দেয় এবং আপনাকে আবার আপনার জায়গাটি সন্ধান করার প্রয়োজন হয়। এটি ওয়েবে খুব সাধারণ, যেখানে সংবাদটি পড়ার সময়, বা সেই 'অনুসন্ধান' বা 'কার্টে যুক্ত করুন' বোতামগুলিতে ক্লিক করার চেষ্টা করা সহ এটি খুব সাধারণ। এই ধরনের অভিজ্ঞতাগুলি দৃশ্যত ঝাঁকুনি এবং হতাশাব্যঞ্জক। এগুলি প্রায়শই ঘটে যখন দৃশ্যমান উপাদানগুলি স্থানান্তর করতে বাধ্য করা হয় কারণ হঠাৎ অন্য উপাদানটি পৃষ্ঠায় যুক্ত করা হয়েছিল বা পুনরায় আকার দেওয়া হয়েছিল।
একটি ভাল ব্যবহারকারীর অভিজ্ঞতা সরবরাহ করতে, সাইটগুলি কমপক্ষে 75% পৃষ্ঠার ভিজিটের জন্য 0.1 বা তার চেয়ে কম সিএলএস রাখার চেষ্টা করা উচিত।
অন্যান্য কোর ওয়েব ভিটালগুলির বিপরীতে, যা সেকেন্ড বা মিলিসেকেন্ডে পরিমাপ করা সময়-ভিত্তিক মানগুলি, সিএলএস স্কোরটি কতটা সামগ্রী স্থানান্তরিত হচ্ছে তার একটি গণনার উপর ভিত্তি করে একটি ইউনিটলেস মান।
এই গাইডে, আমরা লেআউট শিফটের সাধারণ কারণগুলি অনুকূল করে তুলব।
দরিদ্র সিএলগুলির সর্বাধিক সাধারণ কারণগুলি হ'ল:
- মাত্রা ছাড়াই চিত্র।
- মাত্রা ছাড়াই বিজ্ঞাপন, এম্বেড এবং আইফ্রেমস।
- গতিশীলভাবে ইনজেকশনযুক্ত সামগ্রী যেমন বিজ্ঞাপন, এম্বেড এবং আইফ্রেমগুলি মাত্রা ছাড়াই।
- ওয়েব ফন্ট।
লেআউট শিফটের কারণগুলি বুঝতে
আপনি সাধারণ সিএলএস ইস্যুগুলির সমাধানগুলি দেখতে শুরু করার আগে, আপনার সিএলএস স্কোর এবং কোথা থেকে শিফটগুলি আসছে তা বোঝা গুরুত্বপূর্ণ।
ল্যাব সরঞ্জাম বনাম ক্ষেত্রের সিএলএস
বিকাশকারীরা মনে করেন যে ক্রোম ইউএক্স রিপোর্ট (ক্রুকস) দ্বারা পরিমাপ করা সিএলএসগুলি ভুল, কারণ এটি ক্রোম ডেভটুলস বা অন্যান্য ল্যাব সরঞ্জামগুলি ব্যবহার করে তারা যে সিএলএস পরিমাপ করে তার সাথে মেলে না। বাতিঘরগুলির মতো ওয়েব পারফরম্যান্স ল্যাব সরঞ্জামগুলি কোনও পৃষ্ঠার সম্পূর্ণ সিএলএস প্রদর্শন করতে পারে না কারণ তারা সাধারণত কিছু ওয়েব পারফরম্যান্স মেট্রিকগুলি পরিমাপ করতে এবং কিছু গাইডেন্স সরবরাহ করতে পৃষ্ঠার একটি প্রাথমিক লোড করে (যদিও বাতিঘর ব্যবহারকারী প্রবাহ আপনাকে ডিফল্ট পৃষ্ঠা লোড অডিটের বাইরে পরিমাপ করতে দেয়)।
ক্রাক্স হ'ল ওয়েব ভাইটালস প্রোগ্রামের অফিশিয়াল ডেটাসেট, এবং এর জন্য, সিএলএস পৃষ্ঠার পুরো জীবন জুড়ে পরিমাপ করা হয় এবং কেবল প্রাথমিক পৃষ্ঠার লোডের সময় নয় যে ল্যাব সরঞ্জামগুলি সাধারণত পরিমাপ করে।
পৃষ্ঠা লোডের সময় লেআউট শিফটগুলি খুব সাধারণ, কারণ সমস্ত প্রয়োজনীয় সংস্থানগুলি প্রাথমিকভাবে পৃষ্ঠাটি রেন্ডার করার জন্য আনা হয়, তবে প্রাথমিক লোডের পরে লেআউট শিফটগুলিও ঘটতে পারে। অনেক পোস্ট-লোড শিফট কোনও ব্যবহারকারীর মিথস্ক্রিয়তার ফলাফল হিসাবে ঘটতে পারে এবং তাই সিএলএস স্কোর থেকে বাদ দেওয়া হবে কারণ তারা প্রত্যাশিত শিফটগুলি-যতক্ষণ না তারা সেই মিথস্ক্রিয়াটির 500 মিলিসেকেন্ডের মধ্যে ঘটে।
যাইহোক, ব্যবহারকারীর দ্বারা অপ্রত্যাশিত অন্যান্য লোড-লোড শিফটগুলি অন্তর্ভুক্ত করা যেতে পারে যেখানে কোনও যোগ্যতার মিথস্ক্রিয়া ছিল না-উদাহরণস্বরূপ, আপনি যদি পৃষ্ঠাটি বরাবর আরও স্ক্রোল করেন এবং অলস-লোডযুক্ত সামগ্রী লোড হয় এবং এটি শিফটগুলির কারণ হয়। লোড পোস্ট সিএলগুলির অন্যান্য সাধারণ কারণগুলি ট্রানজিশনের মিথস্ক্রিয়ায় রয়েছে, উদাহরণস্বরূপ একক পৃষ্ঠা অ্যাপ্লিকেশনগুলিতে, যা 500 মিলিসেকেন্ড গ্রেস পিরিয়ডের চেয়ে বেশি সময় নেয়।
পেজস্পিড অন্তর্দৃষ্টিগুলি একটি ইউআরএল থেকে ব্যবহারকারী-অনুভূত সিএলএস উভয়কে তার "আপনার আসল ব্যবহারকারীরা কী ভোগ করছে" বিভাগে এবং তার "ডায়াগনোস পারফরম্যান্স ইস্যু" বিভাগে ল্যাব-ভিত্তিক লোড সিএলএসকে দেখায়। এই মানগুলির মধ্যে পার্থক্য সম্ভবত লোড পোস্ট সিএলএসের ফলাফল।
![পেজস্পিড অন্তর্দৃষ্টিগুলি ইউআরএল-স্তরের ডেটা দেখানো প্রকৃত ব্যবহারকারী সিএলএসকে হাইলাইট করে যা বাতিঘর সিএলএসের চেয়ে যথেষ্ট বড়](https://web.developers.google.cn/static/articles/optimize-cls/image/screenshot-pagespeed-ins-1b9715cccc402.png?hl=bn)
লোড সিএলএস সমস্যাগুলি সনাক্ত করুন
যখন ক্রাক্স এবং লাইটহাউস সিএলএস স্কোরগুলি পেজস্পিড অন্তর্দৃষ্টিগুলি বিস্তৃতভাবে সংযুক্ত করা হয়, এটি সাধারণত ইঙ্গিত দেয় যে লোড সিএলএস ইস্যু রয়েছে যা বাতিঘর দ্বারা সনাক্ত করা হয়েছিল। এক্ষেত্রে বাতিঘরটি প্রস্থ এবং উচ্চতার কারণে সিএলএস তৈরি করে এমন চিত্রগুলিতে আরও তথ্য সরবরাহ করতে দুটি নিরীক্ষণে সহায়তা করবে এবং তাদের সিএলএসের অবদানের পাশাপাশি পৃষ্ঠা লোডের জন্য স্থানান্তরিত সমস্ত উপাদানগুলিও তালিকাভুক্ত করবে। আপনি সিএলএস অডিটগুলিতে ফিল্টার করে এই অডিটগুলি দেখতে পারেন:
![সিএলএস অডিটগুলি আপনাকে সিএলএস ইস্যুগুলি সনাক্ত করতে এবং সম্বোধন করতে সহায়তা করার জন্য আরও তথ্য সরবরাহকারী সিএলএস অডিটগুলি দেখায় লাইটহাউস স্ক্রিনশট](https://web.developers.google.cn/static/articles/optimize-cls/image/lighthouse-screenshot-sho-1c6eeefdc4b1b.png?hl=bn)
ডেভটুলসের পারফরম্যান্স প্যানেল লেআউট শিফটে প্রচুর তথ্য সরবরাহ করে:
![লেআউট শিফট রেকর্ডগুলি ক্রোম ডিভটুলস পারফরম্যান্স প্যানেলে প্রদর্শিত হচ্ছে।](https://web.developers.google.cn/static/articles/optimize-cls/image/devtools-cls-debugging.png?hl=bn)
Layout Shift
ক্লাস্টারগুলি প্রদর্শন করে জনবহুল। হীরা ক্লিক করা সংক্ষিপ্ত প্যানেলে শিফট এবং বিশদগুলির একটি অ্যানিমেশন দেখায়।লেআউট শিফটগুলি লেআউট শিফট ট্র্যাকগুলিতে হাইলাইট করা হয়। বেগুনি লাইন গোষ্ঠীগুলি সেই ক্লাস্টারে পৃথক শিফট দেখায় হীরা দিয়ে শিফট ক্লাস্টারগুলিতে স্থানান্তরিত হয়। হীরার আকারটি শিফটের আকারের সাথে সমানুপাতিক যা আপনাকে বৃহত্তম শিফটে প্রবেশ করতে দেয়।
একটি শিফটে ক্লিক করা শিফটের একটি অ্যানিমেশন সহ একটি পপ আপ দেখায় এবং বেগুনি রঙের উপাদানগুলির শিফটকে হাইলাইট করে।
অতিরিক্তভাবে, একটি Layout Shift
রেকর্ডের সংক্ষিপ্তসার ভিউতে শুরুর সময়, শিফট স্কোর পাশাপাশি উপাদানগুলি স্থানান্তরিত হয়। এটি লোড সিএলএস ইস্যুতে আরও বিশদ পেতে বিশেষভাবে সহায়ক যেহেতু এটি সহজেই পুনরায় লোড পারফরম্যান্স প্রোফাইলের সাথে প্রতিলিপি করা হয়।
এটি বাম দিকের অন্তর্দৃষ্টি প্যানেলে প্রদর্শিত লেআউট শিফটকে অপরাধী অন্তর্দৃষ্টিগুলির সাথেও লিঙ্ক করে, যা শীর্ষে মোট সিএলএস, পাশাপাশি লেআউট শিফ্টের সম্ভাব্য কারণগুলি দেখায়।
পোস্ট-লোড সিএলএস ইস্যুগুলি সনাক্ত করুন
ক্রাক্স এবং বাতিঘর সিএলএস স্কোরগুলির মধ্যে মতবিরোধ প্রায়শই পোস্ট-লোড সিএলএসকে নির্দেশ করে। এই শিফটগুলি মাঠের ডেটা ছাড়াই ট্র্যাক করতে জটিল হতে পারে। ক্ষেত্রের ডেটা সংগ্রহের তথ্যের জন্য, ক্ষেত্রের সিএলএস উপাদানগুলি পরিমাপ করুন ।
পারফরম্যান্স প্যানেলের লাইভ মেট্রিক্স ভিউ আপনাকে পৃষ্ঠার সাথে ইন্টারঅ্যাক্ট করতে দেয় এবং বড় লেআউট শ্যাফ্টগুলির কারণে মিথস্ক্রিয়াগুলি সনাক্ত করতে সিএলএস স্কোরটি পর্যবেক্ষণ করতে দেয়।
![ক্রোম ডিভটুলস পারফরম্যান্স প্যানেলের লাইভ মেট্রিক্স স্ক্রিনে লেআউট শিফট রেকর্ড প্রদর্শিত হচ্ছে।](https://web.developers.google.cn/static/articles/optimize-cls/image/live-metrics-cls.png?hl=bn)
ডেভটুলগুলি ব্যবহারের বিকল্প হিসাবে, কনসোলে আটকানো পারফরম্যান্স পর্যবেক্ষক ব্যবহার করে লেআউট শিফটগুলি রেকর্ড করার সময় আপনি আপনার ওয়েব পৃষ্ঠাটি ব্রাউজ করতে পারেন।
আপনি শিফট মনিটরিং সেট আপ করার পরে, আপনি কোনও লোড পোস্ট সিএলএস সমস্যাগুলি প্রতিলিপি করার চেষ্টা করতে পারেন। সিএলএস প্রায়শই ঘটে যখন ব্যবহারকারী কোনও পৃষ্ঠার মাধ্যমে স্ক্রোল করে, যখন অলস-লোডযুক্ত সামগ্রীটি এর জন্য সংরক্ষিত স্থান ছাড়াই পুরোপুরি লোড হয়। সামগ্রী স্থানান্তরিত যখন ব্যবহারকারী পয়েন্টারটি ধরে রাখেন তখন এটি আরও একটি সাধারণ লোড-লোড সিএলএস কারণ। এই ইন্টারঅ্যাকশনগুলির মধ্যে যে কোনও একটির সময় কোনও সামগ্রী স্থানান্তর অপ্রত্যাশিত হিসাবে গণ্য হয়, এমনকি এটি 500 মিলিসেকেন্ডের মধ্যে ঘটে।
আরও তথ্যের জন্য, ডিবাগ লেআউট শিফটগুলি দেখুন।
আপনি সিএলএসের কোনও সাধারণ কারণ চিহ্নিত করার পরে, লাইটহাউসের টাইমস্প্যানস ব্যবহারকারী প্রবাহ মোডটি লেআউট শিফটগুলি প্রবর্তন করে সাধারণ ব্যবহারকারীর প্রবাহগুলি পুনরায় চাপ না দেওয়ার বিষয়টি নিশ্চিত করতেও ব্যবহার করা যেতে পারে।
ক্ষেত্রের সিএলএস উপাদানগুলি পরিমাপ করুন
ক্ষেত্রের সিএলগুলি পর্যবেক্ষণ করা সিএলএস কী পরিস্থিতিতে ঘটে তা নির্ধারণে এবং সম্ভাব্য কারণগুলি সংকুচিত করে তা নির্ধারণে অমূল্য হতে পারে। বেশিরভাগ ল্যাব সরঞ্জামগুলির মতো, ক্ষেত্রের সরঞ্জামগুলি কেবল স্থানান্তরিত উপাদানগুলি পরিমাপ করে তবে এটি সাধারণত কারণটি সনাক্ত করার জন্য পর্যাপ্ত তথ্য সরবরাহ করে। কোন সমস্যাগুলি ঠিক করার জন্য সর্বোচ্চ অগ্রাধিকার তা নির্ধারণ করতে আপনি সিএলএস ক্ষেত্রের পরিমাপও ব্যবহার করতে পারেন।
web-vitals
লাইব্রেরিতে অ্যাট্রিবিউশন ফাংশন রয়েছে যা আপনাকে এই অতিরিক্ত তথ্য সংগ্রহ করতে দেয়। আরও তথ্যের জন্য, ক্ষেত্রটিতে ডিবাগ পারফরম্যান্স দেখুন। অন্যান্য রম সরবরাহকারীরাও একইভাবে এই ডেটা সংগ্রহ এবং উপস্থাপন শুরু করেছেন।
সিএলএসের সাধারণ কারণ
একবার আপনি সিএলএসের কারণগুলি চিহ্নিত করার পরে, আপনি সমস্যাগুলি ঠিক করার বিষয়ে কাজ শুরু করতে পারেন। এই বিভাগে আমরা সিএলএসের আরও কয়েকটি সাধারণ কারণগুলি দেখাব এবং সেগুলি এড়াতে আপনি কী করতে পারেন।
মাত্রা ছাড়া ছবি
আপনার চিত্র এবং ভিডিও উপাদানগুলিতে সর্বদা width
এবং height
আকারের বৈশিষ্ট্যগুলি অন্তর্ভুক্ত করুন। বিকল্পভাবে, সিএসএস aspect-ratio
বা অনুরূপ সহ প্রয়োজনীয় স্থানটি সংরক্ষণ করুন। এই পদ্ধতির বিষয়টি নিশ্চিত করে যে চিত্রটি লোড হওয়ার সময় ব্রাউজারটি নথিতে সঠিক পরিমাণ স্থান বরাদ্দ করতে পারে।
![চিত্রগুলিতে মাত্রা নির্ধারণের পরে ক্রমবর্ধমান লেআউট শিফটে প্রভাবের আগে/পরে দেখানো বাতিঘর প্রতিবেদন](https://web.developers.google.cn/static/articles/optimize-cls/image/lighthouse-report-showing-9556bbb060b37.png?hl=bn)
চিত্রগুলিতে width
এবং height
বৈশিষ্ট্যগুলির ইতিহাস
ওয়েবের প্রথম দিনগুলিতে, বিকাশকারীরা ব্রাউজারটি চিত্রগুলি আনতে শুরু করার আগে পৃষ্ঠায় পর্যাপ্ত জায়গা বরাদ্দ করা হয়েছে তা নিশ্চিত করার জন্য তাদের <img>
ট্যাগগুলিতে width
এবং height
বৈশিষ্ট্য যুক্ত করবে। এটি রিফ্লো এবং পুনরায় লেআউটকে হ্রাস করবে।
<img src="puppy.jpg" width="640" height="360" alt="Puppy with balloons">
এই উদাহরণে width
এবং height
ইউনিট অন্তর্ভুক্ত করে না। এই "পিক্সেল" মাত্রাগুলি নিশ্চিত করবে যে ব্রাউজারটি পৃষ্ঠার বিন্যাসে একটি 640x360 অঞ্চল সংরক্ষণ করেছে। সত্য মাত্রা এটির সাথে মেলে কিনা তা বিবেচনা না করেই চিত্রটি এই জায়গার সাথে ফিট করার জন্য প্রসারিত হবে।
যখন প্রতিক্রিয়াশীল ওয়েব ডিজাইন চালু করা হয়েছিল, বিকাশকারীরা width
এবং height
বাদ দিতে শুরু করে এবং পরিবর্তে চিত্রগুলি আকার পরিবর্তন করতে সিএসএস ব্যবহার শুরু করে:
img {
width: 100%; /* or max-width: 100%; */
height: auto;
}
তবে, চিত্রের আকার নির্দিষ্ট না করা হওয়ায় ব্রাউজারটি এটি ডাউনলোড করা শুরু না করে এবং এর মাত্রা নির্ধারণ করতে না পারা পর্যন্ত এটির জন্য স্থান বরাদ্দ করা যাবে না। চিত্রগুলি লোড হওয়ার সাথে সাথে পাঠ্যগুলি তাদের জন্য জায়গা তৈরি করতে পৃষ্ঠাটি নীচে স্থানান্তরিত করে, একটি বিভ্রান্তিকর এবং হতাশার ব্যবহারকারীর অভিজ্ঞতা তৈরি করে।
এখানেই দিক অনুপাত আসে a একটি চিত্রের দিক অনুপাতটি তার প্রস্থের উচ্চতার অনুপাত। এটি একটি কোলন দ্বারা পৃথক দুটি সংখ্যা হিসাবে প্রকাশিত হওয়া সাধারণ (উদাহরণস্বরূপ, 16: 9 বা 4: 3)। একটি x: y দিক অনুপাতের জন্য, চিত্রটি এক্স ইউনিট প্রশস্ত এবং y ইউনিটগুলি উচ্চ।
এর অর্থ যদি আমরা একটি মাত্রা জানি তবে অন্যটি নির্ধারণ করা যেতে পারে। একটি 16: 9 দিক অনুপাতের জন্য:
- যদি কুকুরছানা.জেপিজির একটি 360px উচ্চতা থাকে তবে প্রস্থটি 360 x (16/9) = 640px হয়
- যদি PUPPY.JPG এর 640px প্রস্থ থাকে তবে উচ্চতা 640 x (9 /16) = 360px
কোনও চিত্রের জন্য দিক অনুপাতটি জানার ফলে ব্রাউজারটিকে উচ্চতা এবং সম্পর্কিত অঞ্চলের জন্য পর্যাপ্ত জায়গা গণনা করতে এবং সংরক্ষণ করতে দেয়।
চিত্রের মাত্রা নির্ধারণের জন্য আধুনিক সেরা অনুশীলন
যেহেতু আধুনিক ব্রাউজারগুলি কোনও চিত্রের width
এবং height
বৈশিষ্ট্যের উপর ভিত্তি করে চিত্রগুলির ডিফল্ট দিক অনুপাত সেট করে, আপনি চিত্রের উপর সেই বৈশিষ্ট্যগুলি সেট করে এবং আপনার স্টাইলের শীটে পূর্ববর্তী সিএসএস সহ লেআউট শিফটগুলি প্রতিরোধ করতে পারেন।
<!-- 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
মানটি প্রধান ব্রাউজারগুলি দ্বারা গণনা করা হয় কারণ এইচটিএমএল প্রক্রিয়া করা হয়, পরিবর্তে ডিফল্ট ব্যবহারকারী এজেন্ট স্টাইলের শীট ( কেন একটি গভীর ডাইভের জন্য এই পোস্টটি দেখুন), সুতরাং মানটি কিছুটা আলাদাভাবে প্রদর্শিত হয়। উদাহরণস্বরূপ, ক্রোম এটি উপাদান প্যানেলের স্টাইল বিভাগে এটি প্রদর্শন করে:
img[Attributes Style] {
aspect-ratio: auto 640 / 360;
}
একটি এইচটিএমএল বৈশিষ্ট্য স্টাইল উত্স ব্যবহার করে সাফারি একইভাবে আচরণ করে। ফায়ারফক্স তার পরিদর্শক প্যানেলে এই গণনা করা aspect-ratio
মোটেই প্রদর্শন করে না, তবে এটি বিন্যাসের জন্য ব্যবহার করে না।
পূর্ববর্তী কোডের auto
অংশটি গুরুত্বপূর্ণ, কারণ এটি চিত্রের ডাউনলোডের পরে চিত্রের মাত্রাগুলি ডিফল্ট দিক অনুপাতকে ওভাররাইড করে তোলে। যদি চিত্রের মাত্রাগুলি আলাদা হয় তবে এটি চিত্রের লোড হওয়ার পরে এখনও কিছু লেআউট শিফট সৃষ্টি করে, তবে এটি নিশ্চিত করে যে এইচটিএমএল ভুল হলে চিত্রের দিক অনুপাতটি এখনও পাওয়া যায়। এমনকি যদি প্রকৃত দিকের অনুপাতটি ডিফল্ট থেকে পৃথক হয় তবে এটি এখনও কোনও চিত্র ছাড়াই কোনও চিত্রের 0x0 ডিফল্ট আকারের চেয়ে কম লেআউট শিফট সৃষ্টি করে।
For a fantastic deep-dive into aspect ratio with further thinking around responsive images, see jank-free page loading with media aspect ratios .
If your image is in a container, you can use CSS to resize the image to the width of the container. We set height: auto;
to avoid using a fixed value for the image height.
img {
height: auto;
width: 100%;
}
What about responsive images?
When working with responsive images , srcset
defines the images you allow the browser to select between and what size each image is. To ensure <img>
width and height attributes can be set, each image should use the same aspect ratio.
<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"
/>
Your images' aspect ratios can also change depending on your art direction . For example, you may want to include a cropped shot of an image for narrow viewports, and display the full image on desktop:
<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, and Safari now support setting width
and height
on the <source>
elements within a given <picture>
element:
<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>
Ads, embeds, and other late-loaded content
Images aren't the only type of content that can cause layout shifts. Ads, embeds, iframes, and other dynamically injected content can all cause content appearing after them to shift down, increasing your CLS.
Ads are one of the largest contributors to layout shifts on the web. Ad networks and publishers often support dynamic ad sizes. Ad sizes increase performance and revenue due to higher click rates and more ads competing in the auction. Unfortunately, this can lead to a suboptimal user experience due to ads pushing visible content you're viewing down the page.
Embeddable widgets allow you to include portable web content on your page, such as videos from YouTube, maps from Google Maps, and social media posts. However, these widgets often aren't aware of how large their contents are before they load. As a result, platforms offering embeds don't always reserve space for their widgets, which causes layout shifts when they finally load.
The techniques for dealing with these are all similar. The major differences are how much control you have over the content that will be inserted. If this is inserted by a third-party like an ad partner, you may not know the exact size of content that will be inserted, nor be able to control any layout shifts happening within those embeds.
Reserve space for late-loading content
When placing late-loading content in the content flow, layout shifts can be avoided by reserving the space for them in the initial layout.
One approach is to add a min-height
CSS rule to reserve space or—for responsive content such as ads, for example—use the aspect-ratio
CSS property in a similar manner to the way browsers automatically use this for images with dimensions provided.
You may need to account for subtle differences in ad or placeholder sizes across form factors using media queries.
For content that may not have a fixed height, like ads, you might not be able to reserve the exact amount of space needed to eliminate the layout shift entirely. If a smaller ad is served, a publisher can style a larger container to avoid layout shifts, or choose the most likely size for the ad slot based on historical data. The downside to this approach is that it increases the amount of blank space on the page.
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.
Try to avoid collapsing the reserved space by showing a placeholder if, for example, no ad is returned. Removing the space set aside for elements can cause just as much CLS as inserting content.
Place late-loading content lower in the viewport
Dynamically injected content closer to the top of the viewport usually causes greater layout shifts than content injected lower in the viewport. However, injecting content anywhere in the viewport still causes some shift. If you can't reserve space for injected content, we recommend placing it later on the page to reduce the impact on its CLS.
Avoid inserting new content without a user interaction
You've probably experienced layout shifts due to UI that pops-in at the top or bottom of the viewport when you're trying to load a site. Similar to ads, this often happens with banners and forms that shift the rest of the page's content:
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.
In some cases adding content dynamically is an important part of user experience. For example, when loading more products to a list of items or when updating live feed content. There are several ways to avoid unexpected layout shifts in those cases:
- Replace the old content with the new content within a fixed size container or use a carousel and remove the old content after the transition. Remember to disable any links and controls until the transition has completed to prevent accidental clicks or taps while the new content is coming in.
- 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.
- Seamlessly load the content offscreen and overlay a notice to the user that it's available (for example, with a "Scroll to top" button).
![Examples of dynamic content loading without causing unexpected layout shifts from Twitter and the Chloé website](https://web.developers.google.cn/static/articles/optimize-cls/image/examples-dynamic-content-4d11ddda2fa94.png?hl=bn)
অ্যানিমেশন
Changes to CSS property values can require the browser to react to these changes. Some values, such as box-shadow
and box-sizing
, trigger re-layout, paint, and composite. Changing the top
and left
properties also cause layout shifts, even when the element being moved is on its own layer. Avoid animating using these properties.
Other CSS properties can be changed without triggering re-layouts. These include using transform
animations to translate, scale, rotate, or skew elements.
Composited animations using translate
can't impact other elements, and so don't count toward CLS. Non-composited animations also don't cause re-layout. To learn more about which CSS properties trigger layout shifts, see High-performance animations .
ওয়েব ফন্ট
Downloading and rendering web fonts is typically handled in one of two ways before the web font is downloaded:
- The fallback font is swapped with the web font, incurring a Flash of Unstyled Text (FOUT).
- "Invisible" text is displayed using the fallback font until a web font is available and the text is made visible (FOIT—flash of invisible text).
Both approaches can cause layout shifts . Even if the text is invisible, it's still laid out using the fallback font, so when the web font loads, the text block and the surrounding content shift in the same way as for the visible font.
The following tools can help you minimize shifting of text:
-
font-display: optional
can avoid a re-layout as the web font is only used if it is available by the time of initial layout. - Ensure the appropriate fallback font is used. For example, using
font-family: "Google Sans", sans-serif;
will ensure the browser'ssans-serif
fallback font is used while"Google Sans"
is loaded. Not specifying a fallback font using justfont-family: "Google Sans"
will mean the default font is used, which on Chrome is "Times"—a serif font which is a worse match than the defaultsans-serif
font. - Minimize the size differences between the fallback font and the web font using the new
size-adjust
,ascent-override
,descent-override
, andline-gap-override
APIs as detailed in the Improved font fallbacks post. - The Font Loading API can reduce the time it takes to get necessary fonts.
- Load critical web fonts as early as possible using
<link rel=preload>
. A preloaded font will have a higher chance to meet the first paint, in which case there's no layout shifting.
Read Best practices for fonts for other font best practices.
Reduce CLS by ensuring pages are eligible for the bfcache
A highly effective technique for keeping CLS scores low is to ensure your web pages are eligible for the back/forward cache (bfcache).
The bfcache keeps pages in browsers memory for a short period after you navigate away so if you return to them, then they will be restored exactly as you left them. This means the fully loaded page is instantly available—without any shifts which may be normally seen during load due to any of the reasons given earlier.
While this does potentially still mean the initial page load encounters layout shifts, when a user goes back through pages they are not seeing the same layout shifts repeatedly. You should always aim to avoid the shifts even on the initial load, but where that is more tricky to resolve fully, you can at least reduce the impact by avoiding them on any bfcache navigations.
Back and forward navigations are common on many sites. For example, returning to a contents page, or a category page, or search results.
When this was rolled out to Chrome , we saw noticeable improvements in CLS .
The bfcache is used by default by all browsers, but some sites are ineligible for the bfcache due to a variety of reasons. Read the bfcache guide for more details on how to test and identify any issues preventing bfcache usage to ensure you are making full use of this feature to help your overall CLS score for your site.
উপসংহার
There are a number of techniques to identify and improve CLS as detailed earlier in this guide. There are allowances built into Core Web Vitals, so even if you cannot eliminate CLS completely, using some of these techniques should allow you to reduce the impact. This will hopefully allow you to stay within those limits, creating a better experience for your website's users.