CLS چیست؟ [ روش های برتر رفع خطا CLS! ]

در دنیای دیجیتال امروز، بهینه‌سازی تجربه کاربری و سرعت بارگذاری صفحات اهمیت بیشتری نسبت به هر زمان دیگری پیدا کرده است. اگر صاحب یک وب‌سایت هستید یا مشغول به بهبود سئو سایت خود هستید، حتماً با اصطلاحاتی مثل Cumulative Layout Shift (CLS) آشنا شده‌اید. شاید شما هم تلاش کرده‌اید که رتبه‌بندی سایتتان در نتایج جستجوی گوگل را بهبود ببخشید یا می‌خواهید که نرخ تبدیل بازدیدکنندگان به مشتریانتان بیشتر شود.دیجیتال مارکتینگ چیست و چگونه می‌تواند به کسب‌وکار شما کمک کند؟ آژانس مهام در این زمینه خدمات مختلفی ارائه می‌دهد که می‌تواند شما را در مسیر رشد آنلاین یاری کند.

در آژانس بازاریابی محتوا مهام، ما به شما کمک می‌کنیم تا نه تنها در SEO سایت خود پیشرفت کنید، بلکه تجربه کاربری سایتتان را به سطحی جدید برسانید. یکی از نکات مهم در این مسیر، توجه به نحوه بارگذاری صفحات و نحوه نمایش محتوای سایت است؛ جایی که متا تگ رفرش به عنوان یکی از ابزارهای کاربردی، می‌تواند نقش بسیار مهمی ایفا کند.

آیا می‌دانید متا تگ رفرش چه تأثیری در سرعت و تجربه کاربری سایت شما دارد؟آیا می‌خواهید بدانید که چگونه با استفاده صحیح از این تگ، می‌توانید CLS سایت خود را بهبود ببخشید و کارایی سایتتان را افزایش دهید؟برای طراحی سایت در مشهد، آژانس بازاریابی مهام با ارائه خدمات حرفه‌ای در این زمینه به شما کمک می‌کند تا سایت خود را به شکلی کاربرپسند و بهینه بسازید.

در این مقاله، شما را با جزئیات متا تگ رفرش و تأثیر آن بر سئو و تجربه کاربری آشنا خواهیم کرد. اگر به دنبال راهکارهایی برای بهبود CLS و ارتقای عملکرد سایت خود هستید، همراه ما باشید!

به نقل از وب 24:

CLS چیست؟

همانطور که قبلاً اشاره کردیم، CLS یا Cumulative Layout Shift معیاری است که برای اندازه‌گیری ثبات بصری در زمان بارگذاری صفحات استفاده می‌شود. این معیار به طور خاص به تغییرات غیرمنتظره‌ای اشاره دارد که ممکن است در حین بارگذاری سایت، ظاهر عناصر صفحه از جمله متن، تصاویر و دکمه‌ها را تحت تأثیر قرار دهد.در صورتی که نیاز به طراحی سایت حرفه‌ای دارید، آژانس مهام با تیم طراحی مجرب خود، راه‌حل‌های منحصر به فرد و متناسب با نیازهای شما ارائه می‌دهد.

به زبان ساده، CLS زمانی اتفاق می‌افتد که یک عنصر بصری (مثل یک تصویر، دکمه یا متن) ناگهان موقعیت خود را تغییر می‌دهد و این تغییر باعث ایجاد یک تجربه ناپایدار و ناخوشایند برای کاربر می‌شود. برای مثال، ممکن است وقتی کاربر در حال خواندن مطلبی است، ناگهان یک تصویر یا بنر به پایین صفحه منتقل شود و باعث جابجایی متن‌ها شود.

این نوع تغییرات نه‌تنها تجربه کاربری را تحت تأثیر قرار می‌دهد، بلکه می‌تواند بر رتبه‌بندی سئو سایت شما نیز تأثیر منفی بگذارد. چرا که گوگل در الگوریتم‌های جدید خود، به ثبات بصری صفحات بیشتر از همیشه توجه می‌کند.اگر به دنبال خدمات سئو در مشهد هستید، آژانس بازاریابی مهام می‌تواند با استفاده از استراتژی‌های به‌روز، رتبه سایت شما را در نتایج جستجو بهبود بخشد.

امتیاز CLS چیست؟

امتیاز CLS (Cumulative Layout Shift) معیاری است که نشان‌دهنده میزان تغییرات غیرمنتظره و ناخواسته در چیدمان یک صفحه وب هنگام بارگذاری است. این تغییرات ممکن است باعث جابه‌جایی یا تغییر موقعیت المان‌های صفحه (مثل متن، تصاویر یا دکمه‌ها) شوند که تجربه کاربری را مختل می‌کند. در واقع، CLS بر اساس مجموع جابه‌جایی‌های بصری که در حین بارگذاری صفحه اتفاق می‌افتد، محاسبه می‌شود.

