چگونه با کاهش CLS، کاربران بیشتری جذب کنیم؟
آیا سایت شما در هنگام بارگذاری به هم میریزد؟
Cumulative Layout Shift (CLS) میتواند یکی از دلایل اصلی آن باشد! این یعنی تغییرات ناگهانی در چیدمان صفحه که میتواند تجربه کاربری را خراب و حتی باعث از دست رفتن کاربران شود. چطور میتوانید CLS را کم کنید و تجربه کاربری را به سطح بالاتری ببرید؟ در ادامه با تکنیکهایی آشنا میشوید که سایت شما را سریعتر و با تجربه بهتری برای کاربران بارگذاری میکند!
CLS چیست؟
Cumulative Layout Shift (CLS) یک معیار است که ثبات بصری صفحه وب را ارزیابی میکند. زمانی که جایگاه عناصر صفحه به طور غیرمنتظرهای تغییر کند در حالی که بازدیدکننده هنوز با محتوای صفحه تعامل نداشته است، CLS کاهش مییابد. این شاخص به عنوان یکی از بخشهای اصلی Core Web Vitals گوگل شناخته میشود.
CLS چقدر مهم است؟
رک و پوست کنده خیلی! CLS باعث ایجاد یک تجربه کاربری بد برای کاربران میشود و باید به حداقل خود برسد. علاوه بر تجربه کاربری نامناسب، مسئله بهینه سازی موتورهای جستجو نیز وجود دارد. به این دلیل که گوگل و سایر موتورهای جستجو CLS را به عنوان یکی از معیارهای Core Web Vitals معرفی کردهاند، این شاخص به طور مستقیم بر رتبه بندی و نمایش نتایج جستجو اثر میگذارد. در نتیجه، CLS میتواند عملکرد شما در جستجو را تحت الشعاع قرار دهد.
امتیاز CLS خوب چیست؟
- خوب: امتیاز CLS کمتر از 0.1
این به این معناست که تغییرات چیدمان صفحه بسیار کم و قابل توجه نیستند، و کاربران تجربه روان و پایداری از نظر نمایشی دارند.
- متوسط: امتیاز CLS بین 0.1 و 0.25
در این حالت، تغییرات چیدمان صفحه کمی محسوس هستند، اما هنوز هم مشکلی جدی ایجاد نمیکنند.
- بد: امتیاز CLS بیشتر از 0.25
در این وضعیت، تغییرات چیدمان صفحه بسیار آزاردهنده است و میتواند تجربه کاربری را به طور جدی مختل کند. این مسئله نیازمند بهینه سازی فوری است.
خلاصه که، امتیاز CLS خوب کمتر از 0.1 است. هرچه امتیاز CLS کمتر باشد، تجربه کاربری بهتری را برای کاربران فراهم میآورد.
چه عواملی باعث تغییر CLS میشوند؟
گوگل پنج علت اصلی برای کاهش امتیاز CLS معرفی کرده است که باعث تغییرات ناگهانی و آزاردهنده در چیدمان صفحات میشود:
- تصاویر بدون ابعاد مشخص: به این معنا که زمانی که شما تصاویر را بدون تعیین ابعاد مناسب بارگذاری میکنید. این تصاویر پس از بارگذاری جابه جا شده و اندازه آنها تغییر میکند. این امر باعث بهم ریختگی محتوا میشود.
- تبلیغات و المانهای خارجی بدون ابعاد مشخص در DOM: اگر ابعاد المانهای خارجی و غیره به شکل دقیقی در DOM تعیین نشود بارگذاری آن میتواند منجر به تغییر موقعیت دیگر اجزای صفحه شود.
- محتوای داینامیک: محتوای داینامیک، مانند نظرات، پستهای جدید یا اطلاعاتی که پس از بارگذاری اولیه صفحه به آن اضافه میشود، ممکن است باعث تغییر در چیدمان صفحه شود.
- بارگذاری فونتها پس از بارگذاری صفحه: اگر فونتها پس از بارگذاری اولیه صفحه فراخوانی شوند، ممکن است تغییراتی در نحوه نمایش متنها ایجاد کنند. این مسئله میتواند باعث جابجایی متنها و تغییر اندازه آنها شود که نتیجه آن ایجاد CLS خواهد بود.
- اجزای ثالث که نیاز به دریافت پاسخ از شبکه دارند: بسیاری از اسکریپتها و منابع ثالث برای بارگذاری محتوا یا به روز رسانی DOM نیاز دارند که منتظر دریافت پاسخ از شبکه باشند. این تاخیرها ممکن است باعث تغییرات غیرمنتظره در چیدمان صفحه شوند تا زمانی که دادهها از شبکه دریافت و پردازش شوند.
چگونه Cumulative Layout Shift (CLS) را محاسبه کنیم؟
برای محاسبه CLS، دو معیار اصلی وجود دارد: Impact Fraction (کسری تاثیر) و Distance Fraction (کسری فاصله).
1. Impact Fraction (کسری تاثیر)
این معیار نشان دهنده بخشی از صفحه است که یک عنصر عنصر قبل و بعد از جا به جایی اشغال کرده است. در واقع این عدد برابر با مجموع ناحیهای از صفحه است که قبل و بعد از جابه جایی تحت تاثیر عنصر بوده، نه فقط اندازههای اولیه و نهایی.
برای مثال فرض کنید یک تصویر به اندازه 1000 پیکسل دارید. برای سادگی محاسبات، فرض میکنیم نمای صفحه شما 2000 پیکسل است. بنابراین، این تصویر 50% از نمای صفحه را اشغال میکند. حالا فرض کنید وقتی CSS بارگذاری میشود، ابعاد تصویر به 500 پیکسل کاهش مییابد، که 25% از نمای صفحه را میسازد.
برای محاسبه کسری تاثیر، باید این دو مقدار را با هم جمع کنید:
50% (مقدار اولیه) + 25% (مقدار جدید) = 75%
بنابراین، کسری تاثیر برابر با 0.75 میشود.
2. Distance Fraction (کسری فاصله)
دومین معیاری که برای محاسبه CLS به کار میرود، کسری فاصله است. این معیار نشان دهنده فاصلهای است که صفحه از موقعیت اصلی خود تا موقعیت نهایی تغییر میکند. در مثال قبلی، فرض میکنیم تصویر به اندازه 500 پیکسل جابهجا میشود، که معادل 25% از ابعاد نمای صفحه است. بنابراین، کسری فاصله برابر با 0.25 میشود.
محاسبه نهایی CLS
برای محاسبه CLS، کافی است که کسری تاثیر را در کسری فاصله ضرب کنید:
0.75 (کسری تاثیر) × 0.25 (کسری فاصله) = 0.1875.
چگونه Cumulative Layout Shift (CLS) را بهینه سازی کنیم؟
همانطور که واضح است، Cumulative Layout Shift (CLS) تنها یک معیار نمایشی نیست، بلکه میتواند تجربه کاربری را به شدت تحت تاثیر قرار دهد و بر عملکرد و بازدهی سایت شما اثر بگذارد. بنابراین، گام بعدی این است که CLS را بهینه سازی کنید تا عملکرد و قابلیت استفاده سایت شما بهبود یابد.
1. تصاویر و ویدیوها
همه دوست دارند که تصاویر و ویدیوهای با کیفیت بالا داشته باشند، اما این رسانهها به شدت بر سرعت بارگذاری سایت اثر میگذارند. در نتیجه، تصاویر و ویدیوها زمانی که چند ثانیه بعد از بارگذاری باقی محتوا بارگذاری میشوند، باعث تغییرات چیدمان میشوند. برای جلوگیری از این تغییرات، میتوانید ابعاد DOM را برای عناصری که در حال بارگذاری هستند، مشخص کنید.
2. تبلیغات (Ads)
اگرچه تبلیغات ممکن است چالش برانگیز باشند، اما رفع مشکلات ناشی از آنها غیرممکن نیست. تغییرات چیدمان ناشی از تبلیغات گاهی پیش میآید و همه ما این مشکل را تجربه کردهایم. برای جلوگیری از این تغییرات، کافی است ابعاد در DIV را به صورت دقیق مشخص کنید. این کار باعث میشود که تبلیغات به ابعاد محدود شده خود پایبند باشند و حتی زمانی که تبلیغات پس از بارگذاری محتوا ظاهر میشوند یا دوباره با تبلیغات جدید بارگذاری میشوند، تغییراتی در چیدمان صفحه ایجاد نشود.
3. محتوای داینامیک
محتوای داینامیک یکی از چالشهای بزرگ برای بهینه سازی CLS است، زیرا نیاز به برنامه ریزی و پیش بینی دقیق دارد. پس از شناسایی مکان بارگذاری محتوای داینامیک، میتوانید از روش مشابهی برای تنظیم ابعاد در DIV استفاده کنید تا از ایجاد تغییرات غیرضروری در چیدمان جلوگیری کنید.
4. فونتها
فونتها به ویژه اگر سفارشی باشند، میتوانند باعث مشکلاتی در تجربه کاربری شوند. زمانی که متن اولیه بارگذاری میشود، معمولا برای مرورگرهای کروم فونت پیشفرض Arial و برای سافاری Helvetica است. سپس زمانی که فونت سفارشی شما بارگذاری میشود، ممکن است شاهد “فلش” یا تغییر ناگهانی در ظاهر متن باشید.
برای جلوگیری از این مشکل، میتوانید از ویژگی rel=”preload” در لینک فونت استفاده کنید. این کار باعث میشود که فونتها قبل از بارگذاری سایر محتوا، پیش بارگذاری شوند و از تغییرات ناگهانی جلوگیری کنند.
در نهایت
Cumulative Layout Shift (CLS) یکی از شاخصهای Core Web Vitals است که میزان ثبات بصری یک صفحه وب را در هنگام بارگذاری اندازه گیری میکند. این معیار، مقدار جا به جاییهای غیرمنتظره چیدمان صفحه را در حین لود شدن محاسبه کرده و نقش مهمی در ارزیابی تجربه کاربری دارد.
سوالات متداول
آیا CLS بر سئوی من اثر میگذارد؟
بله، CLS توسط گوگل برای ارزیابی تجربه کاربری استفاده میشود. امتیاز بالای CLS میتواند منجر به تجربه کاربری ضعیف شود و بر کیفیت صفحات وب شما اثر بگذارد و منجر به رتبه بندی پایین در نتایج جستجو شود.
آیا باید به تغییرات CLS پس از بارگذاری اهمیت دهم؟
بله! این تغییرات اغلب نتیجه تعاملات کاربر هستند. تا زمانی که این تغییرات در عرض 500 میلیثانیه از آن تعامل رخ دهند، در امتیاز CLS شما محاسبه میشوند.
منابع
- https://sematext.com/glossary/cumulative-layout-shift/
دیدگاه (2)
بهنظر شما، اگر قرار باشد فقط یکی از سه معیار اصلی Core Web Vitals (LCP، FID، CLS) را بهبود بدهیم، کدومش باید اولویت داشته باشه؟ چرا؟
۲۰ تیر ۱۴۰۴یکی از مواردی هم که میتونه به CLS کمک کنه استفاده از transform و opacity در CSS به جای روشهای قدیمی مثل جابجا کردن عناصر از طریق margin و padding هستش.
۲۰ تیر ۱۴۰۴