CLS چیست؟ راه حل بهبود CLS یا Cumulative Layout Shift

CLS با وب‌سایت کاری می‌کند که وقتی باد می‌آمد، آنتن‌های شاخه‌ای با تلویزیون‌های جیوه‌ای می‌کردند. بارها می‌پرد و کاربران را عصبی می‌کند. حالا فرض کنید کاربران در حال تکمیل فرم عضویت یا پرکردن سبد خرید باشند. آن وقت می‌شود گفت که وسط بازی ایران-استرالیا ۹۸ آنتن پریده و شما حماسهٔ ملبورن را از دست داده‌اید. اجازه بدهید برویم سر اصل مطلب و بررسی کنیم که CLS چیست و عددش چه معنایی دارد؟ و در نهایت با رو‌ش‌های بهینه‌سازی برای بهبود CLS آشنا شویم.

CLS چیست؟

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

عدد خوب برای CLS چیست؟

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

• اگر امتیاز CLS کمتر از ۰.۱ باشد، سیگنال خوبی است. این بدان معنی است که سایت شما با تغییر طرح مشکلی ندارد.
•   اگر امتیاز CLS بین ۰.۱ تا ۰.۲۵ باشد، به این معنی است که سایت شما نیاز به بهبود خاصی در طرح‌بندی بصری دارد.
• اگر امتیاز CLS بیش از ۰.۲۵ باشد، سیگنال ضعیفی است، به این معنی که المان‌های دیداری شما بسیار جابه‌جا می‌شوند.

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

برای اندازه‌گیری CLS نیاز دارید که با دو ضریب آشنا شده و مقدار آن‌ها را محاسبه کنید:

• ضریب فاصله
• ضریب تأثیر

با ضرب کردن این دو عدد در یکدیگر مقدار CLS سایت شما به‌دست می‌آید. پس برویم و ببینیم که چطور این ضریب‌ها را محاسبه کنیم.

نحوه محاسبه ضریب تأثیر

ضریب تأثیر یا fraction impact نشان می‌دهد که در مجموع چه مقدار از View port تحت تأثیر پرش، تغییر کرده‌ است. برای محاسبه این ضریب کافی است مساحت ناحیهٔ تحت تأثیر پرش را بر مساحت کل Viewport تقسیم کنیم.

ضریب تأثیر = مساحت ناحیه تأثیرپذیرفته / مساحت کل Viewport

نحوهٔ محاسبهٔ ضریب فاصله

Distance Fraction یا ضریب فاصله عددی است که میزان جابه‌جایی المان‌ها در طی پرش را اندازه‌گیری می‌کند. در تصویر زیر می‌بینید که سکشن قبل از لود شدن تبلیغ، کمی بالاتر قرار داشته و بعد از لود کامل تبلیغ پایین‌تر آمده است.

با درنظر گرفتن فاصله‌ المان از نقطهٔ بالایی تا پایینی می‌توانید میزان جابه‌جایی را اندازه بگیرد و با فرمول زیر ضریب فاصله را اندازه بگیرید:
ضریب فاصله: میزان جابه‌جایی /ارتفاع viewport
تصویر زیر به‌خوبی اعداد موردنیاز در این ضریب را نشان می‌دهد:

حالا با در اختیار داشتن ضریب فاصله و ضریب تأثیر کافی است این دو مقدار را در یکدیگر ضرب کنید.
اجازه بدهید این فرمول‌ها را در مثال بالا پیاده‌سازی کنیم:
ضریب فاصله :
۱۶۱۷۰۰
۲۵۰۱۲۵
۲۵۰۱۲۵/۱۶۱۷۰۰ = ۱۶۱.۷۰۰/ ۲۵۰.۱۲۵ = (۳۳۰*۴۹۰) / (۳۷۵*۶۶۷)  =۱.۵۴
ضریب تأثیر:
 ۰.۱۷= ۱۲۰/۶۶۷ 
میزان CLS:

۱.۵۴* ۰.۱۷ = ۰.۲۶

آموزش کامل بهبود CLS

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

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

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

بهبود CLS از طریق بهینه‌سازی تصاویر ریسپانسیو

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

منظور از نسبت تصاویر همان اعدادی است که به‌صورت دو عدد جدا شده با یک دونقطه (مثلاً ۱۶:۹ یا ۴:۳) می‌بینید. نسبت تصویر به مرورگرها اجازه می‌دهد تا فضای کافی برای تصویر در دستگاه کاربران را محاسبه و رزرو کند. مثلاً اگر اندازه عکسی در دسکتاپ ۱۲۰۰*۹۰۰ باشد و در نسخهٔ‌ موبایلی این اندازه بسیار کوچکتر شود، بازهم مرورگر می‌تواند تشخیص بدهد که باید ظرفیت نسبی ۱۲:۹ را برای المان تصویری خالی بگذارد تا بعد از لود در آن نمایان شود.

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

مرورگرهای امروزی، نسبت تصاویر را بر اساس ویژگی‌های عرض و ارتفاع از قبل تنظیم می‌کنند. به‌لطف آن‌ها و امکانات CSS حالا کافی است عرض و ارتفاع هر تصویر را خیلی عادی تنظیم کنیم تا پرش تصویر نداشته باشید:

<!– set a 640:360 i.e a 16:9 – aspect ratio –>
<img src=”puppy.jpg” width=”640″ height=”360″ alt=”Puppy with balloons” />
حالا خود مرورگر بر اساس عرض و ارتفاعی که وارد کرده‌اید، نسبت تصویر را استخراج می‌کند. اما این مقدارها با پردازش HTML محاسبه می‌شود و ممکن است کمی با ابعاد اصلی تفاوت داشته باشد.
مثلاً مرورگر کروم برای در پنل المان این کد را نشان می‌دهد:
img[Attributes Style] {
aspect-ratio: auto 640 / 360;
}

مرورگر سافاری هم رفتار مشابهی دارد و با صفت‌های HTML این کار را انجام می‌دهد. فایرفاکس این ابعاد را در پنل Inspector نشان نمی‌دهد اما برای نمایش از آن‌ها استفاده می‌کند.
مسئله‌ٔ مهم در این میان همان صفت Auto است. چرا که باعث می‌شود تصویر پس از لود با ابعاد جایگزین نمایش داده شوند. در صورت عادی طی شدن این فرآیند مشکل خاصی به وجود نمی‌آید. اما در صورتی که HTML مقادیر خیلی متفاوتی را محاسبه کرده باشد؛ احتمالاً تصویر جایگزین بسیار کوچک‌تر از چیزی که باید، نمایش داده می‌شود.
بنابراین اگر تصویر شما container داشته باشد، با استفاده از CSS می‌توانید عرض تصویر را به اندازه عرض container تنظیم کنید. برای جلوگیری از برهم ریختن نسبت، ارتفاع را به‌جای مقدار ثابت روی auto تنظیم کنید:
img {
height: auto;
width: 100%;
}
به این ترتیب تصاویر هم‌عرض کانتینر و با نسبت درست نمایش داده خواهند شد.
بهینه‌سازی تصاویر ریسپانسیو چه فرقی با موارد بالا دارد؟
تنها تفاوت این است که در مورد تصاویر ریسپانسیو، شما در واقع به مرورگر اجازه می‌دهید که با srcset اندازه هر تصویر را تعیین کند. فقط لازم است مطمئن شوید که تمامی تصویر از یک نسبت استفاده می‌کنند:
<img
width=”1000″
height=”1000″
src=”puppy-1000.jpg”
srcset=”puppy-1000.jpg 1000w, puppy-2000.jpg 2000w, puppy-3000.jpg 3000w”
alt=”Puppy with balloons”
/>

پیشنهاد خواندن: آموزش تغییر ورژن PHP در سی‌پنل، دایرکت ادمین و Xampp

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

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

بنرهای تبلیغاتی

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

• زمانی که Container تبلیغ روی DOM قرار می‌گیرد.
• زمانی‌که در سایت با کد شخص اول، کانتینر تبلیغ را تغییر می‌دهیم.
• زمانی که کتابخانه تگ تبلیغات بارگیری می‌شود و اندازه کانتینر را تغییر می‌دهد.
• وقتی تبلیغ کانتینر را پرمی‌کند و اگر اندازه‌ٔ نهایی تبلیغ متفاوت باشد، آن را تغییر می‌دهد.

خبر خوب این که پرش در تمامی این موارد قابل تصحیح است. راه‌کارهایی که برای کنترل این تغییر اندازه وجود دارد عبارتند از :

رزرو کردن فضایی برای slot تبلیغ به‌صورت استاتیک

منظور از رزرو کردن فضایی برای slot تبلیغ به‌صورت استاتیک این است که استایل‌دهی المان‌ها را قبل از بارگیری کتابخانه تگ تبلیغات انجام دهید.

یعنی استایل المان‌های DOM را به‌صورت استاتیک با اندازهٔ یکسان برای تگ‌های کتابخانه تعریف کنید. به این ترتیب مطمئن می‌شوید که تگ‌ کتابخانه، اندازه slot را برای المان اشتباه درنظر نگیرد و چیدمان طرح را تغییر نمی‌دهد.

