17خرداد

معیار تغییر تجمعی چیدمان (CLS) چیست؟

خرداد 17, 1400 نویسنده آوین آویسا

آیا تا به حال مقاله‌ای را به صورت آنلاین خوانده‌اید که ناگهان چیزی در صفحه تغییر کند؟ بدون هشدار، متن حرکت می‌کند و مکان مطلبی که در حال مطالعه بودید، تغییر می‌کند. یا حتی بدتر: شما در حال ضربه زدن روی یک پیوند یا یک دکمه هستید، اما بلافاصله قبل از فرود آمدن انگشت خود – BOOM – پیوند حرکت می‌کند، و در آخر بر روی چیز دیگری کلیک می‌کنید! معیار تغییر تجمعی چیدمان (CLS) به ما کمک می‌کند تا این مشکل را بررسی و حل نماییم.

بیشتر اوقات این نوع تجربه ها فقط آزاردهنده هستند، اما در بعضی موارد می‌توانند آسیب واقعی ایجاد کنند.

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

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

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

معیار تغییر تجمعی چیدمان (CLS) چیست؟

CLS معیاری برای بزرگترین تغییرات طرح برای هر تغییر طرح غیر منتظره است که در کل طول عمر یک صفحه رخ می‌دهد.

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

شیفت‌های طرح‌بندی، که به عنوان پنجره جلسه (session window) شناخته می‌شود، زمانی است که یک یا چند تغییر چیدمان منفرد به صورت پی در پی و با کمتر از 1 ثانیه در هر شیفت و حداکثر 5 ثانیه برای کل مدت پنجره اتفاق می‌افتد.

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

امتیاز مناسب برای معیار تغییر تجمعی چیدمان (CLS) چیست؟

برای ارائه یک تجربه کاربری خوب، سایت‌ها باید تلاش کنند که نمره ۰.۱ یا کمتر داشته باشند. برای اطمینان از رسیدن به این هدف برای بیشتر کاربران، یک آستانه خوب برای اندازه‌گیری، رسیدن به این آستانه در ۷۵ درصد بار بارگیری صفحه است که در دستگاه‌های تلفن همراه و دسکتاپ اتفاق می‌افتد.

جزییات تغییرات چیدمان

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

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

امتیاز تغییر چیدمان

برای محاسبه نمره تغییر طرح، مرورگر به اندازه Viewport و حرکت عناصر ناپایدار در Viewport بین دو فریم ارائه شده نگاه می‌کند. نمره تغییر طرح نتیجه ضرب دو اندازه‌گیری از آن حرکت است: نسبت تأثیر و نسبت فاصله (هر دو در زیر تعریف شده اند).

<span style="font-family: Liberation Mono, serif; color: #000000;"><span lang="en-US"><code class="western"><span lang="fa-IR">layout shift score = impact fraction * distance fraction</span></code></span></span>

1	<span style="font-family: Liberation Mono, serif; color: #000000;"><span lang="en-US"><code class="western"><span lang="fa-IR">layout shift score = impact fraction * distance fraction</span></code></span></span>

نسبت تاثیر

نسبت تاثیر چگونگی تأثیر عناصر ناپایدار بر فضای نمای بین دو قاب را اندازه می‌گیرد.

اجتماع مناطق قابل مشاهده برای همه عناصر ناپایدار برای قاب قبلی و قاب فعلی – به عنوان کسری از کل مساحت viewport – نسبت ضربه برای قاب فعلی است.

در تصویر بالا عنصری وجود دارد که نیمی از نمای در یک قاب را اشغال می‌کند. سپس، در فریم بعدی، عنصر 25٪ از ارتفاع viewport به سمت پایین حرکت می‌کند. مستطیل قرمز نشانگر اجتماع ناحیه قابل مشاهده عنصر در هر دو قاب است که در این حالت 75٪ کل viewport است، بنابراین نسبت تأثیر آن 0.75 است.

نسبت فاصله

قسمت دیگر معادله نمره تغییر طرح، فاصله‌ای را که عناصر ناپایدار نسبت به viewport حرکت کرده‌اند را اندازه‌گیری می‌کند. نسبت فاصله بزرگترین مسیری است که هر عنصر ناپایداری در قاب حرکت کرده است (به صورت افقی یا عمودی) تقسیم بر بزرگترین بعد viewport (عرض یا ارتفاع، هر کدام که بیشتر باشد).

مثال ۱:

