معیار Core Web Vital در توسعه وب چیست؟ | راهنمای هسته حیاتی وب

تجربه کاربر همیشه یکی از فاکتورهای اصلی گوگل بوده اما با اعلام جدیدترین معیارهای رتبه بندی گوگل در سال 2021 توجه ویژه ای را به خود جلب کرده است. برای این عامل مهم معیارهایی تحت عنوان Core Web Vital معرفی شده است که در کیفیت تجربه کاربر تاثیرات مستقیمی دارد. در این مطلب به این معیار و چگونگی بهبود تجربه کاربر با استفاده از LCP ، FID و CLS می پردازیم. تا انتهای مطلب همراه آژانس دیجیتال مارکتینگ تاس باشید و بخوانید:

• منظور از Core Web Vitals چیست؟
• چه عواملی در Core Web Vitals تاثیرگذار هستند؟
• چطور فاکتورهای تجربه کاربری را برای گوگل بهبود ببخشیم؟

پیشنهاد می کنیم مطالعه کنید: بهترین ابزارهای طراحی سایت در سال ۲۰۲۱

Core Web Vitals چیست؟

گوگل برای این که کاربری سایت ها برای مخاطبانشان بهتر و مفید تر شوند ابزارهایی را برای اندازه گیری و گزارش عملکرد ویژگی های مختلف سایت ارائه کرده است. برخی وبمستران و توسعه دهندگان در استفاده از این ابزارها مهارت و هوشمندی لازم را به کار گرفته اند و برخی دیگر درگیر چالش ها و سردرگمی ها شده اند. بنابراین در سال های اخیر گوگل  فاکتورهای مشخصی که برای تجربه کاربری بهتر ضروری است را تحت عنوان Core Web Vital  یا هسته اصلی سایت معرفی کرده است.

برای تغییر ظاهر وب سایت خود یا بهتره مندی از خدمات UI  می توانید از خدمات طراحی ui  تاس استفاده کنید

فاکتور های اصلی Core Web Vitals

معیارهای اصلی گوگل برای بهبود تجربه کاربر به طور خلاصه عبارتند از :

۱. بزرگترین عنصر محتوا (LCP)

این فاکتور برای تناسب زمان بارگیری سایت تعریف شده است. اگر زمان بارگیری سایت شما بخواهد برای تجربه کاربری مفید باشد، بایستی  LCP باید در عرض 2.5 ثانیه از شروع بارگیری صفحه انجام شود. با استفاده از ابزار Google PageSpeed ​​Insights می توانید میزان LCP خود را بررسی کنید. در ابزار سرچ کنسول نیز می توانید این معیار را بررسی کنید.

برخی از اقداماتی که می توانید برای بهبود LCP سایت خود انجام دهید، به شرح زیر است:

• هرگونه اسکریپت غیرضروری شخص ثالث را حذف کنید

مطالعات اخیر نشان داد که هر اسکریپت شخص ثالث یک صفحه را با سرعت 34 میلی ثانیه کند می کند.

• هاست سایت خود را ارتقا دهید

عامل هاست به طرز مستقیمی در سرعت تاثیرگذار است. یعنی هاست بهتر = زمان بارگذاری سریعتر به طور کلی (از جمله LCP).
تنظیمات lazy loading را فعال کنید: تنظیمات lazy loading باعث می شود تصاویر فقط در صورتی که کاربران تا پایین صفحه شما را اسکرول کنند بارگزاری شوند به این ترتیب LCP بسیار بهبود می یابد.

• حذف عناصر بزرگ صفحه 

اگر به سراغ ابزار Google PageSpeed ​​Insights بروید می فهمید که آیا صفحه شما عنصر چندان بزرگی دارد که بارگزاری صفحه را کند کرده و با اختلال مواجه کند.

۲. تأخیر ورودی اول (FID)

این فاکتور زمانی که کاربر برای تعامل واقعی با صفحه سپری می کند را اندازه می گیرد. برای ایجاد یک تجربه کاربری خوب ، صفحات باید دارای FID 100 میلی ثانیه یا کمتر باشند.

نمونه هایی از تعامل های کاربر عبارتند از:

