هسته حیاتی وب یا Core Web Vitals چیست؟

هسته حیاتی وب یا Core Web Vitals چیست؟
زمان تقریبی مطالعه : 6 دقیقه

هسته حیاتی وب یا Core Web Vitals یک معیار جدید است که توسط گوگل ارائه شده است. با استفاده از این معیار وب سایت ها رتبه بندی می شوند.

برای اولین بار در سال ۲۰۲۰ توسط شرکت گوگل معیار جدیدی معرفی شد. این معیار جدید به منظور رتبه بندی و بررسی وب سایت ها ارائه شده که اصطلاحا هسته حیاتی وب (Core Web Vitals) نام دارد.

هسته حیاتی وب یا Core Web Vitals سه مورد را بررسی کرده و به آن امتیاز می دهد. سرعت بارگذاری یک صفحه‌ وب در مرورگر، سرعت ناپایداری محتوا در زمان بارگیری در مرورگر و میزان بارگذاری سریع محتوای صفحه؛ سه معیاری هستند که توسط گوگل مورد بررسی قرار می گیرند. در صورتی که این معیارها در حد ایده آل باشند؛ موجب می شوند جایگاه سایت در صفحه نتایج جستجو ارتقاء یابد.

تجربه‌ صفحه (Page Experience):

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

تجربه‌ کاربر (User Experience):

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

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

بررسی میزان اثربخشی UX و UI در طراحی سایت

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

سه فاکتور مهم در هسته حیاتی وب شامل موارد زیر می باشند.

۱-‌ بزرگ ترین رنگ محتوا (Largest Content Paint):

اولین معیاری که بر روی هسته حیاتی وب تاثیر می گذارد؛ بزرگ ترین رنگ محتوا (LCP) می باشد. مدت زمانی که طول می کشد تا محتوای اصلی در یک صفحه بارگذاری شده و برای بازدیدکنندگان به نمایش درآید را بزرگ ترین رنگ محتوا می گویند. این معیار نمایانگر عملکرد بارگذاری صفحه بوده و به طور مستقیم بر روی تجربه‌ی کاربر و میزان بازدید از وب سایت اثر می گذارد.

بیشتر بخوانید :  آموزش کامل برچسب گذاری در سایت

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

به همین دلیل کاهش زمان بارگذاری؛ موجب تسریع در دسترسی به اطلاعات مورد نیاز و بهبود تجربه‌ کاربر خواهد شد. بهترین و ایده آل ترین زمانی که گوگل در نظر گرفته بین ۵/۲ ثانیه تا ۴ ثانیه می باشد. در صورتی که این فاصله زمانی افزایش داشته باشد؛ باید در جهت رفع این مشکل اقدام شود.

به منظور کاهش زمان بارگذاری و ارتقای تجربه‌ کاربر اقدامات مختلفی انجام می شود. برخی از این اقدامات به شرح زیر می باشند:

  • فعال کردن بارگذاری تنبل (Lazy Loading)
  • از بین بردن تمامی کدهای غیر ضروری
  • به کارگیری سرویس میزبانی (Host) بسیار قوی‌
  • کاهش میزان CCS ها
  • بهره گیری از CDN

۲-‌ اولین تاخیر ورودی (First Input Delay):

دومین فاکتور مهم هسته حیاتی وب؛ اولین تاخیر ورودی (FID) است که نشان‌دهنده میزان راحتی در ایجاد تعامل با صفحه می باشد. این معیار نحوه تعامل کاربر با وب سایت و مدت زمان آن را بررسی می کند. کلیک کردن بر روی آدرس لینک، انتخاب کردن یک گزینه از منوی موجود در سایت، ثبت نام در یک سایت و… به عنوان تعامل کاربر با صفحه شناخته می شوند.

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

برای کاهش زمان اولین تاخیر ورودی و به تبع آن افزایش رتبه‌ سایت؛ اقدامات زیر را می توان انجام داد:

  1. از بین بردن اسکر‌یپت ‌های اضافی و غیر‌ ضروری
  2. کم کردن تعداد جاوا اسکر‌یپت‌ های سایت
  3. استفاده از کش مرورگر (Cache)

۳-‌ تغییر چیدمان تجمیعی (Cumulative Layout Shift):

سومین فاکتور مهم هسته حیاتی وب؛ تغییر چیدمان تجمیعی (CLS) نام دارد که بیانگر ثبات تصویری صفحه از چشم کاربر می باشد. این معیار به بررسی میزان ثبات تصویری و بصری وب سایت می پردازد. بالا بودن میزان تغییر چیدمان تجمیعی موجب کاهش رتبه‌ سایت می شود. زیرا باعث می شود نحوه چیدمان و ترتیب قرارگیری برخی عناصر وب سایت پس از بارگذاری سایت جا به جا شوند.

بیشتر بخوانید :  دلایل پنالتی شدن سایت توسط گوگل

