مقاييس الويب الأساسية: قياس وتحسين أداء الويب
يتوقع مستخدموك تجارب سريعة وسلسة. إذا بدا موقعك بطيئًا، فسيغادرون—ومحركات البحث تلاحظ ذلك. مقاييس الويب الأساسية هي المقاييس التي تحدد تجربة المستخدم في العالم الحقيقي: سرعة التحميل، التفاعلية، والاستقرار البصري. يوضح لك هذا الدليل كيفية قياسها وإجراء تحسينات عملية.
ما هي مقاييس الويب الأساسية؟
مقاييس الويب الأساسية هي مجموعة من ثلاثة مقاييس حددتها Google لالتقاط الجوانب الرئيسية لتجربة المستخدم:
- أكبر رسم محتوى (LCP): يقيس أداء التحميل. يشير إلى الوقت الذي يصبح فيه أكبر عنصر محتوى (غالبًا صورة رئيسية أو عنوان) مرئيًا. استهدف LCP أقل من 2.5 ثانية.
- التفاعل مع الرسم التالي (INP): يقيس الاستجابة. يسجل الوقت من تفاعل المستخدم (نقرة، لمسة، ضغطة مفتاح) إلى التحديث البصري التالي. استهدف INP أقل من 200 مللي ثانية.
- تحول التخطيط التراكمي (CLS): يقيس الاستقرار البصري. يحدد التحولات غير المتوقعة في التخطيط أثناء التحميل. استهدف CLS أقل من 0.1.
تستند هذه الحدود إلى بيانات ميدانية من مستخدمين حقيقيين (المئين 75). تساعد بيانات المختبر في تشخيص المشكلات، لكن البيانات الميدانية تعكس التجربة الفعلية.
كيفية قياس مقاييس الويب الأساسية
تحتاج إلى كل من البيانات الميدانية وبيانات المختبر. تُظهر البيانات الميدانية أداء المستخدم الحقيقي؛ بينما تتيح لك بيانات المختبر تصحيح الأخطاء واختبار التغييرات.
أدوات البيانات الميدانية
- تقرير تجربة المستخدم في Chrome (CrUX): بيانات مجمعة من مستخدمين حقيقيين لملايين المواقع. يمكن الوصول إليها عبر PageSpeed Insights أو Search Console أو CrUX API.
- مكتبة web-vitals JavaScript: اجمع بياناتك الميدانية الخاصة عن طريق إرسال المقاييس إلى نقطة نهاية التحليلات الخاصة بك.
أدوات بيانات المختبر
- Lighthouse: مدمج في Chrome DevTools، ويجري عمليات تدقيق ويوفر فرصًا للتحسين.
- WebPageTest: اختبار متقدم مع تحديد سرعة الشبكة وعرض شرائط الفيلم.
- لوحة الأداء في Chrome DevTools: تعمق في أداء وقت التشغيل.
ابدأ بـ PageSpeed Insights: فهو يعرض كلاً من البيانات الميدانية والمخبرية لعنوان URL. ثم استخدم Lighthouse محليًا للتكرار.
تحسين LCP
غالبًا ما يكون LCP هو المقياس الأكثر تأثيرًا للإصلاح. عادةً ما يكون أكبر عنصر صورة أو كتلة نصية. حسّن هذه المجالات:
- حسّن صورة LCP: اضغطها، وقدم تنسيقات حديثة مثل WebP أو AVIF، واضبط أبعادًا صريحة.
- حمّل مورد LCP مسبقًا: استخدم
<link rel="preload">للصور أو الخطوط المستخدمة في الجزء العلوي من الصفحة. - أزل الموارد المانعة للعرض: ضمّن CSS الحرج، وأجّل CSS وJavaScript غير الحرجين.
- استخدم شبكة توصيل المحتوى (CDN): قدم الأصول من مواقع قريبة من المستخدمين.
- قلل وقت استجابة الخادم: حسّن الواجهة الخلفية، واستخدم التخزين المؤقت، وفكر في العرض من الحافة.
مثال: تحميل صورة رئيسية مسبقًا:
<link rel="preload" as="image" href="/hero.webp" imagesrcset="/hero-480.webp 480w, /hero-800.webp 800w" imagesizes="(max-width: 600px) 480px, 800px">تحسين INP
يقيس INP الاستجابة. المهام الطويلة تحجب الخيط الرئيسي وتؤخر التغذية الراجعة البصرية. الإصلاحات الشائعة:
- قسّم المهام الطويلة: استخدم
setTimeoutأوscheduler.yield()للتنازل عن الخيط الرئيسي. - حسّن معالجات الأحداث: استخدم debounce أو throttle للأحداث السريعة، وتجنب العمل المتزامن الثقيل.
- قلل JavaScript: قسّم الكود، وقلّم الشجرة، وأجّل البرامج النصية غير الحرجة.
- استخدم web workers للمهام كثيفة المعالج.
- تجنب تحديثات DOM الكبيرة: اجمع تغييرات DOM واستخدم requestAnimationFrame.
قس INP باستخدام مكتبة web-vitals وحدد التفاعلات البطيئة في لوحة الأداء.
تحسين CLS
تحدث تحولات التخطيط عندما تغير العناصر موضعها بشكل غير متوقع. امنعها عن طريق:
- ضبط سمات الحجم على الصور ومقاطع الفيديو (العرض والارتفاع).
- حجز مساحة للإعلانات والتضمينات باستخدام CSS
aspect-ratioأو حاويات ثابتة. - تجنب إدراج محتوى فوق محتوى موجود إلا استجابةً لتفاعل المستخدم.
- استخدام font-display: swap وتحميل الخطوط مسبقًا لتقليل تحولات FOIT/FOUT.
- التحريك باستخدام transform بدلاً من الخصائص التي تؤدي إلى إعادة تخطيط.
مقارنة سريعة: المقاييس والأهداف
| المقياس | ما يقيسه | الهدف الجيد | الإصلاحات الشائعة |
|---|---|---|---|
| LCP | أداء التحميل | ≤ 2.5 ثانية | تحسين الصور، التحميل المسبق، CDN |
| INP | الاستجابة | ≤ 200 مللي ثانية | تقسيم المهام الطويلة، تقليل JS |
| CLS | الاستقرار البصري | ≤ 0.1 | ضبط الأبعاد، حجز المساحة |
المراقبة والتكرار
الأداء ليس إصلاحًا لمرة واحدة. قم بإعداد مراقبة مستمرة:
- استخدم مكتبة web-vitals لإرسال المقاييس إلى تحليلاتك.
- قم بإعداد تنبيهات للانحدارات في خط أنابيب CI/CD باستخدام Lighthouse CI.
- راجع البيانات الميدانية بانتظام في Search Console.
تذكر أنه يجب التحقق من التحسينات باستخدام بيانات المستخدم الحقيقي، وليس فقط درجات المختبر.
الأسئلة الشائعة
ما هي مقاييس الويب الأساسية ولماذا تهم؟
مقاييس الويب الأساسية هي مقاييس أداء تركز على المستخدم (LCP، INP، CLS) تقيس التحميل والتفاعلية والاستقرار البصري. وهي تهم لأنها ترتبط بتجربة المستخدم وتُستخدم كإشارة ترتيب من Google.
كم مرة يجب أن أتحقق من مقاييس الويب الأساسية؟
تحقق من البيانات الميدانية شهريًا وبعد الإصدارات الرئيسية. استخدم أدوات المختبر أثناء التطوير لاكتشاف الانحدارات مبكرًا. المراقبة المستمرة باستخدام مقاييس المستخدم الحقيقي مثالية.
هل يمكنني تحسين مقاييس الويب الأساسية دون إعادة بناء موقعي؟
نعم. يمكن تطبيق العديد من التحسينات—مثل تحسين الصور، والتحميل المسبق للموارد الرئيسية، وتأجيل البرامج النصية، وضبط أبعاد العناصر—بشكل تدريجي دون إعادة تصميم كاملة.
هل تحتاج إلى ضغط الصور بسرعة لتحسين LCP؟ جرب ضاغط الصور المجاني لتقليل أحجام الملفات دون فقدان الجودة.