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