تحسين سرعة المواقع الإلكترونية 2026 — كيفية تحقيق درجة 90+ في Core Web Vitals

> **ملخص رئيسي** مؤشرات Google Core Web Vitals في 2026: LCP (Largest Contentful Paint) < 2.5s، وINP (Interaction to Next Paint) < 200ms، وCLS (Cumulative Layout Shift) < 0.1. تؤثر هذه المقاييس الثلاثة مباشرة في ترتيب نتائج بحث Google. التحسينات الأعلى أثرا: ① تحويل الصور إلى WebP/AVIF ② التحميل المسبق للخطوط ③ تقسيم كود JavaScript ④ النشر عبر أطراف CDN. يمكن لمستخدمي Next.js الوصول إلى Lighthouse 90+ عند ضبط الإعدادات الافتراضية بشكل صحيح.

ما هي Core Web Vitals؟

Core Web Vitals هي مقاييس Google الثلاثة الأساسية لتجربة المستخدم، وقد أُدرجت كإشارات لترتيب SEO منذ عام 2021.

المقاييس الأساسية الثلاثة

| المقياس | الاسم الكامل | ما الذي يقيسه | جيد | يحتاج إلى تحسين | ضعيف |

|---|---|---|---|---|---|

| **LCP** | Largest Contentful Paint | الوقت اللازم لعرض أكبر صورة أو نص | < 2.5s | 2.5–4s | > 4s |

| **INP** | Interaction to Next Paint | الوقت من نقرة المستخدم حتى ظهور الاستجابة المرئية | < 200ms | 200–500ms | > 500ms |

| **CLS** | Cumulative Layout Shift | الحركة غير المتوقعة في التخطيط أثناء التحميل | < 0.1 | 0.1–0.25 | > 0.25 |

ملاحظة: تم استبدال FID (First Input Delay) بـ INP في عام 2024.

لماذا تهم Core Web Vitals؟

**تأثير مباشر على SEO**: تدخل ضمن خوارزمية ترتيب Google — عند تساوي المحتوى، يفوز الموقع الأسرع

**معدل الارتداد**: عندما يكون LCP > 3s يزيد معدل الارتداد على الجوال بنسبة 53% (بحث Google)

**إيرادات الإعلانات**: يرتبط AdSense RPM بمدة البقاء في الصفحة → موقع أسرع = RPM أعلى

**معدل التحويل**: تأخير ثانية واحدة = انخفاض التحويلات بنسبة 7% (بحث Akamai)

تحسين LCP

عادة ما يتحدد LCP بوقت تحميل صورة الهيرو أو أكبر كتلة نصية.

تحسين الصور (الأعلى أثرا)

**مقارنة الصيغ:**

| الصيغة | تقليل الحجم | دعم المتصفحات |

|---|---|---|

| JPEG | خط الأساس | 100% |

| WebP | أصغر بنسبة 25–35% | 98%+ |

| AVIF | أصغر بنسبة 40–50% | 90%+ (2026) |

```html

<picture>

<source srcset="hero.avif" type="image/avif">

<source srcset="hero.webp" type="image/webp">

<img src="hero.jpg" alt="Hero image" width="1200" height="628" loading="eager">

</picture>

```

**مكون Image في Next.js:**

```typescript

import Image from 'next/image'

// LCP images must have priority prop

<Image

src="/hero.jpg"

alt="Hero image"

width={1200}

height={628}

priority // critical — eliminates LCP delay

quality={85}

/>

```

التحميل المسبق للموارد

```html

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

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

```

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

| الطريقة | التأثير | التنفيذ |

|---|---|---|

| CDN | تخزين مؤقت عالمي على الأطراف | Cloudflare, Vercel Edge |

| ترويسات التخزين المؤقت | فوري للزوار العائدين | Cache-Control: max-age=31536000 |

| SSG/ISR | HTML مُولّد مسبقا | Next.js generateStaticParams |

تحسين INP

يقيس INP الوقت من أي تفاعل للمستخدم (نقرة، لمسة، لوحة مفاتيح) إلى أن يعرض المتصفح الإطار التالي.

تقليل حجب الخيط الرئيسي

