هسته حیاتی وب چیست؟| راهنمایی برای توسعه دهندگان CORE WEB VITAL

بهینه سازی برای بالا بردن تجربه کاربری (user experience)، یک کلید مهم در کسب موفقیت برای هر سایتی به حساب می آید. فرقی نمی کند که صاحب یک کسب و کار باشید یا یک توسعه دهنده، هسته حیاتی وب یا core web vital می تواند به شما کمک کند تا تجربه سایت خود را از نظر کمی بهتر نمایید و فرصت ها را برای بهبود، شناسایی کنید.

بررسی های اجمالی

Web vital ابتکاری از طرف Google برای ارائه راهنمایی واحد برای سیگنال های کیفی بوده که به منظور ارائه یک تجربه کاربری عالی در وب نیز ضروری می باشد. گوگل در طی سال های گذشته، ابزارهای مختلفی را برای اندازه گیری و گزارش عملکرد ارائه کرده است. برخی از توسعه دهندگان، در استفاده از این ابزارها متخصص هستند، در حالی که برخی دیگر، فراوانی هر دو ابزار و معیارها را برای ادامه کار  دچار مشکل شده اند.

برای درک کیفیت تجربه ارائه شده به کاربران، لازم نیست صاحبان سایت ها معیارهای عملکرد باشند. هسته حیاتی وب، با هدف ساده سازی چشم انداز و کمک به سایت ها در معیارهایی که بیشترین اهمیت را دارند ، ایجاد شده است.

هسته حیاتی وب یا CORE WEB VITALS چیست؟

Core web vitals، زیرمجموعه Web Vital است که در همه صفحات وب اعمال می شود و  باید توسط همه دارندگان سایت اندازه گیری شود و همچنین در تمامی ابزارهای گوگل نیز ظاهر می شود. هر یک از Core Web Vital ها، نمایانگر وجه متمایزی از تجربه کاربری است که در این زمینه، قابل اندازه گیری بوده  و منعکس کننده تجربه دنیای واقعی یک نتیجه مهم کاربر محور است.

معیارهای تشکیل دهنده Core Web Vital با گذشت زمان تکامل می یابند. مجموعه فعلی برای سال 2020 بر سه جنبه از تجربه کاربری متمرکز بوده  است که این سه جنبه شامل: بارگیری (loading) ، تعامل و ثبات بصری (interactivity)  و شامل معیارهای زیر (و آستانه مربوطه) است:

Largest Contentful Paint یا (LCP):  معیاری برای اندازه گیری عملکرد نیز می باشد.  LCP با هدف بهبود تجربه کاربری ایجاد شده است که باید در حدود 2.5 ثانیه از زمان اولین لود سایت ظاهر شود. در واقع LCP، فاصله زمانی بین شروع بارگیری صفحه تا زمانی است که بزرگترین تصویر یا بلوک متنی در ویوپورت (viewport) کاربر به طور کامل ارائه شود. ممکن است با بارگیری صفحه و هنگامی که محتوا قابل مشاهده است، تغییر نمره مشاهده کنید اما بزرگترین گره هنوز در بک لاگ (backlog) باقی مانده باشد که هنوز به نمایش در نیامده باشد. این  معیار برای سرعت اتصال، مورد توجه قرار می گیرد.

First input Delay یا (FID): معیاری برای تعامل و ارتباط است. برای اینکه تجربه کاربری بهتری داشته باشید باید صفحات هر سایت، کمتراز 100 میلی ثانیه نیز ظاهر شوند. به صورت کلی، FID، مدت زمانی است که برای آماده شدن یک صفحه برای تعامل کاربر نیاز دارد. منظور از این جمله این است که، هنگامی که صفحات جمع می شوند چه مدت طول می کشد تا صفحه به کلیک ها ، پیمایش ها یا ورودی صفحه کلید پاسخ دهد و کنترل کننده ها، رویدادهای مربوطه خود را پردازش کند.