برای داشتن یک تجربه کاربری بهینه، گوگل توصیه می‌کند که امتیاز CLS سایت شما باید کمتر از 0.1 باشد. امتیاز بالاتر از این مقدار نشان‌دهنده وجود مشکلاتی در چیدمان صفحه است که می‌تواند باعث آزار کاربران شود. به‌طور خاص، جابه‌جایی‌های ناگهانی و غیرمنتظره می‌تواند منجر به اشتباهات کاربری، مثل کلیک بر روی لینک اشتباه یا دکمه غیرمطلوب شود.

برای اطمینان از اینکه امتیاز CLS شما در حد مطلوب قرار دارد، پیشنهاد می‌شود که ۷۵ درصد صفحات شما در موبایل و دسکتاپ به‌طور استاندارد کمتر از 0.1 CLS داشته باشند. این به این معناست که بیشتر صفحات شما باید تجربه‌ی بدون پرش و تغییرات ناگهانی چیدمان را برای کاربران فراهم کنند.

جزئیات تغییرات چیدمان

تغییرات چیدمان (Layout Shifts) زمانی اتفاق می‌افتند که موقعیت یا اندازه یک عنصر در صفحه به‌طور غیرمنتظره تغییر کند و باعث جابه‌جایی سایر المان‌های بصری شود. این تغییرات می‌توانند تجربه کاربری را مختل کرده و به‌ویژه زمانی که کاربران در حال تعامل با صفحه هستند، به مشکلاتی مانند کلیک اشتباهی روی لینک‌ها یا دکمه‌ها منجر شوند.

این تغییرات از طریق Layout Instability API در مرورگرها گزارش می‌شوند. این API ورودی‌های layout-shift را هر بار که یک عنصر بصری (مثلاً یک تصویر یا دکمه) در محدوده دید کاربر وارد شده و موقعیت آن تغییر کند، ثبت می‌کند. این تغییرات به‌طور خاص به‌عنوان عناصر ناپایدار شناخته می‌شوند، زیرا باعث ایجاد بی‌ثباتی در چیدمان صفحه می‌شوند.

نکته مهم این است که layout-shift تنها زمانی رخ می‌دهد که موقعیت یک عنصر موجود در صفحه تغییر کند. به عبارت دیگر، اگر یک عنصر جدید به صفحه اضافه شود یا اندازه یک عنصر موجود تغییر کند، این تغییرات به‌تنهایی به‌عنوان layout-shift حساب نمی‌شوند، مگر اینکه این تغییرات باعث جابه‌جایی موقعیت عناصر دیگر در صفحه شوند. به این معنا که تغییر اندازه یک تصویر، به‌تنهایی layout-shift به شمار نمی‌آید مگر اینکه باعث شود سایر اجزای صفحه جابه‌جا شوند.

در نتیجه، layout-shiftها به‌عنوان یکی از معیارهای مهم در ارزیابی تجربه کاربری (UX) و عملکرد صفحات وب مورد توجه قرار می‌گیرند.

نحوه محاسبه امتیاز Layout Shift

برای محاسبه امتیاز Layout Shift، مرورگر تمرکز خود را روی اندازه‌ی محدوده قابل‌نمایش کاربر قرار می‌دهد و جابجایی‌های عناصر ناپایدار را در این محدوده بین دو فریم مختلف اندازه‌گیری می‌کند. امتیاز نهایی Layout Shift از ترکیب دو عامل اصلی به‌دست می‌آید: ضریب تأثیر و ضریب فاصله. در ادامه هر یک از این ضرایب را توضیح می‌دهیم:

• ضریب تأثیر (Impact Fraction): این ضریب نشان می‌دهد که چه درصدی از فضای قابل‌نمایش کاربر توسط عنصر جابجا شده تحت تاثیر قرار گرفته است. به عبارت دیگر، این مقدار میزان فضای صفحه‌ای را که تغییر کرده، مشخص می‌کند.
• ضریب فاصله (Distance Fraction): این ضریب نشان‌دهنده فاصله‌ای است که عنصر جابجا شده، طی کرده است. به عبارت ساده‌تر، نشان می‌دهد که عنصر چقدر از جایگاه اولیه خود حرکت کرده است.

در نهایت، امتیاز Layout Shift با ضرب این دو ضریب محاسبه می‌شود:

امتیاز Layout Shift = ضریب تأثیر * ضریب فاصله

ضریب تأثیر (Impact Fraction) در CLS

ضریب تأثیر یا Impact Fraction، میزان تأثیرگذاری تغییرات عناصر ناپایدار (مانند تصاویر یا متون) در دو فریم مختلف را در محدوده قابل مشاهده کاربر اندازه‌گیری می‌کند. این ضریب نشان‌دهنده‌ی درصدی است که فضای مرئی در هر فریم توسط عناصر جابجا شده پوشش داده شده است.

به طور دقیق‌تر، ضریب تأثیر یک فریم، شامل پیوند محدودۀ مرئی تمامی عناصر ناپایدار در فریم قبلی و فریم فعلی است، که به‌عنوان ضریبی از تمام محدوده قابل‌نمایش کاربر محاسبه می‌شود.

