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

ডিবাগ লেআউট স্থানান্তরিত হয়

লেআউট স্থানান্তরগুলি কীভাবে সনাক্ত এবং ঠিক করতে হয় তা শিখুন৷

Katie Hempenius

Barry Pollard

প্রকাশিত: মার্চ 11, 2021, শেষ আপডেট: ফেব্রুয়ারী 7, 2025

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

টুলিং

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

লেআউট অস্থিরতা API

লেআউট অস্থিরতা API হল লেআউট শিফট পরিমাপ এবং রিপোর্ট করার জন্য ব্রাউজার মেকানিজম। DevTools সহ লেআউট শিফট ডিবাগ করার জন্য সমস্ত টুল শেষ পর্যন্ত লেআউট অস্থিরতা API-এর উপর তৈরি করা হয়। যাইহোক, লেআউট অস্থিরতা API সরাসরি ব্যবহার করা তার নমনীয়তার কারণে একটি শক্তিশালী ডিবাগিং টুল।

ব্যবহার

একই কোড স্নিপেট যা পরিমাপ করে Cumulative Layout Shift (CLS) লেআউট শিফটগুলি ডিবাগ করতেও পরিবেশন করতে পারে। নিম্নলিখিত স্নিপেট কনসোলে লেআউট স্থানান্তর সম্পর্কে তথ্য লগ করে। এই লগটি পরিদর্শন করা আপনাকে কখন, কোথায়, এবং কিভাবে একটি বিন্যাস স্থানান্তর ঘটেছে সে সম্পর্কে তথ্য প্রদান করবে।

let cls = 0;
new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    if (!entry.hadRecentInput) {
      cls += entry.value;
      console.log('Current CLS value:', cls, entry);
    }
  }
}).observe({type: 'layout-shift', buffered: true});

এই স্ক্রিপ্টটি চালানোর সময় সচেতন হন যে:

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

লেআউট শিফট সম্পর্কে তথ্য দুটি API-এর সংমিশ্রণ ব্যবহার করে রিপোর্ট করা হয়: LayoutShift এবং LayoutShiftAttribution ইন্টারফেস। এই ইন্টারফেসগুলির প্রতিটি নিম্নলিখিত বিভাগে আরও বিশদে ব্যাখ্যা করা হয়েছে।

লেআউটশিফ্ট

LayoutShift ইন্টারফেস ব্যবহার করে প্রতিটি লেআউট শিফট রিপোর্ট করা হয়। একটি এন্ট্রি বিষয়বস্তু এই মত দেখায়:

duration: 0
entryType: "layout-shift"
hadRecentInput: false
lastInputTime: 0
name: ""
sources: (3) [LayoutShiftAttribution, LayoutShiftAttribution, LayoutShiftAttribution]
startTime: 11317.934999999125
value: 0.17508567530168798

পূর্ববর্তী এন্ট্রিটি একটি লেআউট শিফট নির্দেশ করে যার সময় তিনটি DOM উপাদান অবস্থান পরিবর্তন করে। এই বিশেষ লেআউট শিফটের লেআউট শিফট স্কোর ছিল 0.175 ।

এগুলি হল একটি LayoutShift উদাহরণের বৈশিষ্ট্য যা ডিবাগিং লেআউট শিফটের জন্য সবচেয়ে প্রাসঙ্গিক:

সম্পত্তি	বর্ণনা
`sources`	`sources` প্রপার্টি লেআউট শিফটের সময় সরানো DOM উপাদানের তালিকা করে। এই অ্যারে পাঁচটি পর্যন্ত উৎস থাকতে পারে। লেআউট শিফ্ট দ্বারা প্রভাবিত পাঁচটিরও বেশি উপাদান আছে এমন ঘটনাতে, লেআউট শিফটের পাঁচটি বৃহত্তম (লেআউট স্থায়িত্বের উপর প্রভাব দ্বারা পরিমাপ করা হয়) উত্স রিপোর্ট করা হয়। এই তথ্যটি LayoutShiftAttribution ইন্টারফেস ব্যবহার করে রিপোর্ট করা হয়েছে (নীচে আরও বিস্তারিতভাবে ব্যাখ্যা করা হয়েছে)।
`value`	`value` সম্পত্তি একটি নির্দিষ্ট লেআউট শিফটের জন্য লেআউট শিফট স্কোর রিপোর্ট করে।
`hadRecentInput`	`hadRecentInput` বৈশিষ্ট্য নির্দেশ করে যে ব্যবহারকারীর ইনপুটের 500 মিলিসেকেন্ডের মধ্যে লেআউট শিফট হয়েছে কিনা।
`startTime`	`startTime` বৈশিষ্ট্য নির্দেশ করে যখন একটি লেআউট স্থানান্তর ঘটেছে। `startTime` মিলিসেকেন্ডে নির্দেশিত হয় এবং পৃষ্ঠা লোড শুরু হওয়ার সময় সাপেক্ষে পরিমাপ করা হয়।
`duration`	`duration` বৈশিষ্ট্য সর্বদা `0` তে সেট করা হবে। এই বৈশিষ্ট্যটি `PerformanceEntry` ইন্টারফেস থেকে উত্তরাধিকারসূত্রে প্রাপ্ত ( `LayoutShift` ইন্টারফেস `PerformanceEntry` ইন্টারফেসকে প্রসারিত করে)। যাইহোক, সময়কালের ধারণাটি লেআউট শিফট ইভেন্টগুলিতে প্রযোজ্য নয়, তাই এটি `0` এ সেট করা হয়েছে। `PerformanceEntry` ইন্টারফেসের তথ্যের জন্য, বিশেষ উল্লেখ করুন।

LayoutShiftAttribution

LayoutShiftAttribution ইন্টারফেস একটি একক DOM উপাদানের একক শিফট বর্ণনা করে। যদি লেআউট শিফটের সময় একাধিক উপাদান স্থানান্তরিত হয়, sources সম্পত্তিতে একাধিক এন্ট্রি থাকে।

