Core Web Vitals یا وایتال های وب – معیارهای گوگل در سال ۲۰۲۰

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

قبل از این که بخوایم شروع کنیم از Core Web Vitals صحبت کنیم باید یه کم بریم عقب تر و بدونیم اصلاً Web Vitals چی هستن.

مروری سریع بر Web Vitals

Web Vitals یه ابتکاری از طرف گوگل Google برای ارائه یه دستورالعمل یکپارچه بود. تو اون دستوالعمل معیارهای کیفیت یا quality signals رو که هر وبسایتی باید داشته باشه تا بتونه یه تجربه کاربری عالی به کاربر بده رو ردیف کرده.

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

اما صاحب های سایت چی؟ صاحب کسب و کار و شرکت چی؟ اون هیچ وقت قرار نیست سر در بیاره این ابزارها چی میگن و خروجی این گزارش ها چیه؟

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

Core Web Vitals

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

معیارهای Core Web Vitals در سال 2020

معیارهای Core Web Vitals به مروز زمان کامل تر و کامل تر میشن. مجموعه ای که برای سال 2020 ارائه شده بر سه جنبه از تجربه کاربر تمرکز داره:

• بارگیری یا Loading
• تعامل یا Interactivity
• ثبات بصری یا Visual Stability

همونطور که تو عکس بالا میبینین معیارهای Core Web Vitals گوگل تو سال 2020 یعنی بارگیری یا Loading ، تعامل یا Interactivity و ثبات بصری یا Visual Stability خودشون از طریق چند تا سنجه بررسی میشن. این سنجه ها به شرح زیر هستن:

• بزرگترین ترسیم محتوایی یا Largest Contentful Paint یا به صورت کوتاه شده LCP عملکرد بارگیری صفحه رو اندازه می گیره. یعنی چی؟ یعنی اگه میخواین یه تجریه کاربری خوب داشته باشین، طبق معیارهای گوگل وقتی یه کاربر میزنه که یه صفحه باز بشه، LCP باید تو 2/5 ثانیه انجام بشه.
• تاخیر تا اولین ورودی یا First Input Delay یا به صورت کوتاه شده FID تعامل رو اندازه می گیره. اگه می خواین یه تجربه کاربری خوب داشته باشین، FID یا تاخیر ورودی اول هر صفحه باید از 100 میلی ثانیه کمتر باشه.
• شیفت تجمعی چینش یا Cumulative Layout Shift یا به صورت کوتاه شده CLS ثبات بصری رو اندازه می گیره. اگه می خواین تجربه کاربری خوبی به بازدیدکننده های سایت ارائه بدین، طبق معیارهای گوگل صفحه های سایت باید CLS یا تاخیر چیدمان تجمعی کمتر از 0/1 داشته باشن.

ابزارهای اندازه گیری و گزارش گیری از Core Web Vitals

گوگل معتقده که همه Core Web Vitals برای همه تجربه های وب مهم هستن. در نتیجه تو همه ابزارهای معروفش که خیلی ها ازش استفاده می کنن امکان بررسی اونها رو گذاشته. تو این قسمت یه نگاهی میندازیم به ابزارهایی که از Core Web Vitals ساپورت می کنن. این ابزارها چند دسته هستن.

ابزارهای میدانی که Core Web Vitals رو اندازه گیری می کنن

Chrome User Experience Report یا گزارش تجربه کاربری کروم داده های اندازه گیری کاربر واقعی ناشناس رو برای Core Web Vitals جمع آوری می کنه. این داده های جمع آوری شده به صاحب سایت این امکان رو میده که سرعت عملکرد سایت خودش رو ارزیابی کنه. اینجوری دیگه لازم نیست به صورت دستی از ابزارهایی مثل Page Speed Insights یا Google Search Console استفاده کنده و صفحه های سایت رو تجزیه و تحلیل کنه تا بتونه گزارش عملکرد سایت بدست بیاره.

همونطور که تو شکل زیر میبنین هر سه ابزار Chrome User Experience Report ، Page Speed Insights و Google Search Console هر سه تا شاخص LCP ، FID و CLS رو اندازه گیری می کنن.

داده هایی که توسط گزارش کاربری کروم یا Chrome User Experience Report ارائه میشن فقط به سرعت نشون میدن که عملکرد سایت چه جوریه. اما در مورد این که هر صفحه چه وضعیتی داره چیزی نمی گن و کلاً وارد جزئیات نمیشن. پس توصیه اکید می کنیم که روی سایت خودتون حتما مانیتورینگ کاربر واقعی یا Real-User Monitoring رو تنظیم کنین که اطلاعات تکمیلی رو از دست ندین.

