امتداد كروم لقياس المقاييس لتثبيت موقع صحي الآن
يقيس هذا الامتداد مقاييس الويب الثلاثة لـ Web Hotals بطريقة تتطابق مع كيفية قياسها بواسطة Chrome وتم إبلاغها إلى أدوات Google الأخرى (على سبيل المثال تقرير تجربة مستخدم Chrome ، رؤى سرعة الصفحة ، وحدة التحكم في البحث).
وهو يدعم جميع الشبكات الحيوية على شبكة الإنترنت ويستفيد من مكتبة الحركات على شبكة الإنترنت تحت الغطاء لالتقاط:
كما يدعم مقاييس التشخيص:
يمكن تثبيت Chrome ExtenStion على الويب من متجر Chrome Web Store.
إذا كنت تبحث عن بناء أكثر نزيفًا ، فيمكنك أيضًا تثبيت إصدار الامتداد من Master.
جوجل كروم
web-vitals-extension-master
.chrome://extensions
).web-vitals-extension-master
في أي مكان على الصفحة لاستيراده (لا تقم بحذف المجلد بعد ذلك). تساعد الشارة المحيطة على التحقق مما إذا كانت صفحة تمرر عتبات الويب Core Web Hitals.
بمجرد التثبيت ، سيعرض الامتداد أيقونة شارة الحالة المعوقة حتى تنقل إلى عنوان URL. في هذه المرحلة ، ستقوم بتحديث الشارة إلى Green أو Amber أو Red اعتمادًا على ما إذا كان عنوان URL يمرر عتبات مقاييس الويب Core Web Vitals.
الشارة لديها عدد من الدول:
إذا فشل أحد المقاييس أو أكثر ، فإن الشارة ستحفز قيم هذه المقاييس (يمكن إيقاف تشغيل هذه الرسوم المتحركة في شاشة الخيارات).
سيسمح لك النقر على أيقونة شارة المحيط بالتمرين على القيم المتري الفردية. في هذا الوضع ، سيقول الامتداد أيضًا ما إذا كان المقياس يتطلب إجراءً للمستخدم.
على سبيل المثال ، يتطلب التفاعل مع الطلاء التالي تفاعلًا حقيقيًا (على سبيل المثال ، انقر/انقر) مع الصفحة وسيكون في Waiting for input...
الحالة حتى يكون هذا هو الحال. نوصي باستشارة وثائق الويب الخاصة بـ LCP و CLS و INP لفهم عندما تستقر القيم المتري.
يجمع المنبثقة بين تجارب الويب الخاصة بـ Core Web Otcal مع بيانات المستخدم الحقيقي من الحقل عبر API Chrome UX Report (CRUX). يمنحك هذا التكامل رؤى سياقية لمساعدتك على فهم مدى تشابه تجاربك الفردية لمستخدمي سطح المكتب الآخرين في نفس الصفحة. لقد أضفنا أيضًا خيارًا جديدًا لـ "مقارنة التجارب المحلية لبيانات حقل الهاتف" بدلاً من ذلك ، إذا لزم الأمر. لاحظ أن بيانات CRUX قد لا تكون متاحة لبعض الصفحات ، وفي هذه الحالة نحاول تحميل بيانات الحقل للأصل ككل.
يعرض التراكب عرضًا لأعلى (HUD) الذي يتراكب صفحتك. من المفيد إذا كنت بحاجة إلى رؤية مستمرة لمقاييس الويب الخاصة بك على الويب أثناء التطوير. لتمكين التراكب:
Display HUD overlay
وانقر فوق "حفظ"توفر ميزة تسجيل وحدة التحكم في امتداد Web Vitals رؤية تشخيصية لجميع المقاييس المدعومة. لتمكين سجلات وحدة التحكم:
Console logging
وانقر فوق "حفظ"Web Vitals
لتصفية المقاييس غير الضرورية ، قم بإعداد علامة ناقص إلى الاسم المتري. على سبيل المثال ، قم بتعيين الفلتر إلى Web Vitals Extension -CLS -LCP
لتصفية معلومات التشخيص CLS و LCP.
يتم تسجيل المعلومات التشخيصية لكل مقياس كمجموعة وحدة تحكم مسبقًا باسم التمديد ، [Web Vitals Extension]
، مما يعني أنك ستحتاج إلى النقر فوق هذا السطر من أجل تبديل المجموعة المفتوحة والإغلاق.
أنواع المعلومات التشخيصية تختلف كل مقياس. على سبيل المثال ، تتضمن معلومات LCP:
بالنسبة لبعض المقاييس (LCP و INP) ، يمكن حفظ الأعطال في علامات توقيت المستخدم ، باستخدام performance.measure
.
بالنسبة للمقاييس الأخرى ، يوفر Chrome DevTools عادة معلومات كافية حتى لا تكون عمليات التعطل الإضافية ضرورية.
المساهمات في هذا المشروع مرحب بها في شكل طلبات أو مشكلات سحب. انظر المساهمة. md لمزيد من التفاصيل.
إذا كانت ملاحظاتك مرتبطة بكيفية قياس المقاييس ، فيرجى تقديم مشكلة مقابل حركات الويب مباشرة.
src/browser_action/vitals.js
: البرنامج النصي الذي يعزز webvitals.js لجمع المقاييس والتغييرات المترية للبث من أجل شارات و HUD. يوفر درجة إجمالية من المقاييس التي يمكن استخدامها لشارات.src/bg/background.js
: يقوم بتحديثات أيقونة الشارة باستخدام البيانات المقدمة من Vitals.js. يمر على طول البيانات إلى popup.js
من أجل عرض ملخص المقاييس المحلية الأكثر تفصيلاً.src/browser_action/popup.js
: البرنامج النصي للمحتوى الذي يتولى تقديم تقارير مقاييس مفصلة في النافذة المنبثقة المعروضة عند النقر على أيقونة الشارة.src/options/options.js
: خيارات واجهة المستخدم (التكوين المحفوظ) للميزات المتقدمة مثل تراكب HUD من هو الجمهور الرئيسي لهذا التمديد؟
الجمهور الأساسي لهذا الامتداد هو المطورين الذين يرغبون في التعليقات الفورية حول كيفية قيام صفحاتهم على مقاييس الويب Core Web Vitals أثناء التطوير على جهاز سطح المكتب.
كيف يمكنني تفسير أرقام المقاييس التي أبلغ عنها هذه الأداة؟
يشير هذا التمديد إلى مقاييس لسطح المكتب أو جهاز الكمبيوتر المحمول. في كثير من الحالات ، ستكون هذه الجهاز أسرع بكثير من متوسط الهاتف المحمول الذي قد يكون لدى المستخدمين. لهذا السبب ، يوصى بشدة باختبار أدوات مثل Lighthouse وعلى أجهزة الهاتف المحمول الحقيقية (على سبيل المثال عبر WebPagetest) لضمان وجود جميع المستخدمين هناك تجربة إيجابية.
ما هي الإجراءات التي يمكنني اتخاذها لتحسين حيويات الويب الأساسية الخاصة بي؟
نحن نقوم بتوفير مجموعة من الأدلة لتحسين كل من مقاييس الويب Core Web Vitals إذا وجدت أن صفحتك لا تمر بعتبة معينة:
تتضمن Lighthouse أيضًا عمليات تدقيق الإجراءات الإضافية لهذه المقاييس.
نحن نتصور أن المستخدمين سيستخدمون الامتداد للحصول على ردود الفعل الفورية على المقاييس (لآلة سطح المكتب الخاصة بهم) ، لكننا سنذهب ويقومون بمراجعة المنارة لـ (1) رؤية تشخيصية لكيفية ظهور هذه المقاييس على جهاز محمول متوسط و (2) على وجه التحديد ماذا يمكنك القيام بذلك للتحسين.
Apache 2.0