خطایابی تغییرات ناگهانی چیدمان صفحه وب (CLS)

مقدمه‌

قسمت اول این مقاله درباره ابزارهای خطایابی CLS و بخش دوم در مورد ایده هایی برای شناسایی علت این تغییر چیدمان است.

برای رفع تغییرات ناگهانی چیدمان ، ابتدا باید تشخیص دهیم که کدام عناصر باعث ایجاد آن شده اند. برخی از گزارشات مانند CrUX اطلاعات سطح بالایی در مورد Core Web Vitals ارائه می‌دهند و نمی‌توانند اطلاعات دقیقی برای خطایابی در اختیار ما قرار دهند. چندین ابزار اندازه گیری آزمایشگاهی و میدانی وجود دارد که می‌توانیم آنها را با یکدیگر ترکیب کنیم تا بینش بهتری نسبت به خطاهای CLS به دست آوریم.

ابزارهای خطایابی CLS

Layout Instability API

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

API Layout Instability فقط توسط مرورگرهای بر پایه Chromium پشتیبانی می‌شود. در حال حاضر هیچ راهی برای اندازه گیری یا خطایابی CLS در مرورگرهای غیر Chromium وجود ندارد.

استفاده از Layout Instability API

همان قطعه کدی که Cumulative Layout Shift (CLS) را اندازه گیری می‌کند ، می‌تواند برای ابزارهای خطایابی 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 گزارش می‌شود. محتویات ورودی API به این شکل است:

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 است که بیشتر به خطایابی CLS مربوط می‌شود:

ویژگی	توضیحات
sources	این ویژگی عناصر DOM را که در حین تغییر چیدمان حرکت کرده اند ، لیست می‌کند. این آرایه می‌تواند تا پنج منبع را شامل شود. در صورتي كه بيش از پنج عنصر تحت تاثير تغيير چیدمان قرار گيرند ، پنج منبع بزرگتر (كه با تاثير بر پايداري چیدمان اندازه گيري مي شوند) گزارش مي شوند. این اطلاعات با استفاده از رابط LayoutShiftAttribution گزارش می‌شود .
value	این ویژگی نمره تغییر چیدمان را برای یک تغییر چیدمان خاص گزارش می‌دهد.
hadRecentInput	ویژگی hadRecentInput نشان می‌دهد که آیا تغییر چیدمان در 500 میلی ثانیه بعد از تعامل کاربر رخ داده است یا خیر.
startTime	ویژگی startTime نشان می‌دهد که یک تغییر چیدمان چه موقعی رخ داده است. startTime بر حسب میلی ثانیه نشان داده می‌شود و نسبت به زمان شروع بارگذاری صفحه اندازه گیری می‌شود.
duration	این ویژگی از رابط PerformanceEntry به ارث می‌رسد . با این حال ، مفهوم مدت زمان برای رویدادهای تغییر چیدمان کاربرد ندارد ، بنابراین روی 0 تنظیم شده است.

افزونه کروم Web Vitals می‌تواند اطلاعات تغییر طرح را در کنسول ثبت کند. برای فعال کردن این ویژگی ، به Options> Console Logging بروید.

LayoutShiftAttribution

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

به عنوان مثال کد JSON زیر مربوط به یک تغییر طرح با یک منبع است که در آن

// ...
  "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 مختصات گوشه سمت چپ و بالای عنصر نشان می‌دهد
• ویژگی های height وwidth به ترتیب ارتفاع و عرض عنصر مورد نظر را گزارش می‌کنند.
• ویژگیهای top ، right ، bottom و left مقادیر هر یک را با توجه به x, y مشخص می‌کند. به عبارت دیگر ، مقدار top برابر مقدار y است و مقدار bottom برابر مقدار y+height

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

احتیاط : Layout Instability API در حال حاضر عناصری را که تغییر کرده اند اما به دلیل قرار گرفتن عنصر دیگری در جلوی آنها قابل مشاهده نیستند ، نادیده نمی‌گیرد. برای جلوگیری از تغییرات چیدمان قبل از اینکه آنها را برای کاربر قابل مشاهده کنید باید از display: none، visibility: hidden ، یا opacity:0 استفاده کنید.

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

