Cumulative Layout Shift (CLS) یک معیار مهم در تجربه کاربری وبسایت است که نشان می‌دهد عناصر در صفحه چقدر جابه‌جا می‌شوند. این جابه‌جایی‌ها باعث می‌شوند که کاربران بر روی عنصری کلیک کنند و به جای آن، روی عنصر دیگری بروند. این موضوع تجربه کاربری را به شدت کاهش می‌دهد و می‌تواند بر روی نرخ تبدیل و سئوی سایت تاثیر منفی بگذارد.
CLS چیست و چرا مهم است؟
CLS زمانی رخ می‌دهد که عناصر قابل مشاهده در صفحه پس از رندر شدن اولیه، موقعیت خود را تغییر دهند. این جابه‌جایی‌ها می‌تواند به دلایل مختلفی رخ دهد، مانند:
- بارگذاری تصاویر با اندازه نامشخص: اگر اندازه دقیق تصاویر قبل از بارگذاری مشخص نباشد، مرورگر نمی‌تواند برای آن‌ها فضایی در صفحه رزرو کند و در نتیجه، سایر عناصر هنگام بارگذاری تصاویر جابه‌جا می‌شوند.
- فونت‌ها: اگر فونت‌های مورد استفاده در صفحه به صورت محلی بارگذاری نشوند و مرورگر مجبور شود آن‌ها را از منابع خارجی دانلود کند، می‌تواند باعث جابه‌جایی عناصر شود.
- تبلیغات: تبلیغات اغلب به صورت داینامیک بارگذاری می‌شوند و می‌توانند باعث جابه‌جایی عناصر اطراف خود شوند.
- فریم‌ورک‌ها و کتابخانه‌ها: برخی از فریم‌ورک‌ها و کتابخانه‌ها ممکن است باعث ایجاد CLS شوند، به خصوص اگر به درستی پیکربندی نشوند.
چرا CLS مهم است؟
- تجربه کاربری ضعیف: CLS باعث می‌شود که کاربران نتوانند به راحتی با صفحه تعامل داشته باشند و از آن استفاده کنند.
- کاهش نرخ تبدیل: کاربران کمتر تمایل دارند در سایتی که تجربه کاربری ضعیفی دارد، خرید انجام دهند یا فرم‌ها را پر کنند.
- تاثیر منفی بر روی SEO: گوگل از CLS به عنوان یکی از عوامل رتبه‌بندی استفاده می‌کند. بنابراین، کاهش CLS می‌تواند به بهبود رتبه سایت در نتایج جستجو کمک کند.
چگونه CLS را بهینه کنیم؟
برای کاهش CLS، می‌توانید اقدامات زیر را انجام دهید:
- اندازه تصاویر را مشخص کنید: قبل از بارگذاری تصاویر، اندازه دقیق آن‌ها را مشخص کنید تا مرورگر بتواند برای آن‌ها فضایی در صفحه رزرو کند.
- از فونت‌های محلی استفاده کنید: تا حد امکان از فونت‌های محلی استفاده کنید تا مرورگر مجبور به دانلود فونت‌ها از منابع خارجی نشود.
- تبلیغات را بهینه کنید: تبلیغات را به گونه‌ای قرار دهید که کمترین تاثیر را بر روی CLS داشته باشند.
- فریم‌ورک‌ها و کتابخانه‌ها را به درستی پیکربندی کنید: مطمئن شوید که فریم‌ورک‌ها و کتابخانه‌هایی که استفاده می‌کنید به درستی پیکربندی شده‌اند و باعث ایجاد CLS نمی‌شوند.
- از CSS Critical Rendering Path استفاده کنید: CSS Critical Rendering Path مهم‌ترین سبک‌های CSS را در بالای صفحه قرار می‌دهد تا مرورگر بتواند سریع‌تر صفحه را رندر کند و CLS را کاهش دهد.
- از lazy loading برای تصاویر استفاده کنید: تصاویر را تنها زمانی بارگذاری کنید که کاربر به آن‌ها نزدیک شود.
- از جاوا اسکریپت بهینه استفاده کنید: جاوا اسکریپت می‌تواند باعث ایجاد CLS شود، بنابراین سعی کنید از جاوا اسکریپت بهینه استفاده کنید و آن را به پایین صفحه منتقل کنید.
ابزارهای اندازه‌گیری CLS
برای اندازه‌گیری CLS می‌توانید از ابزارهای زیر استفاده کنید:
- Chrome DevTools: این ابزار به شما امکان می‌دهد CLS را در زمان واقعی اندازه‌گیری کنید.
- Lighthouse: این ابزار یک افزونه برای مرورگر کروم است که به شما امکان می‌دهد یک گزارش کامل از عملکرد سایت خود دریافت کنید، از جمله CLS.
- PageSpeed Insights: این ابزار گوگل به شما امکان می‌دهد عملکرد سایت خود را از نظر سرعت و CLS تحلیل کنید.
نتیجه‌گیری
بهینه‌سازی CLS یک بخش مهم از بهینه‌سازی وبسایت است. با کاهش CLS، می‌توانید تجربه کاربری را بهبود بخشید، نرخ تبدیل را افزایش دهید و رتبه سایت خود را در نتایج جستجو بهبود بخشید.