فرض کنید در تصویر بالا عنصری وجود دارد که نیمی از محدوده قابل‌نمایش کاربر را در یک فریم پوشش می‌دهد. سپس در فریم بعدی، این عنصر به اندازه 25% از طول محدوده قابل‌نمایش کاربر تغییر می‌کند و کاهش می‌یابد. در این حالت، مستطیل قرمز خط‌چین‌شده، پیوند بین محدوده مرئی این عنصر در هر دو فریم را نمایش می‌دهد. این پیوند در مجموع 75% از تمام محدوده قابل مشاهده کاربر را شامل می‌شود. در نتیجه، ضریب تأثیر آن برابر با 0.75 خواهد بود.

ضریب فاصله (Distance Fraction)

ضریب فاصله یکی دیگر از عواملی است که در محاسبه امتیاز Layout Shift نقش دارد. این ضریب، میزان حرکت یک عنصر ناپایدار را در مقایسه با ابعاد محدوده قابل‌نمایش کاربر اندازه‌گیری می‌کند. به بیان ساده‌تر، ضریب فاصله عبارت است از بیشترین مسافتی که هر عنصر ناپایدار طی کرده (چه به صورت افقی و چه عمودی)، تقسیم بر بیشترین ابعاد محدوده قابل‌نمایش کاربر (عرض یا طول هر کدام که بیشتر باشد).

در مثال قبلی، بیشترین ابعاد محدوده قابل‌نمایش کاربر طول بود. اگر عنصر ناپایدار 25% از طول محدوده قابل‌نمایش کاربر را طی کرده باشد، ضریب فاصله آن برابر با 0.25 می‌شود.

با این توضیحات، اگر در آن مثال ضریب تأثیر 0.75 و ضریب فاصله 0.25 باشد، امتیاز Layout Shift برابر می‌شود با:

0.75 * 0.25 = 0.1875

اوایل محاسبه امتیاز Layout Shift تنها بر اساس ضریب تأثیر انجام می‌شد، اما بعداً برای جلوگیری از جریمه شدن مواردی که در آن‌ها تغییرات کوچکی در عناصر بزرگ اتفاق می‌افتد، ضریب فاصله نیز وارد محاسبات شد.

تغییر امتیاز Layout Shift برای بهبود CLS

در این مثال، دکمه «Click Me!» در تصویر باکس خاکستری را که متن سیاه داشت، به سمت پایین هل می‌دهد و باکس سبز که متن سفید داشت را از محدوده قابل‌نمایش کاربر خارج می‌کند.

اگر چه اندازه باکس خاکستری تغییر می‌کند، ولی موقعیت اولیه آن تغییری نمی‌کند، بنابراین این عنصر ناپایدار محسوب نمی‌شود. اما موقعیت باکس سبز تغییر کرده است. بخشی از آن از محدوده قابل‌نمایش کاربر خارج شده و این محدوده غیرقابل‌مشاهده در محاسبه ضریب تأثیر در نظر گرفته نمی‌شود.

محدوده مرئی باکس سبز در هر دو فریم (که با مستطیل قرمز خط‌چین شده نمایش داده شده) همان اندازه‌ای است که در فریم اول بوده و معادل 50% از محدوده قابل‌نمایش کاربر است. بنابراین، ضریب تأثیر آن برابر با 0.5 است. همچنین، باکس سبز حدود 14% در محدوده قابل‌نمایش کاربر حرکت کرده است، بنابراین ضریب فاصله آن 0.14 می‌شود.

در نتیجه، امتیاز Layout Shift در این حالت برابر خواهد بود با:

0.14 * 0.5 = 0.07

نمونه‌ای از عناصر ناپایدار تاثیرگذار بر CLS

در تصویر زیر، در اولین فریم چهار نتیجه از یک درخواست API برای حیوانات نمایش داده می‌شود که به ترتیب حروف الفبا مرتب شده‌اند. در فریم دوم، نتایج بیشتری به این لیست اضافه می‌شود.

در این حالت:

• آیتم “Cat” هیچ تغییری در موقعیت خود ندارد و پایدار است.
• آیتم‌های جدید اضافه‌شده، که قبلاً در محدوده قابل‌نمایش کاربر نبوده‌اند، موقعیت اولیه خود را تغییر نمی‌دهند.
• اما آیتم‌های “Dog”، “Horse” و “Zebra” موقعیت خود را تغییر داده‌اند و به همین دلیل به عنوان عناصر ناپایدار شناخته می‌شوند.

مستطیل‌های نقطه‌چین شده در تصویر، پیوند بین این سه عنصر ناپایدار را در دو فریم نشان می‌دهند که مجموعاً حدود 38% از محدوده قابل‌نمایش کاربر را پوشش می‌دهند (یعنی ضریب تأثیر آن‌ها برابر با 0.38 است).

همچنین، فلش‌ها نشان می‌دهند که چقدر این عناصر جابجا شده‌اند. برای مثال، “Zebra” بیشتر از همه جابجا شده و حدود 30% از طول محدوده قابل‌نمایش کاربر را طی کرده است. بنابراین، ضریب فاصله آن برابر با 0.3 است.

