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

ابزارهای توسعه دهنده مورد علاقه شما اکنون می توانند Core Web Vitals را اندازه گیری کنند.

Addy Osmani

Elizabeth Sweeny

ابتکار Web Vitals که اخیراً اعلام شده است، راهنمایی یکپارچه در مورد سیگنال‌های با کیفیت ارائه می‌کند که برای همه سایت‌ها برای ارائه یک تجربه کاربری عالی در وب ضروری است. ما خوشحالیم که اعلام کنیم همه ابزارهای محبوب Google برای توسعه دهندگان وب اکنون از اندازه گیری Core Web Vitals پشتیبانی می کنند و به شما کمک می کنند تا مشکلات تجربه کاربر را راحت تر تشخیص داده و برطرف کنید. این شامل Lighthouse ، PageSpeed ​​Insights ، Chrome DevTools ، Search Console ، ابزار اندازه گیری web.dev ، افزونه Web Vitals Chrome و یک API جدید (!) Chrome UX Report است.

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

برای شروع سفر خود با بهینه سازی تجربه کاربری با Core Web Vitals، گردش کار زیر را امتحان کنید:

• از گزارش جدید Core Web Vitals کنسول جستجو برای شناسایی گروه هایی از صفحاتی که نیاز به توجه دارند (بر اساس داده های میدانی) استفاده کنید.
• هنگامی که صفحاتی را که نیاز به کار دارند شناسایی کردید، از PageSpeed ​​Insights (با ارائه گزارش Lighthouse و Chrome UX) برای تشخیص مشکلات آزمایشگاهی و میدانی در یک صفحه استفاده کنید. PageSpeed ​​Insights (PSI) از طریق Search Console در دسترس است یا می‌توانید URL را مستقیماً در PSI وارد کنید.
• برای بهینه سازی سایت خود به صورت محلی در آزمایشگاه آماده اید؟ از Lighthouse و Chrome DevTools برای اندازه گیری Core Web Vitals استفاده کنید و راهنمایی های عملی در مورد اینکه دقیقاً چه چیزی را باید برطرف کنید دریافت کنید. افزونه Web Vitals Chrome می‌تواند نمای لحظه‌ای از معیارها را در دسک‌تاپ به شما ارائه دهد.
• به داشبورد سفارشی Core Web Vitals نیاز دارید؟ از داشبورد CrUX به‌روزرسانی شده یا API جدید Chrome UX Report برای داده‌های میدانی یا PageSpeed ​​Insights API برای داده‌های آزمایشگاهی استفاده کنید.
• به دنبال راهنمایی هستید؟ web.dev/measure می‌تواند صفحه شما را اندازه‌گیری کند و با استفاده از داده‌های PSI، مجموعه‌ای از راهنماها و آزمایشگاه‌های کد اولویت‌دار را برای بهینه‌سازی به شما نشان دهد.
• در نهایت، از Lighthouse CI در درخواست‌های کشش استفاده کنید تا مطمئن شوید که هیچ رگرسیونی در Core Web Vitals وجود ندارد، قبل از اینکه تغییری در تولید ایجاد کنید.

با این مقدمه، بیایید به به روز رسانی های خاص برای هر ابزار شیرجه بزنیم!

فانوس دریایی

Lighthouse یک ابزار حسابرسی وب سایت خودکار است که به توسعه دهندگان کمک می کند تا مشکلات را تشخیص داده و فرصت هایی را برای بهبود تجربه کاربری سایت های خود شناسایی کنند. چندین بعد از کیفیت تجربه کاربر در یک محیط آزمایشگاهی، از جمله عملکرد و دسترسی را می سنجد. آخرین نسخه Lighthouse ( 6.0 ، منتشر شده در اواسط ماه مه 2020) شامل ممیزی های اضافی، معیارهای جدید و امتیاز عملکرد جدید است.

Lighthouse 6.0 سه معیار جدید را به این گزارش معرفی می کند. دو مورد از این معیارهای جدید - Largest Contentful Paint (LCP) و Cumulative Layout Shift (CLS)- پیاده‌سازی آزمایشگاهی Core Web Vitals هستند و اطلاعات تشخیصی مهمی را برای بهینه‌سازی تجربه کاربر ارائه می‌دهند. با توجه به اهمیت آنها برای ارزیابی تجربه کاربر، معیارهای جدید نه تنها اندازه گیری شده و در گزارش گنجانده می شوند، بلکه در محاسبه امتیاز عملکرد نیز لحاظ می شوند.

سومین معیار جدید گنجانده شده در فانوس دریایی - زمان انسداد کل (TBT) - به خوبی با متریک میدانی تاخیر ورودی اول (FID)، یکی دیگر از معیارهای Core Web Vitals مرتبط است. پیروی از توصیه های ارائه شده در گزارش Lighthouse و بهینه سازی در برابر امتیازات شما، شما را آماده می کند تا بهترین تجربه ممکن را برای کاربران خود ارائه دهید.

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

