آموزش و اخبار

CLS چیست و چگونه آن را برطرف کنیم؟

cls

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

cls چیست

ارور CLS چیست؟

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

اما CLS مخفف چیست؟ این عبارت، مخفف عبارت “Cumulative Layout Shift” است و می‌تواند تجربه کاربری نامطلوبی را به‌همراه داشته باشد و منجر به کاهش تعامل کاربر با سایت و افزایش نرخ پرش شود. به‌عبارت‌ساده‌تر، CLS باعث می‌شود که ظاهر صفحه وب پس‌از بارگذاری اولیه به‌طور مداوم درحال تغییر باشد که این امر موجب سردرگمی و نارضایتی کاربر می‌شود. گوگل نیز CLS را به‌عنوان یکی از عوامل مهم در رتبه‌بندی سایت‌ها درنظر می‌گیرد و سایت‌هایی که نرخ CLS پایین‌تری دارند، رتبه بهتری کسب می‌کنند. اکنون که متوجه شدید CLS چیست، آیا می‌دانید میزان استاندارد آن چقدر است؟

CLS چیست

میزان استاندارد CLS چقدر است؟

مقدار استاندارد و بهینه CLS به شرح زیر است:

  • 0.1 یا کمتر (عملکرد خوب): این عدد، مقدار استاندارد و بهینه CLS را نشان می‌دهد.
  • بین 0.1 تا 0.15 (عملکرد قابل‌قبول): این محدوده هنوز هم مطلوب است؛ اما ممکن است نیاز به برخی بهینه‌سازی‌ها داشته باشد.
  • 0.15 تا 0.25 (عملکرد بد): در این محدوده، CLS خارج از محدوده استاندارد قرار می‌گیرد و نیاز به اصلاح دارد.
  • بیشتر از 0.25 (عملکرد بسیار بد): این مقدار نشان‌دهنده CLS بسیار ضعیف است و نیاز به اصلاحات اساسی دارد.

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

CLS

CLS را چگونه محاسبه کنیم؟

روش محاسبه CLS چیست؟ از دو روش می‌توان CLS را محاسبه کرد که در ادامه آن‌ها را معرفی می‌کنیم.

in the Lab

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

in the Field

این روش، CLS را در دنیای واقعی و بر روی دستگاه‌های کاربران مختلف اندازه‌گیری می‌کند. یعنی اطلاعاتی که از این روش به دست می‌آید، براساس داده‌های جمع‌آوری‌شده از مرورگر کاربران در شرایط مختلف و با دستگاه‌های متفاوت است. این داده‌ها در Google Search Console قابل‌مشاهده هستند. روش in the Field به شما کمک می‌کند تا درک بهتری از تجربه کاربری واقعی کاربران داشته باشید و متوجه شوید که تغییرات انجام‌شده در سایت، چه تاثیری بر روی عملکرد سایت در شرایط واقعی دارد.

اما ابزارهای محاسبه CLS چیست؟ برای محاسبه آن ابزارهایی وجود دارد که برخی از مهم‌ترین آن‌ها عبارت‌اند از:

  • Google PageSpeed Insights: یکی از محبوب‌ترین و جامع‌ترین ابزارهای اندازه‌گیری عملکرد وب‌سایت است. این ابزار علاوه‌بر CLS، سایر معیارهای Core Web Vitals را نیز اندازه‌گیری می‌کند و پیشنهاداتی برای بهبود عملکرد می‌دهد.
  • Lighthouse: یک ابزار متن‌باز و بخشی از Chrome DevTools است. Lighthouse امکان انجام انواع مختلفی از تست‌های عملکرد را فراهم می‌کند، از جمله محاسبه CLS.
  • Chrome DevTools: ابزار توسعه‌دهندگان کروم نیز دارای امکاناتی برای آزمایش CLS است. با استفاده از این ابزار می‌توانید CLS را به‌صورت زنده در حین توسعه وب‌سایت بررسی کنید.
  • WebPageTest: این ابزار به شما امکان می‌دهد تا عملکرد وب‌سایت خود را در شرایط مختلف شبکه و دستگاه‌ها بررسی و گزارش دقیقی از CLS دریافت کنید.
  • GTmetrix: ابزاری دیگر برای تحلیل عملکرد وب‌سایت است که علاوه‌بر محاسبه CLS، پیشنهاداتی برای بهبود سرعت بارگذاری صفحات می‌دهد.
  • Search Console: گوگل Search Console نیز اطلاعاتی در مورد CLS وب‌سایت در اختیار شما قرار می‌دهد. این اطلاعات کمک می‌کند تا عملکرد وب‌سایت خود را در نتایج جستجو بهبود بخشید. آموزش سرچ کنسول به طور کامل در سایت رنکاپ قرار داده شده است.

در ادامه به‌صورت گام‌به‌گام به شما آموزش می‌دهیم که چگونه با استفاده از Google PageSpeed Insights، ببینید مقدار CLS چیست.

برای محاسبه مقدار CLS با استفاده از Google PageSpeed Insights، مراحل زیر را دنبال کنید:

  1. به وب‌سایت Google PageSpeed Insights به آدرس https://pagespeed.web.dev مراجعه کنید.
  2. در قسمت URL، آدرس صفحه موردنظر خود را وارد کنید.
