CLS چیست و چه تاثیری بر سئو سایت دارد؟

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

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

این مثال‌ها، بیانگر CLS ضعیف وبسایت است، یکی از فاکتورهای رتبه‌بندی گوگل که از سال ۲۰۲۱ بسیار مورد توجه متخصصان سئو قرار گرفته است.

 

CLS چیست؟

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

CLS یکی از اصول مهم هسته حیاتی گوگل (Core Web Vital) است. همانطور که می‌دانید تجربه کاربری یکی از فاکتورهایی است که برای موتور جستجوی گوگل از اهمیت بسیار بالایی برخوردار است و رعایت نشدن آن در وبسایت باعث افت رتبه و حتی پنالتی شدن سایت خواهد شد.
بنابراین نه تنها CLS بلکه هر عامل دیگری که بتواند UX یا تجربه‌ی کاربری بازدیدکنندگان سایت را بهبود دهد، می‌تواند به صورت مستقیم یا غیرمستقیم وضعیت سئو سایت شما را بهبود دهد.

 

---

پیشنهاد می‌شود برای آشنایی بیشتر با مفهوم Core web vital و سایر اصول آن، حتما این مقاله را مطالعه بفرمایید: “Core web vitals چیست؟+راهنمای جامع بهینه سازی معیارها برای سئو سایت“

---

 

نحوه اندازه گیری CLS

دو روش برای اندازه گیری CLS وجود دارد: گوگل نخستین روش را in the Lab و دومین روش را in the Field نامیده است.

روش اول یا in the Lab : در این روش، تجربه کاربری در یک محیط کنترل شده شبیه‌سازی می‌شود. یکی از ابزارهای محبوب در این روش، Google chrome’s Developer Tools است.

روش In the field : این روش بر تعاملات کاربر واقعی با سایت متمرکز است. بهترین ابزار برای اندازه‌گیری CLS وبسایت استفاده از ابزار PageSpeed Insights است.

 

 

اندازه استاندارد CLS

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

 

CLS های خوب

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

اما اگر تغییر طرح‌بندی توسط کاربر آغاز شده و وی در آن دخیل باشد، باید آن را یک فاکتور مثبت در نظر بگیریم.

در واقع این کاربر است که با تغییر، به طور مثال اسکرول کردن، کلیک روی یک لینک و غیره اطلاعات بیشتری به دست می‌آورد.

 

علت افزایش CLS چیست چه طور آن را کم کنیم ؟

به گفته گوگل پنج دلیل عمده باعث رخ دادن CLS می‌شود:

1. تصاویر بدون ابعاد صحیح
2. تبلیغات و آی فریم‌های بدون ابعاد
3. محتوای پویا از فاکتورهای رتبه بندی سئو بر مبنایCLS
4. فونت‌های وب که موجبFOIT یا FOUT شوند
5. اقدامات در انتظار پاسخ شبکه پیش از به روز رسانی DOM

تصاویر

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

<img src=”sample.png” width=”300″ height=”200″>

 

کدهای جاوااسکریپت

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

بارگذاری دیرهنگام CSS

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

 

اصلاح تنظیمات فونت

برای اصلاح تنظیمات فونت و بهینه سازی CLS ابتدا باید با دو اصطلاح Flash of invisible text (FOIT)  و Flash of Unstyled Text (FOUT)  آشنا شوید که دو حالت متداول برای تنظیم فونت متن‌‌های نمایش داده شده در صفحات وب سایت هستند.

در حالت ،FOIT تا زمانی که فونت در نظر گرفته شده برای متن صفحات وب سایت در مرورگر کاربر لود نشده، متن صفحه به کاربر نشان داده نخواهد شد. تنظیم کردن فونت در این حالت، هر چند می تواند به بهبود معیار سی ال اس (CLS) کمک کند اما تجربه کاربر را به شدت کاهش می دهد چون کاربر باید مدت زمانی منتظر بماند تا متن صفحات به او نشان داده شود.

بنابراین توصیه می شود که تنظیمات فونت خود را روی حالت FOUT بگذارید. با این کار ابتدا متن صفحات با یک فونت پیش فرض نمایش داده می شوند و زمانی که فونت مورد نظر شما روی بروزر کاربر، لود شد، فونت متن تغییر پیدا می کند. اما این مسئله موجب می شود که به طور ناگهانی تغییراتی در چیدمان المان های مختلف صفحه ایجاد شود و رتبه CLS شما کاهش پیدا کند.

برای حل این مشکل باید عبارت  rel=”preload”  را به کد HTML مربوط به فونت در head سایت اضافه کنید. دستکاری کدهای HTML باید توسط افراد حرفه‌ای متخصص انجام گیرد. بنابراین، بهتر است پیش از ایجاد تغییر در کدهای مربوطه از یک متخصص سئو و یا برنامه‌نویس حرفه‌ای کمک بگیرید.

 

 تعیین سایز مشخص برای نمایش تبلیغات، embeds و  iframes

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

 

نتیجه گیری

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

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