طرح‌بندی اشکال‌زدایی تغییر می‌کند

نحوه شناسایی و رفع تغییرات چیدمان را بیاموزید.

Katie Hempenius

Barry Pollard

تاریخ انتشار: 11 مارس 2021، آخرین به روز رسانی: 7 فوریه 2025

بخش اول این مقاله درباره ابزارهایی برای اشکال زدایی تغییرات طرح‌بندی بحث می‌کند، در حالی که بخش دوم فرآیند فکری را که باید هنگام شناسایی علت تغییر طرح مورد استفاده قرار گیرد، مورد بحث قرار می‌دهد.

ابزار سازی

می‌توانید Layout Shifts را با استفاده از Layout Instability API یا با ابزارهایی مانند DevTools که داده‌های این API را در قالبی آسان‌تر خلاصه می‌کند، اشکال‌زدایی کنید.

Layout Instability API

Layout Instability API مکانیزم مرورگر برای اندازه گیری و گزارش تغییرات طرح است. تمام ابزارهای اشکال زدایی تغییرات طرح، از جمله DevTools، در نهایت بر اساس Layout Instability API ساخته شده اند. با این حال، استفاده مستقیم از Layout Instability API به دلیل انعطاف پذیری، یک ابزار اشکال زدایی قدرتمند است.

استفاده

