1. قبل البدء
في هذا الدرس التطبيقي، ستتعرّف على كيفية قياس مؤشرات Core Web Vitals لصفحة ويب باستخدام واجهة برمجة التطبيقات PageSpeed Insights وواجهة برمجة التطبيقات CrUX.
تعرض كلتا واجهتَي برمجة التطبيقات بيانات متطابقة حول "مؤشرات أداء الويب الأساسية"، ولكن لكل منهما مزايا مختلفة. بالإضافة إلى بيانات CrUX من الاستخدام الفعلي، يوفّر PageSpeed Insights API أيضًا بيانات من Lighthouse، وهي أداة مبرمَجة ومفتوحة المصدر من Google تدقّق صفحات الويب وتقدّم اقتراحات حول كيفية تحسينها. لا توفّر واجهة برمجة التطبيقات CrUX API بيانات Lighthouse، لذا يتم تنفيذها بشكل أسرع.
تنصح Google بقياس مؤشرات Core Web Vitals على الأجهزة الجوّالة وأجهزة الكمبيوتر المكتبي. تشمل "مؤشرات أداء الويب الأساسية" المقاييس الثلاثة التالية التي تنطبق على جميع صفحات الويب وتوفّر لك إحصاءات مهمة حول تجربة المستخدم:
- سرعة عرض أكبر محتوى مرئي (LCP): يقيس هذا المقياس أداء التحميل ويجب أن يحدث خلال 2.5 ثانية من بدء تحميل الصفحة.
- مهلة الاستجابة لأوّل إدخال (FID): يقيس هذا المقياس التفاعلية ويجب أن يحدث في غضون 100 ملي ثانية.
- متغيّرات التصميم التراكمية (CLS): يقيس هذا المقياس الثبات البصري ويجب أن تكون قيمته أقل من 0.1.
المتطلبات الأساسية
- مقالة Web Vitals
- معرفة أساسية بسطر الأوامر
- مقالة "تحديد حدود مقاييس Core Web Vitals"
ما ستتعرّف عليه
- قياس مؤشرات Core Web Vitals لصفحة ويب باستخدام PageSpeed Insights API
- قياس مؤشرات Core Web Vitals لصفحة ويب باستخدام CrUX API
المتطلبات
- حساب على Google
- الوصول إلى سطر الأوامر
- محرّر نصوص من اختيارك
- متصفّح ويب من اختيارك
- عنوان URL من اختيارك (يستخدم برنامج التدريب العملي هذا 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.
في نهاية سلسلة واجهة برمجة التطبيقات، لاحظ أنّ مَعلمة طلب البحث strategy مضبوطة على القيمة desktop، ما يحدّد طلب بيانات أجهزة الكمبيوتر.
- إذا كنت بحاجة إلى بيانات الأداء الخاصة بالإصدار المتوافق مع الأجهزة الجوّالة من عنوان URL، اطلب البيانات من PageSpeed Insights API واحفظها في ملف
response.txt:
curl -o response.txt "https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=YOUR_URL&strategy=mobile"
استبدِل العنصر النائب YOUR_URL بعنوان URL.
في نهاية سلسلة واجهة برمجة التطبيقات، لاحظ أنّ مَعلمة طلب البحث strategy مضبوطة على القيمة mobile، ما يحدّد طلب البيانات المتعلّقة بالأجهزة الجوّالة.
- في محرِّر النصوص، افتح الملف
response.txtثم ابحث عن السمةloadingExperience:
response.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 ونوع الجهاز المحدّدَين في طلب واجهة برمجة التطبيقات:
- تشير السمة
percentileإلى الشريحة المئوية الخامسة والسبعين لكل مقياس. - تشير السمة
distributionsإلى النسبة المئوية لمشاهدات الصفحات التي قدّمت تجربة جيّدة أو بحاجة إلى تحسين أو سيئة لكل مقياس. - تصنّف السمة
categoryأداء كل مقياس على أنّه بطيء أو متوسّط أو سريع.
إذا كانت محتويات السمة loadingExperience فارغة، يعني ذلك أنّ عنوان URL لا يتضمّن بيانات أداء كافية. تحدث هذه المشكلة عادةً عند اختبار صفحات ويب ذات عدد زيارات منخفض.
- ابحث عن الموقع
originLoadingExperience:
response.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- قياس "مؤشرات أداء الويب الأساسية" باستخدام CrUX API
الحصول على مفتاح واجهة برمجة التطبيقات
- في Google Cloud Console، ابحث عن
Chrome UXثم اختَر Chrome UX Report API من القائمة المنسدلة. - في صفحة Chrome UX Report 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 بمفتاح واجهة برمجة التطبيقات، ثم استبدِل العنصر النائب YOUR_URL بعنوان URL.
- في محرِّر النصوص، افتح الملف
response.txt:
response.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 هذه المعلومات لكل مؤشر من "مؤشرات أداء الويب الأساسية":
- تشير السمة
histogramإلى النسبة المئوية للمستخدمين الذين حصلوا على تجربة بطيئة أو متوسطة أو سريعة لمقياس معيّن. - تشير السمة
percentilesإلى الملاحظة المتعلقة بالشريحة المئوية الخامسة والسبعين لمقياس معيّن.
إذا ظهرت لك رسالة خطأ تفيد بأنّه لم يتم العثور على البيانات، يعني ذلك أنّه لا تتوفّر بيانات أداء كافية لعنوان URL المحدّد. تحدث هذه المشكلة عادةً عند اختبار صفحات ويب ذات عدد زيارات منخفض.
4. تهانينا
تهانينا! لقد قيّمت مؤشرات Core Web Vitals لصفحة ويب باستخدام واجهة برمجة التطبيقات PageSpeed Insights API وCrUX API.