با این حساب، امتیاز Layout Shift در این مثال برابر با:

0.3 * 0.38 = 0.1172

Layout Shift پیش‌بینی‌شده در مقابل غیرمنتظره

همه Layout Shiftها بد نیستند! در حقیقت، بسیاری از اپلیکیشن‌های وب پویا به طور مداوم موقعیت عناصر صفحه را تغییر می‌دهند و این تغییرات به طور طبیعی جزئی از تجربه کاربری آن‌ها است. این نوع تغییرات معمولاً پیش‌بینی‌شده هستند و کاربران انتظار دارند که چنین تغییراتی در حین تعامل با سایت اتفاق بیفتد.برای یادگیری تکنیک‌های آموزش طراحی سایت از صفر تا صد، آژانس بازاریابی مهام دوره‌های آموزشی متنوعی برای علاقه‌مندان به طراحی سایت برگزار می‌کند.

تفاوت اصلی میان Layout Shift پیش‌بینی‌شده و غیرمنتظره در این است که در Shiftهای پیش‌بینی‌شده، کاربر می‌داند که تغییرات در حال رخ دادن است و در نتیجه، به این تغییرات واکنش نشان می‌دهد. این نوع تغییرات معمولاً به صورتی طراحی می‌شوند که تجربه کاربری را بهبود ببخشند و در عمل مشکلی برای کاربر ایجاد نمی‌کنند.

برای افزایش سرعت سایت و بهبود تجربه کاربری، آژانس بازاریابی مهام راهکارهایی برای افزایش سرعت بارگذاری سایت شما ارائه می‌دهد.

اما Layout Shift غیرمنتظره زمانی رخ می‌دهد که بدون پیش‌بینی، تغییرات بزرگی در موقعیت عناصر صفحه اتفاق می‌افتد. این تغییرات می‌تواند باعث آزار کاربر شود و در نهایت تجربه کاربری منفی ایجاد کند. به عنوان مثال، زمانی که یک دکمه یا لینک ناگهان جابجا می‌شود و کاربر به اشتباه روی آن کلیک می‌کند، یا زمانی که متنی که در حال خواندن آن هستید، به دلیل حرکت ناگهانی عناصر، از دید شما خارج می‌شود.

در نهایت، مهم است که در طراحی صفحات وب، توجه ویژه‌ای به این موضوع داشته باشیم تا تغییرات پیش‌بینی‌شده به صورت نرم و بدون اختلال در تجربه کاربر رخ دهند و Layout Shift غیرمنتظره کاهش یابد.

Layout Shift ابداعی کاربر

یک Layout Shift زمانی مشکل‌ساز است که خلاف انتظار کاربر رخ دهد. اما از سوی دیگر، Layout Shiftهایی که در واکنش به تعاملات کاربر (مانند کلیک روی یک لینک، فشردن یک دکمه، تایپ در یک باکس جستجو و موارد مشابه) ایجاد می‌شوند، در واقع می‌توانند مثبت باشند، البته تا زمانی که این تغییرات به اندازه کافی مرتبط با تعامل کاربر باشند و باعث گیجی یا سردرگمی او نشوند.

برای مثال، فرض کنید تعامل یک کاربر باعث ارسال یک درخواست شبکه می‌شود که برای تکمیل آن مدتی طول می‌کشد. بهترین روش برای جلوگیری از Layout Shift غیرمنتظره هنگام تکمیل درخواست، این است که فضایی مخصوص برای بارگذاری محتوای جدید ایجاد کرده و یک نمایشگر لودینگ (بارگذاری) در همان محدوده قرار دهید. به این ترتیب، از تغییرات غیرمنتظره در صفحه جلوگیری می‌شود و کاربر از وضعیت بارگذاری مطلع خواهد بود.

اگر کاربر متوجه نشود که چیزی در حال لود شدن است، یا نتواند تخمین بزند که درخواست چه زمانی آماده می‌شود، ممکن است در حین انتظار روی چیزی دیگر کلیک کند که این خود منجر به یک تجربه کاربری ناخوشایند می‌شود.آژانس مهام دوره‌های آموزش سئو را به صورت جامع برگزار می‌کند تا بتوانید دانش خود را در زمینه بهینه‌سازی موتور جستجو ارتقا دهید.

همچنین Layout Shiftهایی که در بازه زمانی 500 میلی‌ثانیه پس از ورود اطلاعات توسط کاربر اتفاق می‌افتند، به عنوان ورودی اخیر (Recent Input) شناخته می‌شوند و به همین دلیل از محاسبه CLS صرف‌نظر می‌شود.

این پرچم (Flag) تنها برای تعاملات واضح مانند لمس کردن، کلیک کردن یا فشار دادن دکمه‌ها اعمال می‌شود. تعاملات ادامه‌دار مانند اسکرول کردن، کشیدن، برجسته کردن و زوم کردن به عنوان “ورودی اخیر” محسوب نمی‌شوند و در محاسبات Layout Shift در نظر گرفته نمی‌شوند.