در مثال بالا، بزرگترین بعد viewport ارتفاع است و عنصر ناپایدار ۲۵٪ از ارتفاع viewport حرکت کرده است که نسبت فاصله را ۰.۲۵ می‌کند. بنابراین، در این مثال نسبت ضربه ۰.۷۵ و نسبت فاصله ۰.۲۵ است، بنابراین نمره تغییر طرح ۰.۷۵ * ۰.۲۵ = ۰.۱۸۷۵ است.

مثال ۲:

مثال بعدی نشان می‌دهد که چگونه افزودن محتوا به یک عنصر موجود روی امتیاز تغییر طرح تأثیر می‌گذارد:

دکمه “Click Me!” در انتهای جعبه خاکستری با متن سیاه اضافه شده است، که جعبه سبز با متن سفید را به پایین (و تا حدی خارج از نمای نمایشگر) حرکت می‌دهد.

در این مثال، جعبه خاکستری تغییر اندازه می‌دهد، اما موقعیت آغازین آن تغییر نمی‌کند بنابراین عنصر ناپایداری نیست.

دکمه “Click Me!” قبلا در DOM نبود، بنابراین موقعیت آغازین آن نیز تغییر نمی‌کند.

موقعیت آغازین جعبه سبز تغییر می‌کند، اما از آنجایی که قسمتی از قسمت دید خارج شده است، هنگام محاسبه نسبت ضربه، منطقه پنهان‌شده در نظر گرفته نمی‌شود. اجتماع نواحی قابل‌مشاهده برای جعبه سبز در هر دو قاب (با مستطیل قرمز نشان داده شده است) همان مساحت جعبه سبز در قاب اول است – ۵۰٪ viewport. نسبت ضربه ۰.۵ است.

نسبت فاصله با فلش بنفش نشان داده شده است. جعبه سبز حدود ۱۴٪ از viewport به سمت پایین حرکت کرده بنابراین کسر فاصله ۰.۱۴ است.

نمره تغییر طرح ۰.۱۴ *۰.۵ = ۰.۰۷ است.

مثال ۳:

مثال بعدی چندین عنصر ناپایدار را نشان می‌دهد:

در اولین قاب بالا، چهار نتیجه درخواست API برای حیوانات وجود دارد که به ترتیب حروف الفبا مرتب شده‌اند. در فریم دوم، نتایج بیشتری به لیست مرتب‌شده اضافه می‌شوند.

اولین مورد در لیست (“Cat“) موقعیت آغازین خود را بین قاب‌ها تغییر نمی‌دهد، بنابراین پایدار است. به همین ترتیب، موارد جدید اضافه شده به لیست قبلاً در DOM نبودند، بنابراین موقعیت‌های آغازین آن‌ها نیز تغییر نمی‌کند. اما مواردی با برچسب “Dog” ،“Horse” و “Zebra” همه موقعیت‌های آغازین خود را تغییر می‌دهند و آن‌ها را به عناصر ناپایدار تبدیل می‌‌شوند.

مجدداً، مستطیل‌های قرمز نشان‌دهنده اجتماع این سه عنصر ناپایدار در مناطق قبل و بعد از آن است که در این حالت حدود ۳۸٪ viewport (نسبت تأثیر ۰.۳۸) است.

پیکان‌ها فاصله‌هایی را نشان می‌دهند که عناصر ناپایدار از موقعیت آغازین خود حرکت کرده‌اند. عنصر “Zebra” ، که با پیکان آبی نشان داده شده است، با حدود ۳۰٪ حرکت در ارتفاع viewport، بیشترین حرکت را داشته است. در نتیجه، نسبت فاصله در این مثال ۰.۳ است.

نمره تغییر طرح ۰.۳ * ۰.۳۸ = ۰.۱۱۷۲ است.

تغییرات چیدمان قابل‌پیش‌بینی در مقابل غیرقابل‌ پیش‌‌بینی

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

چیدمانی که توسط کاربر تغییر می‌کند

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

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

شیفت‌های چیدمانی که در فاصله 500 میلی ثانیه از ورودی کاربر رخ می‌دهد، دارای پرچم hadRecentInput می‌باشد، بنابراین می‌توان آن‌ها را از محاسبات خارج کرد.

انیمیشن و انتقال

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

ویژگی transform در CSS به شما امکان می‌دهد تا عناصر را جابجا کنید بدون اینکه تغییراتی در طرح ایجاد کنید:

به جای تغییر خصوصیات ارتفاع و عرض، از transform: scale () استفاده کنید.
برای جابجایی عناصر به اطراف، از تغییر خصوصیات بالا، راست، پایین یا چپ خودداری کنید و به جای آن از transform: translate () استفاده کنید.