```javascript

// Bad: heavy sync computation blocks click response

button.addEventListener('click', () => {

const result = heavyComputation(data) // blocks main thread

updateUI(result)

})

// Good: offload to Web Worker

const worker = new Worker('heavy-worker.js')

button.addEventListener('click', () => {

worker.postMessage(data) // runs in separate thread

})

worker.onmessage = (e) => updateUI(e.data)

```

تقسيم الكود (Next.js)

```typescript

import dynamic from 'next/dynamic'

// Defer components not visible on first load

const HeavyChart = dynamic(() => import('./HeavyChart'), {

loading: () => <div>Loading chart...</div>,

ssr: false

})

```

إزالة الكود غير المستخدم

```javascript

// Bad: imports entire lodash (70KB+)

import _ from 'lodash'

// Good: imports only what you need (1KB)

import chunk from 'lodash/chunk'

```

تحسين CLS

يحدث CLS عندما تغيّر الإعلانات أو الصور أو المحتوى الديناميكي مواضعها أثناء التحميل.

حدّد أبعاد الصور دائمًا

```html

<img src="photo.jpg" width="800" height="600" alt="photo">

<img src="photo.jpg" alt="photo">

```

حجز مساحة للإعلانات

```css

.ad-container {

min-height: 250px; /* pre-reserve ad space */

display: flex;

align-items: center;

justify-content: center;

}

```

تحميل الخطوط

```css

@font-face {

font-family: 'MyFont';

src: url('/fonts/myfont.woff2') format('woff2');

font-display: swap; /* show system font immediately, swap when loaded */

}

```

قائمة تحقق Lighthouse 90+ (30 عنصرًا)

**LCP (10 عناصر)**

[ ] تحديد عنصر LCP (DevTools → علامة تبويب Performance)

[ ] إضافة priority أو preload إلى صورة LCP

[ ] تحويل صورة hero إلى WebP/AVIF

[ ] استخدام next/image للتحسين التلقائي

[ ] توفير صور متجاوبة عبر srcset

[ ] استخدام CDN (Cloudflare Pages, Vercel Edge)

[ ] التحقق من أن TTFB < 600ms

[ ] استخدام SSG/ISR حيثما أمكن

[ ] إزالة عمليات إعادة التوجيه غير الضرورية

[ ] تأجيل جميع سكربتات الجهات الخارجية

**INP (10 عناصر)**

[ ] التحقق من درجة INP في Lighthouse

[ ] إزالة Long Tasks (50ms+) — علامة تبويب DevTools Performance

[ ] نقل العمليات الحسابية الثقيلة إلى Web Workers

[ ] حزمة JavaScript < 200KB (مضغوطة)

[ ] إزالة polyfills غير الضرورية

[ ] تطبيق useMemo/useCallback في React

[ ] تطبيق debounce/throttle على معالجات الأحداث

[ ] استخدام انتقالات CSS بدلًا من تحريكات JS

[ ] إضافة async/defer إلى وسوم سكربتات الجهات الخارجية

[ ] تحسين ترتيب تنفيذ JS لعنصر LCP

**CLS (10 عناصر)**

[ ] تعيين العرض/الارتفاع لكل الصور ومقاطع الفيديو

[ ] حجز حد أدنى للارتفاع لحاويات الإعلانات

[ ] وضع المحتوى المُدرج ديناميكيًا في الأسفل

[ ] تطبيق font-display: swap على قواعد @font-face

[ ] إضافة وسوم روابط التحميل المسبق للخطوط

[ ] تحريك transform/opacity فقط (دون خصائص تغيّر التخطيط)

[ ] استخدام محمّلات هيكلية لحجز مساحة المحتوى مسبقًا

[ ] التحقق من أن العناصر sticky/fixed لا تدفع المحتوى

[ ] الحفاظ على موضع التمرير أثناء إدراج محتوى التمرير اللانهائي

[ ] إصلاح ارتفاع حركة تبديل التبويبات باستخدام overflow: hidden

أدوات القياس

| الأداة | الغرض | URL |

|---|---|---|

| PageSpeed Insights | بيانات LCP/INP/CLS من مستخدمين حقيقيين | pagespeed.web.dev |

| Lighthouse | درجة أداء مبنية على اختبارات المختبر | Chrome DevTools → Lighthouse |

