ক্রমবর্ধমান লেআউট শিফট (CLS)

ব্রাউজার সমর্থন

  • 77
  • 79
  • এক্স
  • এক্স

উৎস

Cumulative Layout Shift (CLS) হল একটি স্থিতিশীল কোর ওয়েব ভাইটাল মেট্রিক। এটি ভিজ্যুয়াল স্থিতিশীলতা পরিমাপের জন্য একটি গুরুত্বপূর্ণ, ব্যবহারকারী-কেন্দ্রিক মেট্রিক কারণ এটি ব্যবহারকারীরা কত ঘন ঘন অপ্রত্যাশিত লেআউট পরিবর্তনের অভিজ্ঞতা অর্জন করে তা পরিমাপ করতে সহায়তা করে। একটি কম CLS নিশ্চিত করতে সাহায্য করে যে পৃষ্ঠাটি আনন্দদায়ক

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

লেআউটে আকস্মিক পরিবর্তন ব্যবহারকারীকে একটি বড় অর্ডার নিশ্চিত করে যে তারা বাতিল করতে চেয়েছিল।

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

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

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

Cumulative Layout Shift (CLS) মেট্রিক প্রকৃত ব্যবহারকারীদের জন্য কত ঘন ঘন ঘটবে তা পরিমাপ করে এই সমস্যাটি সমাধান করতে সাহায্য করে।

CLS কি?

CLS হল একটি পৃষ্ঠার জীবদ্দশায় ঘটে যাওয়া প্রতিটি অপ্রত্যাশিত লেআউট শিফটের জন্য লেআউট শিফট স্কোরের বৃহত্তম বিস্ফোরণের একটি পরিমাপ।

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

লেআউট শিফটের একটি বিস্ফোরণ, যা একটি সেশন উইন্ডো নামে পরিচিত, হল যখন এক বা একাধিক পৃথক লেআউট শিফটগুলি দ্রুত ধারাবাহিকভাবে ঘটে যা প্রতিটি শিফটের মধ্যে 1 সেকেন্ডেরও কম সময়ে, সর্বাধিক 5 সেকেন্ডের মধ্যে।

সবচেয়ে বড় বিস্ফোরণ হল সেশন উইন্ডো যার মধ্যে সেই উইন্ডোর সমস্ত লেআউট শিফটের সর্বোচ্চ ক্রমবর্ধমান স্কোর।

সেশন উইন্ডোর উদাহরণ। নীল বার প্রতিটি পৃথক লেআউট শিফটের স্কোর প্রতিনিধিত্ব করে।

একটি ভাল CLS স্কোর কি?

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

ভাল CLS মানগুলি 0.1 বা তার কম, খারাপ মানগুলি 0.25 এর চেয়ে বেশি এবং এর মধ্যে যে কোনও কিছুর উন্নতি প্রয়োজন
ভাল CLS মান 0.1 বা তার কম। খারাপ মান 0.25 এর চেয়ে বেশি।

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

বিস্তারিতভাবে লেআউট পরিবর্তন

লেআউট শিফ্টগুলি লেআউট অস্থিরতা API দ্বারা সংজ্ঞায়িত করা হয়, যা যেকোন সময় ভিউপোর্টের মধ্যে দৃশ্যমান একটি উপাদান তার শুরুর অবস্থান পরিবর্তন করে (উদাহরণস্বরূপ, ডিফল্ট লেখার মোডে এটির উপরের এবং বাম অবস্থান) দুটি ফ্রেমের মধ্যে layout-shift রিপোর্ট করে। যে উপাদানগুলির প্রারম্ভিক অবস্থানের পরিবর্তনগুলি অস্থির উপাদান হিসাবে বিবেচিত হয়।

লেআউট স্থানান্তর শুধুমাত্র তখনই ঘটে যখন বিদ্যমান উপাদানগুলি তাদের শুরুর অবস্থান পরিবর্তন করে। যদি DOM-এ একটি নতুন উপাদান যোগ করা হয় বা একটি বিদ্যমান উপাদান আকার পরিবর্তন করে, তবে এটি শুধুমাত্র একটি লেআউট শিফট হিসাবে গণনা করা হয় যদি পরিবর্তনের ফলে অন্যান্য দৃশ্যমান উপাদানগুলি তাদের শুরুর অবস্থান পরিবর্তন করে।

লেআউট শিফট স্কোর

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

layout shift score = impact fraction * distance fraction

প্রভাব ভগ্নাংশ

প্রভাব ভগ্নাংশ পরিমাপ করে কিভাবে অস্থির উপাদান দুটি ফ্রেমের মধ্যে ভিউপোর্ট এলাকাকে প্রভাবিত করে।

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

একটি অস্থির উপাদান সহ প্রভাব ভগ্নাংশ উদাহরণ
যদি একটি উপাদান অবস্থান পরিবর্তন করে, তার পূর্ববর্তী এবং বর্তমান অবস্থান উভয়ই তার প্রভাব ভগ্নাংশে অবদান রাখে।

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

