أدوات لقياس "مؤشرات أداء الويب الأساسية"

بإمكان أدوات المطوّرين المفضّلة لديك الآن قياس "مؤشرات أداء الويب الأساسية".

توفّر مبادرة مؤشرات أداء الويب التي تم الإعلان عنها مؤخرًا إرشادات موحّدة حول إشارات الجودة الضرورية لجميع المواقع الإلكترونية لتقديم تجربة رائعة للمستخدمين على الويب. يسرّنا الإعلان عن أنّ جميع أدوات Google الرائجة للمطوّرين على الويب أصبحت تتيح الآن قياس "مؤشرات أداء الويب الأساسية"، ما يساعدك في تشخيص المشاكل المتعلقة بتجربة المستخدم وحلّها بسهولة. ويشمل ذلك Lighthouse وإحصاءات PageSpeed وأدوات مطوّري البرامج في Chrome وSearch Console وأداة قياس web.dev وإضافة Web Vitals من Chrome وواجهة برمجة تطبيقات (!) Chrome UX Report الجديدة.

بما أنّ "بحث Google" أصبح يتضمّن الآن "مؤشرات أداء الويب الأساسية" كأساس لتقييم تجربة الصفحة، من المهم أن تكون هذه المقاييس متاحة وقابلة للتنفيذ قدر الإمكان.

لبدء عملية تحسين تجربة المستخدم باستخدام "مؤشرات أداء الويب الأساسية"، يمكنك تجربة سير العمل التالي:

• استخدِم تقرير "مؤشرات أداء الويب الأساسية" الجديد في Search Console لتحديد مجموعات الصفحات التي تستدعي الانتباه (استنادًا إلى بيانات الحقول).
• بعد تحديد الصفحات التي تحتاج إلى تحسين، استخدِم "إحصاءات PageSpeed" (المستندة إلى Lighthouse و"تقرير تجربة المستخدم على Chrome") لتشخيص مشاكل الميزات الاختبارية والحقول على الصفحة. تتوفّر "إحصاءات PageSpeed " (PSI) من خلال Search Console أو يمكنك إدخال عنوان URL في أداة PSI مباشرةً.
• هل أنت مستعد لتحسين موقعك محليًا في التمرين المعملي؟ استخدِم Lighthouse و"أدوات مطوري البرامج في Chrome" لقياس "مؤشرات أداء الويب الأساسية" وللحصول على إرشادات قابلة للتنفيذ حول المشاكل التي يجب معالجتها تحديدًا. تتيح لك إضافة Web Vitals من Chrome الاطّلاع على المقاييس في الوقت الفعلي على أجهزة الكمبيوتر المكتبي.
• هل تحتاج إلى لوحة بيانات مخصّصة لـ "مؤشرات أداء الويب الأساسية"؟ استخدِم لوحة بيانات CrUX الجديدة أو واجهة برمجة تطبيقات Chrome UX Report API الجديدة لبيانات الحقول أو من PageSpeed Insights API لبيانات المختبر.
• إذا كنت تبحث عن إرشادات، يمكنك استخدام web.dev/measure لقياس صفحتك وعرض مجموعة من الأدلة والدروس التطبيقية حول الترميز لتحسينها باستخدام بيانات PSI.
• أخيرًا، استخدِم Lighthouse CI في طلبات السحب لضمان عدم حدوث أي تراجع في "مؤشرات أداء الويب الأساسية" قبل إجراء تغيير في مرحلة الإنتاج.

لِنتحدّث من خلال هذه المقدمة عن التحديثات المحدّدة لكلّ أداة.

منارة

أداة Lighthouse هي أداة آلية للتدقيق في المواقع الإلكترونية، وتساعد المطوّرين في تشخيص المشاكل وتحديد الفرص المتاحة لتحسين تجربة المستخدم على مواقعهم الإلكترونية. وهي تقيس العديد من أبعاد جودة تجربة المستخدم في بيئة المختبر، بما في ذلك الأداء وسهولة الوصول. يتضمّن أحدث إصدار من Lighthouse (6.0، الذي تم إطلاقه في منتصف أيار (مايو) 2020) عمليات تدقيق إضافية ومقاييس جديدة ونتيجة أداء تم إنشاؤها حديثًا.

يقدّم الإصدار 6.0 من Lighthouse ثلاثة مقاييس جديدة للتقرير. هناك مقياسان جديدان هما سرعة عرض أكبر محتوى مرئي (LCP) ومتغيّرات التصميم التراكمية (CLS) هما عمليات التنفيذ الاختبارية لـ "مؤشرات أداء الويب الأساسية" وهما يقدّمان معلومات تشخيصية مهمة لتحسين تجربة المستخدم. ونظرًا لأهميتها في تقييم تجربة المستخدِم، لا يتم قياس المقاييس الجديدة وإدراجها في التقرير فحسب، بل تتم أيضًا أخذها في الاعتبار عند احتساب نتيجة الأداء.

