آشنایی با Cls (Cumulative Layout

• 1400/09/30
• طراحی سایت اصفهان وب-شرکت طراحی سایت در اصفهان
• 2 نظر

آشنایی با Cls (Cumulative Layout

CLS مخفف عبارتCumulative Layout Shift ، یکی از معیارهای جدیدی است که گوگل و سایر موتورهای جستجو برای رتبه دهی به سایت ها آن را ارزیابی می کنند. 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 محدود شده و متفاوت بودن‌ سایز آنها تاثیری در جابجایی المان های مختلف سایت شما نخواهد داشت.

و در آخر...

همانطور که در بالا اشاره کردیم Cumulative Layout Shift (CLS)، یکی از معیارهای لازم و ضروری است که باید برای سئو و بهینه سازی سایت خود آن را در نظر بگیرید. این فاکتور می تواند در رتبه بندی وب سایت شما، براساس استانداردهای موتورهای جستجو به خصوص گوگل تاثیرگذار باشد. با توجه به اینکه گوگل در سال ۲۰۲۱ توجه ویژه‌ای به تجربه مطلوب کاربر از بازدید از صفحات وب سایت کرده است، بهینه سازی معیار CLS باید جزو یکی از مهمترین معیارهای بهینه سازی و سئو وب سایت ها در نظر گرفته شود.

Cls (Cumulative Layout Shift)

برای مشاهده مقالات بیشتر در مورد سئو سایت و طراحی سایت به صفحه مقالات مراجعه کنید.