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

برای آشنایی با CLS و بررسی تاثیر آن بر سئو سایت با نیک اندیشان تا انتهای این مقاله همراه باشید.

آشنایی با CLS

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

حرکت غیرمنتظره محتوای صفحه معمولاً به این دلیل اتفاق می افتد که منابع به صورت ناهمزمان بارگیری می شوند یا عناصر DOM به صورت پویا به صفحه بالای محتوای موجود اضافه می شوند. همچنین تصویر یا ویدیویی با ابعاد ناشناخته، فونتی بزرگتر یا کوچکتر از نسخه اصلی، یک تبلیغ شخص ثالث یا ویجتی که به صورت پویا اندازه خود را تغییر می دهد می توانند دلایل جابه جایی ناگهانی محتوای صفحه باشند.

CLS چیست؟

CLS مخفف عبارتCumulative Layout Shift معیاری است که موتورهای جستجو برای رتبه دهی به سایت از آن استفاده و تجربه کاربر از تعامل با وب سایت را بررسی می کنند. به جابجایی ناگهانی المان های مختلف صفحه سایت هنگام لود شدن CLS گفته می شود. علت این جابجایی می تواند لود شدن فونت، تصاویر، ویدئوها و سایر عناصر و المان های سایت باشد.

نمره CLS خوب چقدر است؟

نمره CLS بین 0 تا 1 است. برای ارائه یک تجربه کاربری خوب، سایت ها باید تلاش کنند تا امتیاز 1.0 یا کمتر داشته باشند. اگر سایت شما دارای امتیاز بین ۰.۱ تا ۰.۱۵ است یعنی سایت شما تقریبا بهینه می باشد و اشکالاتی جزئی دارد. در صورتی که عدد CLS سایت بین ۰.۱۵ تا ۰.۲۵ باشد، سایت تا حدودی از حالت استاندارد خارج می باشد و امتیاز بیشتر از ۰.۲۵ یعنی سایت کاملا خارج از استاندارد است.

ابزارهای تعیین CLS سایت

جهت تعیین CLS سایت خود می توانید از ابزارهای آنالیز سئو وب سایت مانندGTMetrix ، Light house ، Chrome Dev tool ، PageSpeed Insights ، WebPageTest و Google Search Console استفاده کنید.

Cls سایت را چگونه بهینه کنیم؟

قدم اول برای بهینه سازی CLSسایت، شناسایی مشکلات موجود در صفحات وب سایت است. مواردی همچون استفاده از CSS های کلی و جدا جدا، تصاویر و ویدئو هایی با سایز نا مشخص، حجم بالای CSS، تبلیغات با سایز نامشخص، لود شدن محتوای پویا بین محتوای ثابت و تغییر فونت متن صفحات با تنظیمات FOIT یا FOUT مبنای رتبه دهی CLS می باشند. اصلاح موارد ذکر شده برای بهبود رتبه cls به تغییر در کدنویسی در صفحات وب سایت نیاز دارد.

منبع : نیک اندیشان

خطایSpecifying image dimensions

برای رفع این خطا لازم است ابعاد تصاویر و ویدئوهای سایت خود را در کدنویسی قالب سایت مشخص کنید. با این کار مرورگر می تواند تشخیص دهد که تصویر قرار است در چه سایزی به مخاطب نمایش داده شود.

با رفع این خطا علاوه بر بهینه سازی Cls به افزایش سرعت سایت خود نیز کمک خواهید کرد.

تبلیغات داخل صفحه

با فراگیر شدن آژانس ها و بنرهای تبلیغاتی سرعت بارگذاری سایت های تبلیغی به دلیل استفاده از کد اسکریپت های مخصوص کاهش یافته است. استفاده از embeds و iframes تاثیر منفی بر UX یا تجربه کاربری سایت دارد و سبب ایجاد پرش بر روی سایت می شود.

برای رفع این مشکل کافیست بنرهای تبلیغات را در بخش های خلوت سایت و یا کدهای آن را در انتهای سایت خود ، قرار دهید. در صورتی که لازم است در بخش‌های مختلف سایت از تبلیغات استفاده کنید، می توانید برای تبلیغات خود width و height تعیین کنید.

محتوای پویای غیر منتظره

پس از ورود به برخی سایت ها یا فروشگاه های اینترنتی، برخی بخش‌ها دیرتر بارگذاری می شوند و بر روی تجربه کاربری تاثیر منفی دارد.

بارگذاری فونت و متن

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

برای بارگذاری فونت و متن دو حالت وجود دارد:

حالت FOUT

در این حالت متن سایت نمایش داده می‌شود اما فونت بارگذاری نشده است. و متن با فونت پیشفرض مرورگر نشان داده می‌شود که به آن Flash of Unstyled Text می گویند.

حالت FOIT

در این حالت تا زمانی که فونت سایت بارگذاری نشده باشد، محتوا هم نمایش داده نمی‌شود FOIT مخفف Flash of Invisible Text می باشد. رفع این حالت سرعت سایت را کاهش می دهد.

برای رفع این مشکل می‌توانید از تگ rel="preload" در هدر سایت خود استفاده نمایید.

استفاده از انیمیشن ها

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

منبع : https://www.semrush.com/blog/what-is-cls/

نتیجه گیری:

CLS و هر عامل دیگری که بتواند تجربه ی کاربری بازدیدکنندگان سایت را بهبود بخشد، می تواند وضعیت سئو سایت شما را بهتر کند.

توجه کنید که CLS برای تمام صفحات سایت وجود دارد و نباید فقط صفحه اصلی سایت را بررسی کنید. برای بهینه کردن سایت خود نیاز است تا CLS تمام صفحات مهم سایت خود را چک کنید.