چطور؟ خیلی ساده! حداقل یک استایل ارتفاع برای رزرو فضا یا اندازه‌های تبلیغ ریسپانسیو را با استفاده از ویژگی‌ نسبت تصویر در CSS تعریف کنید. یادتان باشد که این CSS باید برای مرورگرها قابل درک باشد.

اندازه سرویس تبلیغ کوچک‌تر

اگر اندازهٔ تبلیغ کوچک باشد؛ در انتشار می‌شود کانتینر بزرگ‌تری را برای جلوگیری از تغییر چیدمان ارائه کرد. نقطه ضعف این روش این است که فضای خالی را افزایش می‌دهد. پس یادتان باشد که به توازن بین فضای خالی و تبلیغ کوچک، توجه کنید.

تنظیم اندازهٔ اولیه تبلیغ روی کوچک‌ترین حالت

راه‌دیگری که دارید این است که اندازهٔ اولیه را روی کوچک‌ترین اندازهٔ‌ تبلیغ تنظیم کنید. سپس حاشیه‌ای برای تغییر تبلیغات بزرگ‌ قائل شوید. این اقدام نمی‌تواند به‌طور کامل CLS را از بین ببرد، اما می‌توانید امیدوار باشید که تا حدودی تأثیرگذار است.

اگر تبلیغات را در فلوی محتوا قرار می‌دهید، مطمئن شوید که اندازهٔ slot را رزرو کرده‌اید

تبلیغات نباید در صورت لود خارج از صفحه، چیدمان را تغییر بدهند.

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

• اگر تبلیغات چسبیده نیستند (non-sticky) ، مراقب فاصله‌ٔ بین viewport و تبلیغ باشید. یعنی مطمئن شوید فضای کافی برای slot نسبت به سایر المان‌ها در نظرگرفته‌اید.

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

• اگر زمانی که تبلیغ شما در placeholder قابل دیدن است، تبلیغ برنمی‌گردد؛ فضای رزرو را collapse نکنید.

• هنگام رزرو فاصله، بزرگترین اندازهٔ ممکن را برای تبلیغ درنظر بگیرید تا بعداً تغییر نکند.

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

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

ویجت‌های قابل embed به شما این امکان را می‌دهند که محتوای پورتابل سایت را در صفحات خود جای‌گذاری کنید. مثلاً می‌توانید ویدئوهای یوتیوب یا نقشه‌های گوگل مپ یا پست‌های شبکه‌های اجتماعی را به‌صورت embed جای‌گذاری کنید. این گزینه‌های قابل embed می‌توانند شکل‌های مختلفی داشته باشند. مثلاً:

• تابع بازگشتی HTML و یک تگ جاوااسکریپت که نسخهٔ بازگشتی را به یک embed فانتزی تبدیل می‌کند.
•   قطعات HTML درون خطی یا inline
•  Iframeهای قابل جای‌گذاری

در این جای‌گذاری‌ها معمولاً خیلی مشخص نیست که اندازهٔ فایل embed چقدر خواهد بود. در نتیجه پلتفرم‌هایی که embed را ارائه می‌کنند، همیشه هم به اندازهٔ کافی فضا درنظر نمی‌گیرند و می‌توانند بعد از بارگذاری باعث تغییر چیدمان شوند.

برای بهبود CLS در چنین شرایطی بهتر است با استفاده از placeholder یا fallback فضای موردنیاز embed را از قبل تعیین کنید. این workflow می‌تواند برایتان مفید باشد:

• میزان فضای موردنیاز فایل‌های embed را با استفاده از ابزارهای توسعه مرورگر محاسبه کنید.
• پس از لود embed، اندازه iframe موجود به‌نحوی تغییر می‌کند که با محتوا در تناسب باشد.

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

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

مثلاً لینک «مقالات مرتبط» یا «ثبت‌نام در خبرنامه» یا فراخوان نصب محصول و… از جمله محتواهایی هستند که نه‌ تنها پرفورمنس را دچار مسئله می‌کنند، که از لحاظ تجربهٔ کاربری هم چندان ضروری نیست که در بالای صفحه نمایش داده شوند.

اگر هم دلیل خوبی برای این کار دارید و لازم است محتوای داینامیک را در بالای صفحه نمایش دهید، بهتر است از قبل با استفاده از viewport (مثلاً placeholder یا فریمورک skeleton) فضای کافی را درنظر بگیرید تا پس از لود محتوا جابه‌جا نشود.

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

