এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

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

Milica Mihajlija

Philip Walton

Browser Support

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

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

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

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

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

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

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

CLS কি?

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

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

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

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

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

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

একটি ভাল ব্যবহারকারীর অভিজ্ঞতা প্রদানের জন্য, সাইটগুলির একটি CLS স্কোর 0.1 বা তার কম থাকার চেষ্টা করা উচিত৷ আপনি আপনার বেশিরভাগ ব্যবহারকারীর জন্য এই লক্ষ্যে পৌঁছেছেন তা নিশ্চিত করার জন্য, পরিমাপ করার জন্য একটি ভাল থ্রেশহোল্ড হল পৃষ্ঠা লোডের 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 ।

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

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

পূর্ববর্তী চিত্রের প্রথম ফ্রেমে, বর্ণানুক্রমিক ক্রমে সাজানো প্রাণীদের জন্য একটি API অনুরোধের চারটি ফলাফল রয়েছে। দ্বিতীয় ফ্রেমে, সাজানো তালিকায় আরও ফলাফল যোগ করা হয়েছে।

তালিকার প্রথম আইটেমটি ("বিড়াল") ফ্রেমের মধ্যে তার শুরুর অবস্থান পরিবর্তন করে না, তাই এটি স্থিতিশীল। একইভাবে, তালিকায় যোগ করা নতুন আইটেমগুলি আগে 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 পরীক্ষাগারে বা ক্ষেত্রে পরিমাপ করা যেতে পারে, এবং এটি নিম্নলিখিত সরঞ্জামগুলিতে উপলব্ধ:

সতর্কতা: ল্যাব সরঞ্জামগুলি সাধারণত একটি সিন্থেটিক পরিবেশে পৃষ্ঠাগুলি লোড করে এবং এইভাবে কেবলমাত্র পৃষ্ঠা লোডের সময় ঘটে যাওয়া লেআউট পরিবর্তনগুলি পরিমাপ করতে সক্ষম হয়৷ ফলস্বরূপ, একটি প্রদত্ত পৃষ্ঠার জন্য ল্যাব সরঞ্জাম দ্বারা রিপোর্ট করা 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 মানটি সেই পৃষ্ঠার জন্য চূড়ান্ত CLS মান, কিন্তু পরবর্তী বিভাগে উল্লেখ করা কয়েকটি গুরুত্বপূর্ণ ব্যতিক্রম রয়েছে। ওয়েব এপিআই-এর সীমাবদ্ধতার মধ্যে যতটা সম্ভব এইগুলির জন্য web vitals জাভাস্ক্রিপ্ট লাইব্রেরি অ্যাকাউন্ট করে।

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

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

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

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

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

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

import {onCLS} from 'web-vitals';

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

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

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

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

লেআউট শিফট কমানোর বিষয়ে Google প্রকাশক ট্যাগের নির্দেশিকা
#PerfMatters (2020) এ অ্যানি সুলিভান এবং স্টিভ কোবসের দ্বারা ক্রমবর্ধমান লেআউট শিফট বোঝা

চেঞ্জলগ

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

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

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

Milica Mihajlija

Philip Walton

Browser Support

Source

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

CLS কি?

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

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

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

layout shift score = impact fraction * distance fraction

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

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

উদাহরণ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

import {onCLS} from 'web-vitals';

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

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

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

লেআউট শিফট কমানোর বিষয়ে Google প্রকাশক ট্যাগের নির্দেশিকা
#PerfMatters (2020) এ অ্যানি সুলিভান এবং স্টিভ কোবসের ক্রমবর্ধমান লেআউট শিফট বোঝা

চেঞ্জলগ

Milica Mihajlija

Philip Walton

Browser Support

Source

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

CLS কি?

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

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

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

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

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

বিন্যাস বিস্তারিতভাবে শিফট

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

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

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

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

layout shift score = impact fraction * distance fraction

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

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

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

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

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

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

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

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

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

উদাহরণ

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

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

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

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

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

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

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

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

পূর্ববর্তী চিত্রের প্রথম ফ্রেমে, প্রাণীদের জন্য একটি এপিআই অনুরোধের চারটি ফলাফল রয়েছে, বর্ণানুক্রমিক ক্রমে বাছাই করা। দ্বিতীয় ফ্রেমে, সাজানো তালিকায় আরও ফলাফল যুক্ত করা হয়।

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

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

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

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

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

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

ব্যবহারকারী-উদ্যোগী লেআউট শিফট

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

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

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

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

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

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

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

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

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

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

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

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

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

জাভাস্ক্রিপ্টে লেআউট শিফটগুলি পরিমাপ করুন

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

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

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

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

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

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

মেট্রিক এবং এপিআইয়ের মধ্যে পার্থক্য

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

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

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

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

এই সমস্ত কেস নিজেই মুখস্থ করা এবং ঝাঁপিয়ে পড়ার পরিবর্তে, বিকাশকারীরা সিএলএস পরিমাপ করতে web-vitals জাভাস্ক্রিপ্ট লাইব্রেরিটি ব্যবহার করতে পারেন, যা আইএফআরএএমই কেস ব্যতীত পূর্বে উল্লিখিত সমস্ত কিছুর জন্য অ্যাকাউন্ট করে:

import {onCLS} from 'web-vitals';

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

কিভাবে সিএলএস উন্নত করবেন

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

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

লেআউট শিফট হ্রাস করার বিষয়ে গুগল প্রকাশক ট্যাগের গাইডেন্স
অ্যানি সুলিভান এবং স্টিভ কোবসের #পারফমেটারস (2020) এর সংশ্লেষিত লেআউট শিফট বোঝা

চেঞ্জলগ

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

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

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