SEO التقني 2024: Core Web Vitals و INP والمقاييس الجديدة من Google

// تقسيم المصفوفة إلى دفعات ومعالجتها دون حجب الـ main thread
function processLargeDataset(data, batchSize = 200) {
  return new Promise((resolve) => {
    const total = data.length;
    let index = 0;
    const results = [];

    function runBatch() {
      const end = Math.min(index + batchSize, total);
      for (let i = index; i < end; i++) {
        // ... منطق المعالجة الخاص بك
        results.push(transform(data[i]));
      }
      index = end;

      if (index < total) {
        // اترك للمتصفح فرصة قبل الدفعة التالية
        setTimeout(runBatch, 0);
      } else {
        resolve(results);
      }
    }

    runBatch();
  });
}

function transform(item) {
  // محاكاة لمعالجة
  return { id: item.id, value: item.value * 2 };
}

function debounce(fn, wait = 200) {
  let timeout;
  return function debounced(...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => fn.apply(this, args), wait);
  };
}

<!-- موارد حرجة -->
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>
<img src="/hero.jpg" fetchpriority="high" alt="Hero" />

<!-- Lazy loading لباقي المحتوى -->
<img src="/gallery/1.jpg" loading="lazy" alt="Gallery" />

let rafId;
function animate() {
  rafId = requestAnimationFrame(() => {
    element.style.transform = `translateX(${x}px)`;
    // تحديثات DOM خفيفة
    animate();
  });
}

// main thread
const worker = new Worker('/worker.js')
worker.postMessage({ payload: bigData })

worker.onmessage = (event) => {
  console.log('result', event.data)
}

const HeavyComponent = React.lazy(() => import('./HeavyComponent'))

import { onINP } from 'web-vitals'

onINP((metric) => {
  // أرسل القياس إلى منصة المراقبة
  console.log(metric)
})