مثال 1 :این تغییر چیدمان با تغییر عنصر B گزارش می‌شود که توسط تغییر اندازه المان A اتفاق افتاده است.

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

مثال 3 : تغییر چیدمان در این مثال با یک منبع گزارش می‌شود: تغییر موقعیت عنصر B.

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

DevTools

پانل Performance

پنجره Experience از پانل DevTools Performance همه تغییرات چیدمانی را که در طول عمر صفحه رخ می‌دهد نمایش می‌دهد – حتی اگر در فاصله 500 میلی ثانیه از تعامل کاربر رخ داده باشد(البته بدون تاثیر در CLS) . حرکت روی یک تغییر طرح چیدمان در پانل Experience عنصر DOM تغییر کرده را برجسته می‌کند.

برای مشاهده اطلاعات بیشتر در مورد تغییر چیدمان، روی تغییر چیدمان کلیک کنید ، سپس کشوی خلاصه را باز کنید. تغییرات در ابعاد عنصر با استفاده از قالب [عرض ، ارتفاع] فهرست شده است. تغییرات موقعیت عنصر با استفاده از قالب [x ، y] فهرست شده است. خاصیت Had recent input نشان می‌دهد که آیا تغییر طرح در فاصله 500 میلی ثانیه از تعامل کاربر رخ داده است یا خیر.

برای اطلاع از مدت زمان تغییر طرح ، برگه Event را باز کنید. مدت زمان تغییر طرح را می‌توان با نگاه کردن به طول مستطیل تغییر شکل چیدمان قرمز در پنجره Experience تقریب زد.

مدت زمان تغییر چیدمان هیچ تاثیری بر نمره تغییر چیدمان ندارد.

مناطق تغییر چیدمان را مشخص کنید

مشخص کردن المان هایی که تغییر چیدمان در آن اتفاق افتاده می‌تواند یک تکنیک مفید برای درک بهتر تغییر چیدمان صفحه است.

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

فرآیند تشخیص علت تغییرات چیدمان

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

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

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

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

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

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

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

مهمترین دلایلی که باعث تغییر چیدمان می‌شوند عبارتند از:

• تغییرات موقعیت یک عنصر (که ناشی از حرکت عنصر دیگر نیست)
• تغییر ابعاد یک عنصر
• درج یا حذف عناصر DOM
• انیمیشن هایی که باعث تغییر می‌شوند

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

این نوع تغییر اغلب ناشی از شیوه نامه هایی هستند که دیر بارگیری می‌شوند یا استایل های اعلام شده قبلی را رونویسی می‌کنند.به علاوه انیمیشن‌ها و افکت ها.

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

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

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

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

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

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

انیمیشن هایی که باعث تغییر می‌شوند

گاهی اوقات افکت ها انیمیشن های CSS باعث ایجاد تغییرات در چیدمان می ‌شوند که بر روی CLS تاثیر منفی می‌گذارد. یک مثال رایج در این مورد زمانی است که عناصر DOM با افزایش خواص مانند top یا left به جای استفاده از ویژگی transform “متحرک” می‌شوند.

بازتولید تغییرات چیدمان

نمی‌توانید تغییرات چیدمانی را که امکان بازتولید (امکان رخ داد مجدد) ندارند بر طرف کنید، یکی از ساده ترین و در عین حال موثرترین کارهایی که می‌توانید برای درک بهتر پایداری طرح سایت خود انجام دهید این است که 5 تا 10 دقیقه با سایت خود تعامل داشته باشید تا بتوانید تغییرات چیدمان متفاوت ایجاد کنید. هنگام انجام این کار ، کنسول را باز نگه دارید و از API Layout Instability برای گزارش تغییرات چیدمان استفاده کنید.

برای یافتن تغییر مکان چیدمان، این تمرین را با دستگاه ها و سرعت اتصال مختلف تکرار کنید. به طور خاص ، استفاده از سرعت اتصال کندتر می‌تواند تشخیص تغییر چیدمان را آسان تر کند. علاوه بر این ، می‌توانید از دستور debugger استفاده کنید تا خطایابی cls برایتان آسان شود.

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});