يرتبط المقياس الجديد الثالث المُضمَّن في Lighthouse، وهو إجمالي وقت الحظر (TBT)، بمقياس الحقل مهلة الاستجابة الأولى (FID)، وهو مقياس آخر من "مؤشرات أداء الويب الأساسية". إنّ اتّباع الاقتراحات المقدَّمة في تقرير Lighthouse وإجراء التحسين وفقًا لنتائجك يتيح لك تقديم أفضل تجربة ممكنة للمستخدمين.

تم تعديل جميع المنتجات التي توفّرها أداة Lighthouse لتعكس أحدث إصدار، بما في ذلك Lighthouse CI التي تتيح لك قياس "مؤشرات أداء الويب الأساسية" بسهولة على طلبات السحب قبل دمجها ونشرها.

للحصول على مزيد من المعلومات حول آخر التحديثات التي تم إجراؤها على Lighthouse، يمكنك الاطّلاع على مشاركة المدونة What's New in Lighthouse 6.0.

إحصاءات PageSpeed

تُقدِّم إحصاءات PageSpeed (PSI) تقارير عن الأداء في الميزات الاختبارية والميدانية لصفحة على كلٍّ من الأجهزة الجوّالة وأجهزة الكمبيوتر المكتبي. وتوفّر هذه الأداة نظرة عامة حول تجربة المستخدمين للصفحة (المستندة إلى "تقرير تجربة المستخدم على Chrome") بالإضافة إلى مجموعة من الاقتراحات القابلة للتنفيذ حول كيفية تحسين مالك الموقع الإلكتروني لتجربة الصفحة (التي توفّرها أداة Lighthouse).

تمت أيضًا ترقية \"إحصاءات PageSpeed\" وPageSpeed Insights API لاستخدام Lighthouse 6.0 بشكل أساسي، وتتيح الآن قياس \"مؤشرات أداء الويب الأساسية\" في كل من قسمَي الميزة الاختبارية والحقول في التقرير. وتتم إضافة تعليقات توضيحية إلى "مؤشرات أداء الويب الأساسية" بشريط أزرق كما هو موضّح أدناه.

توفّر خدمة Search Console لمالكي المواقع الإلكترونية نظرة عامة رائعة على مجموعات الصفحات التي تستدعي الانتباه، وتساعد أداة PSI في تحديد الفرص المتاحة لكل صفحة من أجل تحسين تجربة الصفحة. في أداة PSI، يمكنك أن تعرف بوضوح ما إذا كانت صفحتك تستوفي المعايير المطلوبة لتوفير تجربة جيدة في جميع "مؤشرات أداء الويب الأساسية"، والواردة في أعلى التقرير، والتي يُشار إليها من خلال اجتياز تقييم "مؤشرات أداء الويب الأساسية" أو لم تجتَز تقييم "مؤشرات أداء الويب الأساسية".

CrUX

تقرير تجربة المستخدم في Chrome (CrUX) هو مجموعة بيانات عامة تضم بيانات تجربة المستخدم الحقيقية على الملايين من المواقع الإلكترونية. يقيس هذا المقياس إصدارات الحقول من جميع "مؤشرات أداء الويب الأساسية". وعلى عكس البيانات المعملية، تأتي بيانات تقرير تجربة المستخدم على Chrome من المستخدمين المعتمدين في المجال. باستخدام هذه البيانات، يستطيع المطورون فهم توزيع تجارب المستخدم الواقعية على مواقع الويب الخاصة بهم أو حتى مواقع المنافسين. حتى إذا لم يكن موقعك الإلكتروني يتضمّن RUM، يمكن أن يوفّر لك CrUX طريقة سريعة وسهلة لتقييم "مؤشرات أداء الويب الأساسية". تتضمن مجموعة بيانات CrUX في BigQuery بيانات دقيقة عن الأداء لكل "مؤشرات أداء الويب الأساسية"، وهي متاحة في نبذات شهرية على مستوى المصدر.

والطريقة الوحيدة لمعرفة مستوى أداء موقعك الإلكتروني بالنسبة إلى المستخدمين هي قياس أدائه الفعلي في المجال الذي يجري فيه هؤلاء المستخدمون ويحملونه ويتفاعلون معه. يُشار إلى هذا النوع من القياس عادةً باسم "مراقبة المستخدم الحقيقية" أو RUM للاختصار. حتى إذا لم يكن موقعك الإلكتروني يتضمّن RUM، يمكن أن يوفّر لك CrUX طريقة سريعة وسهلة لتقييم "مؤشرات أداء الويب الأساسية".