برای کسب اطلاعات بیشتر در مورد آخرین به‌روزرسانی‌های Lighthouse، پست وبلاگ «چیزهای جدید در Lighthouse 6.0» را بررسی کنید.

PageSpeed ​​Insights

PageSpeed ​​Insights (PSI) در مورد عملکرد آزمایشگاهی و میدانی یک صفحه در دستگاه های تلفن همراه و دسکتاپ گزارش می دهد. این ابزار یک نمای کلی از نحوه تجربه کاربران دنیای واقعی صفحه را ارائه می‌کند (تأمین شده توسط گزارش Chrome UX) و مجموعه‌ای از توصیه‌های عملی در مورد اینکه چگونه مالک سایت می‌تواند تجربه صفحه را بهبود بخشد (ارائه شده توسط Lighthouse).

PageSpeed ​​Insights و PageSpeed ​​Insights API نیز برای استفاده از Lighthouse 6.0 در زیر کاپوت ارتقا یافته اند و اکنون از اندازه گیری Core Web Vitals در بخش آزمایشگاهی و میدانی گزارش پشتیبانی می کنند! Core Web Vitals با یک روبان آبی مانند شکل زیر حاشیه نویسی شده است.

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

CrUX

گزارش Chrome UX (CrUX) یک مجموعه داده عمومی از داده های تجربه واقعی کاربر در میلیون ها وب سایت است. این نسخه های میدانی تمام Core Web Vitals را اندازه گیری می کند. برخلاف داده‌های آزمایشگاهی، داده‌های CrUX از کاربران فعال در این زمینه می‌آیند. با استفاده از این داده ها، توسعه دهندگان قادر به درک توزیع تجربیات کاربر در دنیای واقعی در وب سایت های خود یا حتی رقبا هستند. حتی اگر RUM در سایت خود ندارید، CrUX می تواند راهی سریع و آسان برای ارزیابی Core Web Vitals شما ارائه دهد. مجموعه داده‌های CrUX در BigQuery شامل داده‌های عملکرد دقیق برای تمام Core Web Vitals است و در عکس‌های فوری ماهانه در سطح مبدا در دسترس است.

تنها راه برای اینکه واقعاً بدانید سایت شما چگونه برای کاربران شما کار می کند این است که واقعاً عملکرد آن را در این زمینه اندازه گیری کنید زیرا آن کاربران در حال بارگذاری و تعامل با آن هستند. این نوع اندازه گیری معمولاً به عنوان نظارت واقعی کاربر یا به اختصار RUM شناخته می شود. حتی اگر RUM در سایت خود ندارید، CrUX می تواند راهی سریع و آسان برای ارزیابی Core Web Vitals شما ارائه دهد.

معرفی CrUX API

امروز خوشحالیم که CrUX API را معرفی کنیم، راهی سریع و رایگان برای ادغام آسان گردش‌های کاری توسعه شما با اندازه‌گیری کیفیت مبدا و سطح URL برای معیارهای فیلد زیر:

• بزرگترین رنگ محتوایی
• تغییر چیدمان تجمعی
• اولین تاخیر ورودی
• اولین رنگ محتوایی

توسعه دهندگان می توانند مبدأ یا URL را جستجو کنند و نتایج را بر اساس فاکتورهای فرم مختلف تقسیم بندی کنند. API روزانه به‌روزرسانی می‌شود و داده‌های ۲۸ روزه قبلی را خلاصه می‌کند (برخلاف مجموعه داده BigQuery که ماهانه جمع‌آوری می‌شود). API همچنین دارای همان سهمیه‌های API عمومی آرامی است که ما در API دیگرمان، PageSpeed ​​Insights API (25000 درخواست در روز) قرار می‌دهیم.

در زیر یک نسخه نمایشی با استفاده از CrUX API برای تجسم معیارهای Core Web Vitals با توزیع های خوب ، نیاز به بهبود و ضعیف ارائه شده است:

در نسخه‌های آتی، قصد داریم API را گسترش دهیم تا دسترسی به ابعاد و معیارهای مجموعه داده CrUX اضافی را امکان‌پذیر کنیم.

داشبورد CrUX اصلاح شده

داشبورد CrUX که به تازگی طراحی شده است به شما امکان می دهد به راحتی عملکرد یک منبع را در طول زمان ردیابی کنید، و اکنون می توانید از آن برای نظارت بر توزیع تمام معیارهای Core Web Vitals استفاده کنید. برای شروع کار با داشبورد، آموزش ما را در web.dev بررسی کنید.

ما یک صفحه فرود Core Web Vitals جدید معرفی کرده‌ایم تا حتی راحت‌تر ببینید که سایت شما در یک نگاه چگونه کار می‌کند. ما از بازخورد شما در مورد تمام ابزارهای CrUX استقبال می کنیم. برای به اشتراک گذاشتن نظرات و سؤالات خود، از طریق حساب Twitter @ChromeUXReport یا Google Group با ما تماس بگیرید.

