موارد جدید در PageSpeed ​​Insights

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

Addy Osmani

Elizabeth Sweeny

Leena Sohoni

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

امروز، ما هیجان زده هستیم که نسخه به روز شده PSI را معرفی کنیم! در حالی که این یک عنصر حیاتی در مجموعه ابزارهای سرعت ما است، پایه کد PSI ده ساله بود، حاوی کدهای قدیمی زیادی بود و قرار بود دوباره طراحی شود. ما از این به عنوان فرصتی برای رسیدگی به مسائل مربوط به رابط در PSI استفاده کردیم که گاهی اوقات پیمایش گزارش را برای کاربران دشوار کرده است. اهداف اولیه ما این بود:

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

این پست به معرفی ویژگی های جدید PSI می پردازد که اواخر امسال منتشر می شود.

چه خبر؟

هدف از طراحی مجدد PSI UI بهبود ارائه داده های گزارش و افزودن وضوح و جزئیات به داده های موجود در گزارش است. هدف از رابط کاربری جدید این است که بصری تر باشد و به توسعه دهندگان کمک می کند تا به سرعت بینش های عملکرد آزمایشگاهی و میدانی صفحات خود را کشف کنند. تغییرات اساسی در UI عبارتند از:

جداسازی واضح داده های میدانی و آزمایشگاهی

ما رابط کاربری را به گونه‌ای تغییر داده‌ایم که داده‌های میدانی را از داده‌های آزمایشگاهی مجزا کند. برچسب‌های «داده‌های میدانی» و «داده‌های آزمایشگاهی» با متنی جایگزین شده‌اند که نشان می‌دهد داده‌ها به چه معنا هستند و چگونه می‌توانند کمک کنند. همچنین بخش Field data را به بالا آورده ایم. امتیاز عملکرد مبتنی بر آزمایشگاه سنتی، که در حال حاضر در بالا نشان داده شده است، به بخش داده های آزمایشگاهی منتقل شده است تا از ابهام در مورد منشا امتیاز جلوگیری شود.

توجه: اگر تفاوت بین داده‌های آزمایشگاهی و میدانی را نمی‌دانید، توضیح دهنده را در web.dev بررسی کنید.

بخش برای داده های میدانی

بخش داده های آزمایشگاهی

ارزیابی Core Web Vitals

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

توجه داشته باشید که هیچ تغییری در روند ارزیابی Core Web Vitals وجود ندارد. معیارهای Core Web Vitals FID، LCP، و CLS ممکن است در سطح صفحه یا مبدا جمع شوند. برای تجمیع‌هایی که داده‌های کافی در هر سه معیار دارند، اگر صدک‌های ۷۵ هر سه معیار خوب باشند، تجمیع ارزیابی Core Web Vitals را پشت سر می‌گذارد. در غیر این صورت، تجمیع از ارزیابی عبور نمی کند. اگر تجمیع داده‌های FID کافی نداشته باشد، اگر هر دو صدک 75 LCP و CLS خوب باشند، ارزیابی را پشت سر می‌گذارد. اگر LCP یا CLS داده‌های ناکافی داشته باشند، نمی‌توان صفحه یا تجمع در سطح مبدا را ارزیابی کرد.

برچسب هایی برای عملکرد موبایل و دسکتاپ

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

برچسب های موبایل و دسکتاپ PSI قبل

برچسب های موبایل و دسکتاپ PSI بعد از

خلاصه مبدا

Origin Summary، که امتیاز CrUX را برای همه صفحات از مبدا فراهم می کند، در حال حاضر با کلیک روی یک چک باکس ظاهر می شود. ما این بخش گزارش را به یک تب جدید، "Origin" در زیر بخش Field Data منتقل کرده ایم.

اطلاعات مفید اضافی

این گزارش اکنون شامل یک بخش اطلاعات جدید در پایین هر فیلد و کارت آزمایشگاه است که جزئیات زیر را در مورد داده های نمونه به اشتراک می گذارد:

• دوره جمع آوری داده ها
• مدت زمان بازدید
• دستگاه ها
• اتصالات شبکه
• اندازهی نمونه
• نسخه های کروم

این اطلاعات باید تمایز بین داده‌های آزمایشگاهی و میدانی را افزایش دهد و به کاربرانی کمک کند که قبلاً از تفاوت دو منبع داده (آزمایشگاه و میدان) مطمئن نبوده‌اند.

نمایش را گسترش دهید

ما یک ویژگی جدید "Expand View" داریم که یک تابع تمرینی را به بخش داده های میدانی اضافه می کند و به شما امکان می دهد جزئیات دانه بندی را برای معیارهای Core Web Vitals مشاهده کنید.

تصویر صفحه

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

برای اسناد به‌روز محصول، از https://developers.google.com/speed/docs/insights/ دیدن کنید.

به روز رسانی به web.dev/measure

برای کاهش ناسازگاری بین ابزارهای مختلف در جعبه ابزار عملکرد خود، web.dev/measure را نیز به‌روزرسانی می‌کنیم تا مستقیماً توسط PageSpeed ​​Insights API پشتیبانی شود.

پیش از این، توسعه دهندگان گزارش ها را از طریق ابزار PSI و /measure و مشاهده اعداد مختلف Lighthouse اجرا می کردند. یکی از دلایل اصلی تفاوت‌ها این بود که /measure همه آزمایش‌ها را از ایالات متحده سرچشمه می‌گرفت (به دلیل اینکه قبلاً یک پشتیبان ابری داشت که مبتنی بر ایالات متحده بود).

