CLS چیست؟ راهکارهای شناسایی مشکل و بهبود پایداری بصری صفحه

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

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

مفهوم CLS به زبان ساده

گوگل جابجایی‌های ناگهانی در صفحات وب را محاسبه کرده و تحت فاکتوری به نام Cumulative Layout Shift یا همان CLS محاسبه می‌کند. هرچقدر این جابجایی‌ها بیشتر باشند در واقع تجربه کاربر در صفحه بدتر بوده و ثبات بصری پایین است.

اگر این جابجایی‌ها بسیار زیاد باشد (کمی جلوتر تعریف زیاد را هم خواهم گفت) امتیاز سایت شما در زمینه سرعت و تجربه کاربری کاهش خواهد یافت. از طرفی گوگل امروز وسواس زیادی در “تجربه و احساس کاربر” دارد و همین مشکل کوچک می‌تواند بر جایگاه نهایی شما در نتایج جستجو تاثیر منفی داشته باشد.

این فاکتور در کنار LCP و INP سه رکن اصلی از معیارهای محاسبه Core Web Vitals را می‌سازد که برای سنجش سرعت و تجربه کاربری یک صفحه مورد استفاده قرار می‌گیرد.

ابعاد المان و میزان جابجایی معیارهای محاسبه CLS هستند

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

برای محاسبه نهایی CLS گوگل به 2 فاکتور توجه می‌کند:

1- ابعاد المانی که جابجا شده

هرچقدر المانی که جابجا شده (تصویر، متن، آیکون، اصلا هرچی!) بزرگتر باشد تاثیر آن بر عدد نهایی CLS بیشتر است. اگر یک المان 50 درصد از فضای نمایش کاربر (مثلا صفحه موبایل) را اشغال کرده باشد نمره Impact Fraction آن نیز 0.5 در نظر گرفته می‌شود.

2- میزان جابجایی المان

میزان جابجایی (عمودی، افقی یا هردو) فاکتور دوم گوگل برای محاسبه CLS است. اگر یک تصویر به اندازه 0.25 درصد از سایز صفحه نمایش جابجا شود عدد Distance Fraction هم 0.25 خواهد بود.

مقدار نهایی CLS برابر است با ابعاد المان ضربدر میزان جابجایی؛ در مثال بالا 0.5*0.25 = 0.125

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

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

نمره نهایی CLS چطور محاسبه می‌شود؟

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

به همین دلیل مفهوم «Session Window» را تعریف کرد و حالا به جای جمع کل، مجموع پرش‌هایی که در فاصله کمتر از 1 ثانیه رخ می‌دهند را محاسبه می‌کند. یک سشن نهایتا می‌تواند 5 ثانیه طول بکشد.

در مدت حضور کاربر در صفحه و تعامل او با المان‌هایی که در صفحه هستند ممکن است چندین سشن 5 ثانیه‌ای رخ دهد و در نهایت گوگل بالاترین امتیاز ثبت شده برای یک سشن را به عنوان نمره نهایی CLS در نظر می‌گیرد.

نکته بسیار مهم این است که:

گوگل تنها جابجایی‌هایی را در نظر می‌گیرد که جلوی چشم کاربر رخ داده و اگر این تغییرات در پایین صفحه باشد تاثیری روی CLS نهایی ندارد.

در نتیجه؛ تنها ساختار و لود صفحه نیست که این امتیاز را مشخص می‌کند بلکه رفتار کاربر هم در آن تاثیرگذار است. کاربری که سریع اسکرول می‌کند احتمالا امتیاز پایین‌تری برای صفحه شما رقم می‌زند. البته گوگل برای این مشکل هم راهکار دارد و نمره نهایی CLS یک صفحه را براساس رفتار همه کاربران و متوسط امتیاز آنها در طول یک روز و در مجموع 28 روز اخیر لحاظ می‌کند.

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

در مثال دنیای اقتصاد که بالاتر بررسی کردیم با عدد 0.55 که در همان ابتدای صفحه رخ داده می‌توان گفت که قطعا در ناحیه قرمز و وضعیت ضعیف قرار می‌گیریم.

این نکته طلایی را هم در نظر داشته باشید که اگر جابجایی المان‌ها براساس تعامل کاربر با صفحه باشد و زمان آن کمتر از 500 میلی ثانیه باشد، در نمره CLS لحاظ نمی‌شود.

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

مهمترین دلایل ایجاد پرش و بالارفتن CLS

تا اینجا در مورد مفهوم CLS و نحوه محاسبه آن صحبت کردیم ولی سوال اصلی این است که چرا چنین مشکلاتی در سایت ما ایجاد می‌شود. در ادامه مقاله 4 نمونه از رایج‌ترین دلایل بالارفتن CLS را با هم مرور می‌کنیم. به شما اطمینان می‌دهم که در 90 درصد سایت‌هایی که نمره سبز ندارند حداقل یکی از این مشکلات وجود دارد:

