الأدلة

دليل تدقيق Core Web Vitals لتطبيقات الصفحة الواحدة

تتميز تطبيقات الصفحة الواحدة (SPA) بتجربة مستخدم سلسة لكنها تواجه تحديات تقنية فريدة في قياس مؤشرات Core Web Vitals الخاصة بجوجل.

تمت المراجعة بواسطة WebAudit Lab · تم التحديث 2026-10-02

الفرق بين التنقل الكامل والتنقل السلس داخل تطبيقات SPA

يتم تسجيل مقاييس Core Web Vitals الرسمية من جوجل (LCP وINP وCLS) عند تحميل الصفحة الأولي. عندما ينتقل المستخدم داخل التطبيق عبر الموجه الداخلي (مثل React Router)، لا يعيد المتصفح تحميل المستند بالكامل. استخدم واجهة التنقل السلس التجريبية في مكتبة web-vitals لقياس سرعة الانتقالات الداخلية.

معالجة اختناقات LCP في تصيير الواجهات من جانب العميل

تعاني تطبيقات SPA غالباً من بطء مؤشر Largest Contentful Paint لأن المتصفح يضطر لتنزيل وتفسير حزم جافاسكربت ضخمة قبل إظهار المحتوى الأساسي. اعتمد تقنية التصيير من جانب الخادم (SSR) أو التوليد الثابت (SSG). قدّم صفحة HTML أولية خفيفة (<150 كيلوبايت) مع إعطاء الصورة الرئيسية fetchpriority='high'.

تحسين مؤشر Interaction to Next Paint (INP) أثناء التفاعل

يقيم مؤشر INP مدى استجابة الواجهة عند النقر أو الضغط على لوحة المفاتيح. في تطبيقات SPA، تؤدي التفاعلات إلى إعادة حساب شجرة المكونات وازدحام المسار الرئيسي. قسّم المهام البرمجية التي تتجاوز 50 ملي ثانية عبر scheduler.yield() وانقل العمليات الحسابية المعقدة إلى Web Workers.

منع التحولات التراكمية في التخطيط (CLS) أثناء الهيدرة

تعد عملية الهيدرة (Hydration) عندما ترتبط جافاسكربت بصفحة HTML القادمة من الخادم سبباً رئيساً لعدم استقرار التخطيط البصري. تأكد من تطابق هيكل HTML من الخادم مع حالة البداية في العميل، وحدد دائماً أبعاد aspect-ratio أو الحد الأدنى للارتفاع min-height لكل الحاويات الديناميكية.

إعداد منظومة مراقبة الأداء في المختبر والبيئة الواقعية

لا تعبر الاختبارات المعزولة على أجهزة المطورين السريعة عن هواتف المستخدمين المتوسطة أو الشبكات غير المستقرة. أنشئ نظام مراقبة المستخدم الحقيقي (RUM) باستخدام مكتبة web-vitals لتتبع الشريحة المئوية 75 للمستخدمين. حدد ميزانيات للأداء ضمن خط أنابيب CI/CD لمنع تضخم الكود.