مؤشرات الويب الأساسية: قياس وتحسين أداء الويب

لماذا تهم مؤشرات الويب الأساسية

لقد أنشأت موقعًا سريعًا، لكن المستخدمين لا يزالون يشتكون من بطء التحميل أو التفاعلات المتعثرة. قد تخفض محركات البحث ترتيبك أيضًا إذا كانت درجات مؤشرات الويب الأساسية (CWV) ضعيفة. CWV هي مجموعة من المقاييس التي تستخدمها Google لتحديد تجربة المستخدم كميًا: Largest Contentful Paint (LCP)، وFirst Input Delay (FID)، وCumulative Layout Shift (CLS). في عام 2021، جعلت Google هذه المقاييس عامل ترتيب، لذا تجاهلها يمكن أن يضر بتحسين محركات البحث (SEO) والاحتفاظ بالمستخدمين.

يشرح هذا الدليل كيفية قياس كل مقياس، وتحديد المشكلات الشائعة، وتطبيق إصلاحات عملية. سنركز على الخطوات القابلة للتنفيذ التي يمكنك اتخاذها اليوم، دون الخوض في كل حالة حافة.

فهم مؤشرات الويب الأساسية الثلاثة

قبل التحسين، اعرف ما يقيسه كل مقياس وحدوده.

ملاحظة: يتم استبدال FID بـ Interaction to Next Paint (INP) في مارس 2024، لكن مبادئ التحسين متشابهة. سنركز على FID هنا لأنه لا يزال يُشار إليه على نطاق واسع.

كيفية قياس مؤشرات الويب الأساسية

تحتاج إلى بيانات المختبر والبيانات الميدانية. بيانات المختبر (الاصطناعية) تساعد في التصحيح؛ البيانات الميدانية (المستخدمون الحقيقيون) تظهر الأداء الفعلي.

أدوات المختبر

• Lighthouse في Chrome DevTools: قم بإجراء تدقيق للأداء وإمكانية الوصول وتحسين محركات البحث. يبلغ عن LCP وCLS وTBT (وكيل لـ FID).
• WebPageTest: اختبار متقدم مع شرائط فيلم ومخططات شلال.
• PageSpeed Insights: يجمع بين بيانات المختبر والبيانات الميدانية (إذا كانت متاحة).

أدوات ميدانية

• Chrome User Experience Report (CrUX): مجموعة بيانات عامة لمقاييس المستخدمين الحقيقيين. يمكن الوصول إليها عبر PageSpeed Insights أو BigQuery.
• مكتبة web-vitals JavaScript: اجمع مقاييس المستخدمين الحقيقيين في تحليلاتك.
• تقرير Core Web Vitals في Search Console: يعرض مجموعات URL التي بها مشكلات.

ابدأ بـ PageSpeed Insights للحصول على نظرة عامة سريعة، ثم استخدم Lighthouse للحصول على تشخيصات مفصلة.

تحسين Largest Contentful Paint (LCP)

غالبًا ما يعاني LCP من استجابة الخادم البطيئة أو الموارد التي تحجب العرض أو الصور غير المحسّنة. اتبع هذه الخطوات:

1. حسّن وقت استجابة الخادم: استخدم التخزين المؤقت وCDN وكود خلفي فعال. استهدف وقت الوصول الأول (TTFB) أقل من 0.8 ثانية.
2. أزل الموارد التي تحجب العرض: ضمّن CSS الحرج، وأجّل CSS وJavaScript غير الحرجة. استخدم async أو defer للسكريبتات.
3. حسّن الصور: اضغط الصور، واستخدم تنسيقات حديثة (WebP، AVIF)، ونفذ صورًا متجاوبة باستخدام srcset. بالنسبة لصورة LCP، قم بتحميلها مسبقًا باستخدام <link rel="preload">.
4. استخدم CDN: قدم الأصول الثابتة من مواقع الحافة.
5. خزّن الأصول مؤقتًا: اضبط فترات تخزين مؤقت طويلة للموارد الثابتة.

مثال: قم بتحميل صورة LCP مسبقًا واضبط أبعادًا صريحة لتجنب تحولات التخطيط.

<link rel="preload" as="image" href="/hero.webp" imagesrcset="/hero-480.webp 480w, /hero-800.webp 800w" imagesizes="(max-width: 600px) 480px, 800px">
<img src="/hero.webp" srcset="/hero-480.webp 480w, /hero-800.webp 800w" sizes="(max-width: 600px) 480px, 800px" alt="Hero" width="800" height="600">