1- تصاویر و ویدیوهای بدون ابعاد مشخص

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

وقتی شما ویژگی‌های width و height را در کد HTML قرار نمی‌دهید، مرورگر تا زمانی که فایل تصویر را کاملاً دانلود نکند، نمی‌داند چه فضایی باید به آن اختصاص دهد. در نتیجه ارتفاع صفر را در نظر گرفته و با لود تصویر یا ویدیو المان‌های زیرین به پایین منتقل می‌شوند.

2- تبلیغات، بنرها و پاپآپ‌ها

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

شما باید همیشه یک Placeholder (نگه‌دارنده فضا) با ابعاد مشخص داشته باشید و بهتر است برای باکس‌های تبلیغاتی از min-height در CSS استفاده کنید تا فضا از پیش برای آن‌ها رزرو شده باشد.

3- تاخیر در لود شدن فونت‌ها

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

استفاده از ویژگی font-display: swap در CSS و پیش‌بارگذاری (Preload) فونت‌های حیاتی سایت بهترین راهکار برای جلوگیری از این مشکل است.

تصویر زیر محیط افزونه راکت وردپرس و بخش “پیش بارگذاری” را نشان می‌دهد که به شما اجازه می‌دهد آدرس فایل‌های اصلی فونت خود را وارد کرده و به صورت preload در صفحه فراخوان کنید.

4- تاخیر در فراخوان CSS

برای بهبود سرعت لود صفحات معمولا از تکنیک defer برای فایل‌های CSS استفاده می‌شود. این روش اگرچه به طرز شگفت‌انگیزی سرعت لود را بهبود می‌دهد ولی موجب می‌شود که در ابتدا HTML خالی و بدون دیزاین نمایش داده شده و بعد ساختار کلی و چیدمان صفحه شکل بگیرد.

همین تاخیر در لود CSS موجب می‌شود که شما شاهد پرش‌های زیاد و نمره بالا در CLS شوید. از آنجایی که این تغییرات تنها در بالای صفحه و نگاه اول رخ می‌دهند بهترین راهکار این است که کدهای CSS مربوط به بخش بالای صفحه را defer نکنیم و در ابتدای کدها قرار دهیم.

اگر از وردپرس استفاده می‌کنید پیشنهاد می‌کنم افزونه WP Rocket را تهیه و نصب کنید. این افزونه حتی برای رفع مشکل CSS ابتدای صفحه نیز راه کار داشته و با تنظیماتی مانند تصویر بالا می‌توانید از این ویژگی بهره‌مند شوید.

 

بهترین ابزارها برای اندازه‌گیری و بهبود CLS

هرچند که بیشترین جابجایی‌ها و مشکلات در لود صفحه و در نگاه اول رخ می‌دهند ولی پایداری بصری و جابجایی المان‌ها وابستگی مستقیم به رفتار کاربر در صفحه و تعامل با المان‌های موجود در آن دارد. به همین دلیل ابزارهای Page Speed Insights و Lighthouse نمی‌توانند گزارش دقیقی از مقادیر واقعی CLS به ما ارائه دهند.

بهترین ابزارهایی که می‌توانند در ارزیابی و بهینه‌سازی CLS به ما کمک کنند عبارتند از:

گزارش Core Web Vitals در گوگل سرچ کنسول

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

در واقع به جای آنکه لازم باشد همه صفحات سایت را به صورت دستی بررسی و تحلیل کنیم بهتر است به گزارش Core Web Vitals مراجعه کرده و به سرعت صفحاتی که نیاز به بهبود دارند را شناسایی کنیم.

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

گزارش Performance در Devtools گوگل کروم

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

همچنین با اسکرول در صفحه و تعامل به المان‌های موجود در آن به صورت لحظه‌ای CLS و مقادیر آن محاسبه می‌شود. در نتیجه می‌توان گفت که بهترین ابزار برای ارزیابی یک صفحه و شناسایی مشکلات مربوط به CLS همین گزینه Performance در کروم است.

افزونه WP Rocket در وردپرس

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

سخن پایانی

فراموش نکنید که سرعت سایت تنها به فاکتور CLS وابسته نیست و گاهی بهبود یک فاکتور می‌تواند مشکلاتی را برای فاکتورهای دیگر مانند LCP و INP ایجاد کند. هدف نهایی شما در کنار بهبود سرعت باید تمرکز بر بهینه سازی تجربه کاربر باشد. برای اطلاعات بیشتر و آشنایی با ابزارهای تست سرعت پیشنهاد می‌کنیم مقاله 5 ابزار تست سرعت سایت را مطالعه کنید.

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