উদাহরণস্বরূপ, নিম্নলিখিত JSON একটি উৎসের সাথে একটি লেআউট শিফটের সাথে মিলে যায়: y: 76 থেকে y:246 পর্যন্ত <div id='banner'> DOM উপাদানটির নিম্নগামী স্থানান্তর।

// ...
  "sources": [
    {
      "node": "div#banner",
      "previousRect": {
        "x": 311,
        "y": 76,
        "width": 4,
        "height": 18,
        "top": 76,
        "right": 315,
        "bottom": 94,
        "left": 311
      },
      "currentRect": {
        "x": 311,
        "y": 246,
        "width": 4,
        "height": 18,
        "top": 246,
        "right": 315,
        "bottom": 264,
        "left": 311
      }
    }
  ]

node প্রপার্টি এইচটিএমএল এলিমেন্টকে চিহ্নিত করে যা স্থানান্তরিত হয়েছে। DevTools-এ এই প্রপার্টিতে হোভার করলে সংশ্লিষ্ট পৃষ্ঠার উপাদান হাইলাইট হয়।

previousRect এবং currentRect বৈশিষ্ট্য নোডের আকার এবং অবস্থান রিপোর্ট করে।

x এবং y স্থানাঙ্কগুলি উপাদানের উপরের-বাম কোণে যথাক্রমে x-স্থানাঙ্ক এবং y-স্থানাঙ্ক রিপোর্ট করে
width এবং height বৈশিষ্ট্যগুলি উপাদানটির যথাক্রমে প্রস্থ এবং উচ্চতা রিপোর্ট করে।
top , right , bottom এবং left বৈশিষ্ট্যগুলি উপাদানটির প্রদত্ত প্রান্তের সাথে সম্পর্কিত x বা y স্থানাঙ্কের মানগুলি রিপোর্ট করে। অন্য কথায়, top মান y এর সমান; bottom মান y+height সমান।

previousRect সমস্ত বৈশিষ্ট্য 0 তে সেট করা থাকলে এর অর্থ হল উপাদানটি দৃশ্যে স্থানান্তরিত হয়েছে। যদি currentRect এর সমস্ত বৈশিষ্ট্য 0 তে সেট করা থাকে তবে এর অর্থ হল উপাদানটি দৃশ্যের বাইরে চলে গেছে।

সতর্কতা: লেআউট অস্থিরতা API এমন উপাদানগুলিকে উপেক্ষা করে না যেগুলি স্থানান্তরিত হয়েছে কিন্তু অন্য একটি উপাদান তাদের সামনে অবস্থান করার কারণে দৃশ্যমান ছিল না৷ ব্যবহারকারীর কাছে দৃশ্যমান করার আগে আপনাকে কিছু উপাদানে লেআউট চালাতে হবে এমন ক্ষেত্রে বিন্যাস পরিবর্তন এড়াতে display: none , visibility: hidden বা opacity: 0 ব্যবহার করুন।

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

উদাহরণ # 1

এই লেআউট শিফ্টটি একটি উৎসের সাথে রিপোর্ট করা হবে: এলিমেন্ট B। যাইহোক, এই লেআউট শিফটের মূল কারণ হল এলিমেন্ট A-এর আকার পরিবর্তন।

উপাদানের মাত্রা পরিবর্তনের কারণে সৃষ্ট একটি লেআউট পরিবর্তন দেখানোর উদাহরণ

উদাহরণ #2

এই উদাহরণে লেআউট শিফ্ট দুটি উৎসের সাথে রিপোর্ট করা হবে: এলিমেন্ট A এবং এলিমেন্ট B। এই লেআউট শিফটের মূল কারণ হল এলিমেন্ট A এর অবস্থানের পরিবর্তন।

উপাদান অবস্থানে পরিবর্তনের কারণে সৃষ্ট একটি বিন্যাস স্থানান্তর দেখানোর উদাহরণ

উদাহরণ #3

এই উদাহরণে লেআউট শিফ্ট একটি উৎসের সাথে রিপোর্ট করা হবে: উপাদান B। উপাদান B-এর অবস্থান পরিবর্তন করার ফলে এই লেআউট শিফট হয়েছে।

উদাহরণ #4

যদিও উপাদান B আকার পরিবর্তন করে, এই উদাহরণে কোন বিন্যাস পরিবর্তন নেই।

উদাহরণ একটি উপাদানের আকার পরিবর্তন করে কিন্তু একটি বিন্যাস পরিবর্তন ঘটাচ্ছে না

লেআউট অস্থিরতা API দ্বারা কীভাবে DOM পরিবর্তনগুলি রিপোর্ট করা হয় তার একটি ডেমো দেখুন।

DevTools

ডিবাগ লেআউট শিফটে সাহায্য করার জন্য DevTools-এর অনেকগুলি টুল রয়েছে।

কর্মক্ষমতা প্যানেল

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

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

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

লেআউট শিফট রেকর্ডগুলি Chrome DevTools পারফরম্যান্স প্যানেলে প্রদর্শিত হচ্ছে৷ — পারফরম্যান্স প্যানেলে একটি নতুন ট্রেস রেকর্ড করার পরে, ফলাফলের **লেআউট শিফট** ট্র্যাকটি একটি `Layout Shift` ক্লাস্টারগুলি প্রদর্শন করে বেগুনি বার দ্বারা পরিপূর্ণ হয়। হীরাতে ক্লিক করলে **সারাংশ** প্যানেলে স্থানান্তরের একটি অ্যানিমেশন এবং বিশদ বিবরণ দেখায়।

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

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

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

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

পারফরম্যান্স প্যানেল ব্যবহার করার বিষয়ে আরও তথ্যের জন্য, পারফরম্যান্স বিশ্লেষণ রেফারেন্স দেখুন।

লেআউট স্থানান্তর অঞ্চলগুলি হাইলাইট করুন

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

DevTools-এ লেআউট শিফট অঞ্চলগুলি সক্ষম করতে, সেটিংস > আরও সরঞ্জাম > রেন্ডারিং > লেআউট শিফট অঞ্চলগুলিতে যান তারপর আপনি যে পৃষ্ঠাটি ডিবাগ করতে চান সেটি রিফ্রেশ করুন৷ লেআউট স্থানান্তরের ক্ষেত্রগুলি সংক্ষিপ্তভাবে বেগুনি রঙে হাইলাইট করা হবে।

