تحسين Core Web Vitals: الدليل العملي

ما هي Core Web Vitals ولماذا تهمك؟

في مايو 2021، بدأ Google في استخدام Core Web Vitals كعامل في ترتيب نتائج البحث. الموقع السريع يحتل مرتبة أعلى. ليس فقط لأسباب SEO — بل لأن تجربة المستخدم الأفضل تعني معدل تحويل أعلى.

Core Web Vitals ثلاثة مقاييس رئيسية:

• LCP (Largest Contentful Paint) — وقت ظهور أكبر عنصر في الصفحة
• INP (Interaction to Next Paint) — استجابة الموقع للتفاعل
• CLS (Cumulative Layout Shift) — مدى ثبات الصفحة عند التحميل

قياس Core Web Vitals

# أدوات القياس المجانية:
# 1. Google PageSpeed Insights: pagespeed.web.dev
# 2. Chrome DevTools → Lighthouse
# 3. Search Console → Core Web Vitals report
# 4. web-vitals npm package (قياس حقيقي من المستخدمين)

// قياس Core Web Vitals في كودك
import { onLCP, onINP, onCLS } from 'web-vitals';

onLCP(({ value, rating }) => {
 console.log(`LCP: ${value}ms — ${rating}`);
 // إرسال للـ analytics
 gtag('event', 'web_vitals', {
 event_category: 'Web Vitals',
 event_label: 'LCP',
 value: Math.round(value),
 non_interaction: true,
 });
});

onINP(({ value }) => console.log(`INP: ${value}ms`));
onCLS(({ value }) => console.log(`CLS: ${value}`));

الهدف المطلوب

المقياس	ممتاز	يحتاج تحسين	ضعيف
LCP	< 2.5s	2.5s - 4s	> 4s
INP	< 200ms	200ms - 500ms	> 500ms
CLS	< 0.1	0.1 - 0.25	> 0.25

تحسين LCP (Largest Contentful Paint)

LCP يقيس متى يظهر أكبر عنصر مرئي في الصفحة — غالباً هو صورة الـ hero أو عنوان رئيسي.

1. تحسين صورة الـ Hero

<!-- الخطأ الأكثر شيوعاً -->
<img src="hero.jpg" loading="lazy" alt="hero">

<!-- الصواب: صورة الـ hero لا تحتاج lazy loading -->
<img
 src="hero.webp"
 fetchpriority="high"
 loading="eager"
 decoding="async"
 width="1200"
 height="600"
 alt="hero"
>

<!-- Preload لصورة الـ Hero في head -->
<link
 rel="preload"
 as="image"
 href="https://cloud.net.sa/images/hero.webp"
 imagesrcset="/images/hero-400.webp 400w, /images/hero-800.webp 800w"
 imagesizes="100vw"
>

2. تقليل Time to First Byte (TTFB)

# nginx: تفعيل HTTP/2
listen 443 ssl http2;

# تفعيل compression
gzip on;
gzip_comp_level 5;
gzip_types text/html text/css application/javascript application/json;

# Server Push للـ critical resources
http2_push /css/critical.css;
http2_push /fonts/noto-kufi.woff2;

// Laravel: Cache الصفحات الثابتة
// تقليل TTFB من 300ms إلى أقل من 50ms
Route::get('/', function {
 return Cache::remember('page:home', 3600, function {
 return Inertia::render('Home', HomeController::getData);
 });
});

3. Critical CSS

# استخراج الـ CSS الضروري لـ above-the-fold
npm install -g critical

critical index.html --inline --minify > output.html

<!-- تضمين Critical CSS في head بدلاً من تحميله -->
<style>
/* Critical CSS هنا - محتوى ما يظهر فوراً */
.hero { ... }
.header { ... }
</style>

<!-- باقي CSS يُحمّل بشكل غير متزامن -->
<link rel="preload" href="https://cloud.net.sa/css/app.css" as="style" onload="this.onload=null;this.rel='stylesheet'">

تحسين INP (Interaction to Next Paint)

INP يقيس مدى سرعة استجابة الصفحة عند النقر أو الكتابة.

