تحولات ابزار سرعت: نکات برجسته از Chrome Developer Summit 2019

معیارهای جدید عملکرد، به‌روزرسانی‌های PageSpeed ​​Insights و گزارش تجربه کاربر Chrome (CrUX) و موارد دیگر.

الیزابت سوینی
Elizabeth Sweeny

در اجلاس برنامه‌نویس کروم، من و پل آیریش به‌روزرسانی‌های Lighthouse— Lighthouse CI، فرمول امتیاز عملکرد جدید و موارد دیگر را اعلام کردیم. همراه با اخبار بزرگ Lighthouse، پیشرفت‌های ابزار عملکرد هیجان‌انگیزی از جمله معیارهای عملکرد جدید، به‌روزرسانی‌های PageSpeed ​​Insights و گزارش تجربه کاربر کروم (CrUX) و بینش‌هایی از تجزیه و تحلیل Web Almanac از اکوسیستم وب را ارائه کردیم.

معیارهای عملکرد جدید

اندازه‌گیری تفاوت‌های ظریف تجربه کاربر، کلید تعیین کمیت تأثیر آن بر روی خط نهایی شما و ردیابی پیشرفت‌ها و رگرسیون‌ها است. با گذشت زمان، معیارهای جدید برای به تصویر کشیدن این تفاوت‌ها و پر کردن شکاف‌های اندازه‌گیری تجربه کاربر تکامل یافته‌اند. جدیدترین مورد اضافه شده به داستان معیارها، دو معیار میدانی است - بزرگترین رنگ محتوایی (LCP) و تغییر چیدمان تجمعی (CLS) - که در گروه کاری عملکرد وب W3C و یک معیار آزمایشگاهی جدید - زمان انسداد کل (TBT) انکوبه می شوند.

بزرگترین رنگ محتوایی (LCP)

Largest Contentful Paint (LCP) زمانی را گزارش می‌کند که بزرگ‌ترین عنصر محتوا در نمای مشاهده می‌شود.

قبل از بزرگترین رنگ محتوایی، First Meaningful Paint (FMP) و Speed ​​Index (SI) برای ثبت تجربه بارگیری پس از رنگ‌بندی اولیه استفاده می‌شد، اما این معیارها پیچیده هستند و اغلب مشخص نمی‌کنند که محتوای اصلی صفحه چه زمانی بارگذاری شده است. تحقیقات نشان داده است که نگاه کردن به اینکه چه زمانی بزرگترین عنصر در صفحه بهتر رندر می شود نشان دهنده زمانی است که محتوای اصلی صفحه بارگذاری می شود.

متریک جدید Largest Contentful Paint به زودی در گزارش های Lighthouse در دسترس خواهد بود و در عین حال می توانید LCP را در جاوا اسکریپت اندازه گیری کنید .

زمان انسداد کل (TBT)

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

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

نموداری که یک کار 150 میلی ثانیه ای را نشان می دهد که 100 میلی ثانیه زمان مسدود شدن دارد.

مجموع زمان انسداد برای یک صفحه، مجموع زمان های مسدود کردن تمام کارهای طولانی است که بین FCP و TTI رخ داده است.

نموداری که نشان دهنده پنج کار با 60 میلی ثانیه زمان مسدود کردن کل از 270 میلی ثانیه زمان نخ اصلی است.

در حالی که Time to Interactive در شناسایی زمانی که رشته اصلی بعداً در بارگذاری آرام می‌شود، کار خوبی انجام می‌دهد، Total Blocking Time قصد دارد کمیت کند که رشته اصلی در طول بارگذاری چقدر تحت فشار است. به این ترتیب، TTI و TBT مکمل یکدیگر هستند و تعادل را ایجاد می کنند.

تغییر چیدمان تجمعی (CLS)

تغییر چیدمان تجمعی (CLS) ثبات بصری یک صفحه را اندازه گیری می کند و تعداد دفعاتی که کاربران تغییرات طرح بندی غیرمنتظره را تجربه می کنند را کمیت می کند. حرکت غیرمنتظره محتوا می‌تواند بسیار خسته‌کننده باشد و این معیار جدید به شما کمک می‌کند تا با اندازه‌گیری تعداد دفعاتی که برای کاربرانتان رخ می‌دهد، آن مشکل را برطرف کنید.

یک صفحه نمایش نشان می‌دهد که چگونه بی‌ثباتی چیدمان می‌تواند بر کاربران تأثیر منفی بگذارد.

راهنمای دقیق تغییر چیدمان تجمعی را بررسی کنید تا نحوه محاسبه و اندازه گیری آن را بیاموزید.

فرمول جدید امتیاز عملکرد Lighthouse به زودی تاکید بر FMP و FCI را از بین می‌برد و شامل سه معیار جدید LCP، TBT و CLS می‌شود، زیرا زمانی که صفحه قابل استفاده است، بهتر می‌توان آن را ثبت کرد.

