מה זה Core Web Vitals ואיך לשפר אותם: המדריך המלא

אם אתה מפתח אתרים או בעל אתר, בטח שמעת על Core Web Vitals. במדריך הזה נסביר בדיוק מה זה, למה זה חשוב, ואיך לשפר את הציונים שלך.

מה זה Core Web Vitals?

Core Web Vitals הם 3 מדדים שמדד Google כדי להעריך את איכות החוויה של המשתמש באתר:

1. LCP (Largest Contentful Paint) - מהירות טעינת התוכן הראשי
2. FID (First Input Delay) - זמן תגובה לאינטראקציה הראשונה
3. CLS (Cumulative Layout Shift) - יציבות ויזואלית

למה זה חשוב? Google משתמש בזה כחלק מהאלגוריתם לדירוג אתרים. אתר עם Core Web Vitals טובים מדורג גבוה יותר.

מדדים חיים: איך זה נראה בפועל?

גרף מגמה (חי, פרוצדורלי)

נתון זהב (Before → After)

• LCP: 3.1s → 1.9s
• FID: 220ms → 80ms
• CLS: 0.32 → 0.08

אם אין JS (Fallback)

הגרף מתבסס על seed קבוע (core-web-vitals-trend) ולכן שומר יציבות ויזואלית בין טעינות, בלי להכביד על הביצועים.

LCP - Largest Contentful Paint

מה זה?

LCP מודד כמה זמן לוקח לטעון את האלמנט הגדול ביותר שמופיע על המסך.

הציון הטוב: מתחת ל-2.5 שניות
צריך שיפור: 2.5-4 שניות
גרוע: מעל 4 שניות

איך לשפר LCP?

1. אופטימיזציה של תמונות

התמונה הראשית היא לרוב ה-LCP element:

import Image from 'next/image';

<Image
  src="/hero.jpg"
  width={1200}
  height={630}
  alt="תיאור"
  priority // חשוב ל-LCP!
  loading="eager"
/>

טיפים:

• השתמש ב-WebP או AVIF
• Compress תמונות לפני העלאה
• השתמש ב-priority לתמונה הראשית

2. אופטימיזציה של CSS

CSS חוסם את ה-Rendering. אופטמז:

<!-- Preload CSS קריטי -->
<link rel="preload" href="/critical.css" as="style">

3. שיפור Server Response Time

TTFB (Time to First Byte) משפיע על LCP:

• השתמש ב-CDN
• אופטמז את השרת
• השתמש ב-Edge Functions

4. אופטימיזציה של Fonts

Fonts יכולים לעכב את ה-Rendering:

import { Heebo } from 'next/font/google';

const heebo = Heebo({
  subsets: ['hebrew'],
  display: 'swap', // חשוב!
  preload: true,
});

FID - First Input Delay

מה זה?

FID מודד כמה זמן לוקח לדפדפן להגיב לאינטראקציה הראשונה של המשתמש (לחיצה, הקלדה).

הציון הטוב: מתחת ל-100ms
צריך שיפור: 100-300ms
גרוע: מעל 300ms

איך לשפר FID?

1. הקטן את JavaScript

JavaScript כבד חוסם את ה-Main Thread:

# בדוק את גודל ה-Bundle
npm run build

טיפים:

• השתמש ב-Code Splitting
• הסר JavaScript מיותר
• Minify ו-Compress

2. Defer JavaScript לא קריטי

<script src="/non-critical.js" defer></script>

3. השתמש ב-Web Workers

לעיבוד כבד, העבר ל-Web Worker:

const worker = new Worker('/heavy-task.js');
worker.postMessage(data);

4. אופטימיזציה של Third-Party Scripts

Scripts של צד-שלישי (Analytics, Pixels) יכולים להאט:

<Script
  src="https://analytics.example.com/script.js"
  strategy="lazyOnload" // טעינה מאוחרת
/>

CLS - Cumulative Layout Shift

מה זה?

CLS מודד כמה האלמנטים באתר "קופצים" תוך כדי טעינה.

הציון הטוב: מתחת ל-0.1
צריך שיפור: 0.1-0.25
גרוע: מעל 0.25

איך לשפר CLS?

1. הגדר Dimensions לתמונות

<Image
  src="/image.jpg"
  width={1200}  // חשוב!
  height={630}  // חשוב!
  alt="תיאור"
/>

2. הימנע מ-Content Injection דינמי

אם אתה מוסיף תוכן דינמי, שמור מקום:

.ad-container {
  min-height: 250px; /* שמור מקום גם אם אין פרסומת */
}

3. אופטימיזציה של Fonts

Fonts יכולים לגרום ל-Layout Shift:

const font = Heebo({
  display: 'swap', // מונע FOIT
  preload: true,
});

4. הימנע מ-Animations שמזיזות אלמנטים

/* ❌ גרוע */
.element {
  transform: translateY(100px);
}

/* ✅ טוב */
.element {
  opacity: 0;
  transition: opacity 0.3s;
}

איך למדוד Core Web Vitals?

1. PageSpeed Insights

הכלי הכי פשוט - פשוט הכנס URL:

https://pagespeed.web.dev/

2. Chrome DevTools

1. פתח DevTools (F12)
2. לך ל-Lighthouse
3. בחר "Performance"
4. לחץ "Analyze page load"

3. Real User Monitoring

למדוד במשתמשים אמיתיים:

// Next.js עם Web Vitals
import { getCLS, getFID, getLCP } from 'web-vitals';

function sendToAnalytics(metric) {
  // שלח ל-Analytics
}

getCLS(sendToAnalytics);
getFID(sendToAnalytics);
getLCP(sendToAnalytics);

סיכום: תוכנית פעולה

שבוע 1: מדידה

1. ✅ מדוד את ה-Core Web Vitals הנוכחיים
2. ✅ זהה את הבעיות העיקריות
3. ✅ הגדר Real User Monitoring

שבוע 2-3: שיפורים

1. ✅ אופטמז תמונות (LCP)
2. ✅ הקטן JavaScript (FID)
3. ✅ תקן Layout Shifts (CLS)

שבוע 4: בדיקה

1. ✅ מדוד שוב
2. ✅ השווה תוצאות
3. ✅ המשך לשפר

התוצאה

אתר עם Core Web Vitals טובים:

• ✅ מדורג גבוה יותר בגוגל
• ✅ ממיר יותר (פחות נטישות)
• ✅ חוויית משתמש מעולה

רוצה עזרה בשיפור הביצועים? צור קשר ונעזור לך להגיע ל-100 ב-Lighthouse.