লেআউট পরিবর্তনের কারণ চিহ্নিত করার জন্য চিন্তা প্রক্রিয়া

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

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

লেআউট পরিবর্তন নিম্নলিখিত ইভেন্টগুলির কারণে হতে পারে:

একটি DOM উপাদানের অবস্থানে পরিবর্তন
একটি DOM উপাদানের মাত্রার পরিবর্তন
একটি DOM উপাদান সন্নিবেশ বা অপসারণ
অ্যানিমেশন যা লেআউট ট্রিগার করে

বিশেষ করে, স্থানান্তরিত এলিমেন্টের ঠিক পূর্বে থাকা DOM উপাদানটি লেআউট শিফটের "সৃষ্টিকারী" এর সাথে জড়িত থাকার সম্ভাবনা সবচেয়ে বেশি। সুতরাং, কেন একটি লেআউট স্থানান্তর ঘটেছে তা তদন্ত করার সময় বিবেচনা করুন:

পূর্ববর্তী উপাদানের অবস্থান বা মাত্রা কি পরিবর্তিত হয়েছে?
স্থানান্তরিত উপাদানের আগে একটি DOM উপাদান সন্নিবেশিত বা সরানো হয়েছিল?
স্থানান্তরিত উপাদানের অবস্থান স্পষ্টভাবে পরিবর্তিত হয়েছিল?

যদি পূর্ববর্তী উপাদানটি লেআউট পরিবর্তনের কারণ না করে তবে অন্যান্য পূর্ববর্তী এবং কাছাকাছি উপাদানগুলি বিবেচনা করে আপনার অনুসন্ধান চালিয়ে যান।

উপরন্তু, একটি লেআউট স্থানান্তরের দিক এবং দূরত্ব মূল কারণ সম্পর্কে ইঙ্গিত প্রদান করতে পারে। উদাহরণস্বরূপ, একটি বড় নিম্নগামী স্থানান্তর প্রায়শই একটি DOM উপাদানের সন্নিবেশ নির্দেশ করে, যেখানে একটি 1 px বা 2 px লেআউট শিফট প্রায়শই বিরোধপূর্ণ CSS শৈলীর প্রয়োগ বা একটি ওয়েব ফন্টের লোডিং এবং প্রয়োগ নির্দেশ করে।

একটি ফন্ট অদলবদল দ্বারা সৃষ্ট একটি বিন্যাস স্থানান্তর দেখানো চিত্র — এই উদাহরণে, ফন্ট অদলবদল পৃষ্ঠার উপাদানগুলিকে পাঁচ পিক্সেল দ্বারা উপরে স্থানান্তরিত করে।

এটি এমন কিছু নির্দিষ্ট আচরণ যা প্রায়শই লেআউট পরিবর্তনের ঘটনা ঘটায়:

একটি উপাদানের অবস্থানের পরিবর্তন (যা অন্য উপাদানের আন্দোলনের কারণে নয়)

এই ধরনের পরিবর্তন প্রায়ই এর ফলে হয়:

স্টাইলশীটগুলি যেগুলি দেরিতে লোড হয় বা পূর্বে ঘোষিত শৈলীগুলি ওভাররাইট করে৷
অ্যানিমেশন এবং রূপান্তর প্রভাব।

একটি উপাদানের মাত্রা পরিবর্তন

এই ধরনের পরিবর্তন প্রায়ই এর ফলে হয়:

স্টাইলশীটগুলি যেগুলি দেরিতে লোড হয় বা পূর্বে ঘোষিত শৈলীগুলি ওভাররাইট করে৷
width এবং height বৈশিষ্ট্য ছাড়া ছবি এবং আইফ্রেমগুলি তাদের "স্লট" রেন্ডার হওয়ার পরে লোড হয়৷
width বা height বৈশিষ্ট্য ছাড়াই পাঠ্য ব্লক যা পাঠ্য রেন্ডার হওয়ার পরে ফন্ট অদলবদল করে।

DOM উপাদান সন্নিবেশ বা অপসারণ

এটি প্রায়শই এর ফলাফল:

বিজ্ঞাপনের সন্নিবেশ এবং অন্যান্য তৃতীয় পক্ষের এম্বেড।
ব্যানার, সতর্কতা, এবং মডেল সন্নিবেশ.
অসীম স্ক্রোল এবং অন্যান্য UX প্যাটার্ন যা বিদ্যমান সামগ্রীর উপরে অতিরিক্ত সামগ্রী লোড করে।

অ্যানিমেশন যা লেআউট ট্রিগার করে

কিছু অ্যানিমেশন প্রভাব লেআউট ট্রিগার করতে পারে। এটির একটি সাধারণ উদাহরণ হল যখন DOM উপাদানগুলি CSS-এর transform প্রপার্টি ব্যবহার করার পরিবর্তে top বা left মত বৈশিষ্ট্য বৃদ্ধি করে 'অ্যানিমেটেড' হয়। আরও তথ্যের জন্য কীভাবে উচ্চ-পারফরম্যান্স CSS অ্যানিমেশন তৈরি করবেন তা পড়ুন।

লেআউট শিফট পুনরুত্পাদন

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

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

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    if (!entry.hadRecentInput) {
      cls += entry.value;
      debugger;
      console.log('Current CLS value:', cls, entry);
    }
  }
}).observe({type: 'layout-shift', buffered: true});

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

লেআউট স্থানান্তরগুলি কীভাবে সনাক্ত এবং ঠিক করতে হয় তা শিখুন৷

Katie Hempenius

Barry Pollard

প্রকাশিত: মার্চ 11, 2021, শেষ আপডেট: ফেব্রুয়ারী 7, 2025

টুলিং

লেআউট অস্থিরতা API

ব্যবহার

let cls = 0;
new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    if (!entry.hadRecentInput) {
      cls += entry.value;
      console.log('Current CLS value:', cls, entry);
    }
  }
}).observe({type: 'layout-shift', buffered: true});

এই স্ক্রিপ্টটি চালানোর সময় সচেতন হন যে:

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

