مؤشرات الويب الأساسية: قياس وتحسين أداء الويب
لماذا تهم مؤشرات الويب الأساسية
لقد أنشأت موقعًا سريعًا، لكن المستخدمين لا يزالون يشتكون من البطء. أو ربما حذرك Google Search Console من ضعف مؤشرات الويب الأساسية. تؤثر هذه المقاييس مباشرة على تجربة المستخدم وترتيب البحث. تجاهلها يعني فقدان الزوار وحركة المرور. في هذا الدليل، ستتعلم ما هي مؤشرات الويب الأساسية، وكيفية قياسها، والخطوات العملية لتحسين كل منها.
ما هي مؤشرات الويب الأساسية؟
مؤشرات الويب الأساسية هي مجموعة من المقاييس التي حددتها Google لتحديد تجربة المستخدم على الويب. وهي تركز على التحميل والتفاعل والاستقرار البصري:
- Largest Contentful Paint (LCP): يقيس أداء التحميل. يشير إلى الوقت الذي يصبح فيه أكبر عنصر محتوى (صورة، كتلة نصية) مرئيًا. استهدف LCP أقل من 2.5 ثانية.
- First Input Delay (FID): يقيس التفاعل. هو الوقت من أول تفاعل للمستخدم (نقر، لمس) إلى استجابة المتصفح. استهدف FID أقل من 100 مللي ثانية.
- Cumulative Layout Shift (CLS): يقيس الاستقرار البصري. يحدد التحولات غير المتوقعة في التخطيط أثناء تحميل الصفحة. استهدف CLS أقل من 0.1.
هذه المقاييس جزء من إشارات تجربة الصفحة من Google وتؤثر على ترتيب البحث. كما أنها تعكس تجربة المستخدم الحقيقية، وليس فقط الاختبارات المعملية.
كيفية قياس مؤشرات الويب الأساسية
يمكنك قياس مؤشرات الويب الأساسية في المختبر (الاختبار الاصطناعي) أو في الميدان (مراقبة المستخدم الحقيقي). كلا النهجين قيم.
أدوات المختبر
- Lighthouse: مدمج في Chrome DevTools، يقوم بتدقيق الأداء ويوفر درجات لـ LCP وFID (باسم TBT) وCLS. قم بتشغيله في وضع التصفح المتخفي لتجنب تأثير الإضافات على النتائج.
- WebPageTest: يقدم مخططات شلال مفصلة وشرائط فيلم. يمكنك الاختبار من مواقع وأجهزة مختلفة.
- PageSpeed Insights: يجمع بين بيانات المختبر والميدان. يعرض بيانات CrUX (تقرير تجربة مستخدم Chrome) للأداء في العالم الحقيقي.
أدوات الميدان
- Chrome User Experience Report (CrUX): يوفر بيانات مجمعة للمستخدمين الحقيقيين لملايين المواقع. يمكن الوصول إليه عبر PageSpeed Insights أو CrUX API.
- Google Search Console: ضمن تقرير "Core Web Vitals"، يعرض بيانات الميدان لموقعك، مجمعة حسب URL.
- مكتبة Web Vitals JavaScript: استخدم
web-vitalsلجمع المقاييس من المستخدمين الحقيقيين وإرسالها إلى تحليلاتك.
ابدأ بأدوات المختبر لتصحيح الأخطاء، ثم تحقق من خلال بيانات الميدان لضمان تحسينات في العالم الحقيقي.
تحسين Largest Contentful Paint (LCP)
غالبًا ما يكون LCP هو المقياس الأكثر تحديًا. لتحسينه، ركز على مسار العرض الحرج.
- حسّن الصور: اضغط الصور، استخدم تنسيقات حديثة مثل WebP أو AVIF، وقدم صورًا متجاوبة باستخدام
srcset. - قم بتحميل مورد LCP مسبقًا: إذا كان عنصر LCP صورة أو خطًا، أضف
<link rel="preload">لبدء التحميل مبكرًا. - تخلص من الموارد التي تعيق العرض: قم بتأجيل CSS وJavaScript غير الحرجين. ضمّن CSS الحرج.
- استخدم CDN: قدم الأصول من مواقع قريبة من المستخدمين لتقليل زمن الوصول.
- خزن الأصول مؤقتًا: اضبط فترات تخزين مؤقت طويلة للموارد الثابتة باستخدام رؤوس
Cache-Control.
على سبيل المثال، قم بتحميل صورة البطل مسبقًا:
<link rel="preload" as="image" href="/hero.webp">
أيضًا، تأكد من استجابة الخادم بسرعة. استخدم أدوات مثل محلل سجلات Nginx لتحديد الطلبات البطيئة وتحسين أداء الخادم.
تحسين First Input Delay (FID)
يقيس FID الاستجابة. مهام JavaScript الطويلة تحظر الخيط الرئيسي، مما يؤخر التفاعلات.
- قسّم المهام الطويلة: قسّم JavaScript الكبير إلى أجزاء أصغر باستخدام
setTimeoutأوrequestIdleCallback. - صغّر واضغط JavaScript: قلل حجم الملف باستخدام التصغير وضغط gzip/brotli.
- أجّل JavaScript غير الحرج: استخدم سمات
asyncأوdefer. - أزل الكود غير المستخدم: استخدم tree shaking وتقسيم الكود.
- حسّن نصوص الطرف الثالث: قم بتحميلها بشكل غير متزامن وفكر في استضافتها ذاتيًا.
استخدم لوحة Performance في DevTools لتحديد المهام الطويلة.
تحسين Cumulative Layout Shift (CLS)
يحدث CLS عندما تتحرك العناصر بشكل غير متوقع. الأسباب الشائعة: الصور بدون أبعاد، الإعلانات، التضمينات، وخطوط الويب.
- عيّن سمات الحجم: قم دائمًا بتضمين
widthوheightعلى الصور ومقاطع الفيديو. - احجز مساحة للإعلانات والتضمينات: استخدم CSS
aspect-ratioأو حاويات ذات حجم ثابت. - تجنب إدراج محتوى فوق المحتوى الموجود: إلا إذا كان ناتجًا عن تفاعل المستخدم.
- استخدم
font-display: swap: لكن كن على علم أن تبديل الخطوط يمكن أن يسبب تحولات؛ فكر فيfont-display: optionalأو تحميل الخطوط مسبقًا. - طبق رسوم متحركة
transform: بدلاً من الخصائص التي تؤدي إلى إعادة تخطيط.
اختبر باستخدام Layout Instability API في DevTools.
مقارنة عتبات مؤشرات الويب الأساسية
| المقياس | جيد | يحتاج تحسين | ضعيف |
|---|---|---|---|
| LCP | ≤ 2.5 ثانية | 2.5 – 4.0 ثانية | > 4.0 ثانية |
| FID | ≤ 100 مللي ثانية | 100 – 300 مللي ثانية | > 300 مللي ثانية |
| CLS | ≤ 0.1 | 0.1 – 0.25 | > 0.25 |
تستند هذه العتبات إلى توصيات Google.
سير عمل عملي للتحسين المستمر
تحسين مؤشرات الويب الأساسية ليس مهمة لمرة واحدة. اتبع سير العمل هذا:
- القياس: استخدم أدوات المختبر والميدان لإنشاء خط أساس.
- التحديد: ابحث عن أكبر الفرص باستخدام Lighthouse وCrUX.
- التحسين: نفذ إصلاحات لـ LCP وFID وCLS.
- المراقبة: قم بإعداد مراقبة المستخدم الحقيقي باستخدام مكتبة web-vitals وتتبع التغييرات.
- التكرار: قم بالتدقيق والتحسين بانتظام.
دمج ميزانيات الأداء في خط أنابيب CI/CD الخاص بك لمنع الانحدارات.
الأسئلة الشائعة
ما هي مؤشرات الويب الأساسية ولماذا تهم؟
مؤشرات الويب الأساسية هي مقاييس (LCP، FID، CLS) تحدد تجربة المستخدم. وهي تهم لأنها تؤثر على ترتيب البحث وتؤثر بشكل مباشر على كيفية إدراك المستخدمين لسرعة موقعك واستقراره.
كم مرة يجب أن أقيس مؤشرات الويب الأساسية؟
قم بالقياس بعد التغييرات الكبيرة وبشكل مستمر عبر بيانات الميدان. استهدف مراجعة مقاييس المختبر أثناء التطوير ومراقبة بيانات الميدان شهريًا لاكتشاف الانحدارات.
هل يمكنني تحسين مؤشرات الويب الأساسية دون إعادة تصميم موقعي؟
نعم. يمكن تطبيق العديد من التحسينات مثل تحسين الصور والتحميل المسبق وتعيين سمات الحجم دون إعادة تصميم كاملة. ابدأ بإصلاحات منخفضة الجهد وعالية التأثير.
هل أنت مستعد لتحليل أداء خادمك؟ استخدم محلل سجلات Nginx لتحديد الطلبات البطيئة وتحسين الواجهة الخلفية، مما يحسن LCP وتجربة المستخدم بشكل غير مباشر.