| WebPageTest | اختبار من مواقع عالمية | webpagetest.org |

| Chrome DevTools | تحليل تفصيلي للأداء | F12 → Performance tab |

| Core Web Vitals Report | بيانات CrUX الميدانية لتحسين SEO | Search Console |

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

**س1. ما مدى تأثير Core Web Vitals في ترتيب Google؟** ج. تصف Google مؤشرات CWV بأنها "إشارة كسر تعادل" — عندما تكون جودة المحتوى متساوية، يفوز الموقع الأسرع. تستخدم Mobile Page Experience مؤشرات CWV كمكوّن في الترتيب. الوزن الدقيق غير معلن، لكن الاختبارات الواقعية تُظهر باستمرار فروقًا في الترتيب بين المواقع ذات LCP > 4s وتلك ذات LCP < 2s.

**س2. هل الحصول على Lighthouse 90+ يعني اجتياز Core Web Vitals؟** ج. لا. يستخدم Lighthouse محاكاة مختبرية؛ أما Core Web Vitals فتستخدم بيانات مستخدمين حقيقيين (CrUX / Field Data). الحصول على درجة Lighthouse 100 مثالية لا يضمن نتائج CWV ميدانية جيدة. راجع تقرير Core Web Vitals في Google Search Console للاطلاع على البيانات التي تؤثر فعليًا في ترتيب SEO.

**س3. هل يوفّر Next.js أداءً جيدًا تلقائيًا؟** ج. جزئيًا. يوفّر Next.js تحسين الصور (next/image)، وتحسين الخطوط (next/font)، وتقسيم الكود، وSSG/ISR بشكل مدمج. مع ذلك، يجب على المطورين تنفيذ سمات الأولوية بشكل صحيح، وإزالة سكربتات الجهات الخارجية غير الضرورية، وتحديد أبعاد الصور. مع التنفيذ السليم، يمكن الوصول إلى Lighthouse 85–95+.

**س4. هل يقلّل التحويل إلى WebP من جودة الصورة؟** ج. عند quality=80–90، يكون الفرق غير ملحوظ للعين البشرية. يحقق WebP أحجام ملفات أصغر بنسبة 25–35% مقارنةً بـ JPEG عند الجودة البصرية نفسها. يوفّر AVIF ضغطًا أفضل أيضًا. تتولى أدوات مثل Squoosh أو Cloudinary أو next/image التحويل تلقائيًا.

**س5. كيف أعرف أي عنصر يسبب CLS؟** ج. في Chrome DevTools → Performance tab، ابحث عن علامات "Layout Shift" بعد التسجيل. يعرض PageSpeed Insights أيضًا بند "Avoid large layout shifts" مع العناصر المحددة التي تسبب الحركة. الأسباب الشائعة: الصور غير محددة الأبعاد، تحميل الإعلانات ودفعها للمحتوى، تبديل الخطوط (FOUT)، والمحتوى المُدرج ديناميكيًا.

**س6. إلى أي مدى تؤثر السكربتات الخارجية (GA، Hotjar) سلبا في الأداء؟** ج. بشكل كبير — يمكن للسكربتات الخارجية أن تخفض درجات Lighthouse بمقدار 10-20 نقطة. يعد GA4 خفيفا نسبيا مع التحميل غير المتزامن؛ أما الأدوات الثقيلة مثل Hotjar أو Intercom فقد تؤثر بشدة في INP. استخدم next/script مع strategy="afterInteractive" أو "lazyOnload" لتأجيل هذه السكربتات إلى ما بعد أن تصبح الصفحة الرئيسية تفاعلية.

**س7. يكون LCP على الهاتف أبطأ دائما من سطح المكتب — كيف أحسنه؟** ج. تمتلك الأجهزة المحمولة شبكات ومعالجات أبطأ، ما يجعل تحسين LCP على الهاتف أصعب بطبيعته. الحلول: ① توفير صورة hero أصغر عبر srcset للهاتف ② إخفاء الصور غير الضرورية على الهاتف ③ تضمين CSS الحرج مباشرة ④ تخزين HTML مؤقتا عند حافة CDN. الهدف: LCP < 2.5s حتى على الهاتف.