همان قطعه کدی که تغییر چیدمان تجمعی (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 میلی‌ثانیه از ورودی کاربر رخ داده است نادیده می‌گیرد و بنابراین در CLS به حساب نمی‌آید.

اطلاعات مربوط به تغییرات طرح‌بندی با استفاده از ترکیب دو API گزارش می‌شود: رابط‌های LayoutShift و LayoutShiftAttribution . هر یک از این رابط ها با جزئیات بیشتری در بخش های بعدی توضیح داده شده است.

LayoutShift

هر تغییر طرح با استفاده از رابط 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 هستند که بیشترین ارتباط را با اشکال زدایی تغییرات طرح دارند:

LayoutShiftAttribution

رابط LayoutShiftAttribution یک تغییر واحد از یک عنصر DOM را توصیف می کند. اگر چندین عنصر در طول یک تغییر چیدمان جابجا شوند، ویژگی sources حاوی چندین ورودی است.

برای مثال، JSON زیر مربوط به یک تغییر طرح با یک منبع است: تغییر رو به پایین عنصر DOM <div id='banner'> از y: 76 به y:246 .

// ...
  "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 عنصر HTML را که جابجا شده است شناسایی می کند. ماوس روی این ویژگی در DevTools عنصر صفحه مربوطه را برجسته می کند.

ویژگی های previousRect و currentRect اندازه و موقعیت گره را گزارش می کنند.

• مختصات x و y مختصات x و y را به ترتیب گوشه سمت چپ بالای عنصر گزارش می‌کنند.
• ویژگی های width و height به ترتیب عرض و ارتفاع عنصر را گزارش می کنند.
• ویژگی های top ، right ، bottom و left مقادیر مختصات x یا y مربوط به لبه داده شده عنصر را گزارش می کنند. به عبارت دیگر، مقدار top برابر با y است. مقدار bottom برابر با y+height است.

اگر تمام ویژگی های previousRect روی 0 تنظیم شود، به این معنی است که عنصر به نمای تغییر داده شده است. اگر تمام ویژگی های currentRect روی 0 تنظیم شود، به این معنی است که عنصر از دید خارج شده است.

یکی از مهمترین چیزهایی که هنگام تفسیر این خروجی ها باید فهمید این است که عناصر فهرست شده به عنوان منبع ، عناصری هستند که در طول تغییر چیدمان جابه جا می شوند. با این حال، ممکن است این عناصر فقط به طور غیرمستقیم با "علت اصلی" بی ثباتی چیدمان مرتبط باشند. در اینجا چند نمونه آورده شده است.

مثال شماره 1

این تغییر چیدمان با یک منبع گزارش می شود: عنصر B. با این حال، علت اصلی این تغییر طرح، تغییر در اندازه عنصر A است.

مثال شماره 2

تغییر طرح در این مثال با دو منبع گزارش می شود: عنصر A و عنصر B. علت اصلی این تغییر چیدمان، تغییر موقعیت عنصر A است.

مثال شماره 3

تغییر چیدمان در این مثال با یک منبع گزارش می شود: عنصر B. تغییر موقعیت عنصر B منجر به این تغییر طرح شد.

مثال شماره 4

اگرچه اندازه عنصر B تغییر می کند، اما در این مثال تغییری در طرح وجود ندارد.

نمایشی از نحوه گزارش تغییرات DOM توسط Layout Instability API را بررسی کنید.

DevTools

DevTools دارای تعدادی ابزار برای کمک به اشکال زدایی تغییرات طرح است.

پنل عملکرد

نمای سنجه‌های زنده پانل عملکرد به شما امکان می‌دهد با صفحه تعامل داشته باشید و امتیاز CLS را برای شناسایی تعاملاتی که باعث تغییر در طرح‌بندی بزرگ می‌شوند، بررسی کنید.

هنگامی که بتوانید یک تغییر چیدمان را به طور قابل اعتماد بازتولید کنید، می توانید یک ردیابی برای دریافت جزئیات بیشتر انجام دهید:

تغییرات چیدمان در مسیر تغییر چیدمان هایلایت می شوند. خط بنفش به گروه‌های شیفتی تبدیل می‌شود که الماس‌ها تغییرات فردی را در آن خوشه نشان می‌دهند. اندازه الماس متناسب با اندازه شیفت است که به شما امکان می دهد تا در بزرگترین جابجایی ها دقت کنید.

با کلیک بر روی یک شیفت، یک پاپ آپ با انیمیشنی از تغییر نمایش داده می شود و تغییر عناصر به رنگ بنفش برجسته می شود.

علاوه بر این، نمای خلاصه برای رکورد Layout Shift شامل زمان شروع، امتیاز تغییر و همچنین عناصر جابجا شده است. این به ویژه برای دریافت جزئیات بیشتر در مورد مسائل بارگذاری CLS مفید است زیرا به راحتی با نمایه عملکرد بارگذاری مجدد تکرار می شود.

این همچنین به بینش عاملان تغییر چیدمان که در پانل Insights در سمت چپ نمایش داده شده است، پیوند می‌خورد، که کل CLS را در بالا و همچنین دلایل احتمالی تغییر طرح‌بندی را نشان می‌دهد.

برای اطلاعات بیشتر در مورد استفاده از پانل عملکرد ، به مرجع تجزیه و تحلیل عملکرد مراجعه کنید.

مناطق تغییر طرح را برجسته کنید

برجسته کردن مناطق تغییر چیدمان می تواند یک تکنیک مفید برای دریافت احساس سریع و در یک نگاه نسبت به مکان و زمان بندی تغییرات چیدمان در یک صفحه باشد.

برای فعال کردن Layout Shift Regions در DevTools، به Settings > More Tools > Rendering > Layout Shift Regions بروید و سپس صفحه ای را که می خواهید اشکال زدایی کنید، بازخوانی کنید. نواحی تغییر چیدمان به طور مختصر با رنگ بنفش برجسته خواهند شد.

فرآیند فکری برای شناسایی علت تغییر چیدمان

می‌توانید از مراحل زیر برای شناسایی علت تغییر چیدمان استفاده کنید، صرف نظر از اینکه چه زمانی و چگونه تغییر چیدمان رخ می‌دهد. این مراحل را می‌توان با اجرای Lighthouse تکمیل کرد – با این حال، به خاطر داشته باشید که Lighthouse فقط می‌تواند تغییرات طرح‌بندی را که در طول بارگذاری اولیه صفحه رخ داده است، شناسایی کند. علاوه بر این، Lighthouse همچنین فقط می‌تواند پیشنهادهایی برای برخی از دلایل تغییر طرح ارائه دهد - برای مثال، عناصر تصویری که عرض و ارتفاع مشخصی ندارند.

علت تغییر چیدمان را شناسایی کنید

تغییرات چیدمان می تواند ناشی از رویدادهای زیر باشد:

• تغییر در موقعیت یک عنصر DOM
• تغییر در ابعاد یک عنصر DOM
• درج یا حذف یک عنصر DOM
• انیمیشن هایی که طرح بندی را فعال می کنند

به طور خاص، عنصر DOM بلافاصله قبل از عنصر تغییر یافته، عنصری است که به احتمال زیاد در "ایجاد" تغییر طرح نقش دارد. بنابراین، هنگام بررسی چرایی تغییر چیدمان در نظر بگیرید:

• آیا موقعیت یا ابعاد عنصر قبلی تغییر کرده است؟
• آیا یک عنصر DOM قبل از عنصر تغییر یافته درج شده یا حذف شده است؟
• آیا موقعیت عنصر تغییر یافته به صراحت تغییر کرده است؟

اگر عنصر قبلی باعث تغییر چیدمان نشده است، جستجوی خود را با در نظر گرفتن سایر عناصر قبلی و نزدیک ادامه دهید.

علاوه بر این، جهت و فاصله تغییر چیدمان می تواند نکاتی را در مورد علت اصلی ارائه دهد. به عنوان مثال، یک تغییر بزرگ به سمت پایین اغلب نشان‌دهنده درج یک عنصر DOM است، در حالی که تغییر طرح‌بندی ۱ پیکسل یا ۲ پیکسل اغلب نشان‌دهنده استفاده از سبک‌های CSS متضاد یا بارگذاری و استفاده از یک فونت وب است.

اینها برخی از رفتارهای خاصی هستند که اغلب باعث رویدادهای تغییر طرح می شوند:

تغییرات در موقعیت یک عنصر (که به دلیل حرکت عنصر دیگری نیست)

این نوع تغییر اغلب نتیجه موارد زیر است:

• برگه های سبکی که دیر بارگذاری می شوند یا سبک های اعلام شده قبلی را بازنویسی می کنند.
• انیمیشن و جلوه های انتقال.

تغییر در ابعاد یک عنصر

این نوع تغییر اغلب نتیجه موارد زیر است:

• برگه های سبکی که دیر بارگذاری می شوند یا سبک های اعلام شده قبلی را بازنویسی می کنند.
• تصاویر و آیفریم‌های بدون ویژگی width و height که پس از رندر شدن «اسلات» بارگیری می‌شوند.
• بلوک‌های متنی بدون ویژگی‌های width یا height که پس از رندر کردن متن، فونت‌ها را عوض می‌کنند.

درج یا حذف عناصر DOM

این اغلب نتیجه موارد زیر است:

• درج تبلیغات و سایر جاسازی های شخص ثالث.
• درج آگهی ها، هشدارها و مدال ها.
• اسکرول بی نهایت و سایر الگوهای UX که محتوای اضافی را بالاتر از محتوای موجود بارگذاری می کنند.

انیمیشن هایی که طرح بندی را فعال می کنند

برخی از جلوه های انیمیشن می توانند طرح بندی را فعال کنند . یک مثال رایج در این مورد زمانی است که عناصر DOM به جای استفاده از ویژگی transform CSS، با افزایش ویژگی‌هایی مانند top یا left ، «متحرک» می‌شوند. برای اطلاعات بیشتر نحوه ایجاد انیمیشن های CSS با کارایی بالا را بخوانید.

بازتولید تغییرات طرح

شما نمی‌توانید تغییرات طرح‌بندی را که نمی‌توانید بازتولید کنید، اصلاح کنید. یکی از ساده‌ترین و در عین حال مؤثرترین کارهایی که می‌توانید برای درک بهتر از ثبات طرح‌بندی سایت خود انجام دهید، این است که 5 تا 10 دقیقه با سایت خود تعامل داشته باشید و هدف آن تغییر طرح‌بندی باشد. در حین انجام این کار کنسول را باز نگه دارید و از Layout Instability 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});

