CLS چیست؟ چگونه Cumulative Layout Shift را کاهش دهیم؟

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

گوگل برای ارزیابی کیفیت تجربه کاربران از مجموعه‌ای از معیارها با عنوان Core Web Vitals استفاده می‌کند. یکی از مهم‌ترین معیارها Cumulative Layout Shift (CLS) یا میزان جابه‌جایی تجمعی چیدمان صفحه است.

بالا بودن CLS باعث می‌شود کاربران هنگام مطالعه یا تعامل با وب‌سایت دچار سردرگمی شوند. همین موضوع نرخ پرش (Bounce Rate) را افزایش داده، زمان حضور کاربران را کاهش می‌دهد و در نهایت می‌تواند روی عملکرد وب‌سایت در نتایج جستجوی گوگل تاثیر منفی بگذارد.

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

#CLS چیست؟

Cumulative Layout Shift یکی از سه معیار اصلی Core Web Vitals است که میزان پایداری بصری صفحات وب‌سایت را اندازه‌گیری می‌کند.

به زبان ساده CLS مشخص می‌کند که عناصر صفحه هنگام بارگذاری تا چه اندازه بدون درخواست کاربر جابه‌جا می‌شوند. هرچه این جابه‌جایی کمتر باشد تجربه کاربری بهتر خواهد بود.

فرض کنید وارد یک فروشگاه اینترنتی شده‌اید. قصد دارید روی دکمه «افزودن به سبد خرید» کلیک کنید اما درست قبل از کلیک یک بنر تبلیغاتی بارگذاری می‌شود و دکمه به پایین منتقل می‌شود. در نتیجه روی گزینه دیگری کلیک می‌کنید.

این دقیقاً همان مشکلی است که CLS آن را اندازه‌گیری می‌کند.

#چرا گوگل به CLS اهمیت می‌دهد؟

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

اگر صفحه دائماً در حال تغییر باشد:

• کاربر سردرگم می‌شود.

• احتمال کلیک اشتباه افزایش پیدا می‌کند.

• اعتماد کاربران کاهش می‌یابد.

• تجربه کاربری ضعیف‌تر می‌شود.

به همین دلیل CLS از سال 2021 به یکی از فاکتورهای رسمی رتبه‌بندی گوگل تبدیل شد.

#Cumulative Layout Shift چگونه محاسبه می‌شود؟

گوگل برای اندازه‌گیری CLS از دو پارامتر اصلی استفاده می‌کند.

Impact Fraction: مشخص می‌کند چه مقدار از صفحه در اثر جابه‌جایی عناصر تغییر کرده است. هرچه بخش بیشتری از صفحه حرکت کند، امتیاز CLS افزایش پیدا می‌کند.

Distance Fraction: این معیار نشان می‌دهد عناصر چه مقدار از محل اولیه خود فاصله گرفته‌اند. حرکت‌های کوچک معمولاً امتیاز کمی ایجاد می‌کنند، اما جابه‌جایی‌های بزرگ باعث افزایش شدید CLS خواهند شد.

#فرمول کلی CLS

CLS = Impact Fraction × Distance Fraction

البته توسعه‌دهندگان معمولاً نیازی به محاسبه دستی این مقدار ندارند زیرا ابزارهای گوگل این عدد را به‌صورت خودکار نمایش می‌دهند.

#مقدار مناسب CLS چقدر است؟

گوگل سه بازه برای این معیار در نظر گرفته است.

طبق مستندات web.dev، بهتر است حداقل 75 درصد بازدیدهای واقعی کاربران امتیازی کمتر از 0.1 داشته باشند. این موضوع اهمیت داده‌های واقعی کاربران را نسبت به تست‌های آزمایشگاهی نشان می‌دهد.

#چگونه CLS را کاهش دهیم؟

کاهش CLS معمولاً نیازمند تغییرات پیچیده نیست. در بسیاری از مواقع رعایت چند اصل ساده در طراحی و توسعه وب‌سایت می‌تواند امتیاز این شاخص را به شکل محسوسی بهبود دهد. در ادامه مهم‌ترین راهکارهای کاهش Cumulative Layout Shift را بررسی می‌کنیم.

#برای تصاویر همیشه ابعاد مشخص تعیین کنید

رایج‌ترین علت افزایش CLS، بارگذاری تصاویری است که عرض (Width) و ارتفاع (Height) مشخصی ندارند.

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