در Lighthouse v6 First Contentful Paint، Speed ​​Index و Largest Contentful Paint معیارهای اصلی عملکرد بار هستند. Time To Interactive، اولین تاخیر ورودی، حداکثر تاخیر اولین ورودی بالقوه، و کل زمان مسدود کردن معیارهای اصلی تعامل هستند. و تغییر چیدمان تجمعی معیار اصلی پیش بینی پذیری است.

برای کسب اطلاعات بیشتر ، امتیاز عملکرد Lighthouse و مجموعه معیارهای جدید web.dev را بررسی کنید.

آستانه داده های میدانی (CrUX) در PageSpeed ​​Insights تنظیم شده است

در طول سال گذشته، ما عملکرد وب را از طریق داده‌های Chrome User Experience (CrUX) به صورت میدانی تجزیه و تحلیل می‌کنیم. با بینش‌های حاصل از آن داده‌ها، آستانه‌هایی را که برای برچسب‌گذاری یک وب‌سایت «کند»، «متوسط» یا «سریع» در عملکرد میدانی استفاده می‌کنیم، دوباره ارزیابی کردیم.

دو نمودار میله ای که توزیع سرعت آهسته، سریع و متوسط ​​را برای FCP و FID نشان می دهد.

برای به دست آوردن یک ارزیابی کلی برای یک سایت، PageSpeed ​​Insights (PSI) از صدک مشخصی از توزیع کل داده های میدانی به عنوان عدد طلایی برای آن سایت استفاده می کند. آستانه های قبلی استفاده شده صدک 90 برای First Contentful Paint و صدک 95 برای First Input Delay (FID) بود.

به عنوان مثال، اگر یک سایت دارای توزیع FCP 50٪ سریع، 30٪ متوسط، 20٪ کند باشد، FCP صدک 90 در بخش آهسته است، که باعث می شود امتیاز کلی سایت برای سایت کند باشد.

این تنظیم شده است تا توزیع کلی بهتری در بین وب سایت ها داشته باشد و تقسیم بندی جدید به شرح زیر است:

متریک درصد کلی سریع (ms) متوسط ​​(ms) آهسته (ms)
FCP صدک 75 1000 1000-3000 3000+
FID صدک 95 100 100-300 300+

به عنوان مثال، اکنون اگر یک سایت دارای توزیع FCP 50٪ سریع، 30٪ متوسط، 20٪ کند باشد، FCP صدک 75 در بخش متوسط ​​است و امتیاز کلی فیلد برای سایت را متوسط ​​​​می کند.

تغییر مسیرهای URL متعارف در PageSpeed ​​Insights

تیم PageSpeed ​​Insights برای اینکه بتوانید تجربه کاربر را تا حد امکان دقیق اندازه گیری کنید، یک اعلان تحلیل مجدد به PSI اضافه کرده است. برای سایت‌هایی که به یک URL جدید هدایت می‌شوند، از شما خواسته می‌شود که گزارش را در URL مقصد مجدداً اجرا کنید تا تصویر کامل‌تری از عملکرد واقعی خود داشته باشید.

رابط کاربری PSI نشان دهنده تغییر مسیر URL و دکمه "Reanalyze" است

CrUX در گزارش جدید سرعت کنسول جستجو

کنسول جستجو گزارش سرعت جدید خود را یک هفته قبل از اجلاس کروم Dev Summit منتشر کرد. از داده‌های گزارش تجربه کاربر Chrome برای کمک به مالکان سایت برای کشف مشکلات احتمالی تجربه کاربر استفاده می‌کند. گزارش سرعت به طور خودکار گروه هایی از URL های مشابه را در سطل های "سریع"، "متوسط" و "آهسته" اختصاص می دهد و به اولویت بندی بهبود عملکرد برای مسائل خاص کمک می کند.

گزارش سرعت کنسول جستجو

وب سالنامه

Dion Almaer در حال ارائه Web Almanac در CDS 2019.

در سخنرانی افتتاحیه، راه‌اندازی Web Almanac را اعلام کردیم، یک پروژه سالانه که آمار و روندهای مربوط به وضعیت وب را با تخصص جامعه وب مطابقت می‌دهد. 85 مشارکت‌کننده، متشکل از توسعه‌دهندگان کروم و جامعه وب، داوطلب شده‌اند تا روی این پروژه کار کنند، پروژه‌ای که 20 جنبه اصلی را در مورد آدرس‌دهی وب به نحوه ساخت، ارائه و تجربه سایت‌ها تجزیه و تحلیل می‌کند. برای کسب اطلاعات بیشتر در مورد وضعیت عملکرد ، جاوا اسکریپت و کد شخص ثالث در وب، کاوش در Web Almanac را شروع کنید.

بیشتر بدانید

برای جزئیات بیشتر درباره به‌روزرسانی‌های ابزار عملکرد از Chrome Developer Summit، بحث تکامل ابزارهای سرعت را تماشا کنید: