CLS یا "Cumulative Layout Shift" یکی از معیارهای جدید گوگل برای رتبه‌بندی سایت‌ها است که به تجربه کاربری مربوط می‌شود. این معیار به این نکته اشاره دارد که چقدر عناصر صفحه وب ممکن است به طور ناگهانی و بدون انتظار جابه‌جا شوند. جابه‌جایی ناگهانی محتوا میتواند کاربران را اذیت کند، مثلا وقتی که روی یک دکمه کلیک می‌کنند و ناگهان چیزی جای آن را می‌گیرد.
در این مطلب قرار است به شما توضیح دهیم CLS چیست و چطور می‌توانید آن را بهبود دهید تا تجربه بهتری برای بازدیدکنندگان سایت خود ایجاد کنید.و خدمات سئو و طراحی وبسایت بهتری از جمله برای طراحی سایت فروشگاهی، طراحی سایت شرکتی ، طراحی سایت وردپرسی ، طراحی سایت پتروشیمی و ... است.
CLS چیست و چرا مهم است؟
تا حالا شده در حال کلیک روی یک لینک یا دکمه در یک وبسایت باشید، اما قبل از اینکه کلیک کنید، ناگهان همه چیز جابجا شود و به اشتباه جای دیگری را انتخاب کنید؟ این جابجایی‌های غیرمنتظره که ممکن است هنگام بارگذاری صفحات رخ دهند، چیزی است که CLS یا "Cumulative Layout Shift" آن را می‌سنجد. در واقع، CLS معیاری است که بررسی میکند چقدر عناصر صفحه بدون پیش‌بینی کاربر حرکت می‌کنند و باعث نارضایتی او می‌شوند.
این معیار به دلیل تاثیر مستقیم آن بر تجربه کاربری، به یکی از فاکتورهای مهم گوگل برای رتبه‌بندی سایت‌ها تبدیل شده است. هرچه سایت شما از لحاظ جابجایی‌های غیرمنتظره پایدارتر باشد، کاربران تجربه بهتری خواهند داشت و احتمالاً گوگل هم سایت شما را بیشتر دوست خواهد داشت.
راهکارهای بهبود CLS
راهکارهای بهبود CLS (Cumulative Layout Shift) به شرح زیر است:
- استفاده از سایزهای مشخص برای عناصر: قبل از بارگذاری عناصر مانند تصاویر، ویدئوها و انیمیشن ها، باید سایز آنها را مشخص کنید تا از تغییر ناگهانی در محل آنها جلوگیری شود.
- استفاده از CSS های کلی: با استفاده از CSS های کلی و بارگذاری آنها در ابتدای صفحه، از تغییر ناگهانی جلوگیری می‌شود.
- بارگذاری CSS ها در ابتدا و بعد نمایش سایت: بارگذاری CSS ها در ابتدای صفحه قبل از نمایش سایت، باعث می‌شود که طرح صفحه از ابتدا مشخص باشد و تغییر ناگهانی در آن رخ ندهد.
- استفاده از فونت‌های مناسب: استفاده از فونت‌هایی که در هنگام بارگذاری زمان‌بر نیستند، باعث می‌شود که طرح صفحه از ابتدا مشخص باشد و تغییر ناگهانی در آن رخ ندهد.
- استفاده از انیمیشن‌های مناسب: انیمیشن‌های مناسب که باعث جابجایی سریع عناصر نمی‌شوند، می‌توانند به کاهش CLS کمک کنند.
در مجموع، با استفاده از این راهکارها میتوان CLS سایت را بهبود بخشید و تجربه کاربری بهتری را ارائه داد.
چطور CLS را کاهش دهیم؟
برای کاهش CLS) Cumulative Layout Shift) و بهبود تجربه کاربری سایت، چندین اقدام ساده اما موثر وجود دارد که میتواند از جابجایی‌های ناگهانی عناصر صفحه جلوگیری کند. در اینجا چند راهکار خلاصه بیان شده است:
برای جلوگیری از تغییر ناگهانی چیدمان، در کدها برای تصاویر اندازه مشخصی تعریف کنید تا مرورگر فضای لازم را از قبل برای آنها در نظر بگیرد.
تبلیغات را در قسمت‌های مناسب سایت قرار دهید و اندازه ثابتی برای آنها مشخص کنید تا تأثیر منفی بر چیدمان صفحه نگذارند.
- استفاده از فونت‌های بهینه‌شده:
با استفاده از تکنیک "font-display: swap" می‌توانید بارگذاری فونت‌ها را بهینه کرده و مانع از تغییر چیدمان متن‌ها به دلیل تاخیر در بارگذاری فونت شوید.
برای عناصر پویایی مثل محصولات مرتبط، از قبل فضایی در صفحه در نظر بگیرید تا هنگام بارگذاری، صفحه دچار جابجایی نشود.
انیمیشن‌ها را بهینه و حجم آنها را کاهش دهید تا باعث جابجایی ناگهانی در عناصر صفحه نشوند.
با انجام این اقدامات، می‌توانید از CLS بالای سایت خود جلوگیری کرده و تجربه کاربری بهتری را برای مخاطبان خود فراهم کنید.
اندازه‌گیری CLS
برای اطمینان از بهینه بودن CLS) (Cumulative Layout Shift) در تمامی صفحات سایت، باید از ابزارهای دقیق اندازه‌گیری استفاده کنید. توجه به این نکته ضروری است که بسیاری از صاحبان سایت فقط صفحه اصلی را بررسی و بهینه می‌کنند، اما سایر صفحات ممکن است همچنان با مشکلات CLS مواجه باشند. خوشبختانه، ابزارهای مختلفی وجود دارند که به شما کمک می‌کنند تا CLS را برای تمام صفحات سایت به طور کامل ارزیابی کنید:
Chrome DevTools:
این ابزار داخلی مرورگر گوگل کروم، امکان بررسی CLS را به صورت دقیق و لحظه‌ای در اختیار توسعه‌دهندگان قرار میدهد. با استفاده از این ابزار، می‌توانید تغییرات چیدمان و میزان جابجایی عناصر را در زمان واقعی مشاهده کنید.
Lighthouse:
Lighthouse یکی دیگر از ابزارهای قدرتمند گوگل است که به عنوان بخشی از DevTools ارائه می‌شود و گزارشی کامل از عملکرد، دسترس‌پذیری و CLS سایت شما ارائه میدهد. با این ابزار می‌توانید نمره CLS صفحه را به‌طور دقیق مشاهده کنید.
GTmetrix:
این ابزار محبوب به شما امکان میدهد تا نمره CLS سایت خود را اندازه‌گیری کنید و بهینه‌سازی‌های لازم را برای بهبود تجربه کاربری انجام دهید. GTmetrix یک گزارش کامل از عناصر باعث جابجایی نیز در اختیار شما قرار میدهد.
Core Web Vitals در Google Search Console:
گوگل سرچ کنسول یک بخش اختصاصی برای بررسی Core Web Vitals دارد که شامل گزارش CLS نیز می‌شود. با استفاده از این بخش می‌توانید وضعیت CLS تمام صفحات سایت خود را ببینید و تغییرات لازم را برای بهینه‌سازی اعمال کنید.
با این ابزارها، شما می‌توانید CLS سایت خود را به صورت جامع بررسی کنید و از تجربه کاربری روان‌تری برای مخاطبان خود اطمینان حاصل کنید.
تأثیر CLS بر Core Web Vitals و رتبه‌بندی گوگل
کامل‌ترین پاسخ به سوال شما در مورد تاثیر CLS بر Core Web Vitals و رتبه‌بندی گوگل به شرح زیر است:
CLS یا Cumulative Layout Shift یکی از سه معیار اصلی Core Web Vitals است که توسط گوگل برای ارزیابی تجربه کاربری سایت‌ها در نظر گرفته شده است. CLS به معنای ثبات بصری یک صفحه وب است و میزان تغییرات طرح‌بندی غیرمنتظره را که هنگام بارگذاری صفحه رخ میدهد، اندازه‌گیری میکند.
گوگل به CLS به عنوان یک عامل رتبه‌بندی مهم توجه میکند. هنگامی که کاربران وارد سایتی می‌شوند و پس از چند ثانیه صفحات دچار تغییر شکل ناگهانی می‌شوند، این تجربه بسیار ناخوشایند است و گوگل نیز به این موضوع اهمیت میدهد.
بنابراین بهبود CLS میتواند تأثیر مثبتی بر Core Web Vitals و رتبه‌بندی سایت در گوگل داشته باشد. برخی از راه‌های بهبود CLS شامل مشخص کردن سایز تصاویر در HTML، استفاده از نسخه‌های متناسب تصاویر و محتوای پویا، و جلوگیری از تحرک غیرضروری عناصر صفحه است.
در مجموع، CLS به عنوان یکی از اجزای اصلی Core Web Vitals، نقش مهمی در تجربه کاربری و رتبه‌بندی سایت در گوگل ایفا میکند و بهبود آن میتواند به افزایش رتبه وبسایت در نتایج جستجوی گوگل کمک کند.
رفع مشکلات CLS در سایت
برای رفع مشکلات CLS ) Cumulative Layout Shift) در سایت، باید از جابجایی‌های ناگهانی عناصر جلوگیری کرد که معمولاً در زمان بارگذاری رخ می‌دهند. راهکارهای موثر شامل موارد زیر هستند:
- تعیین اندازه دقیق تصاویر و ویدیوها: برای تصاویر و ویدیوها ابعاد مشخصی تعیین کنید تا مرورگر از پیش فضای لازم را برای آنها رزرو کند.
- مدیریت بهتر تبلیغات: تبلیغات را در بخش‌های مشخصی از صفحه قرار دهید و اندازه ثابت برای آنها تعیین کنید تا از تغییرات ناگهانی چیدمان جلوگیری شود.
- بهینه‌سازی بارگذاری فونت: از تکنیک‌هایی مانند "font-display: swap" برای بارگذاری سریع‌تر فونت‌ها استفاده کنید تا جابجایی محتوای متنی به حداقل برسد.
- کنترل محتوای پویا: برای بخش‌های پویایی مثل توصیه‌ها یا عناصر مشابه، فضایی از پیش تعیین کنید تا چیدمان صفحه به‌طور ناگهانی تغییر نکند.
با اعمال این راهکارها، می‌توانید مشکلات CLS را به حداقل برسانید و تجربه کاربری بهتری برای سایت خود فراهم کنید.
چگونه لایت‌اوت شیفت در سایت را ارزیابی کنیم؟
برای ارزیابی لایت هاوس شفت در سایت، میتوان از ابزارهای زیر استفاده کرد:
- Google Lighthouse: این ابزار رایگان و آنلاین گوگل است که 75 فاکتور را در مورد وبسایت شما ارزیابی می کند، از جمله بهینه سازی سرعت سایت. تحلیل Lighthouse به شما کمک میکند تا مشکلات سایت را شناسایی و رفع کنید.
- GTmetrix: این ابزار تجزیه و تحلیل عملکرد و سرعت سایت را ارائه میدهد. با این ابزار می توانید سرعت بارگذاری صفحات، فشرده سازی فایلها، کدهای بهینه نشده و سایر موارد مرتبط با سرعت را بررسی کنید.
- PageSpeed Insights: این ابزار گوگل به شما کمک میکند تا سرعت بارگذاری سایت را بهبود دهید. با تجزیه و تحلیل محتوای سایت و ارائه پیشنهادات بهینه سازی، این ابزار میتواند به افزایش سرعت سایت کمک کند.
در کل، استفاده از این ابزارها به شما کمک میکند تا مشکلات مربوط به سرعت سایت را شناسایی و برطرف کنید و در نتیجه تجربه کاربری بهتری را برای بازدیدکنندگان فراهم آورید.
کلام آخر
CLS یا Cumulative Layout Shift معیاری است که میزان جابجایی ناگهانی عناصر صفحه وب را اندازه‌گیری میکند و تأثیر مستقیمی بر تجربه کاربری دارد. برای بهبود CLS، میتوان اقداماتی مانند تعیین اندازه تصاویر، مدیریت بهینه تبلیغات، استفاده از فونت‌های بهینه‌شده و کنترل محتوای پویا را انجام داد. با رعایت این موارد، سایت شما نه‌تنها از نظر تجربه کاربری ارتقا می‌یابد، بلکه در رتبه‌بندی گوگل نیز بهبود پیدا میکند.