مؤشرات الويب الأساسية: قياس وتحسين أداء الويب
لقد أنشأت موقع ويب سريعًا، لكن المستخدمين لا يزالون يشتكون من البطء. أو ربما انخفضت ترتيباتك في محركات البحث بعد تحديث Google. قد يكون السبب هو مؤشرات الويب الأساسية - مجموعة من المقاييس التي تحدد تجربة المستخدم في العالم الحقيقي. تجاهلها يمكن أن يضر بقابلية الاستخدام وظهورك في البحث. سيرشدك هذا الدليل خلال قياس وتحسين كل مؤشر، مع خطوات عملية يمكنك تنفيذها اليوم.
ما هي مؤشرات الويب الأساسية؟
مؤشرات الويب الأساسية هي ثلاثة مقاييس محددة يستخدمها Google لتقييم تجربة الصفحة:
- أكبر رسم للمحتوى (LCP): يقيس أداء التحميل. يتتبع الوقت الذي يستغرقه أكبر عنصر محتوى (صورة، فيديو، أو كتلة نصية) ليصبح مرئيًا. LCP الجيد هو 2.5 ثانية أو أقل.
- التفاعل مع الرسم التالي (INP): يقيس التفاعلية. يسجل زمن الاستجابة لجميع التفاعلات (النقرات، اللمسات، ضغطات المفاتيح) ويقدم نسبة مئوية عالية. INP الجيد هو 200 مللي ثانية أو أقل.
- التحول التراكمي للتخطيط (CLS): يقيس الاستقرار البصري. يحدد التحولات غير المتوقعة في التخطيط أثناء التحميل. CLS الجيد هو 0.1 أو أقل.
هذه المقاييس جزء من إشارات تجربة الصفحة في Google، لكنها تؤثر أيضًا بشكل مباشر على كيفية إدراك المستخدمين لموقعك. LCP البطيء يُحبط المستخدمين، INP المرتفع يجعل الصفحة تبدو غير مستجيبة، وCLS يسبب النقرات الخاطئة.
كيفية قياس مؤشرات الويب الأساسية
تحتاج إلى بيانات المختبر والبيانات الميدانية للحصول على صورة كاملة. أدوات المختبر تحاكي الظروف، بينما البيانات الميدانية تأتي من المستخدمين الحقيقيين.
أدوات المختبر
- Lighthouse: مدمج في Chrome DevTools، يقوم بتدقيق الأداء ويوفر درجات لـ LCP وCLS وTBT (وكيل لـ INP). شغله في وضع التخفي مع تقييد السرعة لمحاكاة ظروف الجوال.
- WebPageTest: يوفر اختبارات متقدمة من مواقع وأجهزة متعددة، مع عروض شريط الفيلم ومخططات الشلال.
- PageSpeed Insights: يجمع بين بيانات المختبر والبيانات الميدانية (من CrUX) في تقرير واحد.
أدوات الميدان
- تقرير تجربة مستخدم Chrome (CrUX): مجموعة بيانات عامة لمقاييس المستخدمين الحقيقيين لملايين المواقع. يمكن الوصول إليها عبر PageSpeed Insights أو واجهة برمجة تطبيقات CrUX.
- Google Search Console: يعرض حالة مؤشرات الويب الأساسية لموقعك، مجمعة حسب URL.
- مكتبة web-vitals JavaScript: أضفها إلى موقعك لجمع مقاييس المستخدمين الحقيقيين وإرسالها إلى تحليلاتك.
استخدم أدوات المختبر لتصحيح الأخطاء والبيانات الميدانية للتحقق من الإصلاحات. من الأخطاء الشائعة تحسين درجات المختبر فقط مع تجاهل تجربة المستخدم الحقيقية.
تحسين LCP
غالبًا ما يكون LCP هو المقياس الأكثر تأثيرًا للإصلاح. إليك كيفية تحسينه:
- حسّن الصور: اضغط الصور دون فقدان الجودة، استخدم تنسيقات حديثة مثل WebP أو AVIF، وقدم صورًا متجاوبة باستخدام
srcset. أدوات مثل ضاغط الصور يمكن أن تساعد في تقليل أحجام الملفات. - قم بتحميل الموارد الحرجة مسبقًا: استخدم
<link rel="preload">لصور البطل والخطوط وملفات CSS/JS الرئيسية. - أزل الموارد التي تعيق العرض: قم بتضمين CSS الحرج، وأجّل JavaScript غير الحرج، وتجنب ملفات CSS الكبيرة.
- استخدم شبكة توصيل المحتوى (CDN): قدم الأصول من مواقع حافة قريبة من المستخدمين لتقليل زمن الاستجابة.
- خزن الأصول مؤقتًا: اضبط فترات تخزين مؤقت طويلة للموارد الثابتة مع كسر التخزين المؤقت عبر أسماء الملفات.
- حسّن زمن استجابة الخادم: استخدم استضافة سريعة، وفعل الضغط (Brotli أو Gzip)، وحسّن استعلامات قاعدة البيانات.
للحصول على مثال مفصل، فكر في صورة البطل. بدلاً من تقديم صورة JPEG بحجم 2 ميجابايت، اضغطها إلى أقل من 200 كيلوبايت، وحولها إلى WebP، وقم بتحميلها مسبقًا. هذا وحده يمكن أن يقلل LCP بثوانٍ.
تحسين INP
يقيس INP الاستجابة. غالبًا ما ينبع INP المرتفع من مهام JavaScript الطويلة التي تسد الخيط الرئيسي.
- قسّم المهام الطويلة: استخدم
setTimeoutأوrequestIdleCallbackللتنازل عن الخيط الرئيسي. - حسّن معالجات الأحداث: استخدم debounce أو throttle للأحداث المتكررة مثل التمرير أو تغيير الحجم. تجنب الحسابات الثقيلة في المعالجات.
- قلل تنفيذ JavaScript: قم بتقسيم الكود، وهز الشجرة، والتحميل البطيء لـ JS غير الحرج.
- استخدم web workers: انقل المهام المكلفة إلى خيط عامل.
- قلل من نصوص الطرف الثالث: دقق وأزل التحليلات غير الضرورية أو الإعلانات أو الأدوات الاجتماعية.
اختبر INP من خلال التفاعل مع صفحتك في لوحة الأداء في Chrome DevTools. ابحث عن المهام الطويلة (مثلثات حمراء) وحسنها.
تحسين CLS
CLS يتعلق بالاستقرار البصري. التحولات غير المتوقعة تزعج المستخدمين وتسبب النقرات الخاطئة.
- حدد أبعاد الصور والفيديو: قم دائمًا بتضمين سمات
widthوheightأو استخدم CSS aspect-ratio. - احجز مساحة للإعلانات والتضمينات: استخدم عناصر نائبة بأحجام ثابتة.
- تجنب إدراج محتوى فوق المحتوى الموجود: باستثناء التفاعلات التي يبدأها المستخدم.
- استخدم font-display: swap: لكن كن على علم أن تبديل الخطوط يمكن أن يسبب تحولات. فكر في تحميل الخطوط مسبقًا أو استخدام
size-adjust. - طبق تحويلات CSS للرسوم المتحركة: بدلاً من الخصائص التي تؤدي إلى إعادة التخطيط.
استخدم ميزة مناطق تحول التخطيط في Chrome DevTools لتصور التحولات.
الأدوات وسير العمل
دمج مراقبة مؤشرات الويب الأساسية في سير عمل التطوير الخاص بك:
- قم بتشغيل Lighthouse في CI لاكتشاف الانحدارات.
- استخدم مكتبة web-vitals لجمع البيانات الميدانية وإعداد التنبيهات.
- تحقق بانتظام من Search Console بحثًا عن المشكلات.
- رتب الإصلاحات بناءً على التأثير والجهد.
تذكر أن مؤشرات الويب الأساسية هي جزء واحد فقط من الأداء. ضع في اعتبارك دائمًا تجربة المستخدم الشاملة.
الأسئلة الشائعة
ما هي العتبات الحالية لمؤشرات الويب الأساسية؟
العتبات الجيدة: LCP ≤ 2.5 ثانية، INP ≤ 200 مللي ثانية، CLS ≤ 0.1. تحتاج إلى تحسين: LCP ≤ 4 ثوانٍ، INP ≤ 500 مللي ثانية، CLS ≤ 0.25. سيئة: أعلى من تلك القيم.
كم مرة يجب أن أقيس مؤشرات الويب الأساسية؟
راقب البيانات الميدانية بشكل مستمر وقم بإجراء اختبارات المختبر بعد التغييرات الكبيرة. على الأقل، تحقق شهريًا وبعد عمليات النشر.
هل يمكنني تحسين مؤشرات الويب الأساسية بدون مطور؟
بعض الإصلاحات مثل ضغط الصور والتخزين المؤقت يمكن القيام بها عبر الإضافات أو إعدادات CDN. لكن التحسينات الأعمق غالبًا ما تتطلب تغييرات في الكود.
هل أنت مستعد لتحسين صورك للحصول على LCP أفضل؟ جرب ضاغط الصور المجاني لتقليل أحجام الملفات دون فقدان الجودة.