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

یکی دیگر از فاکتورهای رتبه بندی گوگل CLS یا (Cumulative Layout shift) است. این متریک در سال 2021 میلادی به یک عامل رتبه بندی تبدیل شده است. فاکتور CLS یکی از مهم ترین معیار های گوگل است.

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

Cls چیست؟

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

به عنوان مثال تصاویر، فیلم ها، فرم های تماس ، دکمه ها و… زمانی که سایت در حال لود شدن است یا پس از لود شدن در صفحه جابه جا می شوند.

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

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

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

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

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

روش اول یا in the Lab (در آزمایشگاه) به این شکل است که شبیه سازی یک کاربر واقعی در حال بارگیری صفحه نمایش انجام می‌شود. در این حالت گوگل یک Moto G4 شبیه سازی شده را برای اندازه گیری نرخ CLS صفحه به کار می‌گیرد.

ابزارهای آزمایشگاهی فوق، شامل Chrome Dev Tools و Lighthouse هستند.

نمره CLS خوب

برای ارائه یک تجربه کاربری خوب، سایت‌ها باید تلاش کنند تا نمره CLS آن‌ها کمتر از 0.1 باشد.

CLS های خوب

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

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

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

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

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

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

تصاویر

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

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

یکی از چیزهایی که مهم، اصلاح انیمیشن‌ها است. گوگل توصیه می‌کند که از ویژگی تبدیل مقیاس در CSS استفاده کنید.

 

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

یکی دیگر از علت‌های متداول در افزایش 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

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

نتیجه گیری

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

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

نویسنده

کیمیا وحیدی

من کیمیا وحیدی هستم
دانشجوی برتر دوره آموزش سئو آکادمی آمانج،
کارشناس سئو و تولید محتوا

مشاهده سایر نوشته های من

کمپ آموزش جامع سئو تخصصی

آموزش تخصصی و پروژه محور سئو

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