تغییر تجمعی چیدمان (CLS) چگونه اندازه‌گیری می‌شود؟

CLS را می‌توان در آزمایشگاه یا به طور عملیاتی اندازه‌گیری کرد. ابزارهای زیر در دسترس هستند:

ابزار عملیاتی:

ابزار آزمایشگاهی:

اندازه‌گیری CLS در جاوااسکریپت

برای اندازه‌گیری CLS در JavaScript، می توانید از Layout Instability API استفاده کنید. مثال زیر نحوه ایجاد یک PerformanceObserver را نشان می‌دهد که ورودی‌های غیر منتظره layout-shift را گوش می‌دهد، آن‌ها را در جلسات گروه‌بندی می‌کند و هر زمان تغییر کند حداکثر مقدار جلسه را ثبت می‌کند.

let clsValue = 0;
let clsEntries = [];
let sessionValue = 0;
let sessionEntries = [];
new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    // Only count layout shifts without recent user input.
    if (!entry.hadRecentInput) {
      const firstSessionEntry = sessionEntries[0];
      const lastSessionEntry = sessionEntries[sessionEntries.length - 1];
      // If the entry occurred less than 1 second after the previous entry and
      // less than 5 seconds after the first entry in the session, include the
      // entry in the current session. Otherwise, start a new session.
      if (sessionValue &&
          entry.startTime - lastSessionEntry.startTime < 1000 &&
          entry.startTime - firstSessionEntry.startTime < 5000) {
        sessionValue += entry.value;
        sessionEntries.push(entry);
      } else {
        sessionValue = entry.value;
        sessionEntries = [entry];
      }
      // If the current session value is larger than the current CLS value,
      // update CLS and the entries contributing to it.
      if (sessionValue > clsValue) {
        clsValue = sessionValue;
        clsEntries = sessionEntries;
        // Log the updated value (and its entries) to the console.
        console.log('CLS:', clsValue, clsEntries)
      }
    }
  }
}).observe({type: 'layout-shift', buffered: true});

let clsValue = 0;

let clsEntries = [];

let sessionValue = 0;

let sessionEntries = [];

