همه‌ی ما در زمان وبگردی و گشت‌وگذار در دنیای دیجیتال، تجارب مختلفی در زمان کار کردن با وب سایت‌ها داشته‌ایم. شما هم احتمالاً به مانند من در بسیاری از موارد که تجربه‌ای بد در کار کردن با یک سایت را داشته باشید، به سرعت و عصبانیت آن سایت را می‌بندید. اما تجربه‌های بد شامل چه چیزهایی می‌شود؟ مثلاً فرض کنید سایتی را باز کرده و در حال خواندن مطلبی در داخل آن هستید که به یکباره آن مطلب در صفحه جابه‌جا می‌شود. باید بگردید تا آن مطلب را دوباره پیدا کنید. یا می‌خواهید بر روی یک دکمه‌ای کلیک کنید که به یکباره آن دکمه جابه‌جا شده و چیزی دیگر جای آن را می‌گیرد و شما به صفحه‌ای دیگر منتقل می‌شوید. یا وقتی که در حال خواندن مطلبی هستید، دائماً صفحات دیگری باز شده و مزاحم خواندن ادامه‌ی مطلب می‌شوند.
امروزه که سایت‌های زیادی برای عرضه‌ی آن چه که شما دنبالش هستید، وجود دارند و به عبارت بهتر شما حق انتخاب دارید، یک تجربه‌ی کاربری خوب یا بد می‌تواند باعث شود که شما از یک سایت استفاده کنید یا خیر. پس تجربه‌ی کاربری برای افراد به یک اولویت تبدیل شده است. از زمانی که گوگل به این موضوع پی برد، خودش نیز تصمیم گرفت که تجربه‌ی کاربری را به یک پارامتر بااهمیت تبدیل کند.
CLS چیست؟
CLS یا Cumulative Layout Shift معیاری برای اندازهگیری ثبات بصری در زمان بارگذاری یک صفحه است و به عنوان یک معیار برای تغییر غیرمنتظره عناصر یک صفحه در زمان لودن شدن سایت برای کاربر، معرفی می‌شود. این عناصر می‌تواند شامل هر چیزی مانند فونت، تصویر، ویدئو، فرم تماس، دکمه و … باشد.
گوگل از سال ۲۰۲۱ سه پارامتر اصلی را تحت عنوان Core Web Vitals به همگان معرفی کرد و همچنین اعلام کرد که از این به بعد این سه پارامتر نقش اصلی را در رتبه بندی سرپ دارند. یکی از این پارامترها CLS است که نشان از اهمیت فوق‌العاده‌ی آن دارد.
گوگل برای این پارامتر از یک معیار عددی بین صفر و یک استفاده می‌کند. این عدد هر چه که به صفر نزدیکتر باشد، اوضاع شما در زمینه‌ی تجربه کاربری بهتر است. برای این که تجربه کاربری خوبی در سایت ایجاد کنید، باید امتیاز CLS خود را در حد ۰.۱ یا کمتر نگه دارید.
- ۰.۱ یا کمتر: کاملاً بهینه
- بین ۰.۱ تا ۰.۱۵ : تقریباً بهینه اما نیازمند اصلاحات جزئی
- بین ۰.۱۵ تا ۰.۲۵: تا حدودی خارج از استاندارد
- بیشتر از ۰.۲۵: بیش از حد خارج از استاندارد
چگونه رتبه CLS خود را بهبود ببخشیم؟
اگر بخواهید رتبه CLS خود را بهبود بخشید، باید جابجایی المان‌های صفحات وب خود را به حداقل برسانید. تغییر چیدمان (Layout shifts) زمانی اتفاق می‌افتد که عناصر موجود موقعیت شروع خود را تغییر دهند. اما تا زمانی که این تغییر باعث تغییر موقعیت شروع سایر عناصر نگردد به عنوان تغییر چیدمان در نظر گرفته نمی‌شود. البته باید در نظر داشته باشید که همه‌ی تغییرات چیدمان در صفحه، بد نیستند. تغییر چیدمان فقط در صورتی بد است که کاربر انتظار آن را نداشته باشد.
اگر کاربر سایت یک درخواست شبکه را ایجاد کند که ممکن است انجام آن کمی طول بکشد، بهتر است بلافاصله فضایی ایجاد کرده و یک نشانگر بارگذاری را نمایش دهید تا از تغییر طرح‌بندی ناخوشایند هنگام تکمیل درخواست جلوگیری شود. اگر کاربر متوجه نشود که چیزی در حال بارگیری است یا از زمان آماده شدن آگاهی نداشته باشد، ممکن است تلاش کند در حین انتظار روی چیز دیگری کلیک کند و این یعنی تجربه‌ی کاربری بد.
در ادامه به بررسی اصلاحاتی که می‌توانیم در جهت بهبود رتبه‌ی CLS سایت خود انجام دهیم، می‌پردازیم:
تعیین سایز تصاویر
یکی از مهم‌ترین دلایلی که باعث جابجا شدن عناصر صفحه می‌شود، بارگذاری تصاویر سایت است. خیلی از ما عادت داریم که تصاویر را به سایز دلخواه در فوتوشاپ در می‌آوریم و سپس آن را در سایت بارگذاری می‌کنیم. باید توجه داشت که تعیین سایز عکس در کد سایت، یکی از الزامات پارامتر CLS است. زیرا در ابتدا که ساختار سایت در حال شکل‌گیری است، مرورگر سمت کاربر سایز عکس را از روی کد html خوانده و جایگذاری آن را انجام می‌دهد. وقتی که زمان لود شدن عکس فرا می‌رسد، از آنجایی که محل قرارگیری آن عکس به درستی و در اندازه‌ی دقیق ساخته شده، بدون هیچ جابه‌جایی در سایر المان‌های صفحه، عکس در محل خود قرار می‌گیرد. البته در بسیاری از قالب‌های آماده‌ی CMSهای عمومی مانند وردپرس، دو ویژگی width و height به صورت اتوماتیک اضافه می‌شوند و شما نیازی به دستی وارد کردن آن‌ها ندارید.
در زیر می‌توانید نمونه‌ای از کد قرارگیری عکس در سایت اکتومگ را مشاهده نمایید:
<img class=”aligncenter wp-image-5748 size-full” src=”https://actobit.com/actomag/wp-content/uploads/2022/04/cls-1.webp” alt=”امتیاز CLS چیست؟” width=”662″ height=”524″>
اصلاح تنظیمات فونت
ما در محیط وب، دو حالت متداول برای نمایش فونت‌ها داریم که عبارتند از:
- Flash of invisible text (FOIT)
- Flash of Unstyled Text (FOUT)
در حالت FOIT تا زمانی که فونت در نظر گرفته شده برای متن صفحات سایت در مرورگر کاربر بارگذاری نشود، متن صفحه به کاربر نشان داده نمی‌شود. قرار دادن در حالت FOIT، هر چند می‌تواند به بهبود معیار CLS کمک کند اما تجربه کاربری را به شدت کاهش می‌دهد چون کاربر باید مدت زمانی منتظر بماند تا متن صفحات به او نمایش داده شود.
در حالت FOUT ابتدا متن صفحات با یک فونت پیش فرض نمایش داده می‌شوند و زمانی که فونت مورد نظر شما روی مرورگر کاربر بارگذاری شد، فونت متن تغییر پیدا می‌کند. اما این داستان باز موجب می‌شود که به‌طور ناگهانی تغییراتی در چیدمان المان‌های مختلف صفحه ایجاد شود و رتبه CLS شما کاهش پیدا کند. برای حل این مشکل باید عبارت rel=preload را به کد HTML مربوط به فونت در head سایت اضافه کنید.
اما منظور از Preload چیست؟ با ورود به یک وب سایت، عناصر مختلفی مانند تصاویر، CSS، جاوا، فونت و …. به نوبت لود می‌شوند. مرورگر تا زمانی که لود یکی کامل نشود، به سراغ بعدی نمی‌رود. اما با استفاده از رل پری لود (rel=preload) برای یکسری از عناصر، می‌توانیم به لود آن‌ها اولویت دهیم به صورتی که در ابتدا و با عناصر اول، لود شوند. این باعث می‌شود زمانی که نوبت به آن عنصر خاص رسید، چون از قبل دانلود شده، به سرعت بارگذاری می‌شود و این اثر بسیار خوبی بر روی رتبه‌ی CLS خواهد داشت.
معمولاً وقتی از رل پری لود برای فونت‌های خود استفاده نمی‌کنید با خطای Preload key requests در ابزارهای بررسی وب سایت روبرو می‌شوید. برای رفع این خطا مطابق توضیحات بالا در کد سایت دست برده و اقدام به اصلاح آن نمایید. اگر از وردپرس استفاده می‌کنید می‌توانید با استفاده از افزونه Rocket به بخش Preload Fonts رفته و فونت‌های خود را اضافه نمایید.
