تحسين سرعة الموقع: كيف ترفع مؤشرات Core Web Vitals

مهما كان موقعك جذابًا، فإن بطء تحميله يجعل معظم الزوار يغادرون. وفق أبحاث Google، يغادر 53% من المستخدمين الموقع إذا تجاوز تحميله 3 ثوانٍ، كما أصبحت السرعة عامل ترتيب مباشرًا. نشرح في هذا الدليل مؤشرات Core Web Vitals بوضوح والتقنيات التي تحقق نتائج فعلية.

ما هي Core Web Vitals؟

ثلاثة مؤشرات أساسية لتجربة المستخدم قدمتها Google عام 2020 وأدخلتها في الترتيب منذ 2021، وتعتمد على بيانات مستخدمين حقيقيين.

1. LCP — أكبر عرض للمحتوى

يقيس زمن ظهور أكبر عنصر مرئي (غالبًا صورة رئيسية أو عنوان كبير).

• جيد: 2.5 ثانية أو أقل
• يحتاج تحسينًا: 2.5–4 ثوانٍ
• ضعيف: أكثر من 4 ثوانٍ

أبرز العوامل: الصور الكبيرة، وبطء الخادم، وملفات JavaScript/CSS المعيقة للعرض.

2. INP — زمن الاستجابة للتفاعل

يقيس سرعة استجابة الصفحة للتفاعل (نقر، لمس، كتابة)، وحلّ محل FID في 2024.

• جيد: 200 مللي ثانية أو أقل
• يحتاج تحسينًا: 200–500 مللي ثانية
• ضعيف: أكثر من 500 مللي ثانية

تسوء النتيجة بسبب مهام JavaScript الطويلة والسكربتات الخارجية الثقيلة ومعالجات الأحداث غير الفعالة.

3. CLS — الإزاحة التراكمية للتخطيط

يقيس مدى «قفز» العناصر أثناء التحميل.

• جيد: 0.1 أو أقل
• يحتاج تحسينًا: 0.1–0.25
• ضعيف: أكثر من 0.25

أهم الأسباب: صور بلا أبعاد، ومحتوى يُضاف ديناميكيًا، وإعلانات متأخرة التحميل.

أين تقيس الأداء؟

Google PageSpeed Insights — بيانات مختبرية وحقيقية (CrUX)، مجانًا.

Google Search Console ← تقرير Core Web Vitals — التجربة الحقيقية حسب مجموعات الروابط.

WebPageTest — مخططات شلالية ومقارنات فيديو واختبارات متعددة الخطوات.

Chrome DevTools ← Lighthouse — قياس فوري أثناء التطوير المحلي.

تحسين LCP

صيغ صور حديثة

تحويل JPEG وPNG إلى WebP أو AVIF يقلل الحجم عادة بنسبة 30–50%.

``html <picture> <source srcset="hero.avif" type="image/avif" /> <source srcset="hero.webp" type="image/webp" /> <img src="hero.jpg" alt="..." width="1280" height="720" /> </picture> ``

مع Next.js يقوم مكوّن <Image> بذلك تلقائيًا.

التحميل المسبق للصورة الرئيسية

``html <link rel="preload" as="image" href="/hero.webp" fetchpriority="high" /> ``

تقليل زمن استجابة الخادم (TTFB)

• التوليد الثابت (SSG) أو ISR بدل المعالجة مع كل طلب
• شبكة CDN لتقديم المحتوى من خادم قريب
• الانتقال إلى VPS أو استضافة سحابية عند نقص الموارد

تضمين CSS الحرج

تضمين أنماط الجزء المرئي مباشرة في HTML يختصر زمن العرض، وتؤتمت ذلك أدوات مثل Critical وCritters.

تحسين INP: تقليل JavaScript

تقسيم المهام الطويلة

المهام التي تتجاوز 50 مللي ثانية تعيق التفاعل؛ قسّمها باستخدام setTimeout(..., 0) أو scheduler.yield():

``javascript async function processLargeList(items) { for (let i = 0; i < items.length; i++) { process(items[i]); // امنح الخيط الرئيسي استراحة كل 50 عنصرًا if (i % 50 === 0) await new Promise(r => setTimeout(r, 0)); } } ``

إزالة السكربتات الخارجية غير الضرورية

أدوات الدردشة وشبكات الإعلانات والتحليلات وأزرار التواصل تكلّف INP كثيرًا، فراجع Google Tag Manager بانتظام.

تقسيم الكود في React/Next.js

``javascript const HeavyComponent = dynamic(() => import('./HeavyComponent'), { ssr: false, loading: () => <div>جارٍ التحميل…</div>, }); ``

الوصول بـ CLS إلى الصفر

حدد أبعاد جميع الصور

``html <img src="product.jpg" alt="صورة المنتج" width="800" height="600" /> ``

``css .hero-image { aspect-ratio: 16 / 9; width: 100%; } ``

تجنب FOUT/FOIT مع الخطوط

استخدم font-display: optional أو swap وحمّل الخطوط مسبقًا:

``html <link rel="preload" href="/fonts/Brand.woff2" as="font" type="font/woff2" crossorigin /> ``

عناصر نائبة للمحتوى الديناميكي

``css .content-area { min-height: 120px; / يحجز المساحة حتى التحميل / } ``

تحسينات تلقائية مع Next.js

في موقع مبني بـ Next.js تعمل هذه الميزات مباشرة:

| الميزة | ما تقدمه | |---|---| | مكوّن <Image> | ‏WebP/AVIF تلقائيًا، تحميل كسول، أبعاد | | <Script strategy="lazyOnload"> | تأجيل السكربتات غير الحرجة | | التوليد الثابت (SSG) | تقليل TTFB إلى الحد الأدنى | | تحسين الخطوط | استضافة ذاتية واستراتيجية swap | | تقسيم الكود تلقائيًا | كل صفحة تحمّل ما تحتاجه فقط |

وقد أشرنا إلى ذلك أيضًا في مقال تكلفة موقع الشركة.

من أين تبدأ؟

1. تحسين الصور — يحسّن LCP بنسبة 30–40% في معظم المواقع وحده.

2. إزالة JavaScript غير المستخدم — عبر أداة Coverage في Chrome DevTools.

3. تقليل الموارد المعيقة للعرض — باستخدام async/defer أو تضمين CSS الحرج.

4. مراجعة أداء الخادم — مع الاستضافة المشتركة وTTFB فوق 800 مللي ثانية فكّر في تغيير الاستضافة.

5. تدقيق السكربتات الخارجية — في قسم «كود الجهات الخارجية» في PageSpeed Insights.

الخلاصة: السرعة ضرورة لا رفاهية

تحسين Core Web Vitals أصبح أساسًا إلزاميًا للترتيب ورضا المستخدمين والتحويل، فتعامل معه كدورة مستمرة من القياس والتحسين.

هل تريد معرفة حالة Core Web Vitals لموقعك أو الحصول على تحسين احترافي للسرعة؟ تواصل معنا — نقدم تحليلًا أوليًا مجانيًا.