التعرّف على واجهة برمجة تطبيقات CrUX API

يسعدنا اليوم الإعلان عن CrUX API، وهي طريقة سريعة ومجانية لدمج سير عمل التطوير بسهولة مع قياس الجودة على مستوى المصدر وعنوان URL لمقاييس الحقول التالية:

• سرعة عرض أكبر جزء من المحتوى على الصفحة
• متغيّرات التصميم التراكمية
• مهلة الاستجابة الأولى
• سرعة عرض أول محتوى مرئي

يمكن للمطوّرين إجراء طلبات بحث عن مصدر أو عنوان URL وتقسيم النتائج حسب أشكال الأجهزة المختلفة. يتم تعديل بيانات واجهة برمجة التطبيقات يوميًا وتلخيص بيانات آخر 28 يومًا من البيانات (على عكس مجموعة بيانات BigQuery التي يتم تجميعها شهريًا). تمتلك واجهة برمجة التطبيقات أيضًا حصص واجهة برمجة التطبيقات العامة نفسها التي نفرضها على واجهة برمجة التطبيقات الأخرى، ألا وهي PageSpeed Insights API (25,000 طلب في اليوم).

في ما يلي عرض توضيحي يستخدم CrUX API لعرض مقاييس "مؤشرات أداء الويب الأساسية" مع توزيعات من حيث جيدة وبحاجة إلى تحسين وضعيفة:

ونخطِّط لتوسيع واجهة برمجة التطبيقات في الإصدارات المستقبلية لإتاحة الوصول إلى أبعاد ومقاييس إضافية لمجموعة بيانات CrUX.

لوحة بيانات CrUX مجدَّدة

تتيح لك لوحة بيانات CrUX المُعاد تصميمها حديثًا تتبُّع أداء المصدر بسهولة بمرور الوقت، ويمكنك الآن استخدامها لتتبُّع عمليات توزيع جميع مقاييس "مؤشرات أداء الويب الأساسية". لبدء استخدام لوحة البيانات، يمكنك الاطّلاع على البرنامج التعليمي على web.dev.

لقد طرحنا صفحة مقصودة جديدة في "مؤشرات أداء الويب الأساسية" لنسهّل عليك إلقاء نظرة سريعة على أداء موقعك الإلكتروني. نرحّب بملاحظاتك بشأن جميع أدوات CrUX. ولمشاركة أفكارك وأسئلتك، يمكنك التواصل معنا على حساب @ChromeUXReport على Twitter أو مجموعة Google.

لوحة أداء أدوات مطوري البرامج في Chrome

تصحيح أخطاء أحداث "متغيّرات التصميم" في القسم "التجربة"

تتضمّن لوحة الأداء في "أدوات مطوري البرامج في Chrome" قسم التجربة الجديد الذي يمكن أن يساعدك في رصد التغيّرات غير المتوقعة في التصميم. يساعد ذلك في العثور على مشاكل عدم الثبات المرئي على صفحتك التي تساهم في "متغيّرات التصميم التراكمية" وإصلاحها.

اختَر "متغيّرات التصميم" لعرض تفاصيلها في علامة التبويب ملخّص. لعرض مكان حدوث التغيير نفسه، مرِّر مؤشر الماوس فوق الحقلين تم النقل من وتم النقل إلى.

تصحيح الأخطاء في التفاعل من خلال عرض إجمالي وقت الحظر في التذييل

يمكن قياس إجمالي وقت الحظر (TBT) في أدوات التمرين المعملي وهو وكيل ممتاز لـ "مهلة الاستجابة الأولى". تقيس ميزة TBT إجمالي المدة الزمنية بين سرعة عرض المحتوى على الصفحة (FCP) ووقت التفاعل (TTI) الذي تم فيه حظر سلسلة التعليمات الرئيسية لمدة كافية لمنع استجابة الإدخالات. إنّ تحسينات الأداء التي تساهم في تحسين TBT في المختبر يجب أن تحسّن مقياس FID (مهلة الاستجابة الأولى) في المجال.

تظهر الآن خدمة "TBT" في تذييل لوحة الأداء في "أدوات مطوري البرامج في Chrome" عند قياس أداء الصفحة:

1. اضغط على "Control+Shift+J" (أو "Command+Option+J" على نظام التشغيل Mac) لفتح "أدوات مطوّري البرامج".
2. انقر على علامة التبويب الأداء.
3. انقر على تسجيل.
4. إعادة تحميل الصفحة يدويًا
5. انتظِر إلى أن يتم تحميل الصفحة، ثم أوقِف التسجيل.

