📋 محتويات الصفحة
📖 الوصف
Web Vitals هي مكتبة JavaScript من Google لقياس مقاييس Core Web Vitals في المتصفح. توفر المكتبة طريقة سهلة لقياس LCP، FID/INP، CLS وغيرها من المقاييس المهمة. تُستخدم المكتبة لتتبع أداء المواقع الحقيقية (Real User Monitoring). تدعم المكتبة أيضاً Custom Metrics. Web Vitals متاحة مجاناً تحت رخصة Apache...
🎯 يستخدم في
مجالات استخدام هذه الأداة
Real User Monitoring (RUM)
Core Web Vitals
تقارير الأداء
تحسين الأداء
مراقبة الإنتاج
✨ المميزات
أبرز مميزات هذه الأداة
Easy الاستخدام
Easy Core Web Vitals
Easy RUM
Easy Custom Metrics
Easy TypeScript
Easy تصدير
Easy تكامل
⚠️ العيوب
نقاط يجب مراعاتها
يحتاج فهم Web Vitals
قد يكون معقداً
يحتاج إعداد
محدود في التقارير
💻 مثال على الاستخدام
كيفية استخدام هذه الأداة
// npm install web-vitals
import { onCLS, onFID, onLCP, onINP } from 'web-vitals'
// قياس Core Web Vitals
onCLS((metric) => {
console.log('CLS:', metric.value)
// إرسال إلى Analytics
sendToAnalytics({ name: 'CLS', value: metric.value })
})
onFID((metric) => {
console.log('FID:', metric.value)
sendToAnalytics({ name: 'FID', value: metric.value })
})
onLCP((metric) => {
console.log('LCP:', metric.value)
sendToAnalytics({ name: 'LCP', value: metric.value })
})
onINP((metric) => {
console.log('INP:', metric.value)
sendToAnalytics({ name: 'INP', value: metric.value })
})📚 أدوات أخرى في Performance
قد يعجبك أيضاً
Bundle Analyzer
⭐أداة تحليل حجم الحزمة
Calibre
⭐أداة اختبار ومراقبة الأداء
Chrome User Experience Report (CrUX)
⭐مجموعة بيانات تجربة المستخدم من Google
CrUX (Dashboard)
أداة مراقبة بيانات تجربة المستخدم
Image Optimization
⭐تقنيات تحسين الصور
Lazy Loading
⭐تقنية تحسين الأداء