1. قبل از شروع
در این لبه کد، یاد می گیرید که چگونه Core Web Vitals یک صفحه وب را با API PageSpeed Insights و CrUX API اندازه گیری کنید.
هر دو API داده‌های Core Web Vitals یکسان را برمی‌گردانند، اما هر API مزایای متمایزی را ارائه می‌دهد. علاوه بر داده‌های CrUX از این زمینه، API PageSpeed Insights همچنین داده‌هایی را از Lighthouse ارائه می‌کند که ابزار خودکار و منبع باز Google است که صفحات وب را بررسی می‌کند و نحوه بهبود آنها را توصیه می‌کند. CrUX API داده های Lighthouse را ارائه نمی دهد، بنابراین سریعتر اجرا می شود.
گوگل توصیه می کند که Core Web Vitals را در دستگاه های تلفن همراه و دسکتاپ اندازه گیری کنید. Core Web Vitals شامل این سه معیار است که برای همه صفحات وب اعمال می شود و بینش مهمی از تجربه کاربر به شما ارائه می دهد:
- بزرگترین رنگ محتوایی (LCP). عملکرد بارگذاری را اندازه گیری می کند و باید در عرض 2.5 ثانیه پس از شروع بارگیری صفحه رخ دهد.
- تاخیر ورودی اول (FID). تعامل را اندازه گیری می کند و باید در عرض 100 میلی ثانیه رخ دهد.
- تغییر چیدمان تجمعی (CLS). ثبات بصری را اندازه گیری می کند و باید در محدوده 0.1 باشد.
پیش نیازها
- مقاله Web Vitals
- دانش اولیه خط فرمان
- تعریف مقاله آستانه معیارهای Core Web Vitals
چیزی که یاد خواهید گرفت
- با استفاده از API PageSpeed Insights، Core Web Vitals یک صفحه وب را اندازه گیری کنید.
- Core Web Vitals یک صفحه وب را با CrUX API اندازه گیری کنید.
آنچه شما نیاز دارید
- یک حساب Google
- دسترسی به خط فرمان
- یک ویرایشگر متن به انتخاب شما
- مرورگر وب به انتخاب شما
- نشانی اینترنتی دلخواه شما (این آزمایشگاه کد از https://developers.google.com استفاده می کند.)
2. Core Web Vitals را با PageSpeed Insights API اندازه گیری کنید
- اگر به داده‌های عملکرد نسخه دسکتاپ یک URL نیاز دارید، داده‌ها را از PageSpeed Insights API درخواست کنید و آن را در یک فایل
response.txtذخیره کنید:
curl -o response.txt "https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=YOUR_URL&strategy=desktop"
جای جای YOUR_URL را با URL خود جایگزین کنید.
در انتهای رشته API، توجه کنید که پارامتر پرس و جو strategy روی یک مقدار desktop تنظیم شده است، که درخواست داده های دسکتاپ را مشخص می کند.
- اگر به داده‌های عملکرد نسخه تلفن همراه یک URL نیاز دارید، داده‌ها را از API PageSpeed Insights درخواست کنید و آن را در یک فایل
response.txtذخیره کنید:
curl -o response.txt "https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=YOUR_URL&strategy=mobile"
جای جای YOUR_URL را با URL خود جایگزین کنید.
در انتهای رشته API، توجه کنید که پارامتر پرس و جو strategy روی یک مقدار mobile تنظیم شده است، که درخواست داده تلفن همراه را مشخص می کند.
- در ویرایشگر متن خود، فایل
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 Vitals بر اساس 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 یک صفحه وب را با PageSpeed Insights API و CrUX API اندازه‌گیری کردید.