احتمالا تجربه دارید صفحه وبی را باز کنید که درحال لودشدن است؛ چیدمان عناصر داخل صفحه بهم می‌ریزد و تصاویر یا متن‌های آن جابه‌جا می‌شوند. این مشکل که به آن خطای 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 می‌توانید از دو روش in the Lab و in the Field استفاده کنید؛ در ادامه، هر کدام از این روش‌ها را به زبان ساده توضیح می‌دهیم:
1. in the Lab
با این روش، تجربه کاربری در یک محیط کنترل‌شده شبیه‌سازی می‌شود. به‌عبارت‌دیگر، با استفاده از ابزارهایی مانند Lighthouse، در شرایطی خاص و ازپیش‌تعیین‌شده، CLS اندازه‌گیری می‌شود. این روش به شما امکان می‌دهد تا به‌صورت دقیق، تاثیر تغییرات مختلف در طراحی سایت بر روی CLS را بررسی کنید. برای مثال، می‌توانید با تغییر اندازه صفحه نمایش، نوع دستگاه یا سرعت اینترنت، تغییرات CLS را مشاهده کنید و بهینه‌سازی‌های لازم را انجام دهید.
2. in the Field
این روش، CLS را در دنیای واقعی و بر روی دستگاه‌های کاربران مختلف اندازه‌گیری می‌کند. یعنی اطلاعاتی که از این روش به دست می‌آید، براساس داده‌های جمع‌آوری‌شده از مرورگر کاربران در شرایط مختلف و با دستگاه‌های متفاوت است. این داده‌ها در Google Search Console قابل‌مشاهده هستند. روش in the Field به شما کمک می‌کند تا درک بهتری از تجربه کاربری واقعی کاربران داشته باشید و متوجه شوید که تغییرات انجام‌شده در سایت، چه تاثیری بر روی عملکرد سایت در شرایط واقعی دارد.
ابزارهای محاسبه CLS
حالا که می‌دانید 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 وبسایت در اختیار شما قرار می‌دهد. این اطلاعات کمک می‌کند تا عملکرد وبسایت خود را در نتایج جستجو بهبود بخشید. آموزش سرچ کنسول به طور کامل در سایت رنکاپ قرار داده شده است.
آموزش گام به گام مقدار CLS با Google PageSpeed Insights
برای محاسبه مقدار CLS با استفاده از Google PageSpeed Insights، مراحل زیر را دنبال کنید:
- به وبسایت Google PageSpeed Insights به آدرس https://pagespeed.web.dev مراجعه کنید.
- در قسمت URL، آدرس صفحه موردنظر خود را وارد کنید
- روی دکمه Analyze کلیک کنید تا آنالیز صفحه آغاز شود.
- صبر کنید تا آنالیز کامل شود. این فرایند ممکن است چند ثانیه طول بکشد.
- پس از اتمام آنالیز، به بخش Core Web Vitals Assesment بروید.
- در این بخش می‌توانید مقدار CLS را مشاهده کنید؛ این مقدار، در قالب عددی بین 0 تا 1 نمایش داده می‌شود.
-
در کنار مقدار عددی، رنگی مشاهده می‌کنید که وضعیت CLS را نشان می‌دهد:
- سبز: خوب (کمتر از 0.1)
- نارنجی: نیاز به بهبود (بین 0.1 تا 0.25)
- قرمز: ضعیف (بیشتر از 0.25)
CLS را چگونه بهینه‌سازی کنیم؟
پس‌از پاسخ به سوال CLS چیست و آشنایی با روش‌های محاسبه، نوبت به بهبود آن می‌رسد که دارای اهمیت بالایی است. فرض کنید سایت شما نرخ کلیک بالایی دارد؛ اما کاربر پس از ورود به آن سریعا خارج شود. در ادامه، چندین راه‌کار عملی بهبود CLS و تجربه کاربری وبسایت پیشنهاد می‌دهیم.
البته، بهینه‌سازی CLS فرایندی مداوم است و نیاز به نظارت و به‌روزرسانی دارد. با پیاده‌سازی این راه‌کارها و نظارت مداوم بر عملکرد وبسایت خود، می‌توانید تجربه کاربری بهتری را برای کاربران ایجاد کنید و رتبه وبسایت را در نتایج جستجو بهبود بخشید:
1. بهینه‌سازی تصاویر
تصاویر را با حجم مناسب، ذخیره کنید؛ زیرا، تصاویر بزرگ باعث کند شدن سرعت بارگذاری صفحه و افزایش CLS می‌شوند. برای رفع این چالش، از فرمت‌های تصویری مانند WebP یا AVIF استفاده کنید که حجم فایل را بدون کاهش کیفیت آن، کم می‌کنند.
همچنین، تصاویر را به‌صورت Lazy Load بارگذاری کنید. با این‌کار، فقط تصاویری که در صفحه نمایش کاربر قرار دارند، بارگذاری می‌شوند و تصاویر دیگر به‌صورت تدریجی و هنگام اسکرول‌کردن صفحه بارگذاری می‌شوند.
2. مدیریت فونت‌ها
تا حد امکان از فونت‌های سیستم استفاده کنید؛ زیرا، این فونت‌ها از قبل در دستگاه کاربر وجود دارند و نیازی به دانلود آن‌ها نیست و هر فونت اضافی، باعث افزایش زمان بارگذاری صفحه می‌شود. برای مدیریت فونت‌ها بهتر است از ویژگی Font Display جهت کنترل نحوه نمایش فونت‌ها بهره بگیرید؛ با به‌کارگیری این ویژگی می‌توانید از نمایش فونت‌های جایگزین تا زمانی که فونت اصلی بارگذاری شود، جلوگیری کنید.
3. بهینه‌سازی CSS
CSS Critical Rendering Path را کاهش دهید؛ این کار باعث می‌شود که بخش‌های مهم صفحه، سریع‌تر رندر شوند و جابه‌جایی عناصر به حداقل برسد. به‌علاوه، می‌توانید فایل‌های CSS را Minify کنید تا اندازه آن‌ها کم شود. ضمنا، از قراردادن Stylesheets در بالای صفحه خودداری کنید؛ زیرا، این کار باعث انسداد رندرشدن صفحه می‌شود.
4. بهینه‌سازی جاوا اسکریپت
اسکریپت‌های غیر ضروری را به‌صورت Defer یا Async بارگذاری کنید تا مانع انسداد رندرشدن صفحه شود. همچنین می‌توانید فایل‌های جاوا اسکریپت را Minify کنید تا اندازه آن‌ها کاهش یابد. توصیه می‌کنیم از اجرای جاوا اسکریپت که باعث انسداد رندرشدن صفحه می‌شود، خودداری کنید.
5. مدیریت تبلیغات
بهتر است تبلیغات را در مکان‌هایی قرار دهید که کمترین تاثیر را بر روی محتوای اصلی صفحه داشته باشند. همچنین از تبلیغاتی با اندازه ثابت استفاده کنید تا از تغییر اندازه ناگهانی آن‌ها جلوگیری شود. در ضمن، زمان بارگذاری تبلیغات را به حداقل برسانید.
6. استفاده از Placeholder
قبل‌از بارگذاری کامل تصاویر، از Placeholder استفاده کنید تا جای خالی آن‌ها مشخص باشد و از جابه‌جایی عناصر جلوگیری شود. به‌علاوه، تا زمانی که فونت اصلی بارگذاری نشده است، از فونت‌های جایگزین استفاده کنید.
CLS و تاثیر آن بر سئو
CLS با تاثیر بر سرعت لود سایت و کاهش نرخ کلیک (CTR)، نرخ پرش را افزایش می‌دهد و تاثیر منفی بر سئو می‌گذارد. در این مقاله توضیح دادیم که خطای CLS چیست؟ این خطا می‌تواند تاثیر منفی قابل‌توجهی بر رضایت کاربران و حتی رتبه‌بندی سایت در موتورهای جستجو داشته باشد.
خوشبختانه، با به‌کارگیری استراتژی‌های مناسب مانند تعیین ابعاد دقیق برای تصاویر و ویدئوها، مدیریت صحیح محتوای پویا، بهینه‌سازی فونت‌ها و استفاده هوشمندانه از CSS می‌توانیم این خطا را کاهش دهیم.
همچنین، استفاده از ابزارهای تحلیلی مانند Google PageSpeed Insights و تست مداوم در دستگاه‌های مختلف، به شما کمک می‌کند تا مشکلات را به‌سرعت شناسایی و رفع کنید. با تمرکز بر بهینه‌سازی CLS، وب‌سایت‌ها می‌توانند تجربه کاربری بهتری را ارائه دهند و رضایت کاربران و عملکرد کلی سایت را بهبود ببخشند.