Orbit
Kapsule Orbit Web Vitals
The Web Vitals tab reports Core Web Vitals collected from your project's real visitors rather than from a synthetic test, so what you see is what people are actually experiencing on their own…
Orbit Web Vitals
تقدم علامة التبويب Web Vitals تقارير Core Web Vitals التي تم جمعها من الزوار الحقيقيين لمشروعك بدلاً من اختبار اصطناعي، لذلك ما تراه هو ما يختبره الأشخاص فعلياً على أجهزتهم واتصالاتهم الخاصة.
موقع Web Vitals
افتح Kapsule Orbit، وانقر على المشروع، واختر Web Vitals ضمن مجموعة Observability في شريط علامات التبويب للمشروع. الصفحة بعنوان Web Vitals وتشرح رقم العنوان الخاص بها: p75 هي النقاط المستخدمة لـ Page Experience.
حتى تضيف المجمع إلى موقعك، لا تحتوي الصفحة على شيء لعرضه، لذا ابدأ ببطاقة الإعداد في الأسفل.
إضافة المجمع
تعطيك بطاقة الإعداد وسم نص برمجي بسطر واحد لإضافته إلى <head> الخاص بموقعك:
<script defer src="https://kapsulehost.com/api/v/<your-project-slug>/script.js"></script>
السطر الدقيق، مع slug المشروع الخاص بك مملوء بالفعل، موجود على الصفحة. انسخه من هناك بدلاً من كتابته يدويًا.
يجمع النص البرمجي خمسة مقاييس عندما يغادر الزوار كل صفحة، ويبلغ عنها في دفعة واحدة. لا يتم التقاط أي معلومات تعريفية شخصية ولا يتم تعيين أي ملفات تعريف ارتباط، لذلك لا يضيف متطلب موافقة بمفرده.
يبدأ ظهور البيانات في غضون حوالي ثلاثين ثانية من أول مشاهدة صفحة حقيقية. إذا لم يظهر شيء بعد ذلك، فإن النص البرمجي لا يتم تحميله: تحقق من علامة التبويب الشبكة في متصفحك على الموقع المباشر.
هناك نسخة ثانية من نفس المجمع المعروضة ضمن Settings، في بطاقة Web Analytics، والتي يتم تحميلها من نطاق اللوحة وتأتي قبل وسم الإغلاق </body>. كلاهما يعمل وكلاهما يغذي نفس البيانات. استخدم واحداً، وليس كليهما، وإلا يتم عد كل مشاهدة صفحة مرتين.
المقاييس الخمسة
| المقياس | ما يقيسه |
|---|---|
| LCP | Largest Contentful Paint: المدة حتى يصبح المحتوى الرئيسي مرئياً |
| INP | Interaction to Next Paint: مدى سرعة استجابة الصفحة للإدخال |
| CLS | Cumulative Layout Shift: مقدار قفز التخطيط أثناء التحميل |
| FCP | First Contentful Paint: المدة حتى يتم رسم أي شيء |
| TTFB | Time to First Byte: المدة التي استغرقتها الخادم للبدء في الرد |
الثلاثة الأولى هي Core Web Vitals الفعلية. FCP و TTFB تشخيصية: فهي تخبرك ما إذا كان LCP السيء بسبب خادم بطيء أو صفحة بطيئة.
قراءة p75
كل رقم على هذه الصفحة هو p75، وليس متوسطاً، على العينات في النافذة المحددة. ثلاثة أرباع زوارك لديهم تجربة جيدة على الأقل؛ ربع واحد كان أسوأ.
هذا الاختيار مهم. يهيمن المتوسط على الكثير من الزيارات السريعة على الاتصالات الجيدة ويخفي الذيل. لا يفعل p75 هذا: إذا كان p75 LCP الخاص بك أربع ثوان، فإن واحداً من كل أربعة زوار ينتظرون أطول من ذلك.
تحمل كل بطاقة مقياس تصنيفاً من Good أو Needs improvement أو Poor، بالإضافة إلى عدد العينات التي تم حسابها منها. بالنسبة لـ LCP، تذكر الصفحة الحدود مباشرة: جيد هو 2500ms أو أقل، والسيء هو أكثر من 4000ms.
اعامل أي بطاقة بعدد عينات صغير بريبة. p75 على عشرة عينات أو نحو ذلك ضجيج. وسّع النافذة باستخدام المحدد في أعلى الصفحة، أو انتظر حركة مرور أكثر، قبل التصرف بناءً عليها.
مخطط الاتجاه
يرسم مخطط الاتجاه p75 اليومي لـ LCP و CLS عبر النافذة المحددة، مع تحديد عتبات جيدة وسيئة. تخبرك النسخة الجانبية بما تبحث عنه: الخطوط المسطحة صحية.
التغيير المفاجئ في يوم معين هو الإشارة المفيدة، لأنه يتوافق دائماً تقريباً مع نشر. قارن التاريخ مع علامة التبويب Deployments، أو ضع علامة على الحدث في الخط الزمني للمشروع بحيث يتم الإشارة إليه في المرة القادمة: انظر Orbit Timeline Annotations.
الانجراف البطيء تصاعداً على مدى أسابيع هو مشكلة مختلفة، عادة ما يكون وزن الصفحة المتراكم وليس تغييراً واحداً.
أفضل الدول
تظهر Top countries حجم العينة حسب الدولة، المشتقة من رؤوس الحافة. إنها موجودة للسياق وليس للتحليلات: p75 الذي يبدو سيئاً بشكل عام غالباً ما يكون جيداً بالنسبة لسوقك الرئيسية ويهيمن عليه جمهور أصغر وأبعد.
إذا كان معظم حركة المرور الخاصة بك بعيداً عن الأصل الخاص بك، فهذه حجة لـ cache أكثر بقوة على الحافة بدلاً من تحسين الكود بشكل أكبر.
الصفحات التي تحتاج إلى الاهتمام
تصنف جدول Pages needing attention المسارات حسب مدى ارتفاع p75 فوق العتبة الجيدة لكل مقياس، مع عدد العينات لكل صف.
عمل لأسفل من هذا الجدول بدلاً من محاولة تحسين الموقع ككل. عادة ما يمثل نموذجين أو ثلاثة نماذج معظم المشكلة، وإصلاح نموذج يصلح كل صفحة تستخدمه.
الأسباب الشائعة، بالترتيب الذي يستحق فحصه:
- صورة بطل غير محجوزة أو غير محملة مسبقاً. هذه أكثر مشاكل LCP شيوعاً بفارق كبير.
- نص برمجي للطرف الثالث يحجب الخيط الرئيسي. أدوات الدردشة ومديرو الوسوم وأكوام التحليلات هي المشبوهون المعتادون، وهم يؤذون INP في الأساس.
- الصور والعناصر المدمجة بدون أبعاد. تسبب هذه قفز التخطيط أثناء تحميلها، وهو بالضبط ما يقيسه CLS.
- استجابة الأصل البطيء. إذا كان TTFB سيئاً، فلن ينقذك أي مما ورد أعلاه؛ الإصلاح هو caching أو استجابة أسرع، وليس العمل على الواجهة الأمامية.
لا عينات في هذه النافذة
إذا قالت الصفحة أنه لا توجد عينات، فإن أحد الأشياء الثلاثة صحيح:
- لم يتم إضافة المجمع، أو لا يتم تحميله على الصفحات التي يزورها الأشخاص.
- تمت إضافته مؤخراً ولم يزر أحد حتى الآن.
- النافذة المحددة أقصر من الفجوة منذ آخر حركة مرور لديك.
وسّع النافذة أولاً، حيث أنها مجانية، ثم تحقق من وجود النص البرمجي في HTML المقدم للموقع المباشر وليس فقط في المصدر الخاص بك.
مدة الاحتفاظ بالبيانات
يتم قص العينات الفردية تلقائياً بمجرد أن تصبح 30 يوماً، بواسطة مهمة ليلية. يسمح محدد النافذة بك بالبحث عبر السجل المحتفظ به؛ لا يوجد أرشيف خارجه.
إذا كنت بحاجة إلى سجل طويل الأجل، خذ لقطة شاشة أو اكتب قيم p75 في نقطة زمنية، على سبيل المثال قبل وبعد مشروع الأداء مباشرة، حتى يكون لديك قبل وبعد يمكنك الاستشهاد به لاحقاً.
Vitals على صفحة الحالة العامة
إذا نشرت صفحة حالة للمشروع، يمكنها عرض نفس ملخص Core Web Vitals لزائريك، إلى جانب وقت التشغيل والنشرات الأخيرة. انظر Orbit Status Page.
أين تذهب بعد ذلك
- Orbit Project Analytics للأرقام من جانب البناء وملخص vitals مختصر.
- Orbit Timeline Annotations لتحديد النشرات والحوادث خلف تغيير مفاجئ.
- Website Speed للحصول على نصائح الأداء العامة.