درباره این codelab
1. قبل از اینکه شروع کنی
در این لبه کد، یاد می گیرید که چگونه Core Web Vitals یک صفحه وب را با API PageSpeed Insights (PSI) و Chrome UX Report (CrUX) API اندازه گیری کنید.
هر دو API داده‌های Core Web Vitals یکسان را برمی‌گردانند، اما هر API مزایای متمایزی را ارائه می‌کند. علاوه بر داده‌های CrUX از میدان، PSI API همچنین داده‌هایی را از Lighthouse ارائه می‌کند که ابزار خودکار و منبع باز Google است که صفحات وب را ممیزی می‌کند و نحوه بهبود آنها را توصیه می‌کند. CrUX API داده های Lighthouse را ارائه نمی دهد، بنابراین سریعتر اجرا می شود.
Google توصیه می کند که Core Web Vitals را در دستگاه های تلفن همراه و دسکتاپ اندازه گیری کنید. Core Web Vitals شامل این سه معیار است که برای همه صفحات وب اعمال می شود و بینش مهمی را در مورد تجربه کاربر به شما ارائه می دهد:
- بزرگترین رنگ محتوایی (LCP). عملکرد بارگذاری را اندازه گیری می کند و باید در عرض 2.5 ثانیه پس از شروع بارگیری صفحه رخ دهد.
- تاخیر ورودی اول (FID). تعامل را اندازه گیری می کند و باید در عرض 100 میلی ثانیه رخ دهد.
- تغییر چیدمان تجمعی (CLS). ثبات بصری را اندازه گیری می کند و باید در محدوده 0.1 باشد.
پیش نیازها
- مقاله Web Vitals .
- تعریف مقاله آستانه معیارهای Core Web Vitals .
- دانش اولیه در مورد نحوه استفاده از خط فرمان.
کاری که خواهی کرد
- Core Web Vitals یک صفحه وب را با PSI API اندازه گیری کنید.
- Core Web Vitals یک صفحه وب را با CrUX API اندازه گیری کنید.
آنچه شما نیاز دارید
- یک حساب Google
- دسترسی به خط فرمان
- یک ویرایشگر متن به انتخاب شما
- مرورگر وب به انتخاب شما
- نشانی اینترنتی دلخواه شما (این آزمایشگاه کد از https://developers.google.com استفاده می کند.)
2. Core Web Vitals را با PSI API اندازه گیری کنید
- اگر به داده‌های عملکرد نسخه دسکتاپ یک URL نیاز دارید، این دستور
curlرا اجرا کنید تا داده‌ها را از PageSpeed Insights API درخواست کنید و آن را در یک فایلresponse.txtذخیره کنید:
curl -o response.txt "https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=YOUR_URL&strategy=desktop"
جای جای YOUR_URL را با URL خود جایگزین کنید.
- اگر به داده‌های عملکرد نسخه تلفن همراه URL نیاز دارید، پارامتر پرس و جو
strategyرا روی یک مقدارmobileدر انتهای رشته API در دستور ارائه شده در مرحله قبل تنظیم کنید:
curl -o response.txt "https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=YOUR_URL&strategy=mobile"
جای جای YOUR_URL را با URL خود جایگزین کنید.
- در ویرایشگر متن خود، فایل
response.txtرا باز کنید و سپس ویژگیloadingExperienceرا پیدا کنید:
answer.txt
"loadingExperience": {
"id": "https://developers.google.com/",
"metrics": {
"LARGEST_CONTENTFUL_PAINT_MS": {
"percentile": 1714,
"distributions": [
{
"min": 0,
"max": 1000,
"proportion": 0.49701860391159164
},
{
"min": 1000,
"max": 3000,
"proportion": 0.40071951025600261
},
{
"min": 3000,
"proportion": 0.10226188583240581
}
],
"category": "AVERAGE"
},
},
ویژگی loadingExperience این اطلاعات را برای هر یک از Core Web Vital بر اساس URL و نوع دستگاه مشخص شده در درخواست API گزارش می کند:
- خاصیت
percentileصدک 75 را برای هر متریک نشان می دهد. - ویژگی
distributionsها درصد بازدیدهای صفحه ای را نشان می دهد که برای هر معیار تجربه خوب ، نیاز به بهبود یا ضعیفی داشته اند. - ویژگی
categoryعملکرد هر معیار را به عنوان کند، متوسط یا سریع طبقه بندی می کند.
اگر محتوای ویژگی loadingExperience خالی باشد، URL داده عملکرد کافی در دسترس ندارد. این مشکل معمولاً هنگام آزمایش صفحات وب کم ترافیک ایجاد می شود.
- ویژگی
originLoadingExperienceرا پیدا کنید:
answer.txt
"originLoadingExperience": {
"id": "https://developers.google.com",
"metrics": {
"LARGEST_CONTENTFUL_PAINT_MS": {
"percentile": 1649,
"distributions": [
{
"min": 0,
"max": 1000,
"proportion": 0.488838781075378
},
{
"min": 1000,
"max": 3000,
"proportion": 0.42709617576692827
},
{
"min": 3000,
"proportion": 0.084065043157693739
}
],
"category": "AVERAGE"
},
},
ویژگی originLoadingExperience تجربیات انباشته شده را برای کل مبدا گزارش می دهد، نه فقط URL. اطلاعات یکسانی را برای هر یک از Core Web Vitals ارائه می کند که در مرحله قبل توضیح داده شد.
3. Core Web Vitals را با CrUX API اندازه گیری کنید
یک کلید API دریافت کنید
- در Google Cloud Console ،
Chrome UXرا جستجو کنید و سپس Chrome UX Report API را در منوی کشویی انتخاب کنید. - در صفحه Chrome UX Report API ، روی Enable کلیک کنید و سپس منتظر بمانید تا دکمه Enable به یک دکمه Manage تغییر کند و Manage را انتخاب کنید.
- در منوی پیمایش، روی Credentials کلیک کنید و سپس Create Credentials > API key را انتخاب کنید و کلید API را کپی کنید.
درخواست دادن
- از خط فرمان خود، داده های عملکرد URL خود را از CrUX API درخواست کنید و آن را در یک فایل
response.txtذخیره کنید:
curl -o response.txt 'https://chromeuxreport.googleapis.com/v1/records:queryRecord?key=YOUR_API_KEY' 'Content-Type: application/json' --data '{"url":"YOUR_URL"}'
جای جای YOUR_API_KEY را با کلید API خود جایگزین کنید و سپس جای جای YOUR_URL را با URL خود جایگزین کنید.
- در ویرایشگر متن خود، فایل
response.txtرا باز کنید:
answer.txt
{
"record": {
"key": {
"url": "https://developers.google.com/"
},
"metrics": {
"cumulative_layout_shift": {
"histogram": [
{
"start": "0.00",
"end": "0.10",
"density": 0.47784335300590036
},
{
"start": "0.10",
"end": "0.25",
"density": 0.32379713914174157
},
{
"start": "0.25",
"density": 0.19835950785235579
}
],
"percentiles": {
"p75": "0.23"
}
},
}
},
}
پاسخ CrUX API این اطلاعات را برای هر یک از Core Web Vitals ارائه می دهد:
- ویژگی
histogramدرصد کاربرانی را نشان می دهد که برای یک معیار معین تجربه آهسته، متوسط یا سریع داشته اند. - ویژگی
percentilesها، مشاهده صدک 75 را برای یک متریک معین نشان می دهد.
اگر پیام خطایی مشاهده کردید که می‌گوید داده‌ها پیدا نشدند، داده‌های عملکرد کافی برای URL داده‌شده وجود ندارد. این مشکل معمولاً هنگام آزمایش صفحات وب کم ترافیک ایجاد می شود.
4. تبریک می گویم
تبریک می گویم! شما Core Web Vitals یک صفحه وب را با PSI API و CrUX API اندازه‌گیری کردید.