انیمیشن‌ها و انتقال‌ها (Animations and Transitions)

انیمیشن‌ها و انتقال‌ها زمانی که به‌درستی استفاده شوند، یکی از بهترین روش‌ها برای به‌روزرسانی محتوای صفحه به شمار می‌آیند، بدون اینکه تجربه کاربری منفی ایجاد کنند. تغییرات ناگهانی و غیرمنتظره در محتوا می‌تواند همیشه حس ناخوشایندی به کاربر بدهد. اما تغییرات تدریجی و طبیعی، که به‌آرامی از یک موقعیت به موقعیت دیگر منتقل می‌شوند، به کاربر کمک می‌کند تا بهتر متوجه شود چه اتفاقی در حال وقوع است و چه چیزی در صفحه در حال تغییر است.برای سفارش تولید محتوا با کیفیت و هدفمند، آژانس بازاریابی مهام خدماتی متناسب با نیاز شما ارائه می‌دهد تا محتوای شما تأثیر بیشتری داشته باشد.

یکی از بهترین ابزارهایی که برای اجرای این انتقالات استفاده می‌شود، ویژگی transform در CSS است. این ویژگی به توسعه‌دهندگان این امکان را می‌دهد که عناصر صفحه را بدون ایجاد Layout Shift حرکت دهند.

نکات کلیدی برای استفاده درست از انیمیشن‌ها و انتقال‌ها:

• به جای تغییر دادن ویژگی‌های عرض و ارتفاع (width و height)، از تغییر ابعاد با transform: scale() استفاده کنید.
• برای جابجایی عناصر در اطراف صفحه، به جای استفاده از ویژگی‌های top، right، bottom یا left، بهتر است از دستور transform: translate() بهره ببرید.

با استفاده درست از این تکنیک‌ها، می‌توان تغییرات بصری را به گونه‌ای اعمال کرد که برای کاربر طبیعی به نظر برسد و از ایجاد Layout Shift ناخواسته جلوگیری شود.

تفاوت‌های بین معیار و API

درک تفاوت‌های میان معیار CLS (Cumulative Layout Shift) و API (Application Programming Interface) می‌تواند به بهبود دقت اندازه‌گیری‌ها کمک کند. در اینجا به برخی از تفاوت‌های کلیدی بین این دو می‌پردازیم:

1. صفحات در حالت پس‌زمینه: اگر صفحه تمام مدت در حالت پس‌زمینه قرار داشته باشد، API نباید هیچ مقداری از CLS را گزارش کند. به عبارت دیگر، وقتی صفحه در پس‌زمینه است و تغییرات بصری ندارد، این تغییرات در گزارش‌ها لحاظ نمی‌شود.
2. بازیابی از کش: اگر صفحه از back/forward cache بازیابی شود، مقدار CLS آن باید به صفر بازگردد. چرا که تجربه کاربری برای بازدیدکننده به‌عنوان یک بازدید جدید از صفحه محسوب می‌شود.
3. تغییرات در فریم‌ها: API تغییرات layout-shift را که درون فریم‌ها (frames) اتفاق می‌افتد گزارش نمی‌کند. اما برای اندازه‌گیری صحیح CLS، باید به این تغییرات نیز توجه شود. در واقع، زیر-فریم‌ها (sub-frames) می‌توانند از API برای گزارش تغییرات در layout-shift استفاده کنند تا شتاب فریم والد را افزایش دهند.

سئو فنی بخش مهمی از بهینه‌سازی سایت است که آژانس مهام با تیم متخصص خود این خدمات را برای بهبود عملکرد سایت شما ارائه می‌دهد.

پیچیدگی‌های CLS در طول عمر صفحه

یکی از چالش‌های اصلی در اندازه‌گیری CLS این است که این معیار تمام طول عمر صفحه را اندازه‌گیری می‌کند. این باعث پیچیدگی‌هایی می‌شود، چرا که:

• باز نگه‌داشتن تب‌ها برای مدت طولانی: کاربران ممکن است یک تب را برای مدت طولانی – روزها، هفته‌ها یا حتی ماه‌ها – باز بگذارند. در این موارد، مرورگر معمولاً صفحه را در پس‌زمینه باز نگه می‌دارد و این موضوع می‌تواند باعث سختی در گزارش‌گیری مقدار نهایی CLS شود.
• مرورگرهای موبایل: در سیستم‌عامل‌های موبایل، مرورگرها معمولاً تب‌های پس‌زمینه را دوباره لود نمی‌کنند، که این موضوع محاسبه دقیق CLS را دشوار می‌سازد.

راه‌حل‌ها و اقدامات پیشنهادی

برای حل این مشکلات، توصیه می‌شود که هر بار که یک صفحه در پس‌زمینه قرار می‌گیرد یا از آنلود (unload) می‌شود، CLS گزارش شود. رویداد visibilitychange این دو سناریو را پوشش می‌دهد.

سیستم‌های تحلیلی که این داده‌ها را دریافت می‌کنند، باید در بک‌اند (backend) محاسبه نهایی CLS را انجام دهند تا اطمینان حاصل شود که مقدار دقیق گزارش می‌شود.