1. تجنب Main Thread Blocking

// خطأ: حساب ثقيل على Main Thread
button.addEventListener('click', => {
 const result = heavyCalculation; // يُعطّل واجهة المستخدم
 updateUI(result);
});

// صواب: نقل العمل الثقيل لـ Web Worker
const worker = new Worker('/workers/calculator.js');
button.addEventListener('click', => {
 worker.postMessage({ type: 'calculate', data: inputData });
});
worker.onmessage = ({ data }) => updateUI(data.result);

2. تقليل JavaScript Bundle Size

# تحليل حجم bundle
npm run build -- --report

# أو
npx webpack-bundle-analyzer dist/stats.json

// Code splitting في React
const HeavyComponent = React.lazy( => import('./HeavyComponent'));

// Dynamic import
const { Chart } = await import('./chart-library');

3. تأجيل تنفيذ الكود غير الضروري

<!-- تحميل Scripts بشكل غير متزامن -->
<script src="analytics.js" defer></script>
<script src="chat-widget.js" defer></script>

<!-- Critical scripts فقط تُحمل بشكل sync -->
<script src="critical.js"></script>

تحسين CLS (Cumulative Layout Shift)

CLS يقيس مقدار انزياح العناصر أثناء تحميل الصفحة.

1. تحديد أبعاد الصور دائماً

<!-- خطأ: الصورة تسبب layout shift عند التحميل -->
<img src="product.jpg" alt="...">

<!-- صواب: تحديد الأبعاد يحجز المساحة مسبقاً -->
<img src="product.webp" width="800" height="600" alt="...">

<!-- أو باستخدام aspect-ratio في CSS -->
<style>
.product-image {
 aspect-ratio: 4 / 3;
 width: 100%;
}
</style>

2. تحميل الخطوط بشكل صحيح

<!-- Preload الخطوط الأساسية -->
<link rel="preload" href="https://cloud.net.sa/fonts/noto-kufi-arabic.woff2" as="font" type="font/woff2" crossorigin>

/* font-display: optional يمنع CLS من الخطوط */
@font-face {
 font-family: 'Noto Kufi Arabic';
 src: url('/fonts/noto-kufi-arabic.woff2') format('woff2');
 font-display: optional;
 font-weight: 400;
}

3. تثبيت الإعلانات والمحتوى المحمّل

/* احجز مساحة للمحتوى الذي سيُحمّل لاحقاً */
.ad-container {
 min-height: 250px;
 width: 100%;
}

.skeleton-card {
 height: 200px;
 background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
 background-size: 200% 100%;
 animation: loading 1.5s infinite;
}

خطة عمل مرتبة حسب الأثر

الخطوة	الجهد	الأثر على Core Web Vitals
تحديد أبعاد الصور	ساعة	CLS يختفي تقريباً
تحسين صورة الـ Hero	ساعتان	LCP -1s أو أكثر
preload للخطوط	30 دقيقة	LCP + CLS
Lazy loading	ساعة	LCP + performance
Code splitting	يوم	INP بشكل ملحوظ
Redis cache	يوم	LCP -0.5s+

مع سيرفرات كلاود

سيرفرات كلاود (cloud.net.sa) في الرياض وجدة تحقق TTFB أقل من 50ms للمستخدمين في السعودية. هذا وحده يحسن LCP بفارق كبير. مع تطبيق باقي التحسينات، حصول على LCP < 2s داخل السعودية هدف قابل للتحقيق.

خلاصة

Core Web Vitals ليست أرقاماً تقنية جافة — هي ترجمة رقمية لتجربة المستخدم. حسّن LCP وCLS أولاً (أسهل وأكثر تأثيراً)، ثم انتقل لـ INP. كل تحسين ينعكس مباشرة على ترتيب الموقع وعلى معدل تحويل الزوار إلى عملاء.

---

ابدأ الآن

تبي تجرب بنفسك؟ اختر باقة الاستضافة المناسبة أو صمم سيرفرك الخاص بالمواصفات اللي تبيها.