দূরত্ব ভগ্নাংশ

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

একটি অস্থির উপাদান সহ দূরত্ব ভগ্নাংশের উদাহরণ
দূরত্ব ভগ্নাংশ পরিমাপ করে ভিউপোর্ট জুড়ে একটি উপাদান কতদূর সরে গেছে।

এই উদাহরণে, সবচেয়ে বড় ভিউপোর্টের মাত্রা হল উচ্চতা, এবং অস্থির উপাদানটি ভিউপোর্ট উচ্চতার 25% দ্বারা সরে গেছে, যা দূরত্বের ভগ্নাংশকে 0.25 করে তোলে।

0.75 এর একটি প্রভাব ভগ্নাংশ এবং 0.25 এর একটি দূরত্ব ভগ্নাংশ একটি লেআউট শিফট স্কোর 0.75 * 0.25 = 0.1875 তৈরি করে।

উদাহরণ

পরবর্তী উদাহরণটি ব্যাখ্যা করে যে কীভাবে একটি বিদ্যমান উপাদানে সামগ্রী যোগ করা লেআউট শিফট স্কোরকে প্রভাবিত করে:

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

এই উদাহরণে, ধূসর বাক্সের আকার পরিবর্তন হয়, কিন্তু এর শুরুর অবস্থান পরিবর্তন হয় না, তাই এটি একটি অস্থির উপাদান নয়।

"আমাকে ক্লিক করুন!" বোতামটি আগে DOM-এ ছিল না, তাই এর শুরুর অবস্থানও পরিবর্তন হয় না।

সবুজ বাক্সের শুরুর অবস্থান পরিবর্তন হয়, তবে এটি আংশিকভাবে ভিউপোর্টের বাইরে সরানো হয়েছে এবং প্রভাব ভগ্নাংশ গণনা করার সময় অদৃশ্য এলাকা বিবেচনা করা হয় না। উভয় ফ্রেমে (লাল ড্যাশযুক্ত আয়তক্ষেত্র) সবুজ বাক্সের জন্য দৃশ্যমান অঞ্চলগুলির মিলন প্রথম ফ্রেমের সবুজ বাক্সের ক্ষেত্রফলের সমান—ভিউপোর্টের 50%। প্রভাব ভগ্নাংশ হল 0.5

দূরত্ব ভগ্নাংশ নীল তীর দ্বারা চিত্রিত করা হয়. সবুজ বাক্সটি ভিউপোর্টের প্রায় 14% নিচে সরে গেছে, তাই দূরত্ব ভগ্নাংশ হল 0.14

লেআউট শিফট স্কোর হল 0.5 x 0.14 = 0.07

নিম্নলিখিত উদাহরণ দেখায় কিভাবে একাধিক অস্থির উপাদান একটি পৃষ্ঠার লেআউট শিফট স্কোরকে প্রভাবিত করে:

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

তালিকার প্রথম আইটেমটি ("বিড়াল") ফ্রেমের মধ্যে শুরুর অবস্থান পরিবর্তন করে না, তাই এটি স্থিতিশীল। তালিকায় যোগ করা নতুন আইটেমগুলি আগে DOM-এ ছিল না, তাই তাদের শুরুর অবস্থানও পরিবর্তন হয় না। কিন্তু "কুকুর", "ঘোড়া" এবং "জেব্রা" লেবেলযুক্ত আইটেমগুলি তাদের শুরুর অবস্থান পরিবর্তন করে, তাদের অস্থির উপাদান করে তোলে।

আবার, লাল ড্যাশযুক্ত আয়তক্ষেত্রটি শিফটের আগে এবং পরে এই তিনটি অস্থির উপাদানের ক্ষেত্রফলকে প্রতিনিধিত্ব করে, যা এই ক্ষেত্রে ভিউপোর্ট এলাকার প্রায় 60% ( 0.60 এর প্রভাব ভগ্নাংশ)।

তীরগুলি সেই দূরত্বগুলিকে উপস্থাপন করে যা অস্থির উপাদানগুলি তাদের শুরুর অবস্থান থেকে সরে গেছে। নীল তীর দ্বারা উপস্থাপিত "জেব্রা" উপাদানটি ভিউপোর্ট উচ্চতার প্রায় 30% দ্বারা সবচেয়ে বেশি সরে গেছে। এটি এই উদাহরণে দূরত্বের ভগ্নাংশকে 0.3 করে তোলে।

লেআউট শিফট স্কোর হল 0.60 x 0.3 = 0.18

প্রত্যাশিত বনাম অপ্রত্যাশিত লেআউট পরিবর্তন

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

ব্যবহারকারী-সূচিত লেআউট স্থানান্তর