در نهایت، برای مسائل طرح‌بندی که در توسعه قابل تکرار نیستند، استفاده از Layout Instability API را به همراه ابزار ثبت‌نام frontend انتخابی خود برای جمع‌آوری اطلاعات بیشتر در مورد این مسائل در نظر بگیرید. کد نمونه را برای نحوه ردیابی بزرگترین عنصر تغییر یافته در یک صفحه بررسی کنید.

نحوه شناسایی و رفع تغییرات چیدمان را بیاموزید.

Katie Hempenius

Barry Pollard

تاریخ انتشار: 11 مارس 2021، آخرین به روز رسانی: 7 فوریه 2025

بخش اول این مقاله درباره ابزارهایی برای اشکال زدایی تغییرات طرح‌بندی بحث می‌کند، در حالی که بخش دوم فرآیند فکری را که باید هنگام شناسایی علت تغییر طرح مورد استفاده قرار گیرد، مورد بحث قرار می‌دهد.

ابزار سازی

می‌توانید Layout Shifts را با استفاده از Layout Instability API یا با ابزارهایی مانند DevTools که داده‌های این API را در قالبی آسان‌تر خلاصه می‌کند، اشکال‌زدایی کنید.

Layout Instability API

Layout Instability API مکانیزم مرورگر برای اندازه گیری و گزارش تغییرات طرح است. تمام ابزارهای اشکال زدایی تغییرات طرح، از جمله DevTools، در نهایت بر اساس Layout Instability API ساخته شده اند. با این حال، استفاده مستقیم از Layout Instability API به دلیل انعطاف پذیری، یک ابزار اشکال زدایی قدرتمند است.

استفاده

