مهار لرزش چیدمان و شاخص CLS با تکنیک‌های فرانت‌اند بدون صفحه‌ساز
تجربه اعصاب‌خردکن کلیک اشتباه: شاخص CLS چه چیزی را می‌سنجد؟
حتماً برای شما هم پیش آمده که وارد سایتی شده‌اید، خواسته‌اید روی یک لینک کلیک کنید، اما ناگهان کل صفحه به پایین جهیده و دست شما روی یک دکمه یا تبلیغ ناخواسته خورده است. این پرش‌های ناگهانی المان‌ها یکی از آزاردهنده‌ترین تجربیات کاربران در وب است.
گوگل با معرفی شاخص پایداری بصری یا CLS (تغییر چیدمان تجمعی)، وب‌سایت‌هایی که در حین بارگذاری دچار لرزش و پرش می‌شوند را شناسایی و امتیاز آن‌ها را کسر می‌کند.
شاخص CLS سرعت دانلود را اندازه نمی‌گیرد، بلکه پایداری هندسی المان‌ها روی نمایشگر را در زمان باز شدن برگه قضاوت می‌کند.
ریشه‌های فنی پرش صفحه حین بارگذاری
مرورگر برای چیدن المان‌ها نیاز دارد ابعاد دقیق هر بخش را بداند. وقتی مرورگر متنی را رندر می‌کند و ناگهان یک عکس بدون اندازه دانلود می‌شود، مرورگر مجبور است متن را با شتاب به پایین هل دهد تا جا برای عکس باز شود.
این جابه‌جایی‌های ناگهانی، امتیاز لرزش چیدمان را بالا برده و نمره عملکرد صفحه را خراب می‌کند.
- تصاویر و ویدیوهای بدون ابعاد: عدم درج ویژگی‌های طول و عرض (width و height) در کدهای HTML.
- فونت‌های وب و جابه‌جایی بصری: پدیده تغییر فونت موقت سیستمی به فونت اختصاصی که ابعاد حروف متفاوتی دارد.
- بنرهای تبلیغاتی و اطلاعیه‌ها: تزریق کادرهای تخفیف بالای صفحه پس از لود کامل متن.
- المان‌های تعاملی پویا: اضافه شدن فرم‌ها یا پنجره‌های پاپ‌آپ بدون رزرو قبلی فضا در کدهای استایل.
راه‌حل قطعی برای تصاویر و رسانه‌ها: رزرو نسبت تصویر
ساده‌ترین و کارآمدترین ترفند برای صفر کردن لرزش ناشی از تصاویر، درج ویژگی‌های صریح عرض و ارتفاع روی تگ‌های تصویر است. مرورگر با دیدن این ابعاد، نسبت تصویر (Aspect Ratio) را محاسبه کرده و پیش از دانلود بایت‌های عکس، فضای خالی آن را در صفحه رزرو می‌کند.
به این ترتیب، وقتی عکس دانلود شد، در جای خالی از پیش رزروشده می‌نشیند و حتی یک پیکسل جابه‌جایی در متن‌های مجاور رخ نخواهد داد.
در طراحی مدرن با تیل‌ویند، استفاده از کلاس‌هایی نظیر aspect-video یا aspect-[4/5] تضمین می‌کند که فضا پیش از بارگذاری عکس قفل شده باشد.
مهار لرزش فونت با فونت‌های سیستمی هم‌اندازه
وقتی فونت اختصاصی شما لود می‌شود، اگر ضخامت و عرض حروف آن با فونت موقت سیستم تفاوت داشته باشد، کل پاراگراف‌ها چند میلیمتر جابه‌جا می‌شوند. با تکنیک‌های پیش‌بارگذاری (preload) فونت در هدر، فونت اصلی را قبل از پردازش متن در حافظه قرار دهید.
همچنین کادرهای بنر بالای سایت را با ارتفاع ثابت تعریف کنید تا متن‌های پایینی را هل ندهند.
دستور اقدام عملی
صفحه اصلی سایت را در ابزار PageSpeed Insights تحلیل کنید و بخش Cumulative Layout Shift را بازبینی کنید. اگر عدد این شاخص بالای ۰.۱ است، لیست المان‌های جابه‌جا شده را چک کنید و ابعاد عرض و ارتفاع را روی تگ‌های آن المان‌ها در کدهای قالب ست کنید.