تغییر چیدمان تجمیعی؛ درگیری کاربر با تغییرات غیر منتظره عناصر سایت و میزان سختی و دشواری آن را تعیین می کند. میزان تغییر چیدمان تجمیعی باید کمتر از ۱/۰ باشد. در غیر این صورت باید اقدامات زیر بر روی سایت انجام گیرد تا این میزان کاهش یابد:

  1. برای از بین بردن تغییر و جابجایی عناصر باید کلیه‌ رسانه هایی که در وب سایت هستند در حجم استاندارد به کار برده شوند. در این صورت مرورگر به طور دقیق می داند که هر یک از عناصر به چه میزان فضا احتیاج دارند. منظور از رسانه ها فیلم، تصویرها، اینفوگرافیک‌ ها، GIF ها و… می باشند.
  2. در صورتی که پیام‌ های تبلیغاتی سایت در فضای از پیش تعیین شده نمایش داده نشوند؛ ممکن است این پیام ها به طور ناگهانی بر روی صفحه نمایش دیده شوند. در نتیجه باعث بروز تداخل در نمایش محتواهای سایت و سایر عناصر بصری می شوند.
  3. برای جلوگیری از جابجایی محتواها و سایر عناصر موجود در سایت باید عناصر جدید رابط کاربری در قسمت پایین سایت به نمایش درآیند. کلیک یا پاپ آپ‌ ها در دسته‌ عناصر جدید رابط کاربری قرار می گیرند.

بررسی هسته حیاتی وب یا  Core Web Vitals:

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

این ابزار اطلاعات دقیقی از سه فاکتور اصلی سایت در اختیار قرار می دهند. در این راستا چند ابزار وجود دارد. با کمک این ابزارهای کاربردی در مدت زمان چند دقیقه می توان هسته حیاتی وب یا به عبارتی Core Web Vitals وب سایت‌ مورد نظر را بررسی و اندازه گیری نمود. این ابزارهای کاربردی شامل موارد زیر می باشند:

  1. ابزار Google Search Console
  2. ابزار Page Speed Insights
  3. ابزار Lighthouse
  4. ابزار Chrome UX Report
  5. ابزار Chrome Dev
  6. ابزار‌ Web Vitals Extension

۱- ابز‌ار Google Search Console:

این ابز‌ار یکی از بهترین ابزارهایی است که برای اندازه گیری هسته حیاتی وب به کار می رود. این ابزار قابلیت ارائه یک گزارش کامل از هسته حیاتی وب را دارد. طی این گزارش صفحاتی که نیاز به ویرایش و اصلاح دارند را به همراه جزئیات آن ها نشان می دهد.

بیشتر بخوانید :  هزینه تولید محتوا برای سایت های مختلف چقدر است؟

برای دریافت گزارش از ابز‌ار Google Search Console باید گزینه‌ تجربه (Experience) را انتخاب نمود. سپس باید از منوی باز شده بر روی گزینه Core Web Vitals کلیک کرد.

بعد از گذشت چند ثانیه گزارش آماده شده و کلیه‌ی اطلاعات مربوط به معیارهای سه گانه هسته حیاتی وب به نمایش در می آید.

۲- ابز‌ار Page Speed Insights:

دومین ابز‌ار مورد استفاده برای تعیین هسته حیاتی وب؛ ابزار Page Speed Insights می باشد. این ابزار اطلاعات مفید و دقیقی در اختیار قرار می دهد و کار با آن بسیار ساده و آسان است.

به این منظور ابتدا باید URL صفحه موردنظر وب سایت در آن وارد شود تا گزارش هسته حیاتی وب از آن دریافت شود. این ابزار پیشنهادهایی در راستای بهبود هسته حیاتی وب در اختیار می گذارد. با استفاده از این ابزار می توان در بخش های میدانی و آزمایشگاهی هسته حیاتی وب را اندازه گیری کرد.

هسته حیاتی وب یا Core Web Vitals چیست؟

۳- ابز‌ار Lighthouse:

ابزار Lighthouse کیفیت و میزان فاکتورهای سه گانه‌ هسته حیاتی وب را مورد بررسی و آنالیز قرار می دهد. با استفاده این ابزار می توان راهکارهایی برای ارتقاء و بهینه سازی Core Web Vitals دریافت کرد. اجرا و پیاده سازی این موارد می تواند عامل افزایش تجربه کاربر و رتبه سایت باشد.

این ابزار به تازگی به روزرسانی شده است. طی این نوآرایی ممیزی های اضافی، معیارهای جدید و یک امتیاز عملکرد جدید به آن افزوده شده است. (Largest Content Paint (LCP و (CLS) Cumulative Layout Shift از جمله معیارها و فاکتورهای افزوده شده می باشند.

۴- ابزار Chrome UX Report:

با کمک ابزار Chrome UX Report می توان هسته حیاتی وب سایت مورد نظر را بررسی کرده و گزارش کامل از سه معیار اصلی را دریافت نمود. این ابزار می‌تواند مدت زمان و کیفیت پارامترهای هسته حیاتی صفحات وب سایت را بررسی و اندازه گیری کند.

۵- ابزار Chrome Dev:

با استفاده از ابزار Chrome Dev می توان مشکلات مربوط به تغییر چیدمان تجمیعی و ناپایداری های بصری را مشخص کرد. این نرم افزار همچنین مدت زمان مسدود کردن را نیز اندازه گیری کرده و با این کار در بهبود اولین تاخیر ورودی موثر می باشد.

۶- ابزار‌ Web Vitals Extension:

با استفاده از ابزار Web Vitals Extension می توان هسته حیاتی وب را در زمان واقعی اندازه گیری کرد. این ابزار به راحتی از طریق فروشگاه Chrome Web دریافت و نصب می شود و قابلیت های مشابهی با سایر ابزارهای اندازه گیری Core Web Vitals دارد.