لمزيد من المعلومات، يُرجى الاطّلاع على الميزات الجديدة في "أدوات مطوّري البرامج" (Chrome 84).

Search Console

يساعدك تقرير "مؤشرات أداء الويب الأساسية" الجديد في Search Console في تحديد مجموعات الصفحات التي تستدعي الانتباه على موقعك الإلكتروني، وذلك استنادًا إلى البيانات الفعلية (الميدانية) من تقرير تجربة المستخدم على Chrome. يتم تجميع أداء عنوان URL حسب الحالة ونوع المقياس ومجموعة عناوين URL (مجموعات من صفحات الويب المتشابهة).

يستند هذا التقرير إلى مقاييس "مؤشرات أداء الويب الأساسية" الثلاثة: سرعة عرض أكبر محتوى مرئي (LCP) ومهلة الاستجابة الأولى (FID) ومقياس CLS. إذا كان عنوان URL لا يتضمّن حدًا أدنى من بيانات إعداد التقارير لهذه المقاييس، سيتم حذفه من التقرير. جرِّب التقرير الجديد للحصول على نظرة شاملة على أداء مصدر البيانات.

بعد تحديد نوع الصفحة التي تتضمّن مشاكل مرتبطة بـ "مؤشرات أداء الويب الأساسية"، يمكنك استخدام "إحصاءات PageSpeed" للتعرّف على اقتراحات تحسين معيّنة للصفحات التي تمثّل تمثيلاً.

web.dev

تتيح لك صفحة https://pagespeed.web.dev/ قياس أداء صفحتك بمرور الوقت، من خلال تقديم قائمة ذات أولوية بالأدلة والدروس التطبيقية حول الترميز حول كيفية تحسين أداء الصفحة. وتعتمد عملية القياس هذه على "إحصاءات PageSpeed". أصبحت أداة القياس الآن متوافقة أيضًا مع مقاييس "مؤشرات أداء الويب الأساسية" على النحو الموضّح أدناه:

إضافة "مؤشرات أداء الويب"

تقيس إضافة "مؤشرات أداء الويب" المقاييس الثلاثة "مؤشرات أداء الويب الأساسية" في الوقت الفعلي لمتصفح Google Chrome (لأجهزة الكمبيوتر المكتبي). يساعد ذلك في رصد المشاكل في مرحلة مبكّرة أثناء سير عمل التطوير، كما أنّه أداة تشخيصية لتقييم أداء "مؤشرات أداء الويب الأساسية" أثناء تصفُّح الويب.

الإضافة متاحة الآن للتثبيت من سوق Chrome الإلكتروني. نأمل أن يكون هذا التقرير مفيدًا لك. نرحّب بأي مساهمات لتحسين هذا المشروع، إضافةً إلى الملاحظات التي تصلنا من مستودع GitHub الخاص بالمشروع.

لمحات سريعة

هذا ملخص! الإجراءات التالية التي يمكنك اتخاذها:

• استخدِم Lighthouse في "أدوات مطوري البرامج" لتحسين تجربة المستخدم والتأكّد من إعداد نفسك لتحقيق النجاح باستخدام "مؤشرات أداء الويب الأساسية" في هذا المجال.
• استخدِم أداة إحصاءات PageSpeed لمقارنة أداء الميزات الاختبارية والمجالات من "مؤشرات أداء الويب الأساسية".
• جرِّب واجهة برمجة التطبيقات الجديدة لتقرير تجربة المستخدم في Chrome للوصول بسهولة إلى مستوى أداء المصدر وعنوان URL مقارنةً بـ "مؤشرات أداء الويب الأساسية" خلال آخر 28 يومًا.
• يمكنك استخدام قسم التجربة والتذييل في لوحة الأداء في "أدوات مطوري البرامج" للتعمّق في التفاصيل وتصحيح الأخطاء مقارنةً بـ "مؤشرات أداء الويب الأساسية" المحدّدة.
• استخدِم تقرير "مؤشرات أداء الويب الأساسية" في Search Console للحصول على ملخّص حول أداء مصادرك في الحقل.
• استخدِم إضافة "مؤشرات أداء الويب" لتتبُّع أداء الصفحة مقارنةً بمؤشرات أداء الويب الأساسية في الوقت الفعلي.

سوف نتناول المزيد من المعلومات حول أدوات "مؤشرات أداء الويب الأساسية" على web.dev Live في حزيران (يونيو). اشترِك لتلقّي آخر الأخبار حول الفعالية.

~ من تأليف "إليزابيث" و"أدي"، فريق WebPerf Janitors