اندازه گیری Core Web Vitals با جاوا اسکریپت JavaScript

هر کدوم از Core Web Vitals رو میشه در JavaScript با استفاده از API های استاندارد وب اندازه گیری کرد. ساده ترین روش برای اندازه گیری همه Core Web Vitals استفاده از کتابخانه جاوا اسکریپت Web Vitals یا Web Vitals JavaScript Library است. این لایبرری یه بسته کوچیک آماده اجرا است که میتونه با یه API وب هماهنگ بشه و هر معیار Core Web Vitals رو همونجور که گوگل انتظار داره اندازه بگیره.

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

            <?phpimport {getCLS, getFID, getLCP} from 'web-vitals'; function sendToAnalytics(metric) { const body = JSON.stringify(metric); // Use `navigator.sendBeacon()` if available, falling back to `fetch()`. (navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) || fetch('/analytics', {body, method: 'POST', keepalive: true}); } getCLS(sendToAnalytics); getFID(sendToAnalytics); getLCP(sendToAnalytics); 
                            

حتی اگه نمی خواین یه دونه خط هم کد بزنین، می تونین یه اکستنشن یا افزونه کروم به اسم Web Vitals Chrome Extension نصب کنین. این افزونه با استفاده از کتابخانه های Web-vital هر کدوم از معیارهای Core Web Vitals رو اندازه گیری می کنه و همزمان که فرد داره تو اینترنت می چرخه و می گرده، بهش نمایش میده.

همونطور که تو عکس بالا هم میبینین، هم افزونه Web Vitals هم کتابخانه Web-vitals که با جاوا اسکریپت کد زده میشه، هر دوشون هر سه تا معیار بزرگترین رنگ محتوا یا Largest Contentful Paint ، تاخیر ورودی اول یا First Input Daley و تاخیر چیدمان تجمعی یا Cumulative Layout Shift رو اندازه گیری می کنن.

ابزارهای آزمایشگاهی برای اندازه گیری Core Web Vitals

با این که همه Core Web Vitals معیارهایی میدانی هستند، اما بسیاری از اونا رو میشه تو آزمایشگاه هم اندازه گرفت. منظور از معیارهای میدانی چیه؟ منظور از اندازه گیری آزمایشگاهی چیه؟ معیار میدانی یعنی … یعنی باید بریم تو واقعیت … بریم تو محیط واقعی و داده جمع کنیم.

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

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

اما یه سری از داده ها رو میشه تو آزمایشگاه (نه آزمایشگاه پزشکی با لوله آزمایش و میکروسکوپ! اینجا منظور یه سری کامپیوتره!) شبیه سازی کرد. به این میگن اندازه گیری آزمایشگاهی.

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

اندازه گیری آزمایشگاهی اطلاعات خوبی بهمون میده اما هیچ وقت نمیتونه جای اندازه گیری میدانی Core Web Vitals رو بگیره.

همونطور که تو عکس بالا هم میبینین، Chrome DevTools و Lighthouse هر دو معیار بزرگترین رنگ محتوا یا Largest Contentful Paint و تاخیر چیدمان تجمعی یا Cumulative Layout Shift رو اندازه گیری می کنن اما نمی تونن تاخیر ورودی اول یا First Input Daley رو بسنجن.

سایر Web Vitals

غیر از Core Web Vitals معیارهای دیگری هم وجود دارند که گرچه به اهمیت Core Web Vitals نیستند اما بی اهمیت هم نیستند. اونها هم برای درک و ارائه تجربه کاربری عالی ضرورت دارن. این معیارها عموماً معیارهای تکمیلی برای Core Web Vitals به حساب میان تا بشه بخش بیشتری از تجربه رو زیر نظر گرفت و اگه یه مورد خاصی هم وجود داشته داشته باشه، کمک می کنن تا اون حل بشه.

بعضی از این معیار های Web Vitals مثل Time to First Byte (TTFB) یعنی زمان دریافت اولین بایت و First Contentful Paint (FCP) یعنی زمانی که اولین چیز قابل دیدن توی صفحه ظاهر میشه، روی تجربه لودینگ یا Loading صفحه تاثیر دارن.

معیارهایی مثل Total Blocking Time (TBT) و Time to Interactive (TTI) هم معیارهایی آزمایشگاهی هستن که روی FID خیلی تاثیر دارن. راجع به این معیارها تو پست دیگه سایت ما میتونین کلی مطلب پیدا کنین.