ব্যবহারকারীর ইন্টারঅ্যাকশনের প্রতিক্রিয়ায় ঘটে যাওয়া লেআউট শিফটগুলি (যেমন একটি লিঙ্কে ক্লিক করা বা ট্যাপ করা, একটি বোতাম টিপানো, বা একটি অনুসন্ধান বাক্সে টাইপ করা) সাধারণত ঠিক থাকে, যতক্ষণ না শিফটটি মিথস্ক্রিয়াটির যথেষ্ট কাছাকাছি ঘটে যা সম্পর্কটি স্পষ্ট হয়। ব্যবহারকারী.

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

ব্যবহারকারীর ইনপুটের 500 মিলিসেকেন্ডের মধ্যে ঘটে যাওয়া লেআউট শিফটে hadRecentInput পতাকা সেট থাকবে, তাই আপনি সেগুলিকে গণনা থেকে বাদ দিতে পারেন।

অ্যানিমেশন এবং ট্রানজিশন

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

prefers-reduced-motion ব্রাউজার সেটিংসকে সম্মান করতে ভুলবেন না, কারণ অ্যানিমেশন কিছু সাইট ভিজিটরের জন্য স্বাস্থ্য বা মনোযোগের সমস্যা সৃষ্টি করতে পারে।

CSS transform প্রপার্টি আপনাকে লেআউট শিফট ট্রিগার না করে উপাদানগুলিকে অ্যানিমেট করতে দেয়:

  • height এবং width বৈশিষ্ট্য পরিবর্তনের পরিবর্তে transform: scale() ব্যবহার করুন।
  • উপাদানগুলিকে চারপাশে সরাতে, top , right , bottom বা left বৈশিষ্ট্যগুলি পরিবর্তন করার পরিবর্তে transform: translate() ব্যবহার করুন।

কিভাবে CLS পরিমাপ করা যায়

CLS পরীক্ষাগারে বা ক্ষেত্রে পরিমাপ করা যেতে পারে, এবং এটি নিম্নলিখিত সরঞ্জামগুলিতে উপলব্ধ।

ক্ষেত্র সরঞ্জাম

ল্যাব সরঞ্জাম

জাভাস্ক্রিপ্টে লেআউট পরিবর্তন পরিমাপ করুন

জাভাস্ক্রিপ্টে লেআউট শিফট পরিমাপ করতে, লেআউট অস্থিরতা API ব্যবহার করুন।

কনসোলে layout-shift এন্ট্রি লগ করার জন্য কিভাবে একটি PerformanceObserver তৈরি করতে হয় তা নিচের উদাহরণটি দেখায়:

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    console.log('Layout shift:', entry);
  }
}).observe({type: 'layout-shift', buffered: true});

জাভাস্ক্রিপ্টে CLS পরিমাপ করুন

জাভাস্ক্রিপ্টে CLS পরিমাপ করতে, আপনি সেশনে লগ ইন করেছেন এমন অপ্রত্যাশিত layout-shift এন্ট্রিগুলিকে গ্রুপ করুন এবং সর্বাধিক সেশন মান গণনা করুন। একটি রেফারেন্স বাস্তবায়নের জন্য, web vitals JavaScript লাইব্রেরি সোর্স কোড দেখুন।

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

মেট্রিক এবং API-এর মধ্যে পার্থক্য

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

এই ব্যতিক্রমগুলি ছাড়াও, CLS এর আরও জটিলতা রয়েছে কারণ এটি একটি পৃষ্ঠার সমগ্র জীবনকাল পরিমাপ করে:

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

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

এই সমস্ত ক্ষেত্রে নিজেরাই মনে রাখার এবং মোকাবেলা করার পরিবর্তে, বিকাশকারীরা CLS পরিমাপ করতে web-vitals জাভাস্ক্রিপ্ট লাইব্রেরি ব্যবহার করতে পারে, যা iframe কেস ছাড়া এখানে উল্লিখিত সমস্ত কিছুর জন্য দায়ী:

import {onCLS} from 'web-vitals';

// Measure and log CLS in all situations
// where it needs to be reported.
onCLS(console.log);

কিভাবে CLS উন্নত করা যায়

ক্ষেত্রের লেআউট পরিবর্তনগুলি সনাক্তকরণ এবং তাদের অপ্টিমাইজ করার জন্য ল্যাব ডেটা ব্যবহার করার বিষয়ে আরও নির্দেশনার জন্য, CLS অপ্টিমাইজ করার জন্য আমাদের গাইড দেখুন৷

অতিরিক্ত সম্পদ

চেঞ্জলগ

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

এটি পরিচালনা করতে আপনাকে সাহায্য করার জন্য, এই মেট্রিক্সের বাস্তবায়ন বা সংজ্ঞার সমস্ত পরিবর্তন এই চেঞ্জলগ- এ প্রদর্শিত হয়েছে।

আপনার যদি এই মেট্রিক্সের জন্য প্রতিক্রিয়া থাকে, তাহলে ওয়েব-ভিটালস-ফিডব্যাক Google গ্রুপে তা প্রদান করুন।