תארו לעצמכם: האתר שלכם נטען תוך 5 שניות, אבל LCP הוא 4.5 שניות. גוגל כבר מסמנת את הדף כאיטי, והתנועה יורדת ב-20%. נתקלנו בזה עשרות פעמים: האשם אינו האחסון אלא אלמנט גיבור לא מותאם, TTFB איטי, או CSS שחוסם רינדור. הצוות שלנו ייעל את Core Web Vitals ביותר מ-200 פרויקטים עם ניסיון של 7+ שנים, והשיג מדדים ירוקים על כל טכנולוגיה. במאמר זה, אנו מפרקים כיצד לשפר LCP, INP ו-CLS באמצעות טכניקות מודרניות. תלמדו אילו כלים עוקבים אחר התקדמות וכמה זמן לוקח ייעול טיפוסי. אין שרביטי קסם—רק קונפיגורציית שרת מדויקת, טעינות מוקדמות וייעול גופנים. כל שנייה של עיכוב מפחיתה המרות ב-7%, וייעול Core Web Vitals יכול להעלות אותן ב-10–15%. מהירות ועמידה ב-Google Page Experience הם חובה לתחרותיות.
שלושה מדדים וערכי יעד
| מדד | טוב | דורש שיפור | גרוע |
|---|---|---|---|
| LCP (Largest Contentful Paint) | ≤ 2.5 שניות | 2.5–4.0 שניות | > 4.0 שניות |
| INP (Interaction to Next Paint) | ≤ 200 אלפיות השנייה | 200–500 אלפיות השנייה | > 500 אלפיות השנייה |
| CLS (Cumulative Layout Shift) | ≤ 0.1 | 0.1–0.25 | > 0.25 |
INP החליף את FID. FID מדד רק את האינטראקציה הראשונה; INP מודד את כל האינטראקציות. פרטים נוספים בתיעוד MDN.
אסטרטגיית ייעול Core Web Vitals
מתי כדאי לשקול ייעול?
אם לפחות מדד אחד נופל לאזור האדום, אתם מאבדים עד 20% מהתנועה. מדדים ירוקים נותנים יתרון בדירוג. זה חשוב במיוחד למסחר אלקטרוני: כל שנייה של עיכוב מפחיתה המרות ב-7%. מחקר של גוגל מראה ש-53% ממשתמשי הנייד עוזבים אם הטעינה אורכת יותר מ-3 שניות.
למה LCP הוא המדד המרכזי?
LCP הוא הרגע שבו האלמנט הגדול ביותר (בדרך כלל תמונת גיבור או H1) מופיע על המסך. הסיבות העיקריות: חוסר בטעינה מוקדמת, TTFB איטי, CSS/JS שחוסם רינדור, ותמונות לא מותאמות. טעינה מוקדמת של תמונת LCP יעילה פי 2 מאשר פשוט לייעל תמונות.
<link rel="preload" as="image" href="/images/hero.webp" imagesrcset="/images/hero-400.webp 400w, /images/hero-800.webp 800w, /images/hero-1200.webp 1200w" imagesizes="100vw">
<img src="/images/hero.webp" fetchpriority="high" loading="eager" width="1200" height="630" alt="Core Web Vitals: оптимизация LCP">
איך INP משפיע על חוויית המשתמש?
INP מודד את העיכוב בין פעולת משתמש לציור הבא. INP גרוע מצביע על חוט ראשי עמוס. טכניקות:
async function processLargeList(items) {
for (let i = 0; i < items.length; i++) {
processItem(items[i]);
if (i % 50 === 0) {
await new Promise(r => setTimeout(r, 0));
}
}
}
import { startTransition } from 'react';
function handleSearch(query) {
setInputValue(query);
startTransition(() => {
setSearchResults(filterResults(query));
});
}CLS: יציבות פריסה ללא הפתעות
CLS הוא סכום השינויים בפריסה במהלך הטעינה. כל שינוי מרגיז משתמשים ומפחית המרות. פתרונות:
<img src="photo.webp" width="800" height="600" alt="стабильность макета">
<style>
.hero-image {
aspect-ratio: 16 / 9;
width: 100%;
}
</style>@font-face { font-family: 'Inter'; font-display: optional; src: url('/fonts/inter.woff2') format('woff2'); } כלי מדידה וניטור
| כלי | סוג נתונים | מטרה |
|---|---|---|
| PageSpeed Insights | מעבדה | בדיקה מהירה |
| Lighthouse (DevTools) | מעבדה | ביקורת מפורטת |
| CrUX (Search Console) | שטח | משתמשים אמיתיים |
| web-vitals npm | שטח | איסוף לאנליטיקה |
import { onCLS, onINP, onLCP, onFCP, onTTFB } from 'web-vitals';
function sendToAnalytics({ name, value, rating, id }) {
gtag('event', name, {
event_category: 'Web Vitals',
event_label: id,
value: Math.round(name === 'CLS' ? value * 1000 : value),
non_interaction: true,
custom_map: { metric_rating: rating }
});
}
onCLS(sendToAnalytics);
onINP(sendToAnalytics);
onLCP(sendToAnalytics);
onFCP(sendToAnalytics);
onTTFB(sendToAnalytics);
איך אנחנו מייעלים Core Web Vitals: תוכנית שלב אחר שלב
- ביקורת על כל הדפים דרך PageSpeed Insights, CrUX ו-Lighthouse.
- זיהוי ניצחונות מהירים (טעינה מוקדמת, גדלים, גופנים) ובעיות עמוקות (ייעול JS, עיכובי שרת).
- יישום שינויים לפי עדיפות השפעה על ייצוב LCP, INP ו-CLS.
- ניטור בזמן אמת לאחר הפריסה.
- תיעוד תוצאות והמלצות.
מה כלול בעבודה
- ביקורת Core Web Vitals מלאה עם דוח לכל דף.
- הסרת משאבים חוסמים, ייעול תמונות וגופנים.
- קונפיגורציית מטמון שרת ו-CDN אם נדרש.
- ייעול JavaScript (פיצול משימות ארוכות, טעינה עצלה).
- מתן קוד מוכן עם הערות לצוות שלכם.
- ניטור מדדים למשך 3 חודשים והתאמות.
תהליך העבודה
- ביקורת: ניתוח כל הדפים, זיהוי צווארי בקבוק.
- יישום: ביצוע שינויי קוד, קונפיגורציית מטמון שרת.
- ניטור: מעקב דרך CrUX ו-web-vitals לאחר הפריסה.
- אחריות: תיעוד ותמיכה במדדים ירוקים למשך 3 חודשים.
לוח זמנים ועלות
ייעול Core Web Vitals טיפוסי אורך 2 עד 4 שבועות. העלות מחושבת באופן אישי לאחר הביקורת, בדרך כלל נעה בין $500 ל-$2000. הייעול המפתח שלנו כולל ביקורת ראשונית. כתבו לנו: נעריך את הפרויקט שלכם ונספק תוכנית מפורטת.
הזמינו ביקורת Core Web Vitals כדי לקבל תוכנית ייעול מדויקת ולוח זמנים. קבלו ייעוץ מהמהנדס שלנו על המדדים שלכם.