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 می شود:

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

تصاویر

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

یکی از چیزهایی که مهم، اصلاح انیمیشن‌ها است. گوگل توصیه می‌کند که از ویژگی تبدیل مقیاس در 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 محدود شده و متفاوت بودن‌ سایز آنها تاثیری در جابجایی المان های مختلف سایت شما نخواهد داشت.

برای کسب اطلاعات بیشتر با ما تماس بگیرید.

شرکت طراحی سایت پوشش

طراحی سایت در اصفهان

برنامه نویسی،طراحی سایت،طراحی وب سایـت،طراحی سایت فروشگاهی،طراحی سایت شرکتی،طراحی سایت دولتی،طراحی سایت در اصفهان،طراحی سایت سازمان ها،طراحی سایت خبری،طراحی سایت خصوصی،طراحی سایت نظامی،طراحی سایت ورزشی،طراحی سایت آموزشگاهی،طراحی سایت چندزبانه،طراحی وب سایت،طراحی سایت آموزش آنلاین،طراحی سایت اصفهان،طراحی سایت فروش آنلاین،طراحی سایت b2b،سئو،پروژه سئو،انجام پروژه سئو،سئو وبهینه سازی سایت،بهینه سازی وب سایت،افزایش رتبه گوگل،سئو داخلی،سئو خارجی،سئو در اصفهان،سئو تخصصی،سئو اینستاگرام،طراحی اپلیکیشن،ساخت نرم افزار موبایل،برنامه نویسی اندروید(android)،برنامه نویسی آیفون(ios)،دیجیتال مارکتینگ،ساخت نرم افزار حسابداری،ساخت نرم افزار های کامپیوتر،انجام پروژه های شبکه های اجتماعی،افزایش فالور اینستاگرام،ادمین اینستاگرام