تحسين أداء الويب: مؤشرات الويب الأساسية وما بعدها

تحسين مؤشرات Core Web Vitals

حسّن مقاييس أداء موقعك لتجربة مستخدم أفضل وتحسين محركات البحث (SEO).

فهم المقاييس

• LCP (أكبر رسم محتوى): < 2.5 ثانية
• FID (تأخير أول إدخال): < 100 مللي ثانية
• CLS (إزاحة التخطيط التراكمية): < 0.1
• INP (التفاعل حتى الرسم التالي): < 200 مللي ثانية

تحسين LCP

<!-- Preload critical resources -->
<link rel="preload" href="/hero-image.webp" as="image">
<link rel="preload" href="/fonts/inter.woff2" as="font" crossorigin>

<!-- Optimize images -->
<img
    src="hero.webp"
    srcset="hero-400.webp 400w, hero-800.webp 800w"
    sizes="(max-width: 600px) 400px, 800px"
    loading="eager"
    fetchpriority="high"
>

منع CLS

/* Always set dimensions */
img, video {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
}

/* Reserve space for dynamic content */
.ad-container {
    min-height: 250px;
}

/* Use transform for animations */
.animate {
    transform: translateX(0);
    /* NOT: left: 0; */
}

تحسين INP

// Break up long tasks
function processLargeArray(items) {
    const chunk = items.splice(0, 100);
    chunk.forEach(process);

    if (items.length > 0) {
        requestIdleCallback(() => processLargeArray(items));
    }
}

// Use web workers for heavy computation
const worker = new Worker('heavy-task.js');
worker.postMessage(data);
worker.onmessage = (e) => updateUI(e.data);

تلميحات الموارد (Resource Hints)

<link rel="dns-prefetch" href="//api.example.com">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="prefetch" href="/next-page.html">

راقب مؤشرات Core Web Vitals باستخدام Lighthouse و Chrome DevTools.