CLS چیست؟
  1. روی دکمه “Analyze” کلیک کنید تا آنالیز صفحه آغاز شود.
  2. صبر کنید تا آنالیز کامل شود. این فرایند ممکن است چند ثانیه طول بکشد.
  3. پس از اتمام آنالیز، به بخش “Core Web Vitals Assesment” بروید.
cls چیست؟
  1. در این بخش، می‌توانید مشاهده کنید که مقدار CLS چیست. این مقدار به‌صورت یک عدد بین 0 تا 1 نمایش داده می‌شود.
  2. در کنار مقدار عددی، یک رنگ (سبز، نارنجی یا قرمز) نیز مشاهده می‌کنید که وضعیت CLS را نشان می‌دهد:
  3. سبز: خوب (کمتر از 0.1)؛
  4. نارنجی: نیاز به بهبود (بین 0.1 تا 0.25)؛
  5. قرمز: ضعیف (بیشتر از 0.25).

همچنین می‌توانید بین نتایج موبایل و دسکتاپ جابه‌جا شوید تا نتایج CLS را برای هر دو نوع دستگاه مشاهده کنید.

CLS را چگونه بهینه‌سازی کنیم؟

پس‌از محاسبه CLS، نوبت به بهبود آن می‌رسد که دارای اهمیت بالایی است. فرض کنید سایت شما نرخ کلیک بالایی دارد اما کاربر پس از ورود به آن سریعا خارج شود؛ این مطلوب نیست. در ادامه، چندین راه‌کار عملی برای رفع ارور CLS و بهبود تجربه کاربری وب‌سایت پیشنهاد می‌دهیم:

بهینه‌سازی تصاویر

تصاویر را با حجم مناسب، ذخیره کنید؛ زیرا تصاویر بزرگ باعث کند شدن سرعت بارگذاری صفحه و افزایش CLS می‌شوند. از فرمت‌های تصویری مانند WebP یا AVIF استفاده کنید که حجم فایل را بدون کاهش کیفیت آن، کم می‌کنند. همچنین تصاویر را به‌صورت Lazy Load بارگذاری کنید. یعنی فقط تصاویری که در صفحه نمایش کاربر قرار دارند بارگذاری شوند و تصاویر دیگر به‌صورت تدریجی و هنگام اسکرول‌کردن صفحه بارگذاری شوند.

مدیریت فونت‌ها

تا حد امکان از فونت‌های سیستم استفاده کنید. این فونت‌ها از قبل در دستگاه کاربر وجود دارند و نیازی به دانلود ندارند؛ زیرا هر فونت اضافی باعث افزایش زمان بارگذاری صفحه می‌شود. بهتر است از ویژگی Font Display برای کنترل نحوه نمایش فونت‌ها بهره بگیرید. با به‌کارگیری این ویژگی می‌توانید از نمایش فونت‌های جایگزین تا زمانی که فونت اصلی بارگذاری شود، جلوگیری کنید.

بهینه‌سازی CSS

CSS Critical Rendering Path را کاهش دهید. این کار باعث می‌شود که بخش‌های مهم صفحه سریع‌تر رندر شوند و از جابه‌جایی عناصر جلوگیری شود. به‌علاوه، می‌توانید فایل‌های CSS را Minify کنید تا اندازه آن‌ها کاهش یابد. از قراردادن Stylesheets در بالای صفحه خودداری کنید. این کار باعث انسداد رندرشدن صفحه می‌شود.

cls

بهینه‌سازی جاوا اسکریپت

اسکریپت‌های غیر ضروری را به‌صورت Defer یا Async بارگذاری کنید تا مانع انسداد رندرشدن صفحه شود. همچنین می‌توانید فایل‌های جاوا اسکریپت را Minify کنید تا اندازه آن‌ها کاهش یابد. توصیه می‌کنیم از اجرای جاوا اسکریپت که باعث انسداد رندرشدن صفحه می‌شود، خودداری کنید.

مدیریت تبلیغات

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

در ضمن، زمان بارگذاری تبلیغات را به حداقل برسانید.

استفاده از Placeholder

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

لازم به ذکر است که بهینه‌سازی CLS یک فرایند مداوم است و نیاز به نظارت و به‌روزرسانی دارد. با پیاده‌سازی این راه‌کارها و نظارت مداوم بر عملکرد وب‌سایت خود، می‌توانید تجربه کاربری بهتری را برای کاربران ایجاد کنید و رتبه وب‌سایت را در نتایج جستجو بهبود بخشید.

جمع بندی

در این مقاله توضیح دادیم که خطای CLS چیست. این خطا می‌تواند تاثیر منفی قابل‌توجهی بر رضایت کاربران و حتی رتبه‌بندی سایت در موتورهای جستجو داشته باشد. خوشبختانه، با به‌کارگیری استراتژی‌های مناسب مانند تعیین ابعاد دقیق برای تصاویر و ویدئوها، مدیریت صحیح محتوای پویا، بهینه‌سازی فونت‌ها، و استفاده هوشمندانه از CSS، می‌توان این خطا را کاهش داد. همچنین، استفاده از ابزارهای تحلیلی مانند Google PageSpeed Insights و تست مداوم در دستگاه‌های مختلف، به شما کمک می‌کند تا مشکلات را به‌سرعت شناسایی و رفع کنید. با تمرکز بر بهینه‌سازی CLS، وب‌سایت‌ها می‌توانند تجربه کاربری بهتری را ارائه دهند و رضایت کاربران و عملکرد کلی سایت را بهبود ببخشند.