Resource Hints: preload, prefetch, preconnect – האצת טעינה

למה Resource Hints?

מדי שנה דרישות מהירות הטעינה גדלות: Core Web Vitals הפכו לגורם דירוג. Resource Hints הם אחד הכלים היעילים ביותר להפחתת LCP ו-TTFB ללא שינוי הארכיטקטורה. עם זאת, שימוש לא נכון ב-preload או preconnect יכול לפגוע בביצועים — משאבים נטענים בעדיפות שגויה או מוכפלים. בואו נבחן כיצד להשתמש נכון ב-dns-prefetch, preconnect, preload ו-prefetch, ונראה מקרה אמיתי.

בפרויקט אחד עם קטלוג של 10,000 מוצרים, הפחתנו את LCP מ-3.2 שניות ל-2.1 שניות על ידי שילוב של preconnect ל-CDN ו-preload לתמונת LCP — חיסכון של 1.1 שניות במובייל. היישום ארך 6 שעות: הביקורת גילתה חוסר preconnect לפונטים ו-crossorigin שגוי ב-preload. החיסכון בזמן הטעינה הגיע עד 40%.

כיצד פועלות הוראות Resource Hints

• dns-prefetch — פותר DNS לדומיין. עלות מינימלית, חוסך 20–120 אלפיות השנייה.
• preconnect — DNS + TCP + TLS. חוסך 100–500 אלפיות השנייה, אך יקר יותר. רק עבור דומיינים חיצוניים שדרושים במדויק.
• preload — נטען בעדיפות גבוהה. קריטי לתמונת LCP, פונט ראשי, CSS קריטי.
• prefetch — נטען בעדיפות נמוכה לעמוד הבא. בשימוש בזמן סרק של הדפדפן.

מתי להשתמש ב-preload לעומת prefetch

Preload נטען בעדיפות גבוהה, מה שהופך את המשאב לזמין פי 2–3 מהר יותר מגילוי רגיל. Prefetch נטען בעדיפות נמוכה רק בזמן סרק של הדפדפן, מבלי להשפיע על הטעינה הנוכחית. Preload משמש למשאבים של העמוד הנוכחי: תמונת LCP, פונט ראשי, CSS קריטי. Prefetch משמש למשאבים של העמוד הבא: חבילת JS לעמוד הקטלוג בעת ניווט מהעגלה.

למה preconnect קריטי לפונטים

פונטים בדרך כלל נטענים מדומיין חיצוני (למשל, Google Fonts). ללא preconnect, הדפדפן מבצע תחילה חיפוש DNS, ואז TCP ו-TLS — זה יכול לקחת עד 300 אלפיות השנייה. Preconnect יוצר את החיבור מראש, וחוסך אלפיות שנייה יקרות מ-FOUT. חשוב לציין את המאפיין Link עבור פונטים; אחרת, הדפדפן יבצע שתי בקשות: אחת דרך preload, ואחת כשמתגלה ב-CSS. לפי מפרט W3C, יש להשתמש ב-preconnect רק עבור דומיינים קריטיים, לא יותר מ-6.

מה לטעון קודם עם preload?

סט טיפוסי לעמוד:

• Preconnect ל-Google Fonts, CDN, שרת API.
• Preload לתמונת LCP (fetchpriority="high").
• Preload לפונט ראשי (עם crossorigin).
• Prefetch לעמוד הבא הסביר (למשל, עגלה אחרי קטלוג).

ללא preload, הפונט ייטען רק לאחר ניתוח CSS — מה שגורם ל-FOUT (הבזק טקסט ללא עיצוב). עם preload ו-preconnect, הוא זמין מיד.

כיצד אנו מיישמים Resource Hints

אנו פורסים Resource Hints בשתי דרכים: כותרת HTTP <link> בצד השרת (המתקבלת לפני ניתוח HTML) ותגי <head> ב-// app/Http/Middleware/ResourceHints.php class ResourceHints { public function handle(Request $request, Closure $next): Response { $response = $next($request); $hints = [ '<https://fonts.googleapis.com>; rel=preconnect', '<https://fonts.gstatic.com>; rel=preconnect; crossorigin', '</fonts/Inter-Regular.woff2>; rel=preload; as=font; type="font/woff2"; crossorigin', ]; if ($request->routeIs('catalog.*')) { $hints[] = '</assets/product-page-chunk.js>; rel=prefetch; as=script'; } $response->headers->set('Link', implode(', ', $hints)); return $response; } } . הבחירה תלויה בטכנולוגיה ובדרישות.

דוגמה ל-Laravel:

// app/Http/Middleware/ResourceHints.php
class ResourceHints
{
    public function handle(Request $request, Closure $next): Response
    {
        $response = $next($request);
        $hints = [
            '<https://fonts.googleapis.com>; rel=preconnect',
            '<https://fonts.gstatic.com>; rel=preconnect; crossorigin',
            '</fonts/Inter-Regular.woff2>; rel=preload; as=font; type="font/woff2"; crossorigin',
        ];

        if ($request->routeIs('catalog.*')) {
            $hints[] = '</assets/product-page-chunk.js>; rel=prefetch; as=script';
        }

        $response->headers->set('Link', implode(', ', $hints));

        return $response;
    }
}

עבור React/Next.js, אנו משתמשים ב-<Head> דינמי:

import Head from 'next/head';
export default function ProductPage({ product }) {
  return (
    <>
      <Head>
        <link rel="preconnect" href="https://cdn.example.com" />
        {product.heroImage && (
          <link rel="preload" href={product.heroImage} as="image" fetchpriority="high" />
        )}
      </Head>
      {/* ... */}
    </>
  );
}

שלבי היישום

1. ביקורת על ההוראות הנוכחיות דרך Lighthouse ולשונית Network. זיהוי הוראות חסרות או שגויות.
2. הגדרת preconnect לכל הדומיינים החיצוניים (CDN, פונטים, API, אנליטיקה).
3. הגדרת preload לתמונת LCP, CSS קריטי ופונטים עם המאפיין import Head from 'next/head'; export default function ProductPage({ product }) { return ( <> <Head> <link rel="preconnect" href="https://cdn.example.com" /> {product.heroImage && ( <link rel="preload" href={product.heroImage} as="image" fetchpriority="high" /> )} </Head> {/* ... */} </> ); } הנכון.
4. יישום כותרת Link בצד השרת ו-prefetch דינמי מבוסס ניווט (prefetch במעבר עכבר).
5. בדיקה ותיעוד התוצאות.

תהליך ולוח זמנים

סט בסיסי (preconnect + preload ל-LCP) — מ-4 עד 8 שעות. יישום מלא עם prefetch דינמי — מיום עד 3 ימי עבודה.

טעויות תצורה טיפוסיות

• Preload למשאב שאינו בשימוש בעמוד (שגיאת קונסול).
• שימוש ב-preconnect לאותו דומיין יחד עם dns-prefetch (מיותר).
• Preload לפונטים ללא crossorigin (טעינה כפולה).
• יותר מ-6 הוראות preconnect (מפריע לבקשות קריטיות).

אמון ואחריות

המהנדסים שלנו מוסמכים ב-Laravel ו-Next.js. מעל 5 שנים בשוק, 40+ פרויקטים של אופטימיזציית ביצועים. אנו מבטיחים הפחתה של 15–30% ב-LCP לאחר היישום. צרו קשר לביקורת של הפרויקט שלכם. הזמינו יישום Resource Hints וקבלו ייעוץ.