লেআউটশিফ্ট

duration: 0
entryType: "layout-shift"
hadRecentInput: false
lastInputTime: 0
name: ""
sources: (3) [LayoutShiftAttribution, LayoutShiftAttribution, LayoutShiftAttribution]
startTime: 11317.934999999125
value: 0.17508567530168798

সম্পত্তি	বর্ণনা
`sources`	`sources` প্রপার্টি লেআউট শিফটের সময় সরানো DOM উপাদানের তালিকা করে। এই অ্যারে পাঁচটি পর্যন্ত উৎস থাকতে পারে। লেআউট শিফ্ট দ্বারা প্রভাবিত পাঁচটিরও বেশি উপাদান আছে এমন ঘটনাতে, লেআউট শিফটের পাঁচটি বৃহত্তম (লেআউট স্থায়িত্বের উপর প্রভাব দ্বারা পরিমাপ করা হয়) উত্স রিপোর্ট করা হয়। এই তথ্যটি LayoutShiftAttribution ইন্টারফেস ব্যবহার করে রিপোর্ট করা হয়েছে (নীচে আরও বিস্তারিতভাবে ব্যাখ্যা করা হয়েছে)।
`value`	`value` সম্পত্তি একটি নির্দিষ্ট লেআউট শিফটের জন্য লেআউট শিফট স্কোর রিপোর্ট করে।
`hadRecentInput`	`hadRecentInput` বৈশিষ্ট্য নির্দেশ করে যে ব্যবহারকারীর ইনপুটের 500 মিলিসেকেন্ডের মধ্যে লেআউট শিফট হয়েছে কিনা।
`startTime`	`startTime` বৈশিষ্ট্য নির্দেশ করে যখন একটি লেআউট স্থানান্তর ঘটেছে। `startTime` মিলিসেকেন্ডে নির্দেশিত হয় এবং পৃষ্ঠা লোড শুরু হওয়ার সময় সাপেক্ষে পরিমাপ করা হয়।
`duration`	`duration` বৈশিষ্ট্য সর্বদা `0` তে সেট করা হবে। এই বৈশিষ্ট্যটি `PerformanceEntry` ইন্টারফেস থেকে উত্তরাধিকারসূত্রে প্রাপ্ত ( `LayoutShift` ইন্টারফেস `PerformanceEntry` ইন্টারফেসকে প্রসারিত করে)। যাইহোক, সময়কালের ধারণাটি লেআউট শিফট ইভেন্টগুলিতে প্রযোজ্য নয়, তাই এটি `0` এ সেট করা হয়েছে। `PerformanceEntry` ইন্টারফেসের তথ্যের জন্য, বিশেষ উল্লেখ করুন।

LayoutShiftAttribution

// ...
  "sources": [
    {
      "node": "div#banner",
      "previousRect": {
        "x": 311,
        "y": 76,
        "width": 4,
        "height": 18,
        "top": 76,
        "right": 315,
        "bottom": 94,
        "left": 311
      },
      "currentRect": {
        "x": 311,
        "y": 246,
        "width": 4,
        "height": 18,
        "top": 246,
        "right": 315,
        "bottom": 264,
        "left": 311
      }
    }
  ]

previousRect এবং currentRect বৈশিষ্ট্য নোডের আকার এবং অবস্থান রিপোর্ট করে।

x এবং y স্থানাঙ্কগুলি উপাদানের উপরের-বাম কোণে যথাক্রমে x-স্থানাঙ্ক এবং y-স্থানাঙ্ক রিপোর্ট করে
width এবং height বৈশিষ্ট্যগুলি উপাদানটির যথাক্রমে প্রস্থ এবং উচ্চতা রিপোর্ট করে।
top , right , bottom এবং left বৈশিষ্ট্যগুলি উপাদানটির প্রদত্ত প্রান্তের সাথে সম্পর্কিত x বা y স্থানাঙ্কের মানগুলি রিপোর্ট করে। অন্য কথায়, top মান y এর সমান; bottom মান y+height সমান।

উদাহরণ # 1

উদাহরণ #2

উদাহরণ #3

উদাহরণ #4

যদিও উপাদান B আকার পরিবর্তন করে, এই উদাহরণে কোন বিন্যাস পরিবর্তন নেই।

DevTools

ডিবাগ লেআউট শিফটে সাহায্য করার জন্য DevTools-এর অনেকগুলি টুল রয়েছে।

কর্মক্ষমতা প্যানেল

লেআউট স্থানান্তর অঞ্চলগুলি হাইলাইট করুন

লেআউট পরিবর্তনের কারণ চিহ্নিত করার জন্য চিন্তা প্রক্রিয়া

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

লেআউট পরিবর্তন নিম্নলিখিত ইভেন্টগুলির কারণে হতে পারে:

একটি DOM উপাদানের অবস্থানে পরিবর্তন
একটি DOM উপাদানের মাত্রার পরিবর্তন
একটি DOM উপাদান সন্নিবেশ বা অপসারণ
অ্যানিমেশন যা লেআউট ট্রিগার করে

পূর্ববর্তী উপাদানের অবস্থান বা মাত্রা কি পরিবর্তিত হয়েছে?
স্থানান্তরিত উপাদানের আগে একটি DOM উপাদান সন্নিবেশিত বা সরানো হয়েছিল?
স্থানান্তরিত উপাদানের অবস্থান স্পষ্টভাবে পরিবর্তিত হয়েছিল?

এটি এমন কিছু নির্দিষ্ট আচরণ যা প্রায়শই লেআউট পরিবর্তনের ঘটনা ঘটায়:

একটি উপাদানের অবস্থানের পরিবর্তন (যা অন্য উপাদানের আন্দোলনের কারণে নয়)

এই ধরনের পরিবর্তন প্রায়ই এর ফলে হয়:

স্টাইলশীটগুলি যেগুলি দেরিতে লোড হয় বা পূর্বে ঘোষিত শৈলীগুলি ওভাররাইট করে৷
অ্যানিমেশন এবং রূপান্তর প্রভাব।

একটি উপাদানের মাত্রা পরিবর্তন

এই ধরনের পরিবর্তন প্রায়ই এর ফলে হয়:

স্টাইলশীটগুলি যেগুলি দেরিতে লোড হয় বা পূর্বে ঘোষিত শৈলীগুলি ওভাররাইট করে৷
width এবং height বৈশিষ্ট্য ছাড়া ছবি এবং আইফ্রেমগুলি তাদের "স্লট" রেন্ডার হওয়ার পরে লোড হয়৷
width বা height বৈশিষ্ট্য ছাড়াই পাঠ্য ব্লক যা পাঠ্য রেন্ডার হওয়ার পরে ফন্ট অদলবদল করে।

DOM উপাদান সন্নিবেশ বা অপসারণ

এটি প্রায়শই এর ফলাফল:

বিজ্ঞাপনের সন্নিবেশ এবং অন্যান্য তৃতীয় পক্ষের এম্বেড।
ব্যানার, সতর্কতা, এবং মডেল সন্নিবেশ.
অসীম স্ক্রোল এবং অন্যান্য UX প্যাটার্ন যা বিদ্যমান সামগ্রীর উপরে অতিরিক্ত সামগ্রী লোড করে।

অ্যানিমেশন যা লেআউট ট্রিগার করে

লেআউট শিফট পুনরুত্পাদন

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    if (!entry.hadRecentInput) {
      cls += entry.value;
      debugger;
      console.log('Current CLS value:', cls, entry);
    }
  }
}).observe({type: 'layout-shift', buffered: true});

লেআউট স্থানান্তরগুলি কীভাবে সনাক্ত এবং ঠিক করতে হয় তা শিখুন৷

Katie Hempenius

Barry Pollard

প্রকাশিত: মার্চ 11, 2021, শেষ আপডেট: ফেব্রুয়ারী 7, 2025

টুলিং

লেআউট অস্থিরতা API

ব্যবহার

let cls = 0;
new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    if (!entry.hadRecentInput) {
      cls += entry.value;
      console.log('Current CLS value:', cls, entry);
    }
  }
}).observe({type: 'layout-shift', buffered: true});

এই স্ক্রিপ্টটি চালানোর সময় সচেতন হন যে:

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

লেআউটশিফ্ট

duration: 0
entryType: "layout-shift"
hadRecentInput: false
lastInputTime: 0
name: ""
sources: (3) [LayoutShiftAttribution, LayoutShiftAttribution, LayoutShiftAttribution]
startTime: 11317.934999999125
value: 0.17508567530168798

সম্পত্তি	বর্ণনা
`sources`	`sources` প্রপার্টি লেআউট শিফটের সময় সরানো DOM উপাদানের তালিকা করে। এই অ্যারে পাঁচটি পর্যন্ত উৎস থাকতে পারে। লেআউট শিফ্ট দ্বারা প্রভাবিত পাঁচটিরও বেশি উপাদান আছে এমন ঘটনাতে, লেআউট শিফটের পাঁচটি বৃহত্তম (লেআউট স্থায়িত্বের উপর প্রভাব দ্বারা পরিমাপ করা হয়) উত্স রিপোর্ট করা হয়। এই তথ্যটি LayoutShiftAttribution ইন্টারফেস ব্যবহার করে রিপোর্ট করা হয়েছে (নীচে আরও বিস্তারিতভাবে ব্যাখ্যা করা হয়েছে)।
`value`	`value` সম্পত্তি একটি নির্দিষ্ট লেআউট শিফটের জন্য লেআউট শিফট স্কোর রিপোর্ট করে।
`hadRecentInput`	`hadRecentInput` বৈশিষ্ট্য নির্দেশ করে যে ব্যবহারকারীর ইনপুটের 500 মিলিসেকেন্ডের মধ্যে লেআউট শিফট হয়েছে কিনা।
`startTime`	`startTime` বৈশিষ্ট্য নির্দেশ করে যখন একটি লেআউট স্থানান্তর ঘটেছে। `startTime` মিলিসেকেন্ডে নির্দেশিত হয় এবং পৃষ্ঠা লোড শুরু হওয়ার সময় সাপেক্ষে পরিমাপ করা হয়।
`duration`	`duration` বৈশিষ্ট্য সর্বদা `0` তে সেট করা হবে। এই বৈশিষ্ট্যটি `PerformanceEntry` ইন্টারফেস থেকে উত্তরাধিকারসূত্রে প্রাপ্ত ( `LayoutShift` ইন্টারফেস `PerformanceEntry` ইন্টারফেসকে প্রসারিত করে)। যাইহোক, সময়কালের ধারণাটি লেআউট শিফট ইভেন্টগুলিতে প্রযোজ্য নয়, তাই এটি `0` এ সেট করা হয়েছে। `PerformanceEntry` ইন্টারফেসের তথ্যের জন্য, বিশেষ উল্লেখ করুন।

LayoutShiftAttribution

// ...
  "sources": [
    {
      "node": "div#banner",
      "previousRect": {
        "x": 311,
        "y": 76,
        "width": 4,
        "height": 18,
        "top": 76,
        "right": 315,
        "bottom": 94,
        "left": 311
      },
      "currentRect": {
        "x": 311,
        "y": 246,
        "width": 4,
        "height": 18,
        "top": 246,
        "right": 315,
        "bottom": 264,
        "left": 311
      }
    }
  ]

previousRect এবং currentRect বৈশিষ্ট্য নোডের আকার এবং অবস্থান রিপোর্ট করে।

x এবং y স্থানাঙ্কগুলি উপাদানের উপরের-বাম কোণে যথাক্রমে x-স্থানাঙ্ক এবং y-স্থানাঙ্ক রিপোর্ট করে
width এবং height বৈশিষ্ট্যগুলি উপাদানটির যথাক্রমে প্রস্থ এবং উচ্চতা রিপোর্ট করে।
top , right , bottom এবং left বৈশিষ্ট্যগুলি উপাদানটির প্রদত্ত প্রান্তের সাথে সম্পর্কিত x বা y স্থানাঙ্কের মানগুলি রিপোর্ট করে। অন্য কথায়, top মান y এর সমান; bottom মান y+height সমান।

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

উদাহরণ # 1