تحسين First Input Delay (FID)

يقيس FID الاستجابة. مهام JavaScript الطويلة تحجب الخيط الرئيسي، مما يؤخر التفاعلات. لتحسين FID:

• قسّم المهام الطويلة: استخدم setTimeout أو requestIdleCallback للتنازل عن الخيط الرئيسي.
• قلل العمل على الخيط الرئيسي: قلل وقت تنفيذ JavaScript، وتجنب الحزم الكبيرة، واستخدم تقسيم الكود.
• حسّن معالجات الأحداث: استخدم debounce أو throttle للمعالجات المكلفة.
• استخدم web workers للمهام كثيفة الاستخدام لوحدة المعالجة المركزية.
• تجنب السكريبتات الخارجية الكبيرة: دقق وأزل السكريبتات غير الضرورية.

أدوات مثل Lighthouse تشير إلى المهام الطويلة. استخدم لوحة الأداء في Chrome DevTools لتحديدها.

تحسين Cumulative Layout Shift (CLS)

يقيس CLS الاستقرار البصري. تحدث تحولات التخطيط عندما تغير العناصر موضعها بشكل غير متوقع. الأسباب الشائعة والإصلاحات:

• صور بدون أبعاد: اضبط دائمًا سمات width وheight أو استخدم CSS aspect-ratio.
• الإعلانات والتضمينات والإطارات iframe: احجز مساحة باستخدام عنصر نائب أو اضبط أبعادًا ثابتة.
• المحتوى الديناميكي: تجنب إدراج محتوى فوق المحتوى الموجود إلا استجابةً لتفاعل المستخدم.
• خطوط الويب: استخدم font-display: swap وقم بتحميل الخطوط مسبقًا لتجنب النص غير المرئي (FOIT) وتحولات التخطيط.
• الرسوم المتحركة: فضّل CSS transform وopacity للرسوم المتحركة، لأنها لا تؤدي إلى إعادة تخطيط.

اختبر باستخدام Layout Instability API في DevTools أو استخدم مكتبة web-vitals لتسجيل CLS في الميدان.

سير عمل عملي للمراقبة المستمرة

التحسين ليس مهمة لمرة واحدة. قم بإعداد المراقبة:

1. قم بتجهيز موقعك بمكتبة web-vitals وأرسل المقاييس إلى منصة التحليلات الخاصة بك.
2. قم بإعداد تنبيهات عندما تتجاوز المقاييس الحدود.
3. قم بتشغيل Lighthouse بانتظام في CI/CD لاكتشاف الانحدارات.
4. استخدم Search Console لمراقبة اتجاهات البيانات الميدانية.

تذكر أن البيانات الميدانية هي ما يهم للترتيب. بيانات المختبر تساعدك في التصحيح، لكن تحقق دائمًا مع المستخدمين الحقيقيين.

الأسئلة الشائعة

ما هي الحدود الحالية لمؤشرات الويب الأساسية؟

اعتبارًا من عام 2023، الحدود هي: LCP جيد ≤2.5 ثانية، يحتاج تحسين 2.5–4.0 ثانية، ضعيف >4.0 ثانية؛ FID جيد ≤100 مللي ثانية، يحتاج تحسين 100–300 مللي ثانية، ضعيف >300 مللي ثانية؛ CLS جيد ≤0.1، يحتاج تحسين 0.1–0.25، ضعيف >0.25. لاحظ أن FID يتم استبداله بـ INP في 2024.

كم مرة يجب أن أقيس مؤشرات الويب الأساسية؟

راقب البيانات الميدانية باستمرار عبر التحليلات، وقم بتشغيل اختبارات المختبر (مثل Lighthouse) في كل عملية نشر أو على الأقل أسبوعيًا. التغييرات الكبيرة يجب أن تؤدي إلى تدقيق جديد.

هل يمكنني تحسين مؤشرات الويب الأساسية بدون مطور؟

بعض الإصلاحات مثل ضغط الصور أو تمكين التخزين المؤقت يمكن القيام بها عبر الإضافات أو إعدادات الاستضافة. ومع ذلك، فإن التحسينات الأعمق (مثل تقسيم الكود، CSS الحرج) تتطلب عادةً عملًا تطويريًا.

هل أنت مستعد لتحسين صورك للحصول على LCP أفضل؟ جرب ضاغط الصور المجاني لتقليل أحجام الملفات دون فقدان الجودة.