• انتخاب گزینه از منوها
• با کلیک بر روی پیوند در پیمایش سایت
• وارد کردن ایمیل خود به یک قسمت
• باز کردن “متن آکاردئون” در دستگاه های تلفن همراه

گوگل به عامل  FID اهمیت زیادی می دهد چرا که نحوه تعامل واقعی کاربران را تعیین و مدت زمانی را که کاربران برای انجام کاری در صفحه شما طول می کشند اندازه گیری می کند.

برای صفحه ای که 100٪ محتوای متنی باشد مثلا برای صفحات پست وبلاگ یا مقالات خبری، FID مسئله مهمی ایجاد نمی کند. زیرا تنها “تعامل” واقعی کاربران در این مورد اسکرول کردن به پایین صفحه است. یا نهایتا زوم مثبت و منفی است.

اما برای صفحاتی مثل ورود به صفحه مدیریت حساب یا تغییر مسیر از صفحه به صفحه ای دیگر این مورد بسیار اساسی است. راه هایی که می توانید FID  را بهبود ببخشید عبارتند از:

• به حداقل رساندن (یا به تعویق انداختن) JavaScript

تقریباً غیرممکن است که کاربران در هنگام بارگیری JS با یک صفحه ارتباط برقرار کنند. بنابراین به حداقل رساندن یا به تعویق انداختن JS در صفحه خود بهترین راه برای بهبود FID است.

• حذف اسکریپت های شخص ثالث غیر حیاتی

همانطور که در فاکتور قبلی اشاره کردیم، اسکریپت های شخص ثالث (مانند Google Analytics ، نقشه های حرارتی و غیره) می توانند بر FID تأثیر منفی بگذارند.

• استفاده از حافظه پنهان مرورگر

این به شما کمک می کند تا محتوای صفحه شما سریعتر بارگیری شود. که به شما کمک می کند مرورگر کاربر از طریق بارگذاری کارهای JS حتی سریعتر منفجر شود.

۳. انسجام چیدمان تجمعی (CLS)

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

این مشکلی است که عامل CLS برای برطرف کردنش به وجود آمده است. در واقع نمره ای که هر صفحه باید برای تجربه خوب کاربری از CLS  داشته باشد نزدیک 0.1 است.

عوامل بهبود عامل CLS  عبارتند از:

• تعیین اندازه مشخص برای هر رسانه

بهتر است برای هر رسانه ای که در صفحات سایت خود به کار می برید (ویدیو ، تصاویر ، GIF ، اینفوگرافیک و غیره) از ابعاد مشخصی استفاده کنید.  به این ترتیب ، مرورگر کاربر می داند که این عنصر در آن صفحه چقدر فضای بیشتری را اشغال می کند. و با بارگیری کامل صفحه ، آن را تغییر نمی دهد.

• به تبلیغات جای ویژه خودشان را اختصاص دهید

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

• عناصر UI جدید را به زیر اضافه کنید

کاربران بر اساس تجربه سابق خود با سایر سایت ها در طول سال های استفاده از اینترنت، انتظار دارند که با یک نظم و امتداد رو به رو باشند. با استفاده از امکانات جدید UI می توانید این نظم ذهنی را برایشان برقرار کنید و برایشان واضح کنید کجا قرار است با چه چیزی مواجه شوند و در انتظار لود شدن آن باشند.

برای تغییر ظاهر وب سایت خود یا بهتره مندی از خدمات UI  می توانید از خدمات طراحی ui  تاس استفاده کنید

جمع بندی

در این مقاله با معیارهایی که در تجربه کاربر تاثیر مستقیم دارند و گوگل آن ها را به رسمیت شناخته و بررسی می کند آشنا شدید. در هر مورد نکاتی که برای بهبود وضعیت وجود داشت را نیز بیان کردیم. اما اگر هنوز سوالی درباره   Web Core Vital  در ذهن دارید و پاسخی برای آن پیدا نکرده اید، می توانید از بخش نظرات زیر همین پست در میان بگذارید و پاسخ بگیرید.

در صورتی که تجربه جالب و مفیدی در این زمینه دارید هم می توانید از همین قسمت با سایر کاربران به اشتراک بگذارید.  فراموش نکنید که برای تمامی خدمات طراحی سایت از جمله طراحی UI می توانید روی همگاری تاس حساب کنید.