ابزارهای اندازه گیری core web vitals

مقدمه‌ای بر ابزارهای اندازه گیری

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

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

ابزارهای آزمایشگاهی بینشی در مورد اینکه کاربر احتمالی وب سایت شما را چگونه تجربه خواهد کرد به شما ارائه می‌دهد.در حالی که ابزارهای میدانی بینشی راجع به تجربه کاربران واقعی از وب سایت شما ارائه می دهند. این نوع اندازه گیری اغلب نظارت واقعی کاربر (RUM) نامیده می شود. هر آزمایشگاه یا ابزار میدانی ارزش متمایزی را برای بهینه سازی تجربه کاربری شما ارائه می دهد.

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

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

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

Lighthouse

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

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

سومین معیار جدید Total Blocking Time (TBT) است که به خوبی با متریک (FID)First Input Delay ، یکی دیگر از معیارهای Core Web Vitals ارتباط دارد. پیروی از توصیه های ارائه شده در گزارش Lighthouse و بهینه سازی، سایت شما را برای ارائه بهترین تجربه ممکن به کاربران آماده می کند.

PageSpeed Insights

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

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

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

ابزار CrUX

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

تنها راه برای دیدن نحوه عملکرد سایت خود اندازه گیری سرعت و عملکرد سایت حین استفاده کاربران است، زیرا این کاربران هستند که در حال بارگیری و تعامل با سایت هستند. این نوع اندازه گیری معمولاً تحت عنوان نظارت واقعی کاربر یا به اختصار RUM نامیده می‌شود. حتی اگر RUM را در سایت خود پیاده سازی نکرده اید ، CrUX می‌تواند راهی سریع و آسان برای ارزیابی web vitals به شما ارائه دهد.

CrUX API یک روش ساده و سریع برای اندازه گیری معیارهای زیر طی فرایند توسعه وب سایت است .

• Largest Contentful Paint
• Cumulative Layout Shift
• First Input Delay
• First Contentful Paint

توسعه دهندگان می‌توانند با توجه به پارامترهای مختلف url ها را بررسی و نتایج را تقسیم بندی کنند. API روزانه آپدیت می‌شود و داده های 28 روز گذشته را به صورت خلاصه نمایش می‌دهد (برخلاف مجموعه داده BigQuery ، که بصورت ماهانه جمع می‌شود).

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

داشبورد جدید CrUX به شما امکان می‌دهد به راحتی عملکرد یک صفحه را در طول زمان ردیابی کنید و از آن برای نظارت بر توزیع همه معیارهای Core Web Vitals استفاده کنید.

پانل Performance در مرورگر کروم

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

برای مشاهده جزئیات این بخش در تب summary قسمت Layout Shift را انتخاب کنید، این بخش اطلاعات کاملی در مورد حرکت المانها و جزییات این تغییرات فراهم می‌کند.

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

هنگام اندازه گیری سرعت و عملکرد صفحه ، TBT در پاورقی پانل performance نشان داده می‌شود. در ادامه مراحل نمایش این اطلاعات آورده شده است.

• برای باز کردن DevTools کلیدهای Control+Shift+J را همزمان فشار دهید.
• بر روی تب Performance کلیک کنید.
• بر روی Record کلیک کنید.
• صفحه را به صورت دستی reload کنید.
• بعد از لود کامل صفحه record را متوقف کنید.

Search Console

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

این گزارش بر اساس سه معیار Core Web Vitals یعنی LCP ، FID و CLS است. اگرurl موردنظر حداقل میزان گزارش دهی برای این معیارها را نداشته باشد ، از گزارش حذف می‌شود. گزارش جدید را امتحان کنید تا دید کلی نسبت به عملکرد خود داشته باشید.

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

ابزارweb.dev

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

افزونه Web Vitals

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

الان شروع کنید

• از Lighthouse در DevTools برای بهینه سازی تجربه کاربری خود و اطمینان از موفقیت خود در زمینه Core Web Vitals استفاده کنید.
• از PageSpeed Insights برای مقایسه عملکرد سایت در زمینه Core Web Vitals خود استفاده کنید.
• Chrome User Experience Report API را برای دسترسی به اطلاعات معیارهای سایت خود بررسی کنید.
• از بخش Experience در پانل DevTools Performance برای خطا یابی در وب ویتال های صفحات استفاده کنید.
• از گزارش وب ویتالز Search Console برای بررسی خطاها استفاده کنید.
• از افزونه Web Vitals کروم برای پیگیری عملکرد صفحه در زمان حال استفاده کنید.