كيفية تحسين Core Web Vitals: دليل تحسين LCP و FID و CLS

مقدمة

مؤشرات الويب الأساسية هي مقاييس Google لقياس تجربة المستخدم. تؤثر مباشرة على ترتيب البحث والأهم من ذلك، رضا المستخدم. بعد تحسين عشرات المواقع الإنتاجية، طورت نهجاً منهجياً لكل مقياس.

فهم المقاييس

أكبر رسم للمحتوى (LCP)

LCP يقيس المدة التي يستغرقها أكبر عنصر محتوى ليصبح مرئياً. الهدف: أقل من 2.5 ثانية.

تأخير الإدخال الأول (FID) / التفاعل للرسم التالي (INP)

FID يقيس الاستجابة للتفاعل الأول. INP (يحل محل FID في 2024) يقيس جميع التفاعلات. الهدف: أقل من 100ms.

إزاحة التخطيط التراكمية (CLS)

CLS يقيس الاستقرار البصري. الهدف: أقل من 0.1.

تقنيات تحسين LCP

1. تحسين الموارد الحرجة

<!-- التحميل المسبق لصورة LCP -->
<link rel="preload" as="image" href="/hero-image.webp" fetchpriority="high">

<!-- الاتصال المسبق بالأصول الحرجة -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://cdn.example.com" crossorigin>

2. الصور المتجاوبة بالتنسيقات الحديثة

function HeroImage() {
  return (
    <picture>
      <source type="image/avif" srcSet="/hero-400.avif 400w, /hero-800.avif 800w" />
      <source type="image/webp" srcSet="/hero-400.webp 400w, /hero-800.webp 800w" />
      <img
        src="/hero-800.jpg"
        alt="صورة البطل"
        width={1600}
        height={900}
        loading="eager"
        fetchpriority="high"
      />
    </picture>
  );
}

3. تحسين تحميل الخطوط

@font-face {
  font-family: 'Custom Font';
  src: url('/font.woff2') format('woff2');
  font-display: swap;
  /* ضبط هذه لتطابق خط الاحتياط */
  ascent-override: 90%;
  descent-override: 20%;
}

تقنيات تحسين CLS

1. حجز مساحة للمحتوى الديناميكي

// دائماً حدد الأبعاد للصور
function ProductImage({ product }) {
  return (
    <div className="aspect-[4/3] relative bg-gray-100">
      <img
        src={product.image}
        alt={product.name}
        width={400}
        height={300}
        className="absolute inset-0 w-full h-full object-cover"
        loading="lazy"
      />
    </div>
  );
}

2. المحتوى الديناميكي المستقر

// ✅ جيد: الهيكل العظمي يحافظ على التخطيط
function ProductList() {
  const { products, isLoading } = useProducts();
  
  if (isLoading) {
    return (
      <Grid>
        {Array.from({ length: 12 }).map((_, i) => (
          <ProductSkeleton key={i} />
        ))}
      </Grid>
    );
  }
  
  return <Grid>{products.map(p => <Product key={p.id} product={p} />)}</Grid>;
}

تحسين INP/FID

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

// ✅ جيد: التنازل للخيط الرئيسي بشكل دوري
async function processLargeDataset(data: DataItem[]) {
  const results = [];
  const CHUNK_SIZE = 100;
  
  for (let i = 0; i < data.length; i += CHUNK_SIZE) {
    const chunk = data.slice(i, i + CHUNK_SIZE);
    results.push(...chunk.map(expensiveTransform));
    
    // التنازل للخيط الرئيسي
    await new Promise(resolve => setTimeout(resolve, 0));
  }
  
  return results;
}

2. استخدام Web Workers للحوسبة الثقيلة

// worker.ts
self.onmessage = (event) => {
  const results = event.data.map(expensiveTransform);
  self.postMessage(results);
};

// main.ts
const worker = new Worker(new URL('./worker.ts', import.meta.url));

القياس والمراقبة

import('web-vitals').then(({ onLCP, onFID, onCLS, onINP }) => {
  const sendToAnalytics = (metric) => {
    fetch('/api/analytics/vitals', {
      method: 'POST',
      body: JSON.stringify({
        name: metric.name,
        value: metric.value,
        rating: metric.rating,
      }),
      keepalive: true,
    });
  };

  onLCP(sendToAnalytics);
  onFID(sendToAnalytics);
  onCLS(sendToAnalytics);
  onINP(sendToAnalytics);
});

الخلاصة

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

1. LCP: تحسين مسار التصيير الحرج، التحميل المسبق للموارد
2. CLS: حجز مساحة للمحتوى الديناميكي، تحسين تحميل الخطوط
3. INP/FID: تقسيم المهام الطويلة، استخدام Web Workers
4. المراقبة: تنفيذ RUM لتتبع الأداء الفعلي

ركز على النسبة المئوية 75 من مستخدميك - هذا ما يقيسه Google للترتيب.