#بهترین روش

همیشه برای تصاویر از ویژگی‌های Width و Height استفاده کنید یا با CSS نسبت تصویر را مشخص کنید.

این کار باعث می‌شود مرورگر قبل از بارگذاری تصویر فضای موردنیاز را رزرو کند و دیگر شاهد جابه‌جایی صفحه نباشید.

#فضای تبلیغات را از قبل رزرو کنید

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

#چگونه این مشکل را برطرف کنیم؟

• برای هر بنر تبلیغاتی ارتفاع ثابتی در نظر بگیرید.

• از حذف یا اضافه شدن ناگهانی تبلیغات جلوگیری کنید.

• حتی اگر تبلیغ نمایش داده نشود، فضای آن را حفظ کنید.

این روش باعث می‌شود محتوای اصلی صفحه ثابت باقی بماند.

#فونت‌های وب را بهینه کنید

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

#راهکارهای پیشنهادی

#استفاده از font-display

ویژگی font-display: swap باعث می‌شود متن سریع‌تر نمایش داده شود و تغییرات ظاهری کاهش پیدا کند.

#Preload کردن فونت‌ها

اگر فونت‌های اصلی را Preload کنید مرورگر آن‌ها را زودتر دانلود می‌کند و احتمال ایجاد CLS کمتر می‌شود.

#محتوای جدید را بالای صفحه اضافه نکنید

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

#راهکار بهتر

اگر قصد نمایش چنین عناصری را دارید:

• از Overlay استفاده کنید.

• یا فضای آن را از ابتدا در صفحه رزرو کنید.

#از Lazy Load به‌درستی استفاده کنید

بارگذاری تنبل تصاویر یکی از بهترین روش‌های افزایش سرعت وب‌سایت است اما اگر به‌درستی پیاده‌سازی نشود می‌تواند CLS را افزایش دهد.

به‌عنوان مثال اگر تصویر هیچ ارتفاع مشخصی نداشته باشد هنگام نمایش باعث جابه‌جایی صفحه خواهد شد. بنابراین Lazy Load باید همراه با تعیین ابعاد تصویر استفاده شود.

#اندازه ویدئوها و iframeها را مشخص کنید

ویدئوهای آپارات، یوتیوب، نقشه گوگل یا سایر iframeها نیز باید فضای مشخصی داشته باشند. اگر این عناصر بدون ارتفاع مشخص بارگذاری شوند احتمال ایجاد Layout Shift بسیار زیاد است.

#انیمیشن‌های مناسب استفاده کنید

برخی انیمیشن‌ها باعث تغییر موقعیت عناصر صفحه می‌شوند.

برای مثال استفاده از ویژگی‌هایی مانند:

• Width

• Height

• Margin

• Top

• Left

ممکن است CLS ایجاد کند.

در مقابل استفاده از ویژگی‌هایی مانند:

Transform

Opacity

معمولاً باعث جابه‌جایی صفحه نمی‌شود و گزینه مناسب‌تری است.

#جمع‌بندی

Cumulative Layout Shift (CLS) یکی از مهم‌ترین معیارهای Core Web Vitals است که میزان پایداری بصری صفحات وب را اندازه‌گیری می‌کند. هرچه عناصر صفحه هنگام بارگذاری کمتر جابه‌جا شوند تجربه کاربری بهتر خواهد بود و کاربران راحت‌تر با وب‌سایت تعامل خواهند کرد.

مهم‌ترین دلایل افزایش CLS عبارت‌اند از تصاویر بدون ابعاد مشخص، تبلیغات داینامیک، فونت‌های وب، اسکریپت‌های غیربهینه و بارگذاری نامناسب المان‌های پویا. خوشبختانه با رعایت اصولی مانند تعیین ابعاد تصاویر، رزرو فضای تبلیغات، بهینه‌سازی فونت‌ها، استفاده صحیح از Lazy Load و بررسی مداوم وب‌سایت با ابزارهای گوگل می‌توان این شاخص را تا حد زیادی بهبود داد.

اگر هدف شما افزایش رضایت کاربران و بهبود سئوی فنی وب‌سایت است بهینه‌سازی CLS نباید یک اقدام مقطعی باشد بلکه بهتر است به بخشی از فرآیند دائمی نگهداری و توسعه وب‌سایت تبدیل شود.