استفاده از لایبراری JavaScript برای اندازه‌گیری CLS

توسعه‌دهندگان می‌توانند به‌جای محاسبه دستی این تغییرات، از لایبراری جاوااسکریپت web-vitals استفاده کنند. این لایبراری تمامی مراحل گزارش‌دهی و محاسبه CLS را به‌طور خودکار انجام می‌دهد.

برای مشاهده نحوه دقیق اندازه‌گیری CLS در JavaScript، می‌توانید به کد منبع getCLS مراجعه کنید.

محدودیت‌ها در اندازه‌گیری CLS

در برخی موارد خاص، مانند iframeهای متقابل، اندازه‌گیری دقیق CLS با استفاده از JavaScript ممکن است امکان‌پذیر نباشد. برای اطلاع از جزئیات بیشتر، می‌توانید به بخش محدودیت‌ها در کتابخانه web-vitals مراجعه کنید.

آموزش کامل بهبود CLS (Cumulative Layout Shift)

بهبود CLS یکی از مهم‌ترین اقدامات در بهینه‌سازی تجربه کاربری و پرفورمنس سایت است. CLS به تغییرات غیرمنتظره چیدمان صفحه اشاره دارد که می‌تواند باعث آزار کاربران و کاهش امتیاز سئو شود. در این مقاله، به بررسی شش اقدام کلیدی برای بهبود CLS پرداخته می‌شود.برای دریافت خدمات سئو و افزایش ترافیک سایت خود، آژانس مهام با تیم متخصص خود آماده است تا شما را در این مسیر هدایت کند.

1. بهینه‌سازی تصاویری که ابعاد مشخصی ندارند

توضیح 1: تصاویر بدون ابعاد ثابت ممکن است باعث layout shift شوند، زیرا مرورگر باید منتظر بماند تا تصویر بارگذاری شود و بعد ابعاد آن را محاسبه کند. این مسئله زمانی رخ می‌دهد که تصویر بدون رزرو فضای کافی بارگذاری می‌شود و باعث جابجایی محتوا می‌شود.

توضیح 2: برای جلوگیری از این مشکل، باید برای تمام تصاویر ابعاد width و height مشخص تعیین کنید. این کار به مرورگر کمک می‌کند تا فضای مناسب را پیش از لود شدن تصویر رزرو کند و از جابجایی ناگهانی جلوگیری شود.

توضیح 3: در طراحی ریسپانسیو، نسبت تصویر (مثل 16:9 یا 4:3) باید به‌درستی تعریف شود. با استفاده از ویژگی aspect-ratio در CSS یا تعیین مقادیر صحیح width و height برای تصاویر، مرورگر می‌تواند اندازه درست فضای مورد نیاز را پیش‌بینی کند و نمایش صحیح تصویر را تضمین کند.

2. نحوه بهینه‌سازی CLS در مرورگرها

توضیح 1: مرورگرهای مدرن، مثل کروم و فایرفاکس، می‌توانند اندازه تصاویر را به‌طور خودکار محاسبه کنند. با استفاده از ویژگی‌های width و height برای تصاویر، مرورگر فضای مناسب را رزرو می‌کند و از تغییرات ناگهانی جلوگیری می‌کند.

توضیح 2: برای تنظیم نسبت تصویر، می‌توانید از ویژگی‌های width و height استفاده کنید. مرورگرها به‌طور خودکار می‌توانند نسبت ابعاد را از این مقادیر استخراج کرده و اندازه مناسب را محاسبه کنند.

برای اطلاع از جزئیات سئو خارجی و تاثیر آن بر رتبه سایت خود، آژانس مهام مشاوره‌های تخصصی در این زمینه ارائه می‌دهد.

توضیح 3: همچنین در تصاویر ریسپانسیو، می‌توانید از ویژگی srcset استفاده کنید تا مرورگر با توجه به اندازه صفحه، تصویر مناسب را انتخاب کند. برای اطمینان از اینکه اندازه تصویر همیشه درست نمایش داده می‌شود، نسبت ابعاد ثابت و تنظیمات CSS را فراموش نکنید.

3. آگهی‌های تبلیغ، embededها و iframeهای بدون ابعاد

توضیح 1: تبلیغات و iframeهای بدون ابعاد ثابت می‌توانند به شدت موجب layout shift شوند، به‌خصوص وقتی اندازه آن‌ها در زمان بارگذاری تغییر کند. این تغییرات معمولاً به دلیل بارگذاری دیرهنگام منابع یا تغییر اندازه‌های غیرمنتظره رخ می‌دهند.

توضیح 2: برای جلوگیری از این مشکل، باید فضای مناسب را برای تبلیغات و iframeها از قبل رزرو کنید. این کار می‌تواند با استفاده از ویژگی‌های CSS مانند aspect-ratio یا تعیین ابعاد استاتیک برای تگ‌های تبلیغاتی انجام شود.