এই লেআউট শিফটটি একটি উত্সের সাথে রিপোর্ট করা হবে: উপাদান বি। তবে, এই লেআউট শিফটের মূল কারণ হ'ল উপাদান এ এর আকারের পরিবর্তন

উদাহরণ উপাদান মাত্রা পরিবর্তনের কারণে একটি লেআউট শিফট দেখানো হচ্ছে

উদাহরণ #2

এই উদাহরণে লেআউট শিফটটি দুটি উত্সের সাথে রিপোর্ট করা হবে: উপাদান এ এবং উপাদান বি। এই লেআউট শিফটের মূল কারণটি উপাদান এ এর অবস্থানের পরিবর্তন

উদাহরণ উপাদান অবস্থানের পরিবর্তনের কারণে একটি লেআউট শিফট দেখানো হচ্ছে

উদাহরণ #3

এই উদাহরণে লেআউট শিফটটি একটি উত্সের সাথে রিপোর্ট করা হবে: উপাদান বি। উপাদান বি এর অবস্থান পরিবর্তন করার ফলে এই লেআউট শিফট হয়েছে।

উদাহরণ উপাদান অবস্থানের পরিবর্তনের কারণে একটি লেআউট শিফট দেখানো হচ্ছে

উদাহরণ #4

যদিও উপাদান বি আকার পরিবর্তন করে, এই উদাহরণে কোনও লেআউট শিফট নেই।

উদাহরণ কোনও উপাদান পরিবর্তন করে দেখানো কিন্তু একটি লেআউট শিফট সৃষ্টি করে না

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

DevTools

ডিবাগ লেআউট শিফটগুলিতে সহায়তা করার জন্য ডিভটুলসের বেশ কয়েকটি সরঞ্জাম রয়েছে।

কর্মক্ষমতা প্যানেল

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

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

একবার আপনি কোনও লেআউট শিফট পুনরুত্পাদন করতে পারলে, আপনি আরও বিশদ পেতে একটি ট্রেস সম্পাদন করতে পারেন:

লেআউট শিফট রেকর্ডগুলি ক্রোম ডিভটুলস পারফরম্যান্স প্যানেলে প্রদর্শিত হচ্ছে। — পারফরম্যান্স প্যানেলে একটি নতুন ট্রেস রেকর্ড করার পরে, ফলাফলগুলির **লেআউট শিফট** ট্র্যাকগুলি বেগুনি বারগুলি একটি `Layout Shift` ক্লাস্টারগুলি প্রদর্শন করে জনবহুল। হীরা ক্লিক করা **সংক্ষিপ্ত** প্যানেলে শিফট এবং বিশদগুলির একটি অ্যানিমেশন দেখায়।

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

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

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

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

লেআউট শিফট অঞ্চলগুলি হাইলাইট করুন

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

ডিভটুলগুলিতে লেআউট শিফট অঞ্চলগুলি সক্ষম করতে, সেটিংস> আরও সরঞ্জাম> রেন্ডারিং> লেআউট শিফট অঞ্চলগুলিতে যান তারপরে আপনি যে পৃষ্ঠাটি ডিবাগ করতে চান তা রিফ্রেশ করুন। লেআউট শিফটের অঞ্চলগুলি বেগুনি রঙের সংক্ষেপে হাইলাইট করা হবে।

লেআউট শিফটগুলির কারণ চিহ্নিত করার জন্য চিন্তা প্রক্রিয়া

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

একটি লেআউট শিফটের কারণ চিহ্নিত করুন

লেআউট শিফটগুলি নিম্নলিখিত ইভেন্টগুলির কারণে হতে পারে:

একটি ডোম উপাদান অবস্থানের পরিবর্তন
একটি ডোম উপাদানগুলির মাত্রা পরিবর্তন
একটি ডোম উপাদান সন্নিবেশ বা অপসারণ
অ্যানিমেশনগুলি লেআউট ট্রিগার

বিশেষত, স্থানান্তরিত উপাদানটির সাথে সাথে অবিলম্বে ডিওএম উপাদানটি হ'ল উপাদানটি "কারণ" লেআউট শিফটে জড়িত হওয়ার সম্ভাবনা সবচেয়ে বেশি। সুতরাং, কেন কোনও লেআউট শিফট কেন তা তদন্ত করার সময় বিবেচনা করুন:

পূর্ববর্তী উপাদানগুলির অবস্থান বা মাত্রাগুলি কি পরিবর্তন হয়েছিল?
স্থানান্তরিত উপাদানটির আগে কোনও ডোম উপাদান সন্নিবেশ করা বা সরানো হয়েছিল?
স্থানান্তরিত উপাদানটির অবস্থানটি কি স্পষ্টভাবে পরিবর্তন করা হয়েছিল?

যদি পূর্ববর্তী উপাদানটি লেআউট শিফটের কারণ না করে তবে পূর্ববর্তী এবং আশেপাশের অন্যান্য উপাদানগুলি বিবেচনা করে আপনার অনুসন্ধান চালিয়ে যান।

তদতিরিক্ত, একটি লেআউট শিফটের দিক এবং দূরত্ব মূল কারণ সম্পর্কে ইঙ্গিত সরবরাহ করতে পারে। উদাহরণস্বরূপ, একটি বৃহত নিম্নমুখী শিফট প্রায়শই একটি ডিওএম উপাদান সন্নিবেশকে নির্দেশ করে, যেখানে 1 পিএক্স বা 2 পিএক্স লেআউট শিফট প্রায়শই বিবাদী সিএসএস শৈলীর প্রয়োগ বা একটি ওয়েব ফন্টের লোডিং এবং প্রয়োগ নির্দেশ করে।

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

এগুলি এমন কয়েকটি নির্দিষ্ট আচরণ যা প্রায়শই লেআউট শিফট ইভেন্টগুলির কারণ হয়:

কোনও উপাদানটির অবস্থানে পরিবর্তনগুলি (যা অন্য উপাদানটির চলাচলের কারণে নয়)

এই ধরণের পরিবর্তন প্রায়শই এর ফলাফল:

স্টাইলশিটগুলি যা দেরিতে লোড করা হয় বা পূর্বে ঘোষিত স্টাইলগুলি ওভাররাইট করে।
অ্যানিমেশন এবং রূপান্তর প্রভাব।

একটি উপাদান মাত্রা পরিবর্তন

এই ধরণের পরিবর্তন প্রায়শই এর ফলাফল:

স্টাইলশিটগুলি যা দেরিতে লোড করা হয় বা পূর্বে ঘোষিত স্টাইলগুলি ওভাররাইট করে।
width এবং height ছাড়াই চিত্র এবং আইফ্রেমগুলি তাদের "স্লট" এর পরে লোড করা হয়েছে।
width বা height বৈশিষ্ট্য ছাড়াই পাঠ্য ব্লকগুলি যা পাঠ্যটি রেন্ডার করার পরে ফন্টগুলি অদলবদল করে।

ডোম উপাদানগুলি সন্নিবেশ বা অপসারণ

এটি প্রায়শই এর ফলাফল:

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

অ্যানিমেশনগুলি লেআউট ট্রিগার

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

লেআউট শিফট পুনরুত্পাদন করুন

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

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

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    if (!entry.hadRecentInput) {
      cls += entry.value;
      debugger;
      console.log('Current CLS value:', cls, entry);
    }
  }
}).observe({type: 'layout-shift', buffered: true});

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

লেআউট শিফটগুলি কীভাবে সনাক্ত এবং ঠিক করতে হয় তা শিখুন।

Katie Hempenius

Barry Pollard

প্রকাশিত: মার্চ 11, 2021, সর্বশেষ আপডেট: ফেব্রুয়ারী 7, 2025

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

টুলিং

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

লেআউট অস্থিরতা এপিআই

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

ব্যবহার

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

let cls = 0;
new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    if (!entry.hadRecentInput) {
      cls += entry.value;
      console.log('Current CLS value:', cls, entry);
    }
  }
}).observe({type: 'layout-shift', buffered: true});

এই স্ক্রিপ্টটি চালানোর সময় সচেতন হন:

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

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

লেআউটশিফ্ট

প্রতিটি লেআউট শিফট LayoutShift ইন্টারফেস ব্যবহার করে রিপোর্ট করা হয়। একটি প্রবেশের বিষয়বস্তু এই মত দেখাচ্ছে:

duration: 0
entryType: "layout-shift"
hadRecentInput: false
lastInputTime: 0
name: ""
sources: (3) [LayoutShiftAttribution, LayoutShiftAttribution, LayoutShiftAttribution]
startTime: 11317.934999999125
value: 0.17508567530168798

পূর্ববর্তী এন্ট্রি একটি লেআউট শিফট নির্দেশ করে যার সময় তিনটি ডিওএম উপাদান অবস্থান পরিবর্তন করে। এই নির্দিষ্ট লেআউট শিফটের লেআউট শিফট স্কোরটি ছিল 0.175 ।

এগুলি একটি LayoutShift উদাহরণের বৈশিষ্ট্য যা ডিবাগিং লেআউট শিফটগুলির সাথে সবচেয়ে প্রাসঙ্গিক:

সম্পত্তি	বর্ণনা
`sources`	`sources` সম্পত্তি লেআউট শিফটের সময় সরানো ডিওএম উপাদানগুলিকে তালিকাভুক্ত করে। এই অ্যারে পাঁচটি উত্স পর্যন্ত থাকতে পারে। লেআউট শিফট দ্বারা প্রভাবিত পাঁচটিরও বেশি উপাদান রয়েছে এমন ইভেন্টে, পাঁচটি বৃহত্তম (লেআউট স্থিতিশীলতার উপর প্রভাব দ্বারা পরিমাপ করা হিসাবে) লেআউট শিফটের উত্সগুলি রিপোর্ট করা হয়েছে। এই তথ্যটি লেআউটশিফটট্রিবিউশন ইন্টারফেস ব্যবহার করে রিপোর্ট করা হয়েছে (নীচে আরও বিশদে ব্যাখ্যা করা হয়েছে)।
`value`	`value` সম্পত্তি একটি নির্দিষ্ট লেআউট শিফটের জন্য লেআউট শিফট স্কোরের প্রতিবেদন করে।
`hadRecentInput`	`hadRecentInput` সম্পত্তিটি নির্দেশ করে যে ব্যবহারকারী ইনপুটটির 500 মিলিসেকেন্ডের মধ্যে কোনও লেআউট শিফট ঘটেছে কিনা।
`startTime`	`startTime` সম্পত্তিটি নির্দেশ করে যখন কোনও লেআউট শিফট ঘটে। `startTime` মিলিসেকেন্ডে নির্দেশিত হয় এবং পৃষ্ঠার লোড শুরু হওয়ার সময়ের তুলনায় পরিমাপ করা হয়।
`duration`	`duration` সম্পত্তি সর্বদা `0` এ সেট করা হবে। এই সম্পত্তিটি `PerformanceEntry` ইন্টারফেস থেকে উত্তরাধিকার সূত্রে প্রাপ্ত হয় ( `LayoutShift` ইন্টারফেসটি `PerformanceEntry` ইন্টারফেসকে প্রসারিত করে)। তবে সময়কালের ধারণাটি লেআউট শিফট ইভেন্টগুলিতে প্রযোজ্য নয়, সুতরাং এটি `0` এ সেট করা আছে। `PerformanceEntry` ইন্টারফেস সম্পর্কিত তথ্যের জন্য, স্পেসটি দেখুন।

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

LayoutShiftAttribution ইন্টারফেসটি একটি একক ডিওএম উপাদানটির একক শিফট বর্ণনা করে। যদি কোনও লেআউট শিফট চলাকালীন একাধিক উপাদান স্থানান্তরিত হয় তবে sources সম্পত্তিটিতে একাধিক এন্ট্রি রয়েছে।

উদাহরণস্বরূপ, নিম্নলিখিত জেএসএন একটি উত্সের সাথে একটি লেআউট শিফটের সাথে মিলে যায়: y: 76 থেকে y:246 থেকে <div id='banner'> ডিওএম উপাদানটির নীচের দিকে শিফট।