با /measure که مستقیماً همان API را با PSI UI فراخوانی می‌کند، توسعه‌دهندگان در هنگام استفاده از PSI و /measure تجربه سازگارتری خواهند داشت. ما همچنین بر اساس نحوه استفاده کاربران از ابزار، چند ترفند برای اندازه‌گیری / ایجاد کرده‌ایم. این به این معنی است که تجربه ورود به سیستم برای /measure از بین خواهد رفت، اما پر استفاده ترین عملکرد - دیدن چندین دسته - همچنان برای استفاده در دسترس خواهد بود.

web.dev/measure قبل

web.dev/measure after

PSI امروز

با برداشتن یک گام به عقب، بیایید به آنچه گزارش فعلی PageSpeed ​​Insights ارائه می‌دهد نگاه کنیم. گزارش PSI شامل داده‌های عملکرد برای دستگاه‌های موبایل و دسک‌تاپ در برگه‌های جداگانه است و نحوه بهبود یک صفحه را نشان می‌دهد. اجزای اصلی گزارش در هر مورد مشابه است و شامل موارد زیر است:

امتیاز عملکرد: امتیاز عملکرد در بالای گزارش PSI ظاهر می شود و عملکرد کلی صفحه را خلاصه می کند. این امتیاز با اجرای Lighthouse برای جمع آوری و تجزیه و تحلیل داده های آزمایشگاهی در مورد صفحه تعیین می شود. نمره 90 یا بالاتر خوب در نظر گرفته می شود، 50-90 نیاز به بهبود دارد و زیر 50 ضعیف است.

داده‌های میدانی: داده‌های میدانی، که از مجموعه داده گزارش CrUX تهیه شده‌اند، بینش‌هایی را درباره تجربه کاربر در دنیای واقعی ارائه می‌دهند. داده‌ها شامل معیارهایی مانند First Contentful Paint (FCP) و اندازه‌گیری Core Web Vitals ( اولین تاخیر ورودی (FID)، بزرگترین رنگ محتوایی (LCP) و تغییر چیدمان تجمعی (CLS) هستند. همراه با مقادیر متریک، می‌توانید توزیع صفحاتی را ببینید که در آنها مقدار یک معیار خاص خوب، نیاز به بهبود یا ضعیف بود که به ترتیب با نوارهای سبز، کهربایی و قرمز نشان داده شده است. توزیع و امتیازات بر اساس بارگذاری صفحه برای کاربران در مجموعه داده CrUX نشان داده شده است. امتیازها برای 28 روز گذشته محاسبه می‌شوند و برای صفحات جدیدی که ممکن است داده‌های کاربر واقعی کافی در دسترس نباشد، در دسترس نیستند.

خلاصه مبدأ: کاربران می‌توانند برای مشاهده امتیاز جمع‌آوری معیارها برای همه صفحاتی که در 28 روز گذشته از یک مبدأ ارائه شده‌اند، روی کادر تأیید نمایش خلاصه مبدا کلیک کنند.

داده‌های آزمایشگاهی: امتیاز عملکرد آزمایشگاه، که با استفاده از Lighthouse محاسبه می‌شود، به اشکال‌زدایی مشکلات عملکرد کمک می‌کند، زیرا در یک محیط کنترل‌شده جمع‌آوری می‌شود. این گزارش عملکرد را با استفاده از معیارهایی مانند First Contentful Paint , Largest Contentful Paint , Speed ​​Index , Cumulative Layout Shift , Time to Interactive و Total Blocking Time نشان می دهد . هر معیار نمره گذاری می شود و با نمادی که نشان دهنده خوب، نیاز به بهبود یا ضعیف است برچسب گذاری می شود. این بخش نشانه خوبی از گلوگاه های عملکرد پیش از انتشار ارائه می دهد و می تواند به تشخیص مشکلات کمک کند، اما ممکن است مسائل دنیای واقعی را نشان ندهد.

ممیزی: این بخش تمام ممیزی‌های اجرا شده توسط Lighthouse را فهرست می‌کند و ممیزی‌های انجام شده را همراه با فرصت‌های بهبود و اطلاعات تشخیصی اضافی فهرست می‌کند.

چالش‌های طراحی فعلی PSI

همانطور که در تصویر بالا مشاهده می‌شود، نقاط داده مختلف از داده‌های آزمایشگاهی و میدانی به وضوح جدا نشده‌اند و توسعه‌دهندگانی که تازه وارد PSI شده‌اند ممکن است به راحتی متن داده‌ها و کارهای بعدی را درک نکنند. این سردرگمی به بسیاری از پست‌های وبلاگ «چگونه» در مورد رمزگشایی گزارش PSI منجر شده است.

با طراحی مجدد، امیدواریم تفسیر گزارش را برای توسعه دهندگان آسانتر کنیم تا آنها به سرعت از تولید گزارش PSI به عمل بر اساس بینش های موجود در آن حرکت کنند.

بیشتر بدانید

برای جزئیات بیشتر در مورد به‌روزرسانی‌های ابزار عملکرد، سخنرانی اصلی Chrome Dev Summit 2021 را تماشا کنید. ما شما را در جریان تاریخ انتشار PSI و تغییرات web.dev/measure قرار خواهیم داد.

با تشکر از Milica Mihajlija، Philip Walton، Brendan Kenny و Ewa Gasperowicz برای بازخوردشان در مورد این مقاله