توضیح 3: هنگام بارگذاری iframeها، باید اطمینان حاصل کنید که فضای لازم برای آن‌ها رزرو شده است تا محتوای موجود در آن‌ها نتواند چیدمان صفحه را تغییر دهد. برای این کار می‌توانید از placeholders استفاده کنید تا فضای موردنیاز برای iframeها به‌درستی محاسبه شود.

4. نحوه بهینه‌سازی iframeها

توضیح 1: هنگام استفاده از iframeها برای افزودن محتوای خارجی به سایت (مثل ویدئوها، نقشه‌ها یا پست‌ها)، ممکن است اندازه iframe مشخص نباشد و پس از بارگذاری محتوای خارجی تغییر کند. این تغییر اندازه می‌تواند باعث layout shift شود.

برای اطلاع از جزئیات سئو خارجی و تاثیر آن بر رتبه سایت خود، آژانس مهام مشاوره‌های تخصصی در این زمینه ارائه می‌دهد.

توضیح 2: برای بهینه‌سازی CLS در iframeها، باید فضای مناسب برای آن‌ها از قبل رزرو کنید. این کار می‌تواند با استفاده از ابزارهای توسعه مرورگر و تنظیمات دقیق اندازه‌های iframe انجام شود. فضای لازم باید پیش از بارگذاری محتوا در iframe رزرو شود.

اگر می‌خواهید ابزار Google Lighthouse را برای بهبود عملکرد سایت خود یاد بگیرید، آژانس مهام دوره‌های آموزشی این ابزار را برگزار می‌کند.

توضیح 3: استفاده از ویژگی height و width استاتیک یا تنظیم نسبت ابعاد برای iframeها، به مرورگر کمک می‌کند که فضای مناسب را برای آن‌ها رزرو کند. این اقدام باعث جلوگیری از تغییرات ناگهانی در چیدمان صفحه می‌شود.

5. بهینه‌سازی محتوای داینامیک و بهبود CLS

توضیح 1: محتوای داینامیک که به‌طور خودکار بارگذاری یا تغییر می‌کند (مثل فیدهای زنده یا پیشنهادات مرتبط) می‌تواند باعث layout shift شود. این تغییرات معمولاً به دلیل اضافه شدن یا جابجایی ناگهانی محتوا رخ می‌دهند.

توضیح 2: برای جلوگیری از جابجایی ناگهانی، باید فضایی را برای محتوای داینامیک از قبل رزرو کنید. این کار می‌تواند با استفاده از placeholders یا skeleton screens انجام شود که به کاربر نشان می‌دهد فضای خالی قرار است پر شود.

توضیح 3: اگر محتوای داینامیک ضروری است، بهتر است از روش‌های مانند استفاده از دکمه‌های “بارگذاری بیشتر” یا “نمایش بیشتر” استفاده کنید تا تغییرات تنها پس از تعامل کاربر اتفاق بیافتد و از تغییرات غیرمنتظره جلوگیری شود.

6. بهینه‌سازی فونت‌های وب برای CLS

توضیح 1: بارگذاری فونت‌های سفارشی می‌تواند باعث ایجاد تغییر در چیدمان صفحه شود. این تغییرات زمانی رخ می‌دهند که فونت‌ها به‌طور کامل بارگذاری نشده‌اند و مرورگر از فونت پیش‌فرض استفاده می‌کند.

توضیح 2: برای بهینه‌سازی CLS هنگام بارگذاری فونت‌ها، باید از ویژگی font-display در CSS استفاده کنید. با تنظیم مقدار swap، فونت پیش‌فرض به‌طور موقت نمایش داده می‌شود تا زمانی که فونت اصلی بارگذاری شود، و از layout shift جلوگیری می‌کند.

توضیح 3: برای کاهش زمان بارگذاری فونت‌ها، می‌توانید از ویژگی <link rel=”preload”> برای پیش‌بارگذاری فونت‌های مهم استفاده کنید. این اقدام باعث می‌شود که فونت‌ها زودتر بارگذاری شوند و دیگر تغییرات ناشی از لود فونت‌ها به وجود نیاید.

گوگل تغییراتی در معیار CLS ایجاد کرد

گوگل در راستای بهبود دقت اندازه‌گیری CLS (Cumulative Layout Shift) تغییراتی را در نحوه محاسبه این معیار اعمال کرده است. یکی از مهم‌ترین تغییرات این است که مدت زمان session window از 1 ثانیه به 5 ثانیه افزایش یافته است. این تغییر به منظور عادلانه‌تر ارزیابی کردن صفحات با بازدید بالا و single-page apps (SPA) اعمال شده است. پیش از این، گوگل معیار CLS را در بازه زمانی کوتاه‌تر (1 ثانیه) محاسبه می‌کرد که می‌توانست باعث ارزیابی نادرست صفحات با تعاملات طولانی‌تر یا اسکرولرهای نامحدود شود.

