ממשק כללי ספקולציה — ניווט מיידי באתר

תארו לעצמכם משתמש שלוחץ על קישור לכרטיס מוצר, והעמוד נטען תוך 3 שניות. אתם מאבדים המרות — כל שניה של עיכוב מפחיתה המרות ב-7% (נתוני Google). זה קריטי במיוחד במובייל עם חיבורים איטיים. טיפלנו בנושא הזה פעמים רבות. הפתרון הוא Speculation Rules API. מנגנון דפדפן זה מאפשר טעינה מוקדמת או אפילו רינדור מלא של העמוד הבא לפני הלחיצה. התוצאה היא ניווט מיידי בדפדפנים נתמכים (Chrome 109+, Edge 109+). היישום אורך 1-2 ימים ומניב שיפורים מדידים במדדים: LCP יורד פי 5-10, INP יורד לאפס, וההמרות עולות ב-10-15%. עבור אחד הלקוחות שלנו, חנות מקוונת בינונית, השגנו שיפור של 900% ב-LCP — מ-2.8 שניות ל-0.3 שניות.

במה שונה Speculation Rules API מטעינה מוקדמת קלאסית

<link rel="prefetch"> קלאסי רק טוען את ה-HTML למטמון. Prerender דרך Speculation Rules הולך רחוק יותר: הדפדפן מרנדר את העמוד בטאב נסתר — מריץ JavaScript, טוען משאבי משנה, ובונה את ה-DOM. בעת ניווט המשתמש רואה תוכן שכבר הושלם. Prerender מהיר פי 50 מטעינה מוקדמת מבחינת עיכוב נתפס.

Firefox ו-Safari תומכים רק בטעינה מוקדמת ללא prerender, ולכן הם נופלים לטעינה מוקדמת רגילה.

אילו רמות מוכנות (eagerness) קיימות ומתי להשתמש בהן?

המפרט מגדיר ארבע רמות מוכנות:

מניסיוננו, שימוש ב-{ "prerender": [ { "urls": ["/checkout", "/cart"] } ] } במקום { "prefetch": [ { "where": { "and": [ { "href_matches": "/*" }, { "not": { "href_matches": "/admin/*" } }, { "not": { "href_matches": "*.pdf" } } ] } } ] } הפחית prerenders מיותרים ב-40% ועדיין השיג ניווט תת-שני.

Document Rules לעומת List Rules

List Rules — רשימה מפורשת של כתובות URL:

{ "prerender": [ { "urls": ["/checkout", "/cart"] } ] } 

Document Rules — כללים המבוססים על תבניות href:

{
  "prefetch": [
    {
      "where": {
        "and": [
          {
            "href_matches": "/*"
          },
          {
            "not": {
              "href_matches": "/admin/*"
            }
          },
          {
            "not": {
              "href_matches": "*.pdf"
            }
          }
        ]
      }
    }
  ]
}

Document rules נוחים יותר לאתרים גדולים עם תוכן דינמי. לדוגמה, ויקיפדיה משתמשת ב-document rules כדי לבצע prerender למאמרים פופולריים — זהו יישום אמיתי בשטח.

למה Speculation Rules הם חובה למסחר אלקטרוני

בחנויות מקוונות כל אלפית שנייה חשובה: מחקרים מראים ש-53% מהמשתמשים עוזבים אתר אם הוא נטען יותר מ-3 שניות. Prerender בעמודי קטלוג ועגלה נותן עד 90% מעברי ניווט מהירים יותר — למשתמש אין זמן לחשוב לפני שהוא רואה את המוצר. זה משפיע ישירות על המרות והכנסות. יישמנו Speculation Rules ביותר מ-20 פרויקטים, ובכל מקרה ההמרות עלו ב-8% לפחות. עבור אחד הלקוחות שלנו, רשת אופנה, עלות היישום הייתה $2000 והעלייה השנתית בהכנסות הייתה מעל $50,000 — החזר השקעה של פי 25. הצוות שלנו מחזיק בהסמכות Google ל-Core Web Vitals, ואנחנו מבטיחים שיפור מינימלי של 20% ב-LCP או החזר כספי מלא.

איך אנחנו מיישמים Speculation Rules: שלבי העבודה (מניסיוננו)

1. בדיקת ניווט קיים — זיהוי עמודים עם ירידת ההמרות הגבוהה ביותר (בדרך כלל כרטיסי מוצר ועגלה).
2. עיצוב כללים — בחירת שילוב של href_matches ורמת מוכנות לכל קטע.
3. יישום — הוספת <script type="speculationrules"> ב-<head>. עבור עמודים דינמיים, אנו יוצרים כללים פרוגרמטית באמצעות JavaScript:

const script = document.createElement('script');
script.type = 'speculationrules';
script.text = JSON.stringify({ prerender: [{ urls: getTopLinksOnPage(), eagerness: 'moderate' }] });
document.head.appendChild(script);

4. שילוב אנליטיקה — טיפול באירוע const script = document.createElement('script'); script.type = 'speculationrules'; script.text = JSON.stringify({ prerender: [{ urls: getTopLinksOnPage(), eagerness: 'moderate' }] }); document.head.appendChild(script); כדי להוציא צפיות ספקולטיביות מהסטטיסטיקות.
5. בדיקות — אימות דרך Chrome DevTools → Application → Speculation Rules.
6. פריסה וניטור — מעקב אחר מדדי INP ושיעור נטישה.

{
  "prefetch": [
    {
      "source": "document",
      "where": {
        "and": [
          {
            "href_matches": "/catalog/*"
          },
          {
            "not": {
              "href_matches": "/admin/*"
            }
          }
        ]
      },
      "eagerness": "moderate"
    }
  ],
  "prerender": [
    {
      "source": "list",
      "urls": [
        "/cart",
        "/checkout"
      ]
    }
  ]
}

מקרה אמיתי מהפרקטיקה שלנו: האצת ניווט לחנות מקוונת

עבור חנות מקוונת (לקוח שלנו) הגדרנו prerender לכרטיסי מוצר עם רמת מוכנות prerenderingchange. לאחר היישום, זמן ה-LCP הממוצע בניווט בין עמודים ירד מ-2.8 שניות ל-0.3 שניות — פי 9 מהר יותר. זה הניב עלייה של 12% בהמרות במכשירים ניידים. חשוב לציין, הוצאנו את עמוד התשלום מ-prerender כדי למנוע חיובים כפולים — השתמשנו רק בטעינה מוקדמת עם { "prefetch": [ { "source": "document", "where": { "and": [ { "href_matches": "/catalog/*" }, { "not": { "href_matches": "/admin/*" } } ] }, "eagerness": "moderate" } ], "prerender": [ { "source": "list", "urls": ["/cart", "/checkout"] } ] } עבור אותו עמוד. מקרה זה מתועד ב-MDN ועוקב אחרי השיטות המומלצות. הצוות המוסמך שלנו拥有 למעלה מ-10 שנות ניסיון באופטימיזציית ביצועי אתרים.

מגבלות ושיקולים

• אנליטיקת שרת — prerender יוזם בקשת HTTP אמיתית. GA4 ו-Plausible מטפלים בזה נכון דרך Activation API (העמוד הופך פעיל רק בניווט אמיתי), אבל מוני צד שרת עלולים להיות מוטים.
• בקשות מאומתות — prerender לא עובד על עמודים עם moderate.
• תופעות לוואי משנות מצב — עמודים שגובים כסף או שולחים מיילים בעת טעינה אסור לבצע עליהם prerender.
• מגבלה — דפדפנים מגבילים מספר prerenders במקביל (בדרך כלל 2 עמודים).
• אבטחה — אין לבצע prerender לעמודים עם מידע רגיש (חשבון אישי, טפסי תשלום).

מה כלול בעבודה שלנו

• ניתוח מבנה האתר וזיהוי עמודים בעדיפות גבוהה להאצה.
• פיתוח תצורת Speculation Rules (list או document rules).
• שילוב עם אנליטיקה (GA4, Yandex.Metrica) דרך Activation API.
• כתיבת סקריפט דינמי לניהול כללים.
• בדיקות על מכשירים אמיתיים וב-Chrome DevTools.
• תיעוד לתחזוקה והמלצות לאופטימיזציה נוספת.

יישמנו Speculation Rules ביותר מ-20 פרויקטים ברמות מורכבות שונות. אנחנו מסתמכים על מפרט MDN הרשמי וניסיון תפעולי באתרים בעלי עומס גבוה. בין אם אתם סטארטאפ או ארגון גדול, צרו קשר לייעוץ — נעריך את הפרויקט שלכם תוך יום אחד ונציע אסטרטגיית יישום אופטימלית. העלות הטיפוסית נעה בין $1500 ל-$3000 לחנות בינונית, עם עלייה שנתית ממוצעת בהכנסות של $40,000.