منو
به نقل از مطلب منتشر شده از search engine journal درباره مفهوم CLS چیست، با بهینه‌سازی تغییر چیدمان تجمعی (CLS) میتوانید تجربه کاربری و رتبه‌بندی SEO خود را بهبود ببخشید. بیاموزید که چگونه مشکلات CLS را به حداقل برسانید و یک تجربه مرور وب بدون مشکل ایجاد کنید. تغییر چیدمان تجمعی (CLS) یک معیار اصلی وب حیاتی گوگل است که یک رویداد تجربه کاربری را اندازه گیری می کند. CLS در سال 2021 به یک عامل رتبه بندی تبدیل شد و این بدان معناست که درک آن و نحوه بهینه سازی آن مهم است.
به دنیایی از آموزش های هیجان انگیز و پردرآمد قدم بگذراید
CLS چیست؟ CLS یا همان Cumulative Layout Shift، جابجایی غیرمنتظره عناصر صفحه وب در حین اسکرول یا تعامل کاربر با صفحه است. عناصری که معمولاً باعث این جابجایی میشوند شامل فونتها، تصاویر، ویدیوها، فرم‌های تماس، دکمه‌ها و انواع دیگر محتوا هستند. کاهش CLS اهمیت دارد زیرا صفحاتی که عناصرشان جابجا میشوند، می‌توانند تجربه کاربری نامطلوبی ایجاد کنند. نمره CLS پایین (کمتر از 0.1) نشان‌دهنده مشکلات کدنویسی است که قابل حل هستند.
چهار دلیل برای رخ دادن CLS چیست؟ این چهار دلیل عبارتند از:
بیایید به هر یک از این عوامل بپردازیم تا بفهمیم چگونه به کاهش CLS کمک می‌کنند.
پیش تر مفهوم کلی “CLS چیست” را بررسی کردیم. مرورگرها نمی‌توانند ابعاد یک تصویر را تا زمانی که آن را دانلود نکنند، تعیین کنند. در نتیجه، هنگام مواجهه با یک تگ <img> HTML، مرورگر نمی‌تواند فضایی را برای تصویر اختصاص دهد.
ویدیوی نمونه زیر این موضوع را نشان می‌دهد. پس از دانلود تصویر، مرورگر نیاز دارد که طرح‌بندی را دوباره محاسبه کند و فضایی را برای جا دادن تصویر اختصاص دهد، که باعث جابجایی سایر عناصر در صفحه میشود.
با ارائه ویژگی‌های width (عرض) و height (ارتفاع) در تگ <img>، شما نسبت تصویر را به مرورگر اطلاع می‌دهید. این به مرورگر اجازه می‌دهد تا قبل از دانلود کامل تصویر، مقدار صحیح فضا را در طرح‌بندی اختصاص دهد و از هرگونه تغییر غیرمنتظره در طرح‌بندی جلوگیری کند.
اگر بدون استایل دهی و تنظیمات مناسب، تبلیغات AdSense را در محتوا یا هدر بالا مقالات بارگذاری کنید، ممکن است چیدمان صفحه تغییر کند. مدیریت این مورد کمی پیچیده است زیرا اندازه تبلیغات می‌تواند متفاوت باشد.
برای مثال، ممکن است یک تبلیغ 970×250 یا 970×90 باشد، و اگر شما فضایی به اندازه 970×90 اختصاص دهید، ممکن است یک تبلیغ 970×250 بارگذاری شود و باعث تغییر چیدمان شود. در مقابل، اگر شما فضایی به اندازه 970×250 اختصاص دهید و یک بنر 970×90 بارگذاری شود، فضای خالی زیادی در اطراف آن وجود خواهد داشت که باعث میشود صفحه بد به نظر برسد.
این یک بده بستان است، یا شما باید تبلیغات با اندازه یکسان بارگذاری کنید و از مزایای افزایش موجودی و CPM بالاتر بهره‌مند شوید یا تبلیغات با اندازه‌های مختلف را به قیمت تجربه کاربری یا معیار CLS بارگذاری کنید.
این یک محتوایی است که به صفحه وب تزریق میشود. برای مثال، پست‌های در X (که قبلاً توییتر نام داشت)، که محتوای یک مقاله را بارگذاری می‌کنند، ممکن است ارتفاع دلخواهی داشته باشند که به طول محتوای پست بستگی دارد و باعث تغییر طرح‌بندی میشود.
البته، این‌ها معمولاً زیر بخش قابل مشاهده صفحه (fold) قرار دارند و در بارگذاری اولیه صفحه محاسبه نمی‌شوند، اما اگر کاربر به اندازه کافی سریع اسکرول کند تا به نقطه‌ای برسد که پست X قرار دارد و هنوز بارگذاری نشده است، باعث تغییر طرح‌بندی میشود و به معیار CLS شما کمک میکند.
یک راه برای کاهش این تغییر، دادن ویژگی CSS min-height با مقدار متوسط به تگ div والد توییت است زیرا دانستن ارتفاع پست توییت قبل از بارگذاری آن غیرممکن است، بنابراین می‌توانیم فضا را از قبل تخصیص دهیم.
راه دیگر برای رفع این مشکل، اعمال یک قانون CSS به تگ div والد حاوی توییت برای ثابت کردن ارتفاع است.
#tweet-div {
max-height: 300px;
overflow: auto;
} با این حال، این کار باعث میشود یک نوار اسکرول ظاهر شود و کاربران مجبور به اسکرول برای مشاهده توییت شوند، که ممکن است برای تجربه کاربری بهترین نباشد. اگر هیچ یک از روش‌های پیشنهادی کار نکرد، میتوانید یک اسکرین‌شات از توییت بگیرید و به آن لینک دهید.
فونت‌های وب دانلود شده می‌توانند باعث ایجاد چیزی شوند که به آن “Flash of invisible text” (FOIT) یا “فلش متن نامرئی” گفته میشود. یک راه برای جلوگیری از این مشکل، استفاده از پیش بارگذاری فونتها است:
<link rel="preload" href="https://www.example.com/fonts/inter.woff2" as="font" type="font/woff2" crossorigin> و همچنین استفاده از ویژگی font-display: swap; در قانون @font-face:
@font-face {
font-family: Inter;
font-style: normal;
font-weight: 200 900;
font-display: swap;
src: url('https://www.example.com/fonts/inter.woff2') format('woff2');
} با این قوانین، شما فونت‌های وب را در سریع‌ترین زمان ممکن بارگذاری می‌کنید و به مرورگر می‌گویید تا زمانی که فونت‌های وب بارگذاری شوند، از فونت سیستم استفاده کند. به محض اینکه مرورگر بارگذاری فونتها را به پایان برساند، فونت‌های سیستم را با فونت‌های وب بارگذاری شده جایگزین میکند.
با این حال، ممکن است همچنان با اثری به نام “Flash of Unstyled Text” (FOUT) یا “فلش متن بدون استایل” مواجه شوید که هنگام استفاده از فونت‌های غیرسیستمی اجتناب‌ناپذیر است، زیرا بارگذاری فونت‌های وب مدتی طول می‌کشد و در این مدت فونت‌های سیستم نمایش داده میشوند.
اگر مکانیزم توصیه شده برای بارگذاری فونت پیاده‌سازی شده باشد، میزان قابل مشاهده بودن FOUT به سرعت اتصال کاربر بستگی دارد. اگر اتصال کاربر به اندازه کافی سریع باشد، فونت‌های وب ممکن است به سرعت بارگذاری شوند و اثر قابل توجه FOUT را از بین ببرند.
بنابراین، استفاده از فونت‌های سیستم در هر زمان ممکن یک رویکرد عالی است، اما ممکن است همیشه به دلیل دستورالعمل‌های سبک برند یا الزامات طراحی خاص امکان‌پذیر نباشد.
هنگامی که ارتفاع عناصر HTML را از طریق CSS یا JS متحرک می‌کنید، به عنوان مثال، یک عنصر را به صورت عمودی گسترش می‌دهد و با فشار دادن محتوا به پایین، آن را کوچک میکند که باعث تغییر چیدمان میشود.
برای جلوگیری از این، از تبدیل‌های CSS با تخصیص فضا برای عنصر متحرک استفاده کنید. میتوانید تفاوت بین انیمیشن CSS را که باعث تغییر در سمت چپ میشود و همان انیمیشن که از تبدیل CSS استفاده میکند، مشاهده کنید.
این یک محصول از دو معیار/رویداد به نام “کسر تاثیر” و “کسر فاصله” است.
CLS = (کسر تاثیر) × (کسر فاصله)
کسر تاثیر کسر تاثیر اندازه گیری می کند که یک عنصر ناپایدار چه مقدار فضا را در viewport اشغال می کند. Viewport چیزی است که شما روی صفحه موبایل می بینید.
وقتی یک عنصر دانلود می شود و سپس تغییر مکان می دهد، کل فضایی که عنصر اشغال می کند، از مکانی که در viewport اشغال می کرد وقتی برای اولین بار رندر شد تا مکان نهایی وقتی صفحه رندر می شود، محاسبه می شود.
مثالی که گوگل استفاده می کند عنصری است که 50٪ از viewport را اشغال می کند و سپس 25٪ دیگر به پایین می رود. وقتی این دو مقدار با هم جمع شوند، مقدار 75٪ “کسر تاثیر” نامیده می شود و به صورت امتیاز 0.75 بیان می شود.
کسر فاصله اندازه گیری دوم “کسر فاصله” نامیده می شود. کسر فاصله مقدار فضایی است که عنصر صفحه از موقعیت اصلی به موقعیت نهایی حرکت کرده است. در مثال بالا، عنصر صفحه 25٪ حرکت کرده است. بنابراین اکنون امتیاز Cumulative Layout Shift با ضرب کسر تاثیر در کسر فاصله محاسبه می شود:
0.75 * 0.25 = 0.1875
محاسبه شامل ریاضیات بیشتر و ملاحظات دیگری است. چیزی که مهم است از این مطلب برداشت شود این است که این امتیاز یک راه برای اندازه گیری یک عامل مهم تجربه کاربری است.
درک تغییر تجمعی طرح یا Cumulative Layout Shift مهم است، اما نیازی به دانستن نحوه انجام محاسبات خودتان نیست. با این حال، درک معنای آن و نحوه عملکرد آن کلیدی است، زیرا این بخشی از عامل رتبه بندی Core Web Vitals شده است. در جدول زیر به طور خلاصه برخی موارد را بررسی می کنیم:
| مفهوم | توضیح |
| تغییر تجمعی طرح (CLS) | معیاری است که میزان تغییر بصری غیرمنتظره عناصر در یک صفحه وب را در طول زمان بارگذاری آن اندازهگیری میکند. |
| اهمیت | CLS بر تجربه کاربر تأثیر می‌گذارد. امتیاز CLS بالا می‌تواند منجر به ناامیدی کاربر شود زیرا عناصر صفحه در حین تعامل کاربر با صفحه حرکت می‌کنند. |
| محاسبه | CLS با تجزیه و تحلیل تغییرات در موقعیت عناصر قابل مشاهده در طول عمر صفحه محاسبه میشود. هر تغییر غیرمنتظره در طرح به امتیاز CLS کمک میکند. |
| نحوه بهبود CLS | برخی از راه‌های بهبود CLS عبارتند از: <br> * تعیین اندازه برای تصاویر و ویدیوها <br> * اجتناب از قرار دادن محتوای جدید بالای محتوای موجود <br> * به حداقل رساندن استفاده از فونت‌های وب که باعث تغییر طرح میشوند. |
| ارتباط با Core Web Vitals | CLS یکی از سه معیار Core Web Vitals است که توسط گوگل برای ارزیابی تجربه کاربر یک صفحه وب استفاده میشود. بهبود CLS می‌تواند به بهبود رتبه‌بندی کلی صفحه در نتایج جستجوی گوگل کمک کند. |
در نهایت درباره مفهوم CLS چیست می توان گفت که CLS یا Cumulative Layout Shift معیاری است که میزان تغییر چیدمان غیرمنتظره در عناصر یک صفحه وب در طول بارگذاری را اندازهگیری میکند. این تغییر چیدمان می‌تواند باعث شود که کاربر به طور ناخواسته روی یک عنصر کلیک کند یا به طور کلی تجربه کاربری را مختل کند.
CLS بالا معمولاً به دلیل بارگذاری دیرهنگام منابع مانند تصاویر، فونتها یا تبلیغات رخ می‌دهد. بهبود CLS شامل بهینه‌سازی اندازه و بارگذاری منابع، استفاده از نگهدارنده‌های مکان برای عناصر و اجتناب از تزریق محتوای پویا در بالای صفحه موجود است.
اگر سوالی یا پیشنهادی دارید میتوانید با ما در میان بگذارید.
انرژی گرفته با 🤍 از تیم طراحی سایت تابان شهر