با این تغییر، دیگر صفحات به دلیل تغییرات کوچک در چیدمان در پنجره زمانی کوتاه‌تر، امتیاز بدتری دریافت نمی‌کنند. گوگل اعلام کرده که این به‌روزرسانی به طور کلی باعث بهبود 75 درصدی در امتیاز CLS برای بسیاری از صفحات خواهد شد. البته برخی صفحات که به‌طور طبیعی تغییرات جزئی دارند، تغییری محسوس در امتیاز CLS نخواهند داشت، اما حدود 3% از سایت‌ها می‌توانند بهبود چشمگیری داشته باشند و از رده‌بندی‌های “ضعیف” یا “نیاز به بهینه‌سازی” به “خوب” تغییر کنند.

گوگل همچنین این تغییرات را در گزارش‌های Search Console به‌روزرسانی کرده است تا بتواند تصویر دقیق‌تری از layout shifts ارائه دهد. به گفته گوگل، این به‌روزرسانی معمولاً تغییرات مثبتی را در امتیاز CLS ایجاد خواهد کرد و نشان‌دهنده بهبود تجربه کاربری در صفحات است. این تغییرات به‌ویژه برای صفحاتی که از اسکرول بی‌پایان یا رابط‌های کاربری کند استفاده می‌کنند، مفید خواهد بود.

چگونه تغییرات چیدمان (CLS) می‌تواند تجربه کاربری شما را بهبود دهد؟

در نهایت، توجه به چیدمان ناپایدار (Layout Shifts) و بهینه‌سازی امتیاز CLS یک قدم ضروری در ایجاد تجربه کاربری بهتر است. این تغییرات غیرمنتظره در صفحه می‌توانند نه‌تنها باعث سردرگمی و نارضایتی کاربران شوند، بلکه تأثیر منفی روی سئو و رتبه‌بندی سایت شما در گوگل نیز بگذارند. با درک دقیق از نحوهٔ اندازه‌گیری CLS، بهینه‌سازی تصاویر، تبلیغات و محتوای داینامیک، می‌توانید صفحه‌ای پایدارتر و کاربرپسندتر بسازید.اگر به دنبال مشاوره سئو هستید، متخصصین آژانس مهام آماده‌اند تا استراتژی‌های مناسب برای بهبود سایت شما را ارائه دهند. به یاد داشته باشید که CLS پایین‌تر از 0.1 می‌تواند تجربه وب‌سایت شما را از دیگر سایت‌ها متمایز کند و تأثیر زیادی روی رضایت کاربران و در نهایت رتبه‌بندی جستجوی شما داشته باشد.اگر هنوز نمی‌دانید که سئو چیست، آژانس مهام با ارائه توضیحات کامل و راهنمایی‌های کاربردی، شما را با این مفاهیم آشنا می‌کند.

سوالات متداول CLS چیست

CLS چیست و چرا مهم است؟

CLS (Cumulative Layout Shift) یک معیار است که میزان تغییرات ناگهانی و غیرمنتظره در چیدمان صفحه را اندازه‌گیری می‌کند. این تغییرات می‌توانند تجربه کاربری را به شدت تحت تأثیر قرار دهند، زیرا کاربران ممکن است در حین تعامل با صفحه دچار سردرگمی شوند. بهینه‌سازی CLS می‌تواند موجب بهبود تجربه کاربری و رتبه‌بندی سایت در موتورهای جستجو شود.

چگونه امتیاز CLS را کاهش دهم؟

برای کاهش CLS، باید به عواملی مانند تصاویر بدون ابعاد مشخص، تبلیغات، و عناصر داینامیک دقت کنید. تعیین ابعاد ثابت برای تصاویر و المان‌ها، استفاده از ویژگی‌های CSS مثل aspect-ratio و font-display، و رزرو فضای مناسب برای تبلیغات و محتوای داینامیک از جمله روش‌های بهینه‌سازی هستند.بازاریابی محتوا چیست و چرا برای کسب‌وکارها ضروری است؟ در این راستا، آژانس مهام به شما کمک می‌کند تا استراتژی‌های مؤثر در بازاریابی محتوا را طراحی و اجرا کنید.

چه عواملی می‌توانند موجب افزایش CLS شوند؟

عواملی مانند لود تصاویر بدون ابعاد مشخص، بارگذاری تبلیغات و ویجت‌های جاوااسکریپت، تغییرات در اندازه فونت‌ها و محتوای داینامیک می‌توانند باعث افزایش CLS شوند. همچنین، استفاده از iframeها و اسکریپت‌های بیرونی بدون تعیین اندازه مناسب می‌تواند موجب تغییرات ناگهانی در چیدمان صفحه شود.

چه تغییراتی در معیار CLS توسط گوگل انجام شده است؟

گوگل در تاریخ 2021 تغییراتی در نحوه محاسبه CLS ایجاد کرد. به‌ویژه، پنجرهٔ زمانی برای گزارش‌دهی CLS از 1 ثانیه به 5 ثانیه تغییر کرد. این تغییرات برای این منظور انجام شد که تجربهٔ کاربری در صفحات با بازدید بیشتر یا در اپلیکیشن‌های یک صفحه‌ای (SPA) به‌طور منصفانه‌تری ارزیابی شود.