پانل عملکرد Chrome DevTools

رویدادهای Layout Shift را در بخش Experience اشکالزدایی کنید

پانل Chrome DevTools Performance یک بخش تجربه جدید دارد که می‌تواند به شما کمک کند تغییرات طرح‌بندی غیرمنتظره را تشخیص دهید. این برای یافتن و رفع مشکلات بی ثباتی بصری در صفحه شما که به تغییر چیدمان تجمعی کمک می کند مفید است.

یک Layout Shift را برای مشاهده جزئیات آن در برگه Summary انتخاب کنید. برای تجسم جایی که خود شیفت رخ داده است، ماوس را روی فیلدهای Moved from و Moved to حرکت دهید.

اشکال‌زدایی آمادگی تعامل با Total Blocking Time در پاورقی

متریک کل زمان انسداد (TBT) را می توان در ابزارهای آزمایشگاهی اندازه گیری کرد و یک پروکسی عالی برای تاخیر ورودی اول است. TBT کل زمان بین First Contentful Paint (FCP) و Time to Interactive (TTI) را اندازه گیری می کند که در آن رشته اصلی به اندازه کافی برای جلوگیری از پاسخگویی ورودی مسدود شده است. بهینه سازی عملکردی که TBT را در آزمایشگاه بهبود می بخشد باید FID را در این زمینه بهبود بخشد.

اکنون وقتی عملکرد صفحه را اندازه‌گیری می‌کنید، TBT در پاورقی پانل عملکرد Chrome DevTools نشان داده می‌شود:

1. «Control+Shift+J» (یا «Command+Option+J» در Mac) را فشار دهید تا DevTools باز شود.
2. روی تب Performance کلیک کنید.
3. روی Record کلیک کنید.
4. به صورت دستی صفحه را بارگیری مجدد کنید.
5. صبر کنید تا صفحه بارگیری شود و سپس ضبط را متوقف کنید.

برای اطلاعات بیشتر، موارد جدید در DevTools (Chrome 84) را ببینید.

کنسول جستجو

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

این گزارش بر اساس سه معیار اصلی وب حیاتی است: LCP، FID، و CLS. اگر یک URL دارای حداقل مقدار داده گزارش برای این معیارها نباشد، از گزارش حذف می شود. گزارش جدید را امتحان کنید تا دیدی جامع از عملکرد برای منشأ خود داشته باشید.

هنگامی که نوع صفحه ای را شناسایی کردید که دارای مشکلات مرتبط با Core Web Vitals است، می توانید از PageSpeed ​​Insights برای اطلاع از پیشنهادهای بهینه سازی خاص برای صفحات نماینده استفاده کنید.

web.dev

https://pagespeed.web.dev/ به شما این امکان را می دهد که عملکرد صفحه خود را در طول زمان اندازه گیری کنید و فهرستی از راهنماها و کدهای اولویت بندی شده در مورد نحوه بهبود ارائه می دهد. اندازه گیری آن توسط PageSpeed ​​Insights ارائه می شود. ابزار اندازه گیری اکنون از معیارهای Core Web Vitals نیز پشتیبانی می کند، همانطور که در زیر نشان داده شده است:

افزونه Web Vitals

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

افزونه اکنون برای نصب از فروشگاه وب Chrome در دسترس است! امیدواریم برایتان مفید بوده باشد. ما از هر کمکی برای بهبود آن و همچنین بازخورد در مورد مخزن GitHub پروژه استقبال می کنیم.

هایلایت سریع

این یک بسته بندی است! در ادامه چه کاری می توانید انجام دهید:

• از Lighthouse در DevTools استفاده کنید تا تجربه کاربری خود را بهینه کنید و اطمینان حاصل کنید که خود را برای موفقیت با Core Web Vitals در این زمینه آماده کرده اید.
• از PageSpeed ​​Insights برای مقایسه عملکرد آزمایشگاهی و میدانی Core Web Vitals خود استفاده کنید.
• API گزارش تجربه کاربر جدید Chrome را امتحان کنید تا به راحتی به عملکرد مبدأ و URL شما در برابر Core Web Vitals در 28 روز گذشته دسترسی داشته باشید.
• از بخش Experience و پاورقی در پنل DevTools Performance برای فرو رفتن در عمق و اشکال زدایی در برابر Core Web Vitals خاص استفاده کنید.
• از گزارش Core Web Vitals کنسول جستجو برای خلاصه ای از نحوه عملکرد منشاء خود در این زمینه استفاده کنید.
• از افزونه Web Vitals برای ردیابی عملکرد یک صفحه در برابر Core Web Vitals در زمان واقعی استفاده کنید.

در ماه ژوئن در web.dev Live اطلاعات بیشتری در مورد ابزارهای Core Web Vitals خواهیم داشت. برای دریافت به روز رسانی رویداد ثبت نام کنید!

~ توسط الیزابت و ادی، سرایداران WebPerf