همان قطعه کدی که تغییر چیدمان تجمعی (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 میلی‌ثانیه از ورودی کاربر رخ داده است نادیده می‌گیرد و بنابراین در CLS به حساب نمی‌آید.

اطلاعات مربوط به تغییرات طرح‌بندی با استفاده از ترکیب دو API گزارش می‌شود: رابط‌های LayoutShift و LayoutShiftAttribution . هر یک از این رابط ها با جزئیات بیشتری در بخش های بعدی توضیح داده شده است.

LayoutShift

هر تغییر طرح با استفاده از رابط 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 هستند که بیشترین ارتباط را با اشکال زدایی تغییرات طرح دارند:

LayoutShiftAttribution

رابط LayoutShiftAttribution یک تغییر واحد از یک عنصر DOM را توصیف می کند. اگر چندین عنصر در طول یک تغییر چیدمان جابجا شوند، ویژگی sources حاوی چندین ورودی است.

برای مثال، JSON زیر مربوط به یک تغییر طرح با یک منبع است: تغییر رو به پایین عنصر DOM <div id='banner'> از y: 76 به y:246 .

// ...
  "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 عنصر HTML را که جابجا شده است شناسایی می کند. ماوس روی این ویژگی در DevTools عنصر صفحه مربوطه را برجسته می کند.

ویژگی های previousRect و currentRect اندازه و موقعیت گره را گزارش می کنند.

• مختصات x و y مختصات x و y را به ترتیب گوشه سمت چپ بالای عنصر گزارش می‌کنند.
• ویژگی های width و height به ترتیب عرض و ارتفاع عنصر را گزارش می کنند.
• ویژگی های top ، right ، bottom و left مقادیر مختصات x یا y مربوط به لبه داده شده عنصر را گزارش می کنند. به عبارت دیگر، مقدار top برابر با y است. مقدار bottom برابر با y+height است.

اگر تمام ویژگی های previousRect روی 0 تنظیم شود، به این معنی است که عنصر به نمای تغییر داده شده است. اگر تمام ویژگی های currentRect روی 0 تنظیم شود، به این معنی است که عنصر از دید خارج شده است.

یکی از مهمترین چیزهایی که هنگام تفسیر این خروجی ها باید فهمید این است که عناصر فهرست شده به عنوان منبع ، عناصری هستند که در طول تغییر چیدمان جابه جا می شوند. با این حال، ممکن است این عناصر فقط به طور غیرمستقیم با "علت اصلی" بی ثباتی چیدمان مرتبط باشند. در اینجا چند نمونه آورده شده است.

مثال شماره 1

این تغییر چیدمان با یک منبع گزارش می شود: عنصر B. با این حال، علت اصلی این تغییر طرح، تغییر در اندازه عنصر A است.

مثال شماره 2

تغییر طرح در این مثال با دو منبع گزارش می شود: عنصر A و عنصر B. علت اصلی این تغییر چیدمان، تغییر موقعیت عنصر A است.

مثال شماره 3

تغییر چیدمان در این مثال با یک منبع گزارش می شود: عنصر B. تغییر موقعیت عنصر B منجر به این تغییر طرح شد.

مثال شماره 4

اگرچه اندازه عنصر B تغییر می کند، اما در این مثال تغییری در طرح وجود ندارد.

نمایشی از نحوه گزارش تغییرات DOM توسط Layout Instability API را بررسی کنید.

DevTools

DevTools دارای تعدادی ابزار برای کمک به اشکال زدایی تغییرات طرح است.

پنل عملکرد

نمای سنجه‌های زنده پانل عملکرد به شما امکان می‌دهد با صفحه تعامل داشته باشید و امتیاز CLS را برای شناسایی تعاملاتی که باعث تغییر در طرح‌بندی بزرگ می‌شوند، بررسی کنید.

هنگامی که بتوانید یک تغییر چیدمان را به طور قابل اعتماد بازتولید کنید، می توانید یک ردیابی برای دریافت جزئیات بیشتر انجام دهید:

تغییرات چیدمان در مسیر تغییر چیدمان هایلایت می شوند. خط بنفش به گروه‌های شیفتی تبدیل می‌شود که الماس‌ها تغییرات فردی را در آن خوشه نشان می‌دهند. اندازه الماس متناسب با اندازه شیفت است که به شما امکان می دهد تا در بزرگترین جابجایی ها دقت کنید.

با کلیک بر روی یک شیفت، یک پاپ آپ با انیمیشنی از تغییر نمایش داده می شود و تغییر عناصر به رنگ بنفش برجسته می شود.

علاوه بر این، نمای خلاصه برای رکورد Layout Shift شامل زمان شروع، امتیاز تغییر و همچنین عناصر جابجا شده است. این به ویژه برای دریافت جزئیات بیشتر در مورد مسائل بارگذاری CLS مفید است زیرا به راحتی با نمایه عملکرد بارگذاری مجدد تکرار می شود.

این همچنین به بینش عاملان تغییر چیدمان که در پانل Insights در سمت چپ نمایش داده شده است، پیوند می‌خورد، که کل CLS را در بالا و همچنین دلایل احتمالی تغییر طرح‌بندی را نشان می‌دهد.

برای اطلاعات بیشتر در مورد استفاده از پانل عملکرد ، به مرجع تجزیه و تحلیل عملکرد مراجعه کنید.

مناطق تغییر طرح را برجسته کنید

برجسته کردن مناطق تغییر چیدمان می تواند یک تکنیک مفید برای دریافت احساس سریع و در یک نگاه نسبت به مکان و زمان بندی تغییرات چیدمان در یک صفحه باشد.

برای فعال کردن Layout Shift Regions در DevTools، به Settings > More Tools > Rendering > Layout Shift Regions بروید و سپس صفحه ای را که می خواهید اشکال زدایی کنید، بازخوانی کنید. نواحی تغییر چیدمان به طور مختصر با رنگ بنفش برجسته خواهند شد.

فرآیند فکری برای شناسایی علت تغییر چیدمان

می‌توانید از مراحل زیر برای شناسایی علت تغییر چیدمان استفاده کنید، صرف نظر از اینکه چه زمانی و چگونه تغییر چیدمان رخ می‌دهد. این مراحل را می‌توان با اجرای Lighthouse تکمیل کرد – با این حال، به خاطر داشته باشید که Lighthouse فقط می‌تواند تغییرات طرح‌بندی را که در طول بارگذاری اولیه صفحه رخ داده است، شناسایی کند. علاوه بر این، Lighthouse همچنین فقط می‌تواند پیشنهادهایی برای برخی از دلایل تغییر طرح ارائه دهد - برای مثال، عناصر تصویری که عرض و ارتفاع مشخصی ندارند.

علت تغییر چیدمان را شناسایی کنید

تغییرات چیدمان می تواند ناشی از رویدادهای زیر باشد:

• تغییر در موقعیت یک عنصر DOM
• تغییر در ابعاد یک عنصر DOM
• درج یا حذف یک عنصر DOM
• انیمیشن هایی که طرح بندی را فعال می کنند

به طور خاص، عنصر DOM بلافاصله قبل از عنصر تغییر یافته، عنصری است که به احتمال زیاد در "ایجاد" تغییر طرح نقش دارد. بنابراین، هنگام بررسی چرایی تغییر چیدمان در نظر بگیرید:

• آیا موقعیت یا ابعاد عنصر قبلی تغییر کرده است؟
• آیا یک عنصر DOM قبل از عنصر تغییر یافته درج شده یا حذف شده است؟
• آیا موقعیت عنصر تغییر یافته به صراحت تغییر کرده است؟

اگر عنصر قبلی باعث تغییر چیدمان نشده است، جستجوی خود را با در نظر گرفتن سایر عناصر قبلی و نزدیک ادامه دهید.

علاوه بر این، جهت و فاصله تغییر چیدمان می تواند نکاتی را در مورد علت اصلی ارائه دهد. به عنوان مثال، یک تغییر بزرگ به سمت پایین اغلب نشان‌دهنده درج یک عنصر DOM است، در حالی که تغییر طرح‌بندی ۱ پیکسل یا ۲ پیکسل اغلب نشان‌دهنده استفاده از سبک‌های CSS متضاد یا بارگذاری و استفاده از یک فونت وب است.

اینها برخی از رفتارهای خاصی هستند که اغلب باعث رویدادهای تغییر طرح می شوند:

تغییرات در موقعیت یک عنصر (که به دلیل حرکت عنصر دیگری نیست)

این نوع تغییر اغلب نتیجه موارد زیر است:

• برگه های سبکی که دیر بارگذاری می شوند یا سبک های اعلام شده قبلی را بازنویسی می کنند.
• انیمیشن و جلوه های انتقال.

تغییر در ابعاد یک عنصر

این نوع تغییر اغلب نتیجه موارد زیر است:

• برگه های سبکی که دیر بارگذاری می شوند یا سبک های اعلام شده قبلی را بازنویسی می کنند.
• تصاویر و آیفریم‌های بدون ویژگی width و height که پس از رندر شدن «اسلات» بارگیری می‌شوند.
• بلوک‌های متنی بدون ویژگی‌های width یا height که پس از رندر کردن متن، فونت‌ها را عوض می‌کنند.

درج یا حذف عناصر DOM

این اغلب نتیجه موارد زیر است:

• درج تبلیغات و سایر جاسازی های شخص ثالث.
• درج آگهی ها، هشدارها و مدال ها.
• اسکرول بی نهایت و سایر الگوهای UX که محتوای اضافی را بالاتر از محتوای موجود بارگذاری می کنند.

انیمیشن هایی که طرح بندی را فعال می کنند

برخی از جلوه های انیمیشن می توانند طرح بندی را فعال کنند . یک مثال رایج در این مورد زمانی است که عناصر DOM به جای استفاده از ویژگی transform CSS، با افزایش ویژگی‌هایی مانند top یا left ، «متحرک» می‌شوند. برای اطلاعات بیشتر نحوه ایجاد انیمیشن های CSS با کارایی بالا را بخوانید.

بازتولید تغییرات طرح

شما نمی‌توانید تغییرات طرح‌بندی را که نمی‌توانید بازتولید کنید، اصلاح کنید. یکی از ساده‌ترین و در عین حال مؤثرترین کارهایی که می‌توانید برای درک بهتر از ثبات طرح‌بندی سایت خود انجام دهید، این است که 5 تا 10 دقیقه با سایت خود تعامل داشته باشید و هدف آن تغییر طرح‌بندی باشد. در حین انجام این کار کنسول را باز نگه دارید و از Layout Instability 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});

