آیا تا به حال برای شما پیش آمده است که هنگامی که در حال کلیک کردن روی یکی از المان های صفحه هستید، ناگهان المان های صفحه جابجا شوند و به اشتباه روی یک المان دیگر کلیک کرده باشید؟ یا هنگامی که صفحه بارگزاری می شود و شروع به خواندن متن می کنید، ناگهان متن مقداری جابجا شود؟ این سناریو به احتمال زیاد برای همه کاربران وب وجود دارد و مشخص است که برای کاربر آزاردهنده است و حتی ممکن است یک کلیک اشتباه، باعث ایجاد دردسر برای کاربر شود. تغییر layout صفحه Layout Shift نام دارد و از نظر اصول سئو لازم است که به آن توجه ویژه داشت.
در این مقاله در مورد مطالب زیر صحبت شده است:
- CLS چیست؟
- چگونه امتیاز CLS صفحه را اندازه گیری کنیم؟
- چگونه CLS را بهینه کنیم؟
- پرسش های متداول در مورد CLS
برای اینکه در خصوص بهینه کردن صفحات در راستای کاهش layout shift اقدام کنیم، لازم است که ابتدا درک بهتری از CLS و نحوه محاسبه آن داشته باشیم.
CLS چیست؟
CLS مخفف عبارت Cumulative Layout Shift است و برای اندازه گیری Visual Stability استفاده می شود. پارامتر CLS در حقیقت صفحه را از نظر جابجایی layout بررسی می کند و امتیاز آن بیانگر میزان جابجایی و ابعاد المان هایی است که در viewport جابجا می شوند. طبق استاندارد کنونی Core Web Vitals گوگل، امتیاز CLS کوچکتر مساوی 0.1، در محدوده سبز و امتیاز بین 0.1 تا 0.25 در محدوده زرد و امتیاز بزرگتر از 0.25 در محدوه قرمز خواهد بود.
در محاسبه CLS، المان هایی که 500 میلی ثانیه پس از تعامل کاربر با صفحه مانند کلیک روی یک لینک، تپ روی یک دکمه و یا تایپ در سرچ باکس جابجا می شوند در نظر گرفته می شود.
25٪ از امتیاز پرفورمنس در لایت هاوس متعلق به CLS است. 75 درصد باقیمانده بین Time To First Byte، LCP، Speed Index و First Contentful Paint تقسیم می شود.
در گذشته CLS به جمع کل layout shift ها اطلاق می شد ولی اکنون امتیاز CLS بر اساس بزرگترین layout shift محاسبه می شود.
جهت کسب اطلاعات بیشتر در مورد Core Web Vitals، نوشته LCP و FID و CLS در Web Vitals را مطالعه بفرمایید.
محاسبه امتیاز layout shift بر اساس ابعاد viewport و میزان حرکت المنت ها بین دو فریم رندر شده انجام می شود. در نهایت، امتیاز layout shift بر اساس دو معیار impact fraction و distance fraction محاسبه خواهد شد. در خصوص این دو معیار در ادامه توضیح داده شده است.
Layout shift score = impact fraction * distance fractionImpact fraction چیست؟
معیار impact fraction به مجموع مساحت قابل مشاهده صفحه در viewport که جابجایی داشتند، در قبل و بعد از جابجایی گفته می شود.
در تصویر زیر، المانی که layout shift داشته، مساحتی معادل 50٪ از صفحه را شامل می شود و پس اینکه معادل 25٪ از ارتفاع صفحه به پایین شیفت می شود، در نهایت 75٪ از صفحه تحت تاثیر layout shift قرار می گیرد. بنابراین impact fraction معادل 0.75 خواهد بود.
Distance fraction چیست؟
معیار distance fraction به میزان جابجایی المان در viewport نسبت به خود viewport اطلاق می شود. به عبارت دیگر، distance fraction بزرگترین جابجایی المان (افقی یا عمودی) تقسیم بر بزرگترین ضلع viewport (عرض یا ارتفاع) گفته می شود.
در نمونه تصویر زیر، بزرگترین ضلع viewport، ارتفاع بوده و المان به میزان 25٪ از ارتفاع جابجا شده است که به معنی این است که distance fraction معادل 0.25 است.
در نمونه بالا، impact fraction برابر با 0.75 و distance fraction برابر با 0.25 بود. بنابراین امتیاز layout shift معادل با 0.1875 خواهد بود.
Layout shift score = 0.75 * 0.25 = 0.1875نمونه دوم برای درک بهتر روش محاسبه layout shift
جهت درک بیشتر نحوه محاسبه layout shift، یک نمونه دیگر در تصویر زیر نمایش داده شده است. در این نمونه، دکمه Click me به رنگ نارنجی بعد از گذشت 500 میلی ثانیه به صفحه اضافه شده و محتوای با پس زمینه سبز را به پایین حرکت داده، به نحوی که مقداری از المان سبز رنگ به خارج از viewport رانده شده است.
در نمونه بالا، از آنجایی که دکمه Click me از ابتدا در DOM نبوده، در نتیجه موقعیت شروع حرکت آن از قبل مشخص نبوده و مبنای محاسبه همان نقطه ای است که در حال حاضر دکمه در آن نمایش داده شده است و جابجایی نیز برای آن در نظر گرفته نمی شود.
قسمت به رنگ سبز نیز که مساحت معادل 50٪ از viewport را تشکیل داده است، به میزان 14٪ از ارتفاع viewport به پایین حرکت کرده است. بنابراین محاسبه layout shift نمونه بالا به این صورت خواهد بود:
Layout shift score = 0.50 * 0.14 = 0.07نمونه سوم برای درک بهتر روش محاسبه layout shift
در نمونه سوم، پس از اینکه نام تعدادی حیوان از سرور خوانده شد، در بین محتوای کنونی صفحه وارد شده که باعث سه layout shift در صفحه شده است.
با توجه به تصویر زیر، اولین آیتم در لیست که “Cat” است، هیچ جابجایی نداشته است و بقیه آیتم هایی که به لیست اضافه شده اند نیز از آنجایی که از قبل در DOM وجود نداشتند، هیچ پوزیشن شروعی نداشتند و صرفا سه آیتم “Dog” و “Horse” و “Zebra” که از قبل در DOM وجود داشتند، دارای پوزیشن شروع بودند و در نتیجه در محاسبه امتیاز layout shift محاسبه خواهند شد.
در این نمونه، سه المان صفحه به میزان 60% از ارتفاع viewport به سمت پایین حرکت کرده اند و بنابراین impact fraction برابر با 0.6 خواهد بود. همان طور که گفته شد، در محاسبه layout shift، بزرگترین جابجایی در نظر گرفته می شود و در نمونه بالا، فلش آبی رنگ از دو فلش قرمز و بنفش بزرگتر بوده و معادل 30% از صفحه است. بنابراین distance fraction برابر با 0.3 خواهد بود. در نتیجه امتیاز layout shift به صورت زیر محاسبه می شود:
Layout shift score = 0.60 * 0.30 = 0.18همه layout shift ها بد نیستند. layout shift هایی برای کاربر آزاردهنده هستند که کاربر انتظار آنها را نداشته باشد و یا اینکه بیش از 500 میلی ثانیه پس از تعامل کاربر با صفحه ادامه داشته باشند.
تعاملاتی مانند اسکرول کردن، drag، زوم کردن و pinch در محاسبه CLS در نظر گرفته نمی شوند.
چگونه امتیاز CLS صفحه را اندازه گیری کنیم؟
روش های گوناگونی برای اندازه گیری امتیاز CLS به صورت Lab data (اندازه گیری به کمک ابزار) و به صورت Field data (نمایش میانگین امتیاز CLS در مرورگر کاربران) وجود دارد. در گزارش Core Web Vitals گوگل سرچ کنسول اطلاعات LCP و CLS و INP نمایش داده می شود و اطلاعات آن از سرور Chrome User Experience (CrUX) گوگل فراخوانی می شود. مبنای محاسبات اطلاعات این گزارش، میانگین اطلاعاتی است که از مرورگر گوگل کروم کاربران به دست آمده است و بنابراین، این نوع اطلاعات به عنوان field data شناخته می شود.
ابزار PageSpeed Insights امتیاز CLS را هم به صورت field data نمایش می دهد و هم توسط لایت هاوس در همان لحظه CLS را اندازه گیری می کند و امتیاز lab data آن را نیز به شما نمایش می دهد.
شناسایی layout shift توسط گزارش performance در DevTools گوگل کروم
ابتدا با فشار دادن دکمه های Control+Shift+C یا دکمه F12 در ویندوز، لینوکس و کروم OS، یا با فشار دادن دکمه های Command+Option+C در سیستم عامل مک، DevTools گوگل کروم را باز کنید و روی تب Performance کلیک کنید. سپس با کلیک بر روی آیکون رفرش در تب performance و یا از طریق میانبر Ctrl+Shift+E صفحه را رفرش کنید. پس از پایان فرایند بروزرسانی صفحه می‌توانید میزان Layout shift ایجاد شده در viewport را مشاهده و آن را بررسی نمایید.
با توجه به تصویر زیر، گزارش Performance در DevTools مرورگر گوگل کروم اطلاعات layout shift هایی که در صفحه اتفاق افتاده است را نمایش می دهد.
در گزارش پرفورمنس، viewport مورد بررسی قرار می گیرد. بنابراین دقت داشته باشید که اگر عرض صفحه مرورگر را تغییر دهید، و یا DevTools در پایین یا طرفین صفحه در حال نمایش باشد و باعث کوچک شدن viewport شده باشد، دقیقا همان viewport قابل رویت، بررسی خواهد شد. اگر قصد داشتید پرفورمنس یک صفحه را در حالت دسکتاپ بررسی کنید، DevTools را با توجه به تصویر زیر از تب مرورگر جدا کنید.
چگونه CLS را بهینه کنیم؟
پس از شناسایی دلایل layout shift در صفحه، نوبت به برطرف کردن آنها می رسد. مشخص نبودن ابعاد عکس یا ویدیو برای مرورگر، تبلیغات، embed ها، انیمیشن ها و وب فونت ها از رایج ترین دلایل layout shift هستند که در ادامه در مورد آنها توضیح داده شده است.
عکس ها یا ویدیوهایی که ابعاد آنها مشخص نباشد
هنگامی که مرورگر قصد رندر کردن صفحات را دارد، اگر ابعاد عکس یا ویدیو را نداند، قادر به در نظر گرفتن فضایی برای عکس یا ویدیو در حین محاسبه layout shift نخواهد بود و در نتیجه layout را بدون در نظر گرفتن عکس یا ویدیو محاسبه کرده و بقیه محتوا را رندر می کند و هر زمان که عکس یا ویدیو دانلود شد، ابعاد آن را متوجه شده و پس از تغییر layout shift، علاوه بر رندر عکس یا ویدیو مورد نظر، المان هایی که نیاز به جابجایی دارند را دوباره رندر می کند.
تلاش کنید همیشه از اتریبیوت های width و height برای نمایش عکس یا ویدیو در صفحه استفاده کنید.
همان طور که در نمونه زیر مشاهده می کنید، ابعادی که در تگ <img> استفاده شده اند، بدون واحد هستند. در واقع ابعاد یاد شده توسط مرورگر به صورت پیشفرض با واحد پیکسل در نظر گرفته می شوند.
<img src="seo-book.jpg" width="640" height="360" alt="An SEO book on the shelf">بسیاری از برنامه نویسان در طراحی responsive از CSS برای ریسایز تصاویر استفاده می کنند که از نظر CLS کار صحیحی نیست.
اگر مانند نمونه زیر از width و height در تگ <img> استفاده نشود و به جای آن از CSS استفاده شود، مرورگر تا زمانی که شروع به دانلود عکس یا ویدیو نکرده باشد و از ابعاد عکس مطلع نشده باشد، نمی تواند layout را محاسبه کند و هر زمان که ابعاد المان را متوجه شد، مجدد باید layout را تغییر دهد تا عکس یا ویدیو را در صفحه رندر کند.
img {
width: 100%; /* or max-width: 100%; */
height: auto;
}هنگامی که مرورگر از عرض و ارتفاع عکس مطلع باشد، aspect ratio آنها را محاسبه کرده و بر اساس آن می تواند layout صفحه را محاسبه کند. به عنوان نمونه، عکس زیر دارای aspect ratio برابر با 640:360 و یا 16:9 است
<!-- aspect ratio 640:360 or 16:9 -->
<img src="seo-book.jpg" width="640" height="360" alt="An SEO book on the shelf">مرورگرهای مطرح مانند همه مرورگرهای بر پایه Chromium و مرورگر سافاری (به جز مرورگر فایرفاکس) صرف نظر از تعریف aspect ratio توسط کاربر، به صورت مستقل aspect ratio تصاویر را محاسبه می کنند.
تبلیغات، embed ها و هر گونه محتوایی که با تاخیر بارگزاری شوند
هر گونه محتوایی مانند تبلیغات و embed ها (مانند iframe) که با کمی تاخیر در صفحه بارگزاری می شوند، می توانند باعث layout shift شده و روی امتیاز CLS تاثیر منفی بگذارند. برای جلوگیری از این مسئله، یکی از راهکارهای موثر این است که ارتفاع و فضای کافی جهت نمایش المانی که قرار است با تاخیر بارگزاری شود را در صفحه بگذاریم تا هر زمان المان مربوطه دانلود شد، در فضای اختصاص یافته به خودش نمایش داده شود و منجر به layout shift نشود.
تلاش کنید محتواهایی که با تاخیر نمایش داده می شوند را در above the fold صفحه نمایش ندهید و یا در صورت نیاز به نمایش آنها (مانند پیغام نصب اپلیکیشن)، تا جای ممکن آن را در پایین viewport نمایش دهید که تاثیر کمتری در امتیاز CLS داشته باشد.
انیمیشن هایی که باعث re-layout می شوند
اگر قصد داشتن انیمیشن در صفحه را دارید، مطمئن باشید که در هنگام انیمیت شدن یک المان در صفحه، layout shift یا re-layout اتفاق نیفتد. به عنوان نمونه box-shadow و box-sizing می تواند باعث re-layout شود ولی CSS property هایی مانند transform می تواند جهت translate، rotate، scale و skew استفاده شوند و باعث re-layout و layout shift نیز نشوند.
پرسش های متداول در مورد CLS
خیر. معیار CLS بدون واحد اندازه گیری است و صرفا بر اساس میزان جابجایی و ابعاد جابجایی المان های صفحه نسبت به ابعاد viewport محاسبه می شود.
بله. صرف نظر از مدت زمان باز بودن صفحه، کلیه تعاملات با صفحه در محاسبه امتیاز CLS در نظر گرفته می شود. به عبارت دیگر، محاسبه CLS در کل lifespan صفحه انجام می شود.
بله، امتیاز CLS به عنوان یکی از پارامتر های Core Web Vitals بر روی سیگنال User Experience تاثیر دارد و بنابراین در رتبه بندی گوگل در نظر گرفته می شود.
بله، در صورتی که از جاوا اسکریپتی استفاده شود که باعث ایجاد تغییر در layout صفحه و یا re-layout شود، روی امتیاز CLS تاثیر می گذارد.
بله، هنگامی که وب فونت با تاخیر بارگزاری شود و متن صفحه با فونت fallback رندر شده باشد و پس از بارگزاری وب فونت، متن صفحه دوباره با وب فونت اصلی رندر شود، در صورتی که ارتفاع یا پهنای دو فونت fallback و وب فونت اصلی با یکدیگر متفاوت باشد، layout shift رخ خواهد داد.
بله، هر چه رسپانس تایم سرور بهتر باشد، ریسورس های صفحه مانند فایل های CSS، JS، عکس ها و غیره سریعتر دانلود می شوند و در نتیجه تاثیر مثبت روی CLS خواهد داشت.
🔗 منبع: Google Developers
