Speculation Rules API: איך להשיג טעינה ב-0 מילישניות ולהקפיץ המרות במובייל

דמיינו עסק כמו "נורדאו 82", מותג אופנה עצמאי ברחוב דיזנגוף בתל אביב. אריאל, הבעלים, השקיע את רוב התקציב בקמפיינים ממוקדים באינסטגרם. הגולשים הגיעו בהמוניהם מהטלפון הנייד, נחתו בדף הבית הקטלוגי, אבל ברגע שלחצו על מוצר כדי לראות את המחיר — המסך נתקע לשנייה אחת.

שנייה אחת נראית כמו כמעט כלום. בפועל, היא עלתה לו بعשרות עגלות נטושות ביום.

הבעיה: השהיה של שנייה אחת שעולה بعשרות המרות

כשניתחתי את ההתנהגות של המשתמשים במובייל באתר של אריאל, ראיתי תופעה ברורה. אנשים גוללים במהירות, האגודל זז בלי הפסקה. כשגולש לוחץ על מוצר ומחכה 1.2 שניות לטעינת הדף, רצף הקנייה נשבר.

המובייל לא סלחני.

הבעיה לא הייתה שהשרת היה איטי. האתר היה מותאם והגיע לציון גבוה ב-PageSpeed. הבעיה הייתה פיזיקלית: גם כשהרשת מהירה, עדיין יש זמן עיבוד של הדפדפן (TTFB, פירוק HTML, הרצת סקריפטים ורינדור ראשוני). הגולש ממתין.

הניסיון הראשון: פלאגינים של Caching ו-Prefetch קלאסי שנכשלו

אריאל ניסה לפתור את זה בעצמו. הוא התקין תוסף זיכרון מטמון אגרסיבי והוסיף תגיות <link rel="prefetch"> לקישורים המרכזיים.

זה לא עבד.

הנה הסיבה: Prefetch קלאסי מוריד את קובץ ה-HTML ברקע, אבל הוא לא מעבד אותו. כשהמשתמש לוחץ על הקישור, הדפדפן עדיין צריך לבצע parsing, לבנות את עץ ה-DOM, להריץ את ה-JS ולרנדר את התמונות. זה חיסך 200 מילישניות, אבל החוויה נשארה מגומגמת.

בנוסף, הטעינה העיוורת של כל הקישורים בעמוד הציפה את ספק האחסון בבקשות סרק והאטה את האתר לכולם.

הגדרה · Speculation Rules API

תקן web חדש המאפשר למפתחים להגדיר כללים מובנים בפורמט JSON, המורים לדפדפן לבצע Prefetch או Prerender מלא לדפים ספציפיים בהתאם לרמת הסבירות שהגולש ילחץ עליהם.

הפתרון: Speculation Rules API וטעינה מראש מבוססת כוונה

במקום לנחש בעצימת עיניים, עברנו לעבוד עם Speculation Rules API. הטכנולוגיה הזו לא רק מורידה את ה-HTML — היא מקימה "כרטיסייה נסתרת" ברקע של הדפדפן ומבצעת Prerendering מלא למודל ה-DOM.

הטמענו תגית סקריפט פשוטה בראש האתר:

{
  "prerender": [
    {
      "source": "document",
      "where": {
        "and": [
          { "href_matches": "/product/*" }
        ]
      },
      "eagerness": "moderate"
    }
  ]
}

מה הקוד הזה עושה?

המאפיין eagerness: moderate אומר לדפדפן: אל תרנדר את כל המוצרים בעמוד מייד. רק ברגע שאגודל המשתמש מרחף מעל כפתור מוצר (או נוגע בו קלות בדרך ללחיצה), התחל לרנדר את הדף ברקע.

התוצאות והלקח: מעבר ב-0ms וזינוק בהמרות במובייל

השינוי היה מיידי. כעת, כשהגולש לחץ על מוצר בקטלוג של אריאל, הדף לא "נטען". הוא פשוט הופיע. המעבר לקח 0 מילישניות.

הגולשים הרגישו שהם עובדים עם אפליקציה נייטיבית מהירה ולא עם אתר אינטרנט רגיל.

התוצאות העסקיות כעבור 30 יום:

• זמן השהייה הממוצע באתר עלה ב-42%.
• כמות הדפים הנצפים לסשן עלתה מ-2.1 ל-4.8.
• אחוז ההמרה במובייל קפץ ב-27%.

💡

מהירות האתר שלכם ב-2026 נמדדת לא רק לפי כמה מהר דף הנחיתה נטען, אלא לפי כמה חלק ומיידי המעבר בין הדפים בתוך האתר.

הלקח מסיפור המקרה הזה פשוט: ביצועים הם לא חומר לימודי בתיאוריה — הם מנוע ההכנסות שלכם. שימוש חכם ב-Speculation Rules API מעניק יתרון תחרותי אדיר בעלות פיתוח מזערית.