در نهایت، برای مسائل طرح‌بندی که در توسعه قابل تکرار نیستند، استفاده از Layout Instability API را به همراه ابزار ثبت‌نام frontend انتخابی خود برای جمع‌آوری اطلاعات بیشتر در مورد این مسائل در نظر بگیرید. کد نمونه را برای نحوه ردیابی بزرگترین عنصر تغییر یافته در یک صفحه بررسی کنید.

نحوه شناسایی و رفع تغییرات چیدمان را بیاموزید.

Katie Hempenius

Barry Pollard

تاریخ انتشار: 11 مارس 2021، آخرین به روز رسانی: 7 فوریه 2025

بخش اول این مقاله درباره ابزارهایی برای اشکال زدایی تغییرات طرح‌بندی بحث می‌کند، در حالی که بخش دوم فرآیند فکری را که باید هنگام شناسایی علت تغییر طرح مورد استفاده قرار گیرد، مورد بحث قرار می‌دهد.

ابزار سازی

می‌توانید Layout Shifts را با استفاده از Layout Instability API یا با ابزارهایی مانند DevTools که داده‌های این API را در قالبی آسان‌تر خلاصه می‌کند، اشکال‌زدایی کنید.

Layout Instability API

Layout Instability API مکانیزم مرورگر برای اندازه گیری و گزارش تغییرات طرح است. تمام ابزارهای اشکال زدایی تغییرات طرح، از جمله DevTools، در نهایت بر اساس Layout Instability API ساخته شده اند. با این حال، استفاده مستقیم از Layout Instability API به دلیل انعطاف پذیری، یک ابزار اشکال زدایی قدرتمند است.

استفاده

