תארו לעצמכם: משתמש פותח חנות מקוונת, אבל תמונת ה-LCP של הבאנר הראשי נטענת תוך 2.5 שניות — ההמרה יורדת ב-53%. הסיבה השורשית היא גילוי מאוחר של משאבים על ידי הדפדפן. ככל שגופן או תמונה נמצאים עמוק יותר ב-DOM, כך הדפדפן מוצא אותם מאוחר יותר ומתחיל לטעון אותם. זה קריטי במיוחד עבור אפליקציות SPA ואפליקציות React עם רכיבים נטענים באופן דינמי. הפתרון הוא Resource Hints: preload, preconnect ו-prefetch. הם נותנים לדפדפן הוראות מה לטעון קודם. במשך למעלה מ-5 שנות עבודה, יישמנו טכניקות אלו בעשרות פרויקטים — בכל פעם Core Web Vitals השתפרו ב-200–800 אלפיות השנייה ללא שינוי בארכיטקטורה. לדוגמה, הגדרת preconnect ל-Google Fonts ול-CDN קיצצה את ה-TTFB ב-300–400 אלפיות השנייה, וטעינה מוקדמת של תמונת ה-LCP הפחיתה את ה-LCP פי 1.7. בפרויקט אחד, זה חסך 11,000–16,000 דולר בשנה בעלויות שרת.
אילו בעיות Resource Hints פותרים
- עומס חיבור — כל דומיין חדש דורש DNS, TCP ו-TLS. Preconnect מבטל את העיכוב הזה על ידי יצירת החיבור לפני גילוי המשאב.
- גילוי מאוחר — אם משאב קריטי כלול בסוף ה-HTML, הדפדפן מתחיל לטעון אותו מאוחר. Preload מאלץ טעינה מוקדמת.
- טעינת N+1 — במהלך ניווט, prefetch טוען מראש סקריפטים וסגנונות לעמוד הבא, ומפחית את זמן ההמתנה.
שלוש הוראות ותכליתן
| הוראה | מתי להשתמש | מה היא עושה |
|---|---|---|
preconnect |
מוקדם ככל האפשר | DNS + TCP + TLS לדומיין |
preload |
עמוד נוכחי | טעינת משאב בעדיפות גבוהה |
prefetch |
עמוד הבא | טעינה ברקע בעדיפות נמוכה |
למה Preload קריטי עבור LCP?
תמונת ה-LCP היא המועמדת הראשית ל-preload. בלעדיו, הדפדפן מוריד HTML, מנתח אותו, מוצא את התמונה, ורק אז מתחיל לטעון אותה. עם preload, הטעינה מתחילה במקביל לניתוח. בפרויקטים שלנו, יישום preload עבור אלמנט ה-LCP חוסך 500–800 אלפיות השנייה במכשירים ניידים. בדיקה ב-WebPageTest הראתה: טעינה מוקדמת של תמונת ה-LCP משפרת את ה-LCP פי 1.7 בהשוואה ללא הוראות. זה משפיע ישירות על מדדי התנהגות והכנסות.
איך אנו מגדירים Resource Hints
התהליך מתחיל באודיט: אנו מזהים משאבים קריטיים דרך Chrome DevTools (Network → Priority). לאחר מכן:
- מנתחים דומיינים של צד שלישי — מזהים בקשות HTTP (גופנים, אנליטיקה, CDN). עבור כל אחד, מחליטים: preconnect או dns-prefetch.
- מזהים LCP ובלוקים קריטיים — מוצאים את האלמנט עם השטח הנראה הגדול ביותר, מגדירים preload עם
as="image". עבור תמונות רספונסיביות, מוסיפיםimagesrcsetו-imagesizes. - מגדירים prefetch לתרחישים מרכזיים — תשלום, התחברות, עמודי קטלוג. משתמשים ב-prefetch דינמי בעת ריחוף.
- מיישמים את Speculation Rules API — עבור משתמשי Chrome, מוסיפים prerender לעמודים עם הסתברות מעבר גבוהה.
- מוודאים דרך Lighthouse — שהפער של 200+ אלפיות השנייה ב-LCP נסגר.
Preconnect — ביטול עומס החיבור
<head>
<!-- Критичные сторонние домены — устанавливаем соединение заранее -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://cdn.example.ru" crossorigin>
<!-- API сервер если он на другом домене -->
<link rel="preconnect" href="https://api.example.ru">
<!-- dns-prefetch: только DNS, без TCP (для менее критичных) -->
<link rel="dns-prefetch" href="https://analytics.google.com">
<link rel="dns-prefetch" href="https://mc.yandex.ru">
</head><head> <!-- Критичные сторонние домены — устанавливаем соединение заранее --> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://cdn.example.ru" crossorigin> <!-- API сервер если он на другом домене --> <link rel="preconnect" href="https://api.example.ru"> <!-- dns-prefetch: только DNS, без TCP (для менее критичных) --> <link rel="dns-prefetch" href="https://analytics.google.com"> <link rel="dns-prefetch" href="https://mc.yandex.ru"> </head> נדרש עבור משאבים עם CORS (גופנים, JSON API).
Preload — טעינה בעדיפות של משאבי העמוד הנוכחי
<head>
<!-- LCP-изображение — самый важный preload -->
<link rel="preload" as="image" href="/images/hero.webp" imagesrcset="/images/hero-640.webp 640w, /images/hero-1280.webp 1280w" imagesizes="100vw">
<!-- Кастомный шрифт -->
<link rel="preload" as="font" type="font/woff2" href="/fonts/inter-regular.woff2" crossorigin>
<!-- Критичный JS-модуль (не defer/async) -->
<link rel="preload" as="script" href="/js/checkout.js">
<!-- CSS (если не в <head> напрямую) -->
<link rel="preload" as="style" href="/css/above-fold.css" onload="this.onload=null;this.rel='stylesheet'">
</head>סוגי משאבים: crossorigin, <head> <!-- LCP-изображение — самый важный preload --> <link rel="preload" as="image" href="/images/hero.webp" imagesrcset="/images/hero-640.webp 640w, /images/hero-1280.webp 1280w" imagesizes="100vw"> <!-- Кастомный шрифт --> <link rel="preload" as="font" type="font/woff2" href="/fonts/inter-regular.woff2" crossorigin> <!-- Критичный JS-модуль (не defer/async) --> <link rel="preload" as="script" href="/js/checkout.js"> <!-- CSS (если не в <head> напрямую) --> <link rel="preload" as="style" href="/css/above-fold.css" onload="this.onload=null;this.rel='stylesheet'"> </head> , image, script, style, font, fetch, document, track.
Prefetch — טעינה מוקדמת של העמוד הבא
<!-- На странице корзины — prefetch страницы оформления заказа -->
<link rel="prefetch" href="/checkout">
<link rel="prefetch" as="script" href="/js/checkout.chunk.js">
<link rel="prefetch" as="style" href="/css/checkout.css">הדפדפן טוען משאבים שנטענו מראש ברקע בעדיפות נמוכה — רק לאחר שהמשאבים העיקריים נטענו.
איך Speculation Rules API משפר את ה-Prefetch?
Prefetch טוען משאבים ברקע — אם המשתמש לא מנווט, רוחב הפס מתבזבז. Speculation Rules API מאפשר prerender מלא של עמוד או הגדרת audio. זה מספק ניווט מיידי ללא בזבוז רוחב פס.
<script type="speculationrules">
{
"prerender": [
{
"where": {
"and": [
{ "href_matches": "/products/*" },
{ "not": { "href_matches": "/api/*" } }
]
},
"eagerness": "moderate"
}
],
"prefetch": [
{
"urls": ["/checkout", "/cart"],
"eagerness": "eager"
}
]
}
</script>ערכי eagerness: video, <!-- На странице корзины — prefetch страницы оформления заказа --> <link rel="prefetch" href="/checkout"> <link rel="prefetch" as="script" href="/js/checkout.chunk.js"> <link rel="prefetch" as="style" href="/css/checkout.css"> , eagerness, <script type="speculationrules"> { "prerender": [ { "where": { "and": [ { "href_matches": "/products/*" }, { "not": { "href_matches": "/api/*" } } ] }, "eagerness": "moderate" } ], "prefetch": [ { "urls": ["/checkout", "/cart"], "eagerness": "eager" } ] } </script> .
Early Hints (103)
השרת שולח כותרות preload לפני שהתגובה הראשית נוצרת — בזמן שהשרת מייצר HTML, הדפדפן כבר מתחיל לטעון משאבים. זה חוסך 100–200 אלפיות השנייה ב-TTFB.
# Nginx с модулем http_v2_module
location / {
http2_push /css/app.css;
http2_push /js/app.js;
http2_push /fonts/inter.woff2;
}טעויות נפוצות וכיצד להימנע מהן
| טעות | פתרון |
|---|---|
| Preload למשאב שאינו בשימוש | בדקו שהמשאב באמת קריטי דרך Coverage ב-DevTools |
| Preload לגופן ללא crossorigin | תמיד הוסיפו eagerness לגופנים |
| יותר מדי הוראות preload | הגבילו ל-2–3 הוראות לעמוד |
| Preload + טעינה עצלה | השתמשו ב-preload רק עבור LCP; השאר — טעינה עצלה |
מה כלול בהגדרת Resource Hints?
- אודיט של פרופיל הטעינה הנוכחי (Lighthouse, WebPageTest).
- הצבת preconnect לדומיינים קריטיים של צד שלישי.
- Preload לתמונת LCP וגופנים קריטיים.
- Prefetch לעמודים עם שיעורי מעבר גבוהים.
- שילוב Speculation Rules API (Chrome).
- תיעוד ההוראות שיושמו והמלצות תחזוקה.
- הבטחה ש-Core Web Vitals לא יתדרדרו לאחר השחרור.
לוח זמנים ועלות
לוח זמנים: בין 4 ל-16 שעות בהתאם לגודל הפרויקט ומספר העמודים. העלות המדויקת מחושבת באופן אישי — צרו קשר להערכה. הזמינו אודיט טעינה: המהנדסים שלנו עם ניסיון של 5+ שנים יעזרו להאיץ את האתר שלכם. אנו מבטיחים שיפור ב-LCP וב-FCP של 200–800 אלפיות השנייה.