• روش اول: محتوای قدیمی را در قالب یک کانتینر با اندازهٔ ثابت با محتوای جدید جایگزین کنید. یا مثلاً از کاروسل استفاده کرده و محتوای قدیمی را پس از انتقال حذف کنید. یادتان باشد برای جلوگیری از کلیک تصادفی حین ورود محتوای جدید، لینک‌ها را تا قبل از لود کامل غیرفعال نگه‌دارید.
• روش دوم: با یک دکمهٔ CTA مثل «بیشتر بخوانید» می‌توانید به کاربران امکان دهید بارگذاری محتوای جدید را انتخاب کنند تا از تغییر غافلگیر نشوند. توصیه می‌کنیم قبل از تعامل کاربر، محتوا را فراخوانی کنید تا به محض اقدام کاربر، نمایش داده شود.

یادتان نرود که تغییراتی که زیر ۵۰۰ میلی‌ثانیه اتفاق بیفتند در CLS محاسبه نمی‌شوند. محتوا را خیلی نرم و یکپارچه به کاربر ارائه کنید و در عوض یک اعلان به کاربر بدهید تا بداند می‌تواند به چیزهای دیگری هم دسترسی داشته باشد. مثلاً دکمهٔ «اسکرول به بالا» یا هرچیز دیگری که در صفحه نیاز دارید می‌تواند مناسب باشد. در تصویر سمت چپ می‌بینید که توییتر از طریق دکمه‌ای به‌روزرسانی فید را به کاربران پیشنهاد می‌دهد. در تصویر سمت راست با دکمه «load more» بهینه‌سازی تحویل محتوا صورت گرفته است.

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

لود و رندر شدن فونت‌های وب می‌تواند به دو روش چیدمان را تغییر بدهد:
امکان اول: FOUT رخ دهد
منظور از FOUIT عبارت Flash of Unstyled text است. یعنی تا زمانی که فونت جایگزین لود و آماده شود، فونت پیش‌فرض به صورت موقت به کاربران نمایش داده شود. در این شرایط چیدمان با تغییر فونت کمی تغییر می‌کند.
امکان دوم: FOIT رخ دهد
منظور از FOIT سرواژهٔ عبارت Flash of invisible text است. یعنی مرورگر منتظر می‌ماند تا فونت جایگزین لود شود و سپس متن محتوا را نمایش می‌دهد. به این ترتیب به‌ دلیل تأخیر در بارگذاری فونت، چیدمان محتوا تغییر می‌کند.

راه‌حل:
دستور font-display به شما امکان می‌دهد رفتار رندر فونت سفارشی را با مقادیری مثل auto، swap، block، backback و optional تغییر دهید. متأسفانه، همه این مقادیر (جز optional) می‌توانند به یکی از روش‌هایی که بالاتر توضیح دادیم باعث تغییر چیدمان شوند.
در اختیار داشتن API لود فونت می‌تواند تا حد قابل توجهی زمان دریافت فونت را کاهش دهد.
علاوه‌براین، رعایت برخی نکات هم می‌تواند مفید باشد:

• در فونت‌های کلیدی سایت از  <link rel=preload> استفاده کنید

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

• دستورات  <link rel=preload> و font-display را ترکیب کنید

اگر در اعمال این راه‌کار از نظر فنی کمک نیاز دارید، می‌توانید به صفحه راهنمای بهینه‌سازی فونت برای بهبود CLS در مجلهٔ توسعه‌دهندگان گوگل مراجعه کنید.

جمع‌بندی

در این مقاله از سوال CLS چیست آغاز کردیم و در ادامه مو‌‌ٰثرترین روش‌های برای بهینه‌سازی Cumulative Layout Shift را تشریح کردیم. می‌دانیم که روش‌های دیگری هم وجود دارد، اما به دلیل تأثیر کمتر این راه‌کارها و البته محدودیت آموزش در قالب محتوا به آن‌ها اشاره‌ای نکرده‌ایم. اگر شما روش مؤثر دیگری می‌شناسید، می‌توانید از بخش نظرات آن را با سایر کاربران به اشتراک بگذارید. سوالات خود را دربارهٔ این نوع بهینه‌سازی از ما بپرسید و پاسخ بگیرید.

برای نوشتن این مقاله از منابع زیادی استفاده کرده‌ایم که مهم‌ترین آن مجله web.dev است.

سوالات پرتکرار

۱. منظور از CLS در سرچ کنسول چیست؟

عبارت Cumulative Layout Shift یا تغییر چیدمان تجمعی یکی از فاکتورهای Core Web Vitals است که بررسی می‌کند المان‌های صفحه در طول لود شدن چه میزان تغییر می‌کنند تا آماده تعامل کاربر شوند. این فاکتور یکی از عوامل اثرگذار در امتیاز پرفورمنس سایت است.

۲. چطور CLS را بهینه‌سازی کنیم؟

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