new PerformanceObserver((entryList) => {

for (const entry of entryList.getEntries()) {

// Only count layout shifts without recent user input.

if (!entry.hadRecentInput) {

const firstSessionEntry = sessionEntries[0];

const lastSessionEntry = sessionEntries[sessionEntries.length - 1];

// If the entry occurred less than 1 second after the previous entry and

// less than 5 seconds after the first entry in the session, include the

// entry in the current session. Otherwise, start a new session.

if (sessionValue &&

entry.startTime - lastSessionEntry.startTime < 1000 &&

entry.startTime - firstSessionEntry.startTime < 5000) {

sessionValue += entry.value;

sessionEntries.push(entry);

} else {

sessionValue = entry.value;

sessionEntries = [entry];

}

// If the current session value is larger than the current CLS value,

// update CLS and the entries contributing to it.

if (sessionValue > clsValue) {

clsValue = sessionValue;

clsEntries = sessionEntries;

// Log the updated value (and its entries) to the console.

console.log('CLS:', clsValue, clsEntries)

}

}).observe({type: 'layout-shift', buffered: true});

در بیشتر موارد، مقدار فعلی CLS در زمان بارگیری صفحه، مقدار نهایی CLS برای آن صفحه است، اما چند استثنا مهم وجود دارد:

در بخش زیر تفاوت بین گزارش های API و نحوه محاسبه معیار ذکر شده است.

تفاوت‌های بین معیار و API

اگر صفحه‌ای در پس‌زمینه بارگیری می شود یا قبل از اینکه مرورگر هر محتوایی را ارائه کند، پس‌زمینه دارد، نباید هیچ مقدار CLS را گزارش کند.
هنگام بازگرداندن صفحه از کش بک/ فرانت، مقدار CLS آن باید به صفر برسد زیرا کاربران این کار را به عنوان یک بازدید متمایز از صفحه تجربه می‌کنند.
API، ورودی‌هایی را که درون iframes رخ می‌دهند گزارش نمی‌کند، اما برای اندازه‌گیری صحیح CLS باید آنها را در نظر بگیرید. فریم‌های فرعی می‌توانند با استفاده از API ورودی‌های layout-shift خود را برای تجمیع در فریم والد گزارش دهند.

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

کاربران ممکن است یک تب را برای مدت زمان طولانی – روزها، هفته‌ها، ماه‌ها – باز نگه دارند. در واقع، یک کاربر ممکن است هرگز یک تب را نبندد.
در سیستم عامل‌های تلفن همراه، مرورگرها معمولاً برگشت بارگیری صفحه را برای تب‌های پس‌زمینه اجرا نمی‌کنند، بنابراین گزارش نمره “نهایی” دشوار است.

برای رسیدگی به چنین مواردی، CLS باید هر زمان که یک صفحه پس‌زمینه است هم گزارش شود – علاوه بر هر زمان بارگیری آن (رویداد visibilitychange هر دو سناریو را پوشش می‌دهد). سپس سیستم‌های تحلیلی دریافت‌کننده این داده‌ها باید مقدار CLS نهایی را در قسمت بک‌اند محاسبه کنند.

توسعه‌دهندگان به جای اینکه همه این تفاوت‌های ظریف را بخاطر بسپارند، می‌توانند برای اندازه‌گیری CLS از کتابخانه جاوا اسکریپت web-vitals استفاده کنند که این اختلافات را برای شما کنترل می‌کند (در صورت امکان).

import {getCLS} from 'web-vitals';
// Measure and log CLS in all situations
// where it needs to be reported.
getCLS(console.log);

import {getCLS} from 'web-vitals';

// Measure and log CLS in all situations

// where it needs to be reported.

getCLS(console.log);

نحوه بهینه‌سازی CLS

درمقاله جداگانه با جزییات تمام نحوه بهینه‌سازی CLS شرح داده شده است.

منبع:

https://web.dev/cls/

ادامه مطلب

25اردیبهشت

بهینه‌سازی معیار تغییر تجمعی چیدمان (CLS)

اردیبهشت 25, 1400 نویسنده آوین آویسا

«قصد داشتم روش کلیک کنم چرا تکون خورد!؟» تغییر چیدمان می تواند توجه کاربران را منحرف کند. تصور کنید خواندن یک مقاله را شروع کرده اید، هنگامی که عناصر در اطراف صفحه به طور ناگهانی تغییر مکان می‌دهند ، حواس شما را پرت می‌کنند و شما مجبور خواهید شد دوباره مکان قبلی در مقاله را پیدا کنید. این مورد در وب بسیار رایج است، از جمله هنگام خواندن اخبار، یا تلاش برای کلیک کردن روی آن دکمه های “جستجو” یا “افزودن به سبد خرید“. چنین تجاربی از نظر بصری گیج‌کننده و ناامیدکننده است. این عوامل اغلب هنگامی ایجاد می شوند که عناصر قابل مشاهده مجبور به حرکت شوند زیرا عنصر دیگری ناگهان به صفحه اضافه شده یا تغییر اندازه داده‌اند. بهینه‌سازی معیار تغییر تجمعی چیدمان (CLS) این مشکل را برطرف خواهد کرد.

Cumulative Layout Shift (CLS)، یک معیار Core Web Vital، بی‌ثباتی بصری محتوا را با جمع کردن تغییرات چیدمان که بعد از 500 میلی ثانیه پس از ورود کاربر رخ می‌دهد را اندازه گیری می کند. این موضوع به بررسی میزان تغییر محتوای قابل مشاهده در ویوپورت و همچنین تغییر فاصله عناصر تأثیرگذار می پردازد.

شایعترین دلایل CLS ضعیف عبارتند از:

تصاویر بدون ابعاد
تبلیغات، جاسازی‌ها و فریم‌های بدون ابعاد.
محتوای ورودی پویا.
فونت‌های وب که باعث ایجاد FOIT / FOUT می‌شوند.
اقدامات منتظر پاسخ شبکه قبل از به روزرسانی DOM.

تصاویر بدون ابعاد

ویژگی‌های اندازه عرض و ارتفاع را همیشه روی تصاویر و عناصر ویدئویی خود قرار دهید. روش جایگزین این است که می‌توانید فضای مورد نیاز خود را با جعبه های نسبت CSS ذخیره کنید. این روش تضمین می کند که مرورگر می‌تواند مقدار صحیح فضا را هنگام بارگیری تصویر اختصاص دهد.

تاریخچه:

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

<img src="puppy.jpg" width="640" height="360" alt="Puppy with balloons" />

1	<img src="puppy.jpg" width="640" height="360" alt="Puppy with balloons" />

ممکن است متوجه شده باشید که عرض و ارتفاع بالا شامل واحد نمی شوند. این ابعاد “پیکسل” باعث می شوند یک منطقه 640×360 رزرو شود. تصویر متناسب با این فضا صرف نظر از اینکه ابعاد واقعی با هم مطابقت دارند یا نه، کشیده خواهد شد.

با طراحی رسپانسیو وب، توسعه‌دهندگان شروع به حذف عرض و ارتفاع کردند به استفاده از CSS برای تغییر اندازه تصاویر رو آوردند:

img {
  width: 100%; /* or max-width: 100%; */
  height: auto;

img {

width: 100%; /* or max-width: 100%; */

height: auto;

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

اینجا بود که نسبت ابعاد وارد شدند. نسبت ابعاد تصویر نسبت عرض به ارتفاع آن است. معمولا این نسبت را به صورت دو عدد که با دو نقطه از هم جدا شده اند مشاهده می‌کنید (به عنوان مثال 16: 9 یا 4: 3). برای نسبت ابعاد x: y، تصویر x واحد عرض و y واحد ارتفاع است.

این بدان معناست که اگر یکی از ابعاد را بدانیم، می‌توان بعد دیگر را نیز تعیین کرد. دانستن نسبت ابعاد به مرورگر این امکان را می‌دهد تا فضای کافی برای ارتفاع و مساحت مربوطه را محاسبه و ذخیره کند.

بهترین و مدرن‌ترین روش

در حال حاضر، مرورگرهای مدرن نسبت ابعاد پیش فرض تصاویر را بر اساس ویژگی‌های عرض و ارتفاع تصویر تنظیم می‌کنند، بنابراین تنظیم آن‌ها برای جلوگیری از تغییر چیدمان ارزشمند است. با تشکر از گروه کاری CSS، توسعه‌دهندگان فقط باید عرض و ارتفاع را به صورت عادی تنظیم کنند:

<!-- set a 640:360 i.e a 16:9 - aspect ratio -->
<img src="puppy.jpg" width="640" height="360" alt="Puppy with balloons" />

1 2	<!-- set a 640:360 i.e a 16:9 - aspect ratio --> <img src="puppy.jpg" width="640" height="360" alt="Puppy with balloons" />

… و همه مرورگرها نسبت ابعادی پیش‌فرض را بر اساس ویژگی‌های عرض و ارتفاع موجود اضافه می‌کنند:

img {
  aspect-ratio: attr(width) / attr(height);
}

img {

aspect-ratio: attr(width) / attr(height);

}

این نسبت ابعاد را بر اساس ویژگی‌های عرض و ارتفاع قبل از بارگیری تصویر محاسبه می‌کند. این اطلاعات را در ابتدای محاسبه طرح ارائه می دهد. به محض اینکه گفته می‌شود یک عکس عرض مشخصی دارد (به عنوان مثال عرض: 100٪)، از نسبت ابعاد برای محاسبه ارتفاع استفاده می‌شود.

اگر تصویر شما در یک کانتینر است، می‌توانید با استفاده از CSS اندازه تصویر را به عرض این کانتینر تغییر دهید و ارتفاع به صورت خودکار تنظیم می‌شود، این کار برای جلوگیری از ثابت بودن ارتفاع تصویر (به عنوان مثال 360 پیکسل) اتفاق می‌افتد.

img {
  height: auto;
  width: 100%;
}

img {

height: auto;

width: 100%;

}

اما چه اتفاقی برای عکس‌های رسپانسیو می‌افتد؟

هنگام کار با تصاویر رسپانسیو، با ویژگی srcset به مرورگر اجازه می دهید بین عکس‌ها و اندازه‌ آن‌ها انتخاب کند. برای اطمینان از تنظیم ویژگی‌های عرض و ارتفاع، هر تصویر باید از همان نسبت تصویر استفاده کند.

<img
  width="1000"
  height="1000"
  src="puppy-1000.jpg"
  srcset="puppy-1000.jpg 1000w, puppy-2000.jpg 2000w, puppy-3000.jpg 3000w"
  alt="Puppy with balloons"
/>

<img

width="1000"

height="1000"

src="puppy-1000.jpg"

srcset="puppy-1000.jpg 1000w, puppy-2000.jpg 2000w, puppy-3000.jpg 3000w"

alt="Puppy with balloons"

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

آگهی‌ها

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

در طول چرخه حیات تبلیغات، بسیاری از عوامل می‌توانند باعث تغییر چیدمان شوند:

وقتی سایتی کانتینر تبلیغ را در DOM وارد می‌کند.
وقتی سایز تبلیغات را با کد اولیه تغییر اندازه می‌دهد.
هنگامی که کتابخانه برچسب تبلیغات بارگیری می شود (و کانتینر تبلیغ را تغییر می‌دهد).
هنگامی که آگهی یک کانتینر را پر می کند (و اگر آگهی نهایی دارای اندازه دیگری باشد اندازه آن تغییر می‌کند).

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

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

Embeds and iframes

ابزارک های قابل‌جاسازی به شما امکان می‌دهند محتوای قابل حمل (portable) وب را در صفحه خود جاسازی کنید (به عنوان مثال فیلم از YouTube، نقشه‌های Google Maps ، پست‌های رسانه‌های اجتماعی و غیره). این جاسازی‌ها می‌توانند انواع مختلفی داشته باشند:

فال‌بک HTML و یک برچسب جاوا اسکریپت.
قطعه درون خطی HTML.
iframe تعبیه شده.

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

برای حل این مسئله، می توانید CLS را با پیش محاسبه فضای کافی برای جاسازی با یک مکان ذخیره یا جایگزین به حداقل برسانید و باعث بهینه‌سازی معیار تغییر تجمعی چیدمان (CLS) شوید:

با ابزار بازرسی (inspecting) از طریق ابزارهای توسعه دهنده مرورگر، ارتفاع جاسازی نهایی خود را بدست آورید.
پس از بارگیری جاسازی، iframe موجود تغییر اندازه داده و متناسب می شود.

محتوای پویا

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

احتمالاً شما هنگام بارگیری سایتی با نمایش پاپ آپ‌ها، تغییر چیدمان را تجربه کرده‌اید. مشابه تبلیغات، این اغلب در مورد بنرها و فرم‌هایی اتفاق می‌افتد که بقیه محتوای صفحه را جابجا می‌کنند:

“در خبرنامه ما ثبت نام کنید!”.
“مطالب مرتبط“.
“برنامه [آی او اس / اندروید] ما را نصب کنید“.
“ما هنوز سفارش می‌گیریم“.
“اعلامیه GDPR”.

اگر نیاز به نمایش این نوع پیام‌ها در رابط کاربری دارید، از قبل فضای کافی برای نمایش، حفظ کنید تا هنگام بارگیری، باعث تغییر چیدمان در صفحه نشود.

Web fonts causing FOUT/FOIT

بارگیری و نمایش فونت‌های وب می‌تواند باعث تغییر طرح‌بندی به دو روش شود:

فونت جایگزین با یک فونت جدید عوض می‌شود (FOUT).
متن “نامرئی” نمایش داده می‌شود تا زمانی که قلم جدید نمایش داده شود (FOIT).

ابزارهای زیر می‌توانند در به حداقل رساندن این مورد و بهینه‌سازی معیار تغییر تجمعی چیدمان (CLS) به شما کمک کنند:

font-display به شما امکان می‌دهد رفتار رندر فونت‌های سفارشی را با مقادیری مانند auto، swap، block ، fallback و optional تغییر دهید. متأسفانه، همه این مقادیر (به استثنای اختیاری) می توانند به یکی از روش های فوق باعث طرح بندی مجدد شوند.
Font Loading API می تواند زمان لازم برای دریافت فونت های لازم را کاهش دهد.

منبع:

https://web.dev/optimize-cls/

ادامه مطلب

CLS

معیار تغییر تجمعی چیدمان (CLS) چیست؟

معیار تغییر تجمعی چیدمان (CLS) چیست؟

امتیاز مناسب برای معیار تغییر تجمعی چیدمان (CLS) چیست؟

جزییات تغییرات چیدمان

امتیاز تغییر چیدمان

نسبت تاثیر

نسبت فاصله

مثال ۱:

مثال ۲:

مثال ۳:

چیدمانی که توسط کاربر تغییر می‌کند

انیمیشن و انتقال

تغییر تجمعی چیدمان (CLS) چگونه اندازه‌گیری می‌شود؟

تفاوت‌های بین معیار و API

نحوه بهینه‌سازی CLS

بهینه‌سازی معیار تغییر تجمعی چیدمان (CLS)

تصاویر بدون ابعاد

تاریخچه:

بهترین و مدرن‌ترین روش

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

آگهی‌ها

​Embeds and iframes

محتوای پویا

​Web fonts causing FOUT/FOIT

Embeds and iframes

Web fonts causing FOUT/FOIT