تحسين سرعة الموقع 2026: إصلاح LCP وINP وCLS خطوة بخطوة

ما هي Core Web Vitals وكيف تُؤثر على SEO؟ Core Web Vitals هي ثلاثة مقاييس أداء أساسية تُقيّمها جوجل ضمن خوارزمية الترتيب منذ 2021: LCP يقيس سرعة تحميل أكبر عنصر مرئي، INP يقيس استجابة الموقع للتفاعل، وCLS يقيس ثبات التخطيط البصري. تحقيق الأهداف الثلاثة يُحسّن ترتيبك وتجربة مستخدميك في آن واحد. استشارة مجانية ←

في مارس 2024، استبدلت جوجل مقياس FID بـ INP (Interaction to Next Paint) كمقياس Core Web Vital رسمي. هذا التغيير يعني أن استراتيجيات الأداء السابقة تحتاج مراجعة. هذا الدليل مُحدَّث لـ 2026 ويشمل أحدث الأدوات والتقنيات.

فهم مقاييس Core Web Vitals الثلاثة {#فهم-cwv}

LCP - Largest Contentful Paint

يقيس الوقت من بدء تحميل الصفحة حتى ظهور أكبر عنصر مرئي (صورة، فيديو، أو كتلة نص كبيرة).

الجيد: أقل من 2.5 ثانية
يحتاج تحسين: 2.5 - 4.0 ثانية
سيئ: أكثر من 4.0 ثانية

أكثر عناصر LCP شيوعاً: صورة الـ Hero الرئيسية، صور المنتجات في التجارة الإلكترونية، صور الغلاف في المدونات.

INP - Interaction to Next Paint

يقيس استجابة الصفحة للتفاعلات: نقر الأزرار، ضغط المفاتيح، النقر على العناصر. يُسجّل أبطأ 98% من التفاعلات ويُعيد القيمة كمقياس واحد.

الجيد: أقل من 200ms
يحتاج تحسين: 200 - 500ms
سيئ: أكثر من 500ms

CLS - Cumulative Layout Shift

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

الجيد: أقل من 0.1
يحتاج تحسين: 0.1 - 0.25
سيئ: أكثر من 0.25

أدوات قياس الأداء {#أدوات-القياس}

الأداة	النوع	ما تقيسه	مجانية؟
Lighthouse	Lab data (محاكاة)	جميع مقاييس الأداء	نعم
PageSpeed Insights	Lab + Field data	CWV + توصيات	نعم
Chrome DevTools	Lab data	تفصيلي جداً	نعم
Google Search Console	Field data (CrUX)	CWV الحقيقي لموقعك	نعم
WebPageTest	Lab data متقدم	Waterfall + CWV	نعم (مجانية أساسية)
CrUX Dashboard	Field data	بيانات حقيقية من Chrome	نعم
Vercel Speed Insights	Field data	CWV في Next.js	نعم (للحجم المحدود)

الفرق بين Lab Data وField Data

Lab Data (بيانات المختبر): قياسات في بيئة محكومة على جهازك. مفيدة للتطوير والتشخيص. Field Data (بيانات الميدان): قياسات حقيقية من مستخدمين حقيقيين عبر CrUX dataset. هذه هي البيانات التي تُستخدم في خوارزمية جوجل.

ركّز على Field Data في Search Console لمعرفة الوضع الحقيقي، و Lab Data في Lighthouse للتشخيص والإصلاح.

تحسين LCP: Largest Contentful Paint {#تحسين-lcp}

المسببات الأربعة لـ LCP البطيء وإصلاحاتها

1. صور غير محسّنة

الصور الكبيرة أو بصيغة غير مثالية هي السبب الأكثر شيوعاً لـ LCP بطيء.

الإصلاح:

حوّل جميع الصور إلى WebP أو AVIF
قلّص أبعاد الصور لأقصى عرض عرضها في الصفحة
استخدم loading="eager" وليس lazy loading لصورة LCP
أضف <link rel="preload" as="image"> لصورة الـ hero في <head>
استخدم CDN لتوزيع الصور جغرافياً

في Next.js، استخدم priority prop في next/image لصورة LCP: ``jsx <Image src="/hero.webp" priority alt="..." width={1200} height={600} /> ``

2. TTFB (Time to First Byte) بطيء

إذا كان الخادم يستغرق وقتاً طويلاً للاستجابة، سيتأخر كل شيء.

الإصلاح:

استخدم CDN (Cloudflare, Vercel Edge, AWS CloudFront)
فعّل HTTP caching headers على الملفات الثابتة
انقل إلى استضافة أقرب جغرافياً لجمهورك
استخدم ISR في Next.js لتقليل عمليات SSR

3. موارد حجب العرض (Render-blocking resources)

JavaScript وCSS في <head> يمنعان المتصفح من عرض الصفحة حتى تكتمل.

الإصلاح:

أضف defer أو async لجميع سكريبتات الطرف الثالث
استخدم Critical CSS inline للجزء الظاهر أولاً (above the fold)
راجع صفحة خدمات تصميم الويب لأمثلة التطبيق

4. Client-side rendering بطيء

إذا كان موقعك يعتمد كلياً على JavaScript لعرض المحتوى (CSR)، سيكون LCP بطيئاً.

الإصلاح:

انتقل إلى SSR أو SSG في Next.js
استخدم React Server Components لتحميل المحتوى مسبقاً

تحسين INP: Interaction to Next Paint {#تحسين-inp}

INP يقيس استجابة الموقع للتفاعلات. المشكلة الجذرية عادةً هي JavaScript الثقيل الذي يحجب الـ main thread.

أسباب INP العالي وإصلاحاتها

1. JavaScript bundles ضخمة

الإصلاح:

راجع bundle size بـ webpack-bundle-analyzer أو next/bundle-analyzer
استخدم dynamic imports لتحميل الكود عند الحاجة فقط
احذف المكتبات غير الضرورية واستبدلها بكود أخف
استخدم Tree shaking لاستبعاد الكود غير المستخدم

```typescript // بدلاً من: import _ from 'lodash';

// استخدم: import debounce from 'lodash/debounce'; ```

2. Event Handlers ثقيلة

الإصلاح:

استخدم debouncing وthrottling للـ event handlers المتكررة
نقل الحسابات الثقيلة إلى Web Workers
تجنب التحديثات المتزامنة الكثيرة في React (استخدم batching)

```typescript // مثال debouncing import { useMemo } from 'react'; import debounce from 'lodash/debounce';

const handleSearch = useMemo( () => debounce((value: string) => performSearch(value), 300), [] ); ```

3. سكريبتات الطرف الثالث

Google Analytics، Facebook Pixel، أدوات الدردشة — كلها تُضيف ضغطاً على الـ main thread.

الإصلاح:

استخدم type="module" وdefer لجميع سكريبتات الطرف الثالث
استخدم next/script مع strategy="lazyOnload" في Next.js
قيّم ضرورة كل سكريبت — كل أداة تُضيف وزناً حقيقياً

4. Long Tasks

أي مهمة تستغرق أكثر من 50ms في main thread تُعتبر Long Task وتُؤثر على INP.

الإصلاح:

استخدم Scheduler API أو scheduler.yield() لكسر المهام الطويلة
نقل الحسابات المعقدة إلى Web Workers
راقب Long Tasks في Chrome DevTools > Performance panel

تحسين CLS: Cumulative Layout Shift {#تحسين-cls}

CLS يحدث عندما يتحرك محتوى الصفحة أثناء التحميل بشكل غير متوقع. الأسباب الرئيسية معروفة وإصلاحاتها مباشرة.

أسباب CLS الشائعة وإصلاحاتها

1. الصور بدون أبعاد محددة

عندما يُحمَّل الصورة بدون width وheight محددين مسبقاً، يُعيد المتصفح ترتيب التخطيط عند ظهورها.

الإصلاح:

أضف width وheight لجميع الصور دائماً
في Next.js، next/image يُعالج هذا تلقائياً
استخدم aspect-ratio في CSS للحجم المحجوز مسبقاً

2. الإعلانات والمحتوى المُضاف ديناميكياً

الإعلانات التي تُضاف بعد التحميل تدفع المحتوى للأسفل.

الإصلاح:

احجز مساحة ثابتة لأماكن الإعلانات قبل تحميلها
استخدم min-height للحاويات التي تستقبل محتوى ديناميكياً

3. Web Fonts

تحميل الخطوط يُسبب FOUT (Flash of Unstyled Text) وFOIT (Flash of Invisible Text) اللذان يُضيفان إلى CLS.

الإصلاح:

استخدم font-display: optional لمنع التحولات المرئية
في Next.js، next/font يُحمّل الخطوط محلياً ويمنع FOUT تلقائياً
حدد fallback fonts بأبعاد مشابهة للخط الأصلي

4. المحتوى المُضاف بعد التفاعل

النوافذ المنبثقة، الإشعارات، البانرات التي تظهر فجأة.

الإصلاح:

أضف العناصر الجديدة في أسفل الصفحة أو خارج تدفق المستند
استخدم transform بدلاً من margin/top/left للتحريك
حجز مساحة مسبقة لعناصر تعلم أنها ستظهر

تحسين TTFB: Time to First Byte {#تحسين-ttfb}

TTFB هو الوقت من الطلب حتى استقبال أول بايت من الخادم. ليس مقياس CWV رسمي لكنه يُؤثر على LCP.

الجيد: أقل من 800ms
يحتاج تحسين: 800ms - 1800ms
سيئ: أكثر من 1800ms

تحسينات TTFB

استخدم Edge CDN لتقديم الصفحات من موقع جغرافي قريب من المستخدم
فعّل HTTP/2 أو HTTP/3 على خادمك
استخدم caching فعّال (Cache-Control headers)
في Next.js، استخدم ISR وSSG لتقديم HTML جاهز من CDN

جدول الأهداف والإصلاحات الشائعة {#جدول-الأهداف}

المقياس	الهدف	السبب الشائع	الإصلاح الأول
LCP	< 2.5s	صورة hero كبيرة	WebP + preload
INP	< 200ms	JavaScript ثقيل	Bundle splitting
CLS	< 0.1	صور بدون أبعاد	width/height في HTML
TTFB	< 800ms	خادم بعيد	CDN
FCP	< 1.8s	CSS حاجب	Critical CSS inline
TBT	< 200ms	Long Tasks	code splitting

استراتيجيات متقدمة للأداء {#استراتيجيات-متقدمة}

Speculative Loading

Chrome 108+ يدعم Speculation Rules API لتحميل الصفحات مسبقاً بناءً على سلوك المستخدم:

``json { "prefetch": [{ "source": "list", "urls": ["/ar/services", "/ar/contact"] }] } ``

Partial Prerendering (PPR) في Next.js

ميزة تجريبية في Next.js 14+ تُمكّن عرض أجزاء الصفحة الثابتة فوراً بينما تُحمَّل الأجزاء الديناميكية في الخلفية.

Image Format Optimization

AVIF يوفر 50% عن JPEG و20% عن WebP، لكن الدعم أقل. Next.js يُختار التنسيق المناسب تلقائياً بناءً على دعم المتصفح.

لمعرفة كيف نُطبّق هذه الاستراتيجيات في المواقع التي نبنيها، راجع صفحة المحفظة وخدمات تصميم الويب.

الأسئلة الشائعة {#أسئلة-شائعة}

هل Core Web Vitals تُؤثر على ترتيبي في جوجل مباشرة؟ نعم، Core Web Vitals جزء رسمي من خوارزمية ترتيب جوجل (Page Experience signal) منذ 2021. لكنها ليست العامل الوحيد — المحتوى والروابط والسلطة لا تزال الأهم. CWV تُميّز بين الصفحات المتقاربة في عوامل SEO الأخرى. تواصل مع فريقنا لتدقيق أداء موقعك.

ما الفرق بين Lighthouse score وField Data في Search Console؟ Lighthouse يقيس في بيئة محكومة على جهازك (Lab Data). Search Console يعرض Field Data من مستخدمين حقيقيين (CrUX). الفجوة بينهما شائعة — Lighthouse قد يعطي 95 بينما Field Data يُظهر مشاكل في أجهزة الجوال الضعيفة. الاثنان مُكمّلان لبعضهما.

كيف أُحسّن Core Web Vitals في Shopify؟ Shopify محدود في التحكم الكامل بالكود، لكن يمكنك: تحسين الصور (WebP)، تقليل التطبيقات/السكريبتات الإضافية، اختيار theme خفيف، وتفعيل Shopify's built-in CDN. للتحكم الكامل، يُوصى بـ Next.js Commerce. راجع خدمات التجارة الإلكترونية لدينا.

هل يكفي تحسين Lighthouse score لتحسين ترتيبي؟ Lighthouse score مؤشر للتطوير، ليس هدفاً نهائياً. المهم هو Field Data في Search Console (بيانات المستخدمين الحقيقيين). موقع بـ Lighthouse 90 قد يكون Field Data ضعيفاً بسبب سلوك المستخدمين. ركّز على إصلاح المشاكل التي تظهر في كليهما.

ما أسرع طريقة لتحسين LCP في موقع موجود؟ الخطوات بالترتيب: (1) حدّد عنصر LCP في PageSpeed Insights، (2) حوّل الصورة إلى WebP إذا لم تكن كذلك، (3) أضف preload لها في head، (4) تأكد من عدم استخدام lazy loading عليها. هذه الخطوات وحدها كثيراً ما تُحسّن LCP بـ 30-50%.

كيف أتعامل مع INP في مواقع المحتوى الكثيف بـ JavaScript؟ ابدأ بتحليل Long Tasks في Chrome DevTools > Performance. حدّد الـ event handlers التي تستغرق أكثر من 50ms. استخدم debouncing، code splitting، وWeb Workers للحسابات الثقيلة. في React/Next.js، استخدم Concurrent Features (Suspense, useTransition) لتحسين الاستجابة. فريقنا يُقدّم تدقيق أداء متخصصاً.

هل CLS يحدث فقط عند التحميل الأول؟ لا. CLS يُقاس على مدى دورة حياة الصفحة بأكملها. التحولات التي تحدث بعد التفاعل (مثل فتح قائمة أو تحميل مزيد من المحتوى) تُضاف إلى حساب CLS إذا لم يكن المستخدم قد تفاعل خلال 500ms السابقة. استخدم PerformanceObserver لرصد CLS في الوقت الفعلي.

هل HTTPS ضروري لتحسين Core Web Vitals؟ HTTPS ضروري لـ Page Experience بشكل عام (ليس CWV تحديداً). لكن HTTPS يُتيح HTTP/2 الذي يُحسّن TTFB وأداء الموارد بشكل ملحوظ. إذا كنت لا تزال على HTTP، الانتقال إلى HTTPS هو أولى الأولويات. راجع صفحة الباقات لخدمات الأداء الشاملة.

الخلاصة {#الخلاصة}

Core Web Vitals في 2026 تتمحور حول ثلاثة أهداف واضحة: LCP أقل من 2.5 ثانية عبر تحسين الصور وتقليل TTFB، وINP أقل من 200ms عبر تقليل JavaScript وتفتيت المهام الثقيلة، وCLS أقل من 0.1 عبر تحديد أبعاد العناصر وإدارة تحميل الخطوط والإعلانات.

الاستثمار في الأداء ليس رفاهية — إنه ضرورة تنافسية تُؤثر على ترتيب البحث ومعدل التحويل ورضا المستخدمين في آن واحد. ابدأ بـ PageSpeed Insights لتحديد أولويات الإصلاح، ثم تواصل مع فريقنا المتخصص لتطبيق متقدم. احصل على عرض مجاني ←

تحسين سرعة الموقع 2026: إصلاح LCP وINP وCLS خطوة بخطوة