Cumulative Layout Shift  یا (CLS): معیاری برای ثبات می باشد. برای درک و تجربه کاربری بهتر، صفحات باید دارای cls در حدود 0.1 داشته باشند. CLS، فاصله و کسری از ویوپورت اندازه گیری شده است که به دلیل دستکاری DOM یا کمبود صفحات ابعادی برای عناصر اصلی رسانه، تغییر مکان می دهد. برای مثال، هنگامی که ما نمی توانیم ابعاد تصاویر قهرمان خود را تعریف کنیم ، متن موجود در صفحات ما فقط تغییر مکان می یابد و باعث ایجاد “تغییر مکان” طرح محتوای مخرب برای کاربران ما می شود.

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

ابزارهایی که برای بررسی و اندازه گیری core web vitals هستند باید معیارهای گفته شده و درصد آنها را رعایت کنند.

چطور امتیازهای WEB VITALS موبایل و دسکتاپ را تجزیه و تحلیل نماییم؟

عموما، شما امتیازهای مختلفی برای web vitals بین موبایل و دسکتاپ دریافت می کنید.در بعضی از ابزارها، شما می توانید نوع دسته خود را برای تجزیه و تحلیل و آزمایش کردن نیز مشخص نمایید و یا حتی می توانید در بعضی از این ابزارها مانند google page speed نیز بین موبایل و دسکتاپ نیز جا به جا شوید. در page speed insights، در حالت پیش فرض شما امتیاز سرعت سایت را در موبایل مشاهده می کنید که برای دیدن امتیاز دسکتاپ، باید از تب دسکتاپ برای جا به جایی استفاده نمایید.

اگر نخواهید از این ابزار برای امتیاز سرعت سایت خود استفاده نمایید می توانید core web vital را در سرچ کنسول خود با جزییات کامل مشاهده نمایید البته زمانی شما می توانید شاهد این امتیاز باشید که اطلاعاتی از تجربه کاربری در گوگل کروم شما ثبت شده باشد. اگر به سرچ کنسول دسترسی دارید و داده هایی از کروم ارسال شده است، شما به راحتی می توانید امتیازهای مختلفی که هسته حیاتی وب در search console  برای دسکتاپ و موبایل  نشان می دهد را مشاهده نمایید.

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

اندازه گیری CORE WE VITALS در جاوا اسکریپت

هر هسته حیاتی وب می تواند با زبان جاوا اسکریپت اندازه گیری شود و از API های استانداردی نیز استفاده نماید.

آسانترین راه برای اندازه گیری همه Core Web Vital ها، استفاده از کتابخانه جاوااسکریپت web-vitals است. در واقع این کتابخانه یک بسته بندی کوچک بوده که  برای تولید در اطراف API های وب ایجاد شده است و در واقع مطابق با نحوه گزارش دهی توسط همه ابزارهای Google نیز ارائه می شود. با استفاده از کتابخانه حیاتی وب، اندازه گیری هر یک از متریک ها و فراخوانی ها آن ها نیز آسانتر خواهد بود. به نمونه زیر توجه فرمایید.

هنگامی که سایت خود را پیکربندی کردید تا از کتابخانه vitals برای اندازه گیری و ارسال داده های Core Web Vital خود به نقطه پایانی تجزیه و تحلیل استفاده نمایید. قدم بعدی، جمع آوری و گزارش در مورد آن داده ها است تا ببینید آیا صفحات شما، آستانه های پیشنهادی را برآورده می کنند و حداقل 75٪ بازدید از صفحه را شامل می شوند یا خیر.

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

یک نمونه از این موارد، Web Vital Report است که به دارندگان سایت اجازه می دهد Core Web Vital خود را با استفاده از Google Analytics اندازه گیری کنند. برای راهنمایی در مورد اندازه گیری Core Web Vital با استفاده از سایر ابزارهای تجزیه و تحلیل ، می توانید به بهترین روش های اندازه گیری Web Vital در این زمینه مراجعه کنید.

همچنین، شما می توانید بدون نوشتن کدی با استفاده از Chrome Version Web Vital، در مورد هر یک از Core Web Vital ها گزارش دریافت نمایید. این یک برنامه extension  از کتابخانه حیاتی وب بوده که  برای اندازه گیری هر یک از این معیارها و نمایش آنها به کاربران هنگام استفاده از وب، مورد استفاده  قرار می گیرد.

ادامه دارد….