اتفاقات روزمره ، اخبار مهم و دیگر مطالب میهن وب هاست را می توانید در این قسمت مطالعه کنید

با بهینه سازی Cumulative Layout Shift یا به اختصار CLS، تجربه کاربری و رتبه SEO بهبود خواهد یافت. در این مقاله خواهید آموخت که چگونه مشکلات CLS را به حداقل برسانید تا تجربه کاربری بهتر شود. Cumulative Layout Shift یا CLS یکی از فاکتورهای Core Web Vitals گوگل بوده که تجربه کاربری را ارزیابی می کند، به همین دلیل درک ماهیت و بهینه‌ سازی آن بسیار مهم می باشد.

تصویر(1)

Cumulative Layout Shift یا CLS چیست؟

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

عوامل بروز مشکلات در Cumulative Layout Shift یا CLS

پنج دلیل اصلی که باعث افزایش Cumulative Layout Shift می‌شوند عبارتند از:

1. ابعاد نامناسب تصاویر.

2. تبلیغات، embeds یا جاساز ها (قرار دادن یک محتوای خارجی مانند ویدئو، پست‌ های شبکه‌ های اجتماعی و غیره در یک صفحه وب) و iframe‌ هایی بدون ابعاد مشخص.

3. محتوای پویا یا داینامیک تزریقی.

4. استفاده از فونت‌ های تحت وبی که باعث FOIT یا FOUT می‌ شوند.

5. انیمیشن‌های CSS یا JavaScript.

در ادامه هر یک از این عوامل به طور جداگانه توضیح داده خواهند شد تا با چگونگی افزایش CLS آشنا شوید:

ابعاد نامناسب تصاویر

مرورگرها نمی‌ توانند ابعاد تصاویر را تا زمان دانلود آنها تشخیص دهند. به همین دلیل، هنگام مواجهه با تگ <img> در HTML، مرورگر قادر نیست فضای مناسب برای تصویر را به آن اختصاص دهد. پس از دانلود، مرورگر باید دوباره چیدمان صفحه را بررسی کرده و فضایی برای قرارگیری تصویری که باعث جابجایی سایر عناصر می‌ شود، اختصاص دهد. با ارائه مقدار عرض (width) و ارتفاع (height) در تگ <img>، به مرورگر اعلام می کنید که نسبت ابعاد تصویر به چه صورت است. این امر به مرورگر امکان می‌ دهد قبل از دانلود کامل تصویر، فضای مناسب را به عکس تخصیص داده و از بروز هرگونه جابجایی ناخواسته در صفحه جلوگیری کند.

تبلیغات می‌توانند باعث افزایش CLS شوند

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

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

محتوای پویا یا داینامیک تزریقی

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

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

تصویر(2)

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

فونت های مبتنی بر وب

Flash of Invisible Text یا FOIT زمانی رخ می دهد که هنگام بارگذاری یک صفحه وب، متن آن به طور موقت ناپدید شود تا فونت تحت وب دانلود و اعمال گردد. Flash of Unstyled Text یا FOUT نیز هنگامی اتفاق می افتد که، مرورگر یک فونت جایگزین را تا زمان آپلود فونت اصلی سایت به کاربر نمایش دهد. فونت‌ های مبتنی بر وب می‌ توانند باعث به وجود آمدن FOIT شوند. یک راه برای جلوگیری از این مسئله، استفاده از "preload fonts" می باشد.

تصویر(3)

در CSS با درج کد `;font-display:swap` درون تگ`font-face@` می‌ توانید از بروز FOIT جلوگیری کنید. 

تصویر(4)

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

اگر مکانیزم استفاده از فونت سیستم روی سایت پیاده سازی شده باشد، میزان مشهود بودن اثر FOUT به سرعت اینترنت کاربر بستگی خواهد داشت. اگر سرعت اینترنت به اندازه کافی سریع باشد، فونت‌ وب ممکن است سریعا لود شده و اثر FOUT بسیار اندک گردد.

انیمیشن‌های CSS یا JavaScript

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

نحوه محاسبه Cumulative Layout Shift یا CLS:

CLS حاصل ضرب دو معیار "Impact Fraction" و "Distance Fraction" است.

تصویر(5)

Impact Fraction یا ضریب تاثیر:

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

در مثالی که گوگل استفاده نموده، یک عنصر 50% از viewport را اشغال کرده و سپس 25% جابه جا شده است. وقتی این دو فاکتور با هم جمع شوند، مقدار 75%به دست آمده "ضریب تاثیر" نامیده می‌ شود که به صورت 0.75 بیان می‌ گردد. بنابراین، "ضریب تاثیر" در این مثال برابر با 0.75 بوده که نشان می‌ دهد عنصر 75% از فضای viewport را به خود اختصاص داده است.

ضریب جابجایی/ فاصله یا Distance Fraction:

"ضریب فاصله" دومین معیار برای اندازه‌ گیری Cumulative Layout Shift یا CLS است. "ضریب فاصله" مقدار جابه‌ جایی عنصر صفحه از موقعیت اولیه به موقعیت نهایی می باشد. در مثال قبلی، عنصر صفحه 25% جابه‌ جا شده است.بنابراین، "CLS" با ضرب "ضریب تاثیر" در "ضریب فاصله" به صورت زیر محاسبه می‌ شود:

0.75 x 0.25 = 0.1875

در این مثال، "CLS" برابر با 0.1875 است، که حاصل ضرب "ضریب تاثیر" (0.75) و "ضریب فاصله" (0.25) می‌ باشد. 

چه امتیازی برای CLS مناسب است؟

پس از آشنایی با ماهیت پارامتر مذکور، سؤال بعدی که معمولاً ذهن کاربران را درگیر می کند، این است که بهترین امتیاز برای cls چقدر است؟ در پاسخ باید عنوان نمود مقدار این پارامتر هر اندازه کمتر باشد، نرخ پرش ناگهانی المان‌ها کاهش می‌یابد و رضایت کاربر از وضعیت وب‌سایت شما بیشتر می‌شود. ابزارهای رسمی گوگل برای سنجش Cumulative Layout Shift یا CLS سایت، امتیازات مختلفی را تعیین کرده‌اند که به شرح زیر است:

• خوب: cls کمتر از 0.1

• نیاز به بهبود: cls بین 0.1 و 0.25

• ضعیف: cls بیشتر از 0.25

تصویر(6)

جمع بندی:

درک کلی مفهوم Cumulative Layout Shift یا CLS مهم می باشد، اما نیازی نیست که خودتان محاسبات مربوط به آن را انجام دهید. با این حال، بهتر است راهکارهای کاهش CLS را بیاموزید، زیرا این معیار اکنون بخشی از Core Web Vitals شده است.