CLS در وردپرس چیست و چگونه آن را بهینه کنیم؟
CLS چیست؟
CLS یا Cumulative Layout Shift معیاری برای اندازهگیری میزان تغییرات ناگهانی و غیرمنتظره چیدمان صفحه است.
وقتی یک صفحه در حال بارگذاری است، عناصر مختلف مانند متن، تصاویر، تبلیغات، دکمهها و فونتها به مرور در صفحه نمایش داده میشوند.
اگر مرورگر از ابتدا فضای موردنیاز این عناصر را مشخص نکرده باشد، ممکن است پس از بارگذاری هر عنصر، سایر بخشهای صفحه جابهجا شوند.
برای مثال تصور کنید در حال مطالعه یک مقاله هستید. ناگهان یک تصویر در بالای متن بارگذاری میشود و باعث میشود کل متن چند سانتیمتر به پایین منتقل شود.
این جابهجایی یک Layout Shift محسوب میشود و در صورت تکرار میتواند باعث افزایش CLS
یک مثال ساده برای درک CLS :
فرض کنید وارد یک فروشگاه اینترنتی شدهاید.
در صفحه محصول، ابتدا عنوان و دکمه خرید نمایش داده میشوند. شما قصد دارید روی دکمه خرید کلیک کنید.
اما چند لحظه بعد تصویر محصول یا یک تبلیغ بارگذاری میشود و باعث میشود دکمه خرید به پایین صفحه منتقل شود.
در نتیجه ممکن است به جای دکمه خرید روی لینک دیگری کلیک کنید.
این همان تجربهای است که CLS تلاش میکند آن را اندازهگیری کند.
بنابراین CLS فقط درباره «زیبا بودن صفحه» نیست؛ بلکه مستقیماً با ثبات بصری و قابلیت استفاده از سایت ارتباط دارد.
پنل های متنوع بلک وردپرس
پلن پایه (افزایش سرعت سایت)
- افزایش بی نهایت سرعت سایت
- لود سایت زیر 3 ثانیه
- بازگشت وجه در صورت عدم رضایت
- پشتیبانی 3 ماهه
پلن پایه (امنیت)
- آنالیز کامل سایت
- نصب پلاگین های امنیتی
- برطرف کردن موارد امنیتی
- بازنویسی فایل های مهم امنیتی
پلن پیشرفته (امنیت و سرعت)
- افزایش سرعت
- لود سایت زیر 3 ثانیه
- امنیت کامل سایت
- برطرف کردن تمام موارد امنیتی
چرا CLS در Core Web Vitals اهمیت دارد؟
Core Web Vitals مجموعهای از معیارهای گوگل برای ارزیابی تجربه کاربران در صفحات وب است.
سه معیار اصلی آن عبارتاند از:
LCP: سرعت نمایش بزرگترین محتوای قابل مشاهده
INP: سرعت پاسخگویی صفحه به تعاملات کاربر
CLS: میزان ثبات چیدمان صفحه
LCP به سرعت توجه میکند، INP به پاسخگویی و CLS به پایداری صفحه.
ممکن است یک سایت بسیار سریع باشد، اما اگر عناصر آن دائماً هنگام بارگذاری جابهجا شوند، تجربه کاربر همچنان نامناسب خواهد بود.
به همین دلیل بهبود CLS در کنار LCP و INP اهمیت دارد.
چه عواملی باعث افزایش CLS میشوند؟
دلایل مختلفی میتوانند باعث افزایش CLS شوند. در ادامه مهمترین آنها را بررسی میکنیم.
۱) تصاویر بدون ابعاد مشخص :
یکی از رایجترین دلایل افزایش CLS، تصاویر بدون مشخص کردن ابعاد آنهاست.
فرض کنید مرورگر ابتدا متن صفحه را نمایش دهد، اما تصویر هنوز دانلود نشده باشد.
اگر فضای تصویر از قبل مشخص نشده باشد، پس از دریافت تصویر، مرورگر فضای موردنیاز آن را ایجاد میکند و متن صفحه جابهجا میشود.
راهحل چیست؟
برای تصاویر بهتر است ابعاد مناسب یا نسبت تصویر مشخص شود تا مرورگر از ابتدا بداند چه مقدار فضا باید برای تصویر در نظر بگیرد.
استفاده از ویژگیهای مناسب HTML و CSS میتواند در این زمینه کمک کند.
۲) تبلیغات بدون فضای رزرو شده :
تبلیغات یکی دیگر از عوامل رایج CLS هستند.
اگر یک تبلیغ بدون تعیین فضای مشخص در صفحه بارگذاری شود، ممکن است پس از دریافت تبلیغ فضای جدیدی ایجاد شود.
در نتیجه محتوای اطراف تبلیغ جابهجا میشود.
برای جلوگیری از این مشکل، بهتر است فضای موردنیاز تبلیغ از قبل مشخص شود
۳) فونتهای وب :
فونتها نیز میتوانند باعث تغییر ظاهر یا اندازه متن شوند.
برای مثال ممکن است مرورگر ابتدا متن را با فونت پیشفرض نمایش دهد و پس از دانلود فونت اصلی، ظاهر متن تغییر کند.
اگر اندازه یا ارتفاع متن تغییر کند، سایر عناصر نیز ممکن است جابهجا شوند.
برای کاهش این مشکل باید نحوه بارگذاری فونتها بهینه شود.
۴) محتوای داینامیک :
گاهی اوقات محتوای جدید بدون اقدام کاربر به صفحه اضافه میشود.
برای مثال:
- اعلانها
- بنرها
- پیشنهادهای ویژه
- نوارهای
- اطلاعرسانی
- محتوای تبلیغاتی
- پنجرههای پاپآپ
اگر این عناصر بدون رزرو فضای مناسب به صفحه اضافه شوند، میتوانند باعث افزایش CLS شوند
۵) iframe و ویدئو :
iframeها و ویدئوها نیز باید فضای مشخصی داشته باشند.
اگر مرورگر در ابتدا نداند این عناصر چه ابعادی دارند، پس از بارگذاری آنها ممکن است صفحه جابهجا شود.
به همین دلیل بهتر است نسبت تصویر یا ابعاد مناسب برای آنها تعیین شود.
۶) تغییرات CSS :
گاهی تغییرات CSS نیز باعث Layout Shift میشوند.
برای مثال تغییر اندازه فونت، ارتفاع عناصر، فاصلهها یا موقعیت یک بخش پس از بارگذاری صفحه میتواند باعث جابهجایی محتوا شود.
بنابراین هنگام طراحی صفحات باید از تغییرات ناگهانی جلوگیری کرد.
چگونه CLS را کاهش دهیم؟
برای کاهش CLS باید کاری کنیم مرورگر از همان ابتدا فضای موردنیاز عناصر صفحه را بداند.
در ادامه مهمترین روشهای بهبود CLS را بررسی میکنیم.
۱) تعیین ابعاد تصاویر :
برای تصاویر، ابعاد مناسب مشخص کنید.
این کار به مرورگر کمک میکند فضای لازم برای تصویر را قبل از بارگذاری آن رزرو کند.
در سایتهای وردپرسی نیز بهتر است تصاویر با اندازههای مناسب تولید و در صفحات استفاده شوند.
۲) رزرو فضای تبلیغات :
اگر در سایت از تبلیغات استفاده میکنید، فضای موردنیاز آنها را از قبل مشخص کنید.
این کار باعث میشود هنگام بارگذاری تبلیغ، محتوای اطراف آن جابهجا نشود.
برای سایتهایی که درآمد تبلیغاتی دارند، این موضوع اهمیت زیادی دارد.
۳) مدیریت صحیح فونتها :
برای جلوگیری از تغییر ناگهانی متن، فونتها باید به شکل مناسبی بارگذاری شوند.
بهتر است:
- تعداد فونتها را کاهش دهید.
- فقط وزنهای موردنیاز را استفاده کنید.
- فونتهای غیرضروریرا حذف کنید.
- نحوه نمایش فونت در زمان بارگذاری را مدیریت کنید.
- همچنین استفاده از فونتهای بسیار سنگین میتواند روی عملکرد کلی سایت تأثیر منفی بگذارد
۴) جلوگیری از اضافه شدن محتوای جدید بالای صفحه :
یکی از مشکلات رایج، اضافه شدن محتوای جدید به قسمت بالایی صفحه پس از شروع بارگذاری است.
فرض کنید یک نوار اطلاعرسانی پس از چند ثانیه بالای صفحه ظاهر شود.
تمام محتوای زیر آن به سمت پایین حرکت خواهد کرد.
بهتر است برای چنین عناصری از ابتدا فضای مشخصی در نظر گرفته شود
۵) استفاده صحیح از CSS :
ساختار CSS باید به گونهای باشد که تغییرات ناگهانی در اندازه یا موقعیت عناصر ایجاد نشود.
برای مثال اگر اندازه یک عنصر بعد از بارگذاری تغییر کند، میتواند باعث جابهجایی سایر بخشهای صفحه شود.
طراحی دقیق و تعیین اندازه مناسب عناصر از ابتدا میتواند در کاهش CLS مؤثر باشد.
CLS در وردپرس چیست؟
اگر سایت شما با WordPress ساخته شده است، عوامل مختلفی میتوانند روی CLS تأثیر بگذارند.
از جمله:
- تصاویر
- قالب سایت
- افزونهها
- تبلیغات
- فونتها
- اسلایدرهاپاپآپها
Elementor - محتوای داینامیک
به همین دلیل برای بهبود CLS وردپرس باید ابتدا مشخص شود چه عنصری باعث جابهجایی صفحه شده است.
چگونه خطای CLS را در PageSpeed Insights پیدا کنیم؟
یکی از روشهای مناسب برای بررسی خطای CLS استفاده از PageSpeed Insights است.
پس از وارد کردن آدرس صفحه، گزارش مربوط به Core Web Vitals را مشاهده کنید.
اگر CLS ضعیف باشد، معمولاً باید دنبال عناصری بگردید که هنگام بارگذاری جابهجا میشوند.
در بخش Diagnostics و گزارشهای مرتبط با عملکرد میتوان سرنخهایی درباره عناصر مشکلدار پیدا کرد.
نکته مهم این است که فقط به امتیاز کلی توجه نکنید؛ باید علت ایجاد Layout Shift را پیدا کنید.
آیا CLS روی سئو تأثیر دارد؟
CLS یکی از معیارهای Core Web Vitals است و در ارزیابی تجربه صفحه اهمیت دارد.
اما مانند سایر معیارهای سرعت، نباید آن را تنها عامل رتبهبندی در نظر گرفت.
یک سایت با CLS عالی اما محتوای ضعیف لزوماً رتبه بالایی در گوگل کسب نمیکند.
بهترین نتیجه زمانی ایجاد میشود که بهینهسازی CLS در کنار سایر فعالیتهای سئو انجام شود.
برای مثال:
- تولید محتوای ارزشمند
- بهینهسازی ساختار سایت
- لینکسازی داخلی
- بهبود سرعت سایت
- رفع مشکلات فنی
- بهینهسازی نسخه موبایل
- بهبود Core Web Vitals
جمعبندی؛ CLS چیست و چگونه آن را کاهش دهیم؟
در پاسخ به سؤال CLS چیست باید گفت CLS یا Cumulative Layout Shift معیاری برای اندازهگیری میزان جابهجایی غیرمنتظره عناصر صفحه است.
اگر تصاویر، تبلیغات، فونتها، iframeها یا محتوای داینامیک بدون تعیین فضای مناسب بارگذاری شوند، ممکن است چیدمان صفحه تغییر کند و CLS افزایش پیدا کند.
مقدار کمتر از ۰.۱ برای CLS وضعیت خوبی محسوب میشود. اگر CLS بین ۰.۱ تا ۰.۲۵ باشد، صفحه نیاز به بهبود دارد و مقدار بالاتر از ۰.۲۵ ضعیف محسوب میشود.
برای کاهش CLS باید از ابتدا فضای موردنیاز عناصر مهم صفحه را مشخص کنید. تعیین ابعاد تصاویر، رزرو فضای تبلیغات، مدیریت صحیح فونتها، کنترل محتوای داینامیک و بهینهسازی CSS از مهمترین روشهای بهبود CLS هستند.
در سایتهای وردپرسی نیز قالب، افزونهها، Elementor، تصاویر، تبلیغات و پاپآپها باید بررسی شوند تا مشخص شود کدام عنصر باعث جابهجایی صفحه شده است.
در نهایت، هدف از بهینهسازی CLS فقط کسب یک امتیاز بهتر در PageSpeed نیست؛ بلکه باید کاری کرد که صفحه هنگام بارگذاری و استفاده کاربر پایدار بماند و عناصر آن بدون دلیل جابهجا نشوند. یک سایت سریع، پاسخگو و پایدار تجربه بسیار بهتری برای کاربران ایجاد میکند و به همین دلیل CLS یکی از بخشهای مهم بهینهسازی Core Web Vitals و سئو تکنیکال است.