همان قطعه کدی که تغییر چیدمان تجمعی (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 میلی‌ثانیه از ورودی کاربر رخ داده است نادیده می‌گیرد و بنابراین در CLS به حساب نمی‌آید.

اطلاعات مربوط به تغییرات طرح‌بندی با استفاده از ترکیب دو API گزارش می‌شود: رابط‌های LayoutShift و LayoutShiftAttribution . هر یک از این رابط ها با جزئیات بیشتری در بخش های بعدی توضیح داده شده است.

LayoutShift

هر تغییر طرح با استفاده از رابط 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 هستند که بیشترین ارتباط را با اشکال زدایی تغییرات طرح دارند:

LayoutShiftAttribution

رابط LayoutShiftAttribution یک تغییر واحد از یک عنصر DOM را توصیف می کند. اگر چندین عنصر در طول یک تغییر چیدمان جابجا شوند، ویژگی sources حاوی چندین ورودی است.

برای مثال، JSON زیر مربوط به یک تغییر طرح با یک منبع است: تغییر رو به پایین عنصر DOM <div id='banner'> از y: 76 به y:246 .

// ...
  "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 عنصر HTML را که جابجا شده است شناسایی می کند. ماوس روی این ویژگی در DevTools عنصر صفحه مربوطه را برجسته می کند.

ویژگی های previousRect و currentRect اندازه و موقعیت گره را گزارش می کنند.

• مختصات x و y مختصات x و y را به ترتیب گوشه سمت چپ بالای عنصر گزارش می‌کنند.
• ویژگی های width و height به ترتیب عرض و ارتفاع عنصر را گزارش می کنند.
• ویژگی های top ، right ، bottom و left مقادیر مختصات x یا y مربوط به لبه داده شده عنصر را گزارش می کنند. به عبارت دیگر، مقدار top برابر با y است. مقدار bottom برابر با y+height است.

اگر تمام ویژگی های previousRect روی 0 تنظیم شود، به این معنی است که عنصر به نمای تغییر داده شده است. اگر تمام ویژگی های currentRect روی 0 تنظیم شود، به این معنی است که عنصر از دید خارج شده است.

یکی از مهمترین چیزهایی که هنگام تفسیر این خروجی ها باید فهمید این است که عناصر فهرست شده به عنوان منبع ، عناصری هستند که در طول تغییر چیدمان جابه جا می شوند. با این حال ، این امکان وجود دارد که این عناصر فقط به طور غیرمستقیم با "علت اصلی" ناپایداری طرح مرتبط باشند. در اینجا چند نمونه آورده شده است.

مثال شماره 1

این تغییر طرح با یک منبع گزارش می شود: عنصر B. با این حال ، علت اصلی این تغییر طرح تغییر در اندازه عنصر A است.

مثال شماره 2

تغییر طرح در این مثال با دو منبع گزارش می شود: عنصر A و عنصر B. علت اصلی این تغییر طرح تغییر در موقعیت عنصر A است.

مثال شماره 3

تغییر طرح در این مثال با یک منبع گزارش می شود: عنصر B. تغییر موقعیت عنصر B منجر به این تغییر طرح شد.

مثال شماره 4

اگرچه عنصر B اندازه را تغییر می دهد ، اما هیچ تغییر طرح در این مثال وجود ندارد.

نسخه ی نمایشی از نحوه گزارش تغییرات DOM توسط API ناپایداری طرح را بررسی کنید.

DevTools

DevTools چندین ابزار برای کمک به تغییر شکل اشکال در طرح ریزی دارد.

پنل عملکرد

نمای معیارهای زنده از پانل عملکرد به شما امکان می دهد با صفحه تعامل داشته باشید و نمره CLS را رصد کنید تا تعامل ایجاد شود و باعث ایجاد گزینه های بزرگ شود.

هنگامی که می توانید یک تغییر چیدمان را قابل اعتماد کنید ، می توانید اثری را برای به دست آوردن جزئیات بیشتر انجام دهید:

شیفت های چیدمان در مسیر شیفت طرح ها برجسته می شوند. گروه های خط بنفش به خوشه های شیفت تغییر می کنند و الماس نشان می دهد که تغییرات فردی در آن خوشه را نشان می دهد. اندازه الماس متناسب با اندازه تغییر است که به شما امکان می دهد در بزرگترین شیفت ها سنگ زنی کنید.

با کلیک بر روی یک شیفت ، پاپ را با یک انیمیشن از تغییر نشان می دهد و عناصر تغییر رنگ بنفش را برجسته می کند.

علاوه بر این ، نمای خلاصه برای رکورد Layout Shift شامل زمان شروع ، نمره تغییر و همچنین عناصر تغییر یافته است. این امر به ویژه برای به دست آوردن جزئیات بیشتر در مورد مسائل Load CLS مفید است زیرا این کار به راحتی با مشخصات عملکرد بارگیری مجدد تکرار می شود.

این همچنین به Culprits Insight Culprits Insight در سمت چپ نشان داده شده است ، که کل CL ها را در بالا نشان می دهد ، و همچنین دلایل ممکن برای تغییر طرح.

برای اطلاعات بیشتر در مورد استفاده از پانل عملکرد ، به مرجع تجزیه و تحلیل عملکرد مراجعه کنید.

مناطق شیفت چیدمان برجسته

برجسته کردن مناطق شیفت چیدمان می تواند یک تکنیک مفید برای به دست آوردن احساس سریع و در یک نگاه برای مکان و زمان تغییر طرح های طرح در یک صفحه باشد.

برای فعال کردن مناطق تغییر چیدمان در DevTools ، به تنظیمات> ابزارهای بیشتر> ارائه> مناطق شیفت چیدمان بروید و سپس صفحه ای را که می خواهید اشکال زدایی کنید ، تازه کنید. مناطقی از تغییر چیدمان به طور خلاصه در بنفش برجسته می شوند.

فرآیند فکر برای شناسایی علت تغییر چیدمان

شما می توانید از مراحل زیر استفاده کنید تا علت تغییر چیدمان را بدون توجه به زمان یا نحوه تغییر طرح بندی مشخص کنید. این مراحل را می توان با استفاده از فانوس دریایی در حال اجرا تکمیل کرد. علاوه بر این ، Lighthouse همچنین فقط می تواند پیشنهاداتی را برای برخی از دلایل تغییر طرح ارائه دهد - به عنوان مثال ، عناصر تصویری که از عرض و ارتفاع صریح برخوردار نیستند.

علت تغییر طرح را مشخص کنید

تغییر طرح می تواند ناشی از وقایع زیر باشد:

• تغییر در موقعیت یک عنصر DOM
• تغییر در ابعاد یک عنصر DOM
• درج یا حذف یک عنصر DOM
• انیمیشن هایی که باعث ایجاد طرح بندی می شوند

به طور خاص ، عنصر DOM بلافاصله قبل از عنصر تغییر یافته عنصری است که به احتمال زیاد در تغییر "ایجاد" طرح بندی نقش دارد. بنابراین ، هنگام بررسی اینکه چرا یک تغییر طرح رخ داده است ، در نظر بگیرید:

• آیا موقعیت یا ابعاد عنصر قبلی تغییر کرده است؟
• آیا یک عنصر DOM قبل از عنصر تغییر یافته درج شده یا حذف شده است؟
• آیا موقعیت عنصر تغییر یافته به صراحت تغییر کرده است؟

اگر عنصر قبلی باعث تغییر چیدمان نمی شود ، با در نظر گرفتن سایر عناصر قبلی و اطراف ، جستجوی خود را ادامه دهید.

علاوه بر این ، جهت و فاصله یک تغییر طرح می تواند نکاتی در مورد علت ریشه ارائه دهد. به عنوان مثال ، یک تغییر بزرگ به سمت پایین غالباً نشانگر درج یک عنصر DOM است ، در حالی که یک تغییر طرح 1 PX یا 2 PX اغلب نشانگر استفاده از سبک های CSS متناقض یا بارگیری و کاربرد یک قلم وب است.

اینها برخی از رفتارهای خاص هستند که بیشتر اوقات باعث ایجاد وقایع تغییر طرح می شوند:

تغییر در موقعیت یک عنصر (که به دلیل حرکت عنصر دیگر نیست)

این نوع تغییر اغلب نتیجه:

• برگه های شیوه ای که اواخر بارگذاری شده اند یا سبک های قبلی را که قبلاً اعلام شده بودند بازنویسی می کنند.
• انیمیشن و جلوه های انتقال.

تغییر در ابعاد یک عنصر

این نوع تغییر اغلب نتیجه:

• برگه های شیوه ای که اواخر بارگذاری شده اند یا سبک های قبلی را که قبلاً اعلام شده بودند بازنویسی می کنند.
• تصاویر و iframes بدون ویژگی های width و height که پس از "شکاف" آنها بارگذاری شده است.
• بلوک های متنی بدون ویژگی های width یا height که فونت ها را پس از ارائه متن تغییر می دهند.

درج یا حذف عناصر DOM

این اغلب نتیجه موارد زیر است:

• درج تبلیغات و سایر جاسازی های شخص ثالث.
• درج آگهی ها ، هشدارها و مدالها.
• پیمایش بی نهایت و سایر الگوهای UX که محتوای اضافی را بالاتر از محتوای موجود بارگیری می کنند.

انیمیشن هایی که باعث ایجاد طرح بندی می شوند

برخی از جلوه های انیمیشن می توانند باعث ایجاد طرح شوند . نمونه بارز این امر زمانی است که عناصر DOM با افزایش خواص مانند top یا left به جای استفاده از خاصیت transform CSS ، "انیمیشن" می شوند. برای اطلاعات بیشتر نحوه ایجاد انیمیشن های 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 ناپایداری طرح بندی یا با ابزار مانند DevTools که داده های این API را با فرمت قابل هضم تر خلاصه می کند ، اشکال زد.

API ناپایداری چیدمان

API ناپایداری طرح مکانیسم مرورگر برای اندازه گیری و گزارش تغییر طرح است. تمام ابزارهای مربوط به اشکال زدایی در طرح های طرح ریزی ، از جمله DevTools ، در نهایت بر اساس API ناپایداری طرح ساخته شده اند. با این حال ، استفاده از API ناپایداری طرح به طور مستقیم یک ابزار اشکال زدایی قدرتمند به دلیل انعطاف پذیری آن است.

استفاده

همان قطعه کد که اندازه گیری تغییر چیدمان تجمعی (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 میلی ثانیه از ورودی کاربر رخ داده است ، نادیده می گیرد و بنابراین به 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 است که بیشتر مربوط به اشکال زدایی در مورد تغییر طرح بندی است:

طرح بندی

رابط LayoutShiftAttribution یک تغییر واحد از یک عنصر DOM را توصیف می کند. اگر چندین عنصر در حین تغییر چیدمان تغییر کند ، خاصیت sources حاوی ورودی های متعدد است.

به عنوان مثال ، JSON زیر با یک تغییر چیدمان با یک منبع مطابقت دارد: تغییر رو به پایین عنصر DOM <div id='banner'> DOM از y: 76 به y:246 .

// ...
  "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 عنصر HTML را که تغییر یافته است مشخص می کند. شناور این ویژگی در DevTools عنصر صفحه مربوطه را برجسته می کند.

خصوصیات previousRect و currentRect اندازه و موقعیت گره را گزارش می کنند.

• مختصات x و y به ترتیب از گوشه بالا سمت چپ عنصر ، x-هماهنگ و y را به ترتیب گزارش می دهند
• خصوصیات width و height به ترتیب عرض و ارتفاع عنصر را گزارش می کند.
• خصوصیات top ، right ، bottom و left مقادیر مختصات x یا y را متناسب با لبه داده شده از عنصر گزارش می دهد. به عبارت دیگر ، مقدار top برابر با y است. مقدار bottom برابر با y+height است.

اگر تمام خصوصیات previousRect روی 0 تنظیم شود ، این بدان معنی است که این عنصر به سمت مشاهده شده است. اگر تمام خصوصیات currentRect روی 0 تنظیم شود ، این بدان معنی است که این عنصر از دید خارج شده است.

یکی از مهمترین مواردی که باید هنگام تفسیر این خروجی ها درک کنید این است که عناصر ذکر شده به عنوان منابع عناصری هستند که در طول تغییر طرح تغییر می کنند. با این حال ، این امکان وجود دارد که این عناصر فقط به طور غیرمستقیم با "علت اصلی" ناپایداری طرح مرتبط باشند. در اینجا چند نمونه آورده شده است.

مثال شماره 1

این تغییر طرح با یک منبع گزارش می شود: عنصر B. با این حال ، علت اصلی این تغییر طرح تغییر در اندازه عنصر A است.

مثال شماره 2

تغییر طرح در این مثال با دو منبع گزارش می شود: عنصر A و عنصر B. علت اصلی این تغییر طرح تغییر در موقعیت عنصر A است.

مثال شماره 3

تغییر طرح در این مثال با یک منبع گزارش می شود: عنصر B. تغییر موقعیت عنصر B منجر به این تغییر طرح شد.

مثال شماره 4

اگرچه عنصر B اندازه را تغییر می دهد ، اما هیچ تغییر طرح در این مثال وجود ندارد.

نسخه ی نمایشی از نحوه گزارش تغییرات DOM توسط API ناپایداری طرح را بررسی کنید.

DevTools

DevTools چندین ابزار برای کمک به تغییر شکل اشکال در طرح ریزی دارد.

پنل عملکرد

نمای معیارهای زنده از پانل عملکرد به شما امکان می دهد با صفحه تعامل داشته باشید و نمره CLS را رصد کنید تا تعامل ایجاد شود و باعث ایجاد گزینه های بزرگ شود.

هنگامی که می توانید یک تغییر چیدمان را قابل اعتماد کنید ، می توانید اثری را برای به دست آوردن جزئیات بیشتر انجام دهید:

شیفت های چیدمان در مسیر شیفت طرح ها برجسته می شوند. گروه های خط بنفش به خوشه های شیفت تغییر می کنند و الماس نشان می دهد که تغییرات فردی در آن خوشه را نشان می دهد. اندازه الماس متناسب با اندازه تغییر است که به شما امکان می دهد در بزرگترین شیفت ها سنگ زنی کنید.

با کلیک بر روی یک شیفت ، پاپ را با یک انیمیشن از تغییر نشان می دهد و عناصر تغییر رنگ بنفش را برجسته می کند.

علاوه بر این ، نمای خلاصه برای رکورد Layout Shift شامل زمان شروع ، نمره تغییر و همچنین عناصر تغییر یافته است. این امر به ویژه برای به دست آوردن جزئیات بیشتر در مورد مسائل Load CLS مفید است زیرا این کار به راحتی با مشخصات عملکرد بارگیری مجدد تکرار می شود.

این همچنین به Culprits Insight Culprits Insight در سمت چپ نشان داده شده است ، که کل CL ها را در بالا نشان می دهد ، و همچنین دلایل ممکن برای تغییر طرح.

برای اطلاعات بیشتر در مورد استفاده از پانل عملکرد ، به مرجع تجزیه و تحلیل عملکرد مراجعه کنید.

مناطق شیفت چیدمان برجسته

برجسته کردن مناطق شیفت چیدمان می تواند یک تکنیک مفید برای به دست آوردن احساس سریع و در یک نگاه برای مکان و زمان تغییر طرح های طرح در یک صفحه باشد.

برای فعال کردن مناطق تغییر چیدمان در DevTools ، به تنظیمات> ابزارهای بیشتر> ارائه> مناطق شیفت چیدمان بروید و سپس صفحه ای را که می خواهید اشکال زدایی کنید ، تازه کنید. مناطقی از تغییر چیدمان به طور خلاصه در بنفش برجسته می شوند.

فرآیند فکر برای شناسایی علت تغییر چیدمان

شما می توانید از مراحل زیر استفاده کنید تا علت تغییر چیدمان را بدون توجه به زمان یا نحوه تغییر طرح بندی مشخص کنید. این مراحل را می توان با استفاده از فانوس دریایی در حال اجرا تکمیل کرد. علاوه بر این ، Lighthouse همچنین فقط می تواند پیشنهاداتی را برای برخی از دلایل تغییر طرح ارائه دهد - به عنوان مثال ، عناصر تصویری که از عرض و ارتفاع صریح برخوردار نیستند.

علت تغییر طرح را مشخص کنید

تغییر طرح می تواند ناشی از وقایع زیر باشد:

• تغییر در موقعیت یک عنصر DOM
• تغییر در ابعاد یک عنصر DOM
• درج یا حذف یک عنصر DOM
• انیمیشن هایی که باعث ایجاد طرح بندی می شوند

به طور خاص ، عنصر DOM بلافاصله قبل از عنصر تغییر یافته عنصری است که به احتمال زیاد در تغییر "ایجاد" طرح بندی نقش دارد. بنابراین ، هنگام بررسی اینکه چرا یک تغییر طرح رخ داده است ، در نظر بگیرید:

• آیا موقعیت یا ابعاد عنصر قبلی تغییر کرده است؟
• آیا یک عنصر DOM قبل از عنصر تغییر یافته درج شده یا حذف شده است؟
• آیا موقعیت عنصر تغییر یافته به صراحت تغییر کرده است؟

اگر عنصر قبلی باعث تغییر چیدمان نمی شود ، با در نظر گرفتن سایر عناصر قبلی و اطراف ، جستجوی خود را ادامه دهید.

علاوه بر این ، جهت و فاصله یک تغییر طرح می تواند نکاتی در مورد علت ریشه ارائه دهد. به عنوان مثال ، یک تغییر بزرگ به سمت پایین غالباً نشانگر درج یک عنصر DOM است ، در حالی که یک تغییر طرح 1 PX یا 2 PX اغلب نشانگر استفاده از سبک های CSS متناقض یا بارگیری و کاربرد یک قلم وب است.

اینها برخی از رفتارهای خاص هستند که بیشتر اوقات باعث ایجاد وقایع تغییر طرح می شوند:

تغییر در موقعیت یک عنصر (که به دلیل حرکت عنصر دیگر نیست)

این نوع تغییر اغلب نتیجه:

• برگه های شیوه ای که اواخر بارگذاری شده اند یا سبک های قبلی را که قبلاً اعلام شده بودند بازنویسی می کنند.
• انیمیشن و جلوه های انتقال.

تغییر در ابعاد یک عنصر

این نوع تغییر اغلب نتیجه:

• برگه های شیوه ای که اواخر بارگذاری شده اند یا سبک های قبلی را که قبلاً اعلام شده بودند بازنویسی می کنند.
• تصاویر و iframes بدون ویژگی های width و height که پس از "شکاف" آنها بارگذاری شده است.
• بلوک های متنی بدون ویژگی های width یا height که فونت ها را پس از ارائه متن تغییر می دهند.

درج یا حذف عناصر DOM

این اغلب نتیجه موارد زیر است:

• درج تبلیغات و سایر جاسازی های شخص ثالث.
• درج آگهی ها ، هشدارها و مدالها.
• پیمایش بی نهایت و سایر الگوهای UX که محتوای اضافی را بالاتر از محتوای موجود بارگیری می کنند.

انیمیشن هایی که باعث ایجاد طرح بندی می شوند

برخی از جلوه های انیمیشن می توانند باعث ایجاد طرح شوند . نمونه بارز این امر زمانی است که عناصر DOM با افزایش خواص مانند top یا left به جای استفاده از خاصیت transform CSS ، "انیمیشن" می شوند. برای اطلاعات بیشتر نحوه ایجاد انیمیشن های 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 ناپایداری طرح را در رابطه با ابزار انتخابی پیش بینی خود برای جمع آوری اطلاعات بیشتر در مورد این موضوعات در نظر بگیرید. کد مثال را برای نحوه ردیابی بزرگترین عنصر تغییر یافته در یک صفحه بررسی کنید.