// ...
  "sources": [
    {
      "node": "div#banner",
      "previousRect": {
        "x": 311,
        "y": 76,
        "width": 4,
        "height": 18,
        "top": 76,
        "right": 315,
        "bottom": 94,
        "left": 311
      },
      "currentRect": {
        "x": 311,
        "y": 246,
        "width": 4,
        "height": 18,
        "top": 246,
        "right": 315,
        "bottom": 264,
        "left": 311
      }
    }
  ]

node সম্পত্তিটি স্থানান্তরিত এইচটিএমএল উপাদান চিহ্নিত করে। ডেভটুলসে এই সম্পত্তিটিতে ঘোরাফেরা করা সম্পর্কিত পৃষ্ঠা উপাদানটি হাইলাইট করে।

previousRect এবং currentRect বৈশিষ্ট্যগুলি নোডের আকার এবং অবস্থানের প্রতিবেদন করে।

x এবং y সমন্বয়কারীরা উপাদানটির শীর্ষ-বাম কোণার যথাক্রমে এক্স-কো-অর্ডিনেট এবং ওয়াই-সমন্বয় প্রতিবেদন করে
width এবং height বৈশিষ্ট্যগুলি উপাদানটির যথাক্রমে প্রস্থ এবং উচ্চতা রিপোর্ট করে।
top , right , bottom এবং left বৈশিষ্ট্যগুলি উপাদানটির প্রদত্ত প্রান্তের সাথে সম্পর্কিত এক্স বা ওয়াই সমন্বিত মানগুলি প্রতিবেদন করে। অন্য কথায়, top মান y এর সমান; bottom মানটি y+height সমান।

যদি previousRect সমস্ত বৈশিষ্ট্য 0 এ সেট করা থাকে তবে এর অর্থ হ'ল উপাদানটি দৃশ্যে স্থানান্তরিত হয়েছে। যদি currentRect সমস্ত বৈশিষ্ট্য 0 এ সেট করা থাকে তবে এর অর্থ হ'ল উপাদানটি দেখার বাইরে চলে গেছে।

সতর্কতা: লেআউট অস্থিরতা এপিআই স্থানান্তরিত উপাদানগুলিকে উপেক্ষা করে না তবে অন্য উপাদানগুলির সামনে অবস্থিত হওয়ার কারণে দৃশ্যমান ছিল না। display: none , visibility: hidden , বা opacity: 0 আপনি ব্যবহারকারীর কাছে দৃশ্যমান করার আগে কিছু উপাদানগুলিতে লেআউট চালাতে হবে এমন ক্ষেত্রে লেআউট শিফট এড়াতে।

উদাহরণ # 1

উদাহরণ উপাদান মাত্রা পরিবর্তনের কারণে একটি লেআউট শিফট দেখানো হচ্ছে

উদাহরণ #2

উদাহরণ উপাদান অবস্থানের পরিবর্তনের কারণে একটি লেআউট শিফট দেখানো হচ্ছে

উদাহরণ #3

উদাহরণ উপাদান অবস্থানের পরিবর্তনের কারণে একটি লেআউট শিফট দেখানো হচ্ছে

উদাহরণ #4

যদিও উপাদান বি আকার পরিবর্তন করে, এই উদাহরণে কোনও লেআউট শিফট নেই।

উদাহরণ কোনও উপাদান পরিবর্তন করে দেখানো কিন্তু একটি লেআউট শিফট সৃষ্টি করে না

DevTools

কর্মক্ষমতা প্যানেল

লেআউট শিফট অঞ্চলগুলি হাইলাইট করুন

লেআউট শিফটগুলির কারণ চিহ্নিত করার জন্য চিন্তা প্রক্রিয়া

একটি লেআউট শিফটের কারণ চিহ্নিত করুন

লেআউট শিফটগুলি নিম্নলিখিত ইভেন্টগুলির কারণে হতে পারে:

একটি ডোম উপাদান অবস্থানের পরিবর্তন
একটি ডোম উপাদানগুলির মাত্রা পরিবর্তন
একটি ডোম উপাদান সন্নিবেশ বা অপসারণ
অ্যানিমেশনগুলি লেআউট ট্রিগার

পূর্ববর্তী উপাদানগুলির অবস্থান বা মাত্রাগুলি কি পরিবর্তন হয়েছিল?
স্থানান্তরিত উপাদানটির আগে কোনও ডোম উপাদান সন্নিবেশ করা বা সরানো হয়েছিল?
স্থানান্তরিত উপাদানটির অবস্থানটি কি স্পষ্টভাবে পরিবর্তন করা হয়েছিল?

কোনও উপাদানটির অবস্থানে পরিবর্তনগুলি (যা অন্য উপাদানটির চলাচলের কারণে নয়)

এই ধরণের পরিবর্তন প্রায়শই এর ফলাফল:

স্টাইলশিটগুলি যা দেরিতে লোড করা হয় বা পূর্বে ঘোষিত স্টাইলগুলি ওভাররাইট করে।
অ্যানিমেশন এবং রূপান্তর প্রভাব।

একটি উপাদান মাত্রা পরিবর্তন

এই ধরণের পরিবর্তন প্রায়শই এর ফলাফল:

স্টাইলশিটগুলি যা দেরিতে লোড করা হয় বা পূর্বে ঘোষিত স্টাইলগুলি ওভাররাইট করে।
width এবং height ছাড়াই চিত্র এবং আইফ্রেমগুলি তাদের "স্লট" এর পরে লোড করা হয়েছে।
width বা height বৈশিষ্ট্য ছাড়াই পাঠ্য ব্লকগুলি যা পাঠ্যটি রেন্ডার করার পরে ফন্টগুলি অদলবদল করে।

ডোম উপাদানগুলি সন্নিবেশ বা অপসারণ

এটি প্রায়শই এর ফলাফল:

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

অ্যানিমেশনগুলি লেআউট ট্রিগার

লেআউট শিফট পুনরুত্পাদন করুন

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    if (!entry.hadRecentInput) {
      cls += entry.value;
      debugger;
      console.log('Current CLS value:', cls, entry);
    }
  }
}).observe({type: 'layout-shift', buffered: true});