כללי ספקולציות להצגה מראש עד לניסיון המקור של הסקריפט

Barry Pollard
Lingqi Chi
Lingqi Chi
GitHub

תאריך פרסום: 23 בינואר 2026

החל מגרסה 144 של Chrome, אנחנו משיקים גרסת מקור לניסיון חדשה של התוסף prerender until script ל-Speculation Rules API. בגרסת המקור לניסיון, אתרים יכולים לנסות את התוסף החדש עם משתמשים אמיתיים. המטרה היא לבצע בדיקות שטח של התכונה ולספק משוב לצוות Chrome כדי לעזור לעצב אותה ולהחליט אם כדאי להוסיף אותה לפלטפורמת האינטרנט.

איזו בעיה מנסים לפתור?

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

התכונה Prefetch מאחזרת רק את מסמך ה-HTML. הפעולה הזו מאפשרת לקבל את המשאב הקריטי הראשון מראש, וכך לשפר את הביצועים כשעוברים לכתובת URL. הוא לא טוען משאבי משנה (לדוגמה, CSS,‏ JavaScript או תמונות), ולא מפעיל JavaScript, ולכן יכול להיות שעדיין יש הרבה עבודה שהדפדפן צריך לבצע כשהדף נטען.

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

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

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

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

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

מהי האפשרות 'טרום-רינדור עד להפעלת הסקריפט'?

האפשרות Prerender until script היא פתרון חדש באמצע הדרך בין prefetch ל-prerender. הוא מבצע אחזור מראש של מסמך ה-HTML (כמו באחזור מראש), ואז מתחיל לעבד את הדף, כולל אחזור של כל משאבי המשנה (כמו בעיבוד מראש). אבל מה שחשוב הוא שהדפדפן לא יבצע רכיבי <script> (גם לסקריפטים מוטבעים וגם לסקריפטים של src). כשהוא נתקל בתג <script> חוסם, הוא משהה את ניתוח התג ומחכה עד שהמשתמש מנווט לדף לפני שהוא ממשיך. בינתיים, סורק הטעינה מראש יכול להמשיך ולאחזר משאבי משנה שהדף צריך, כדי שהם יהיו מוכנים לשימוש כשהדף יוכל להמשיך להיטען.

הימנעות מחסימה של אלמנטים <script> מאפשרת לצמצם את מורכבות ההטמעה. במקביל, התחלת תהליך הרינדור ואחזור משאבי המשנה מאפשרים שיפור משמעותי לעומת אחזור מראש – שיפור שעשוי להיות כמעט זהה לשיפור שמתקבל מרינדור מראש מלא.

בתרחיש הטוב ביותר (כשאין סקריפטים בדף), האפשרות הזו תבצע טרום-עיבוד של הדף כולו. לחלופין, אם בדף יש רק רכיבי סקריפט בכותרת התחתונה או רק סקריפטים עם מאפייני async או defer, הדף יעבור רינדור מראש מלא ללא ה-JavaScript הזה. גם בתרחיש הגרוע ביותר (שיש סקריפט חוסם ב-<head>), התחלת העיבוד של הדף, ובמיוחד האחזור מראש של משאבי המשנה, אמורה להוביל לטעינה מהירה יותר של הדף.

איך משתמשים בטרום-עיבוד עד להפעלת סקריפט?

קודם מפעילים את התכונה, ואז מבצעים טרום-עיבוד עד לשימוש בסקריפט באותו אופן כמו באפשרויות האחרות של Speculation Rules API, עם מפתח חדש prerender_until_script (שימו לב לקו התחתון שמופיע בשם המפתח כדי שיהיה תקין ב-JSON)

אפשר להשתמש בתנאי הזה עם כללי רשימה של כתובות URL סטטיות:

<script type="speculationrules">
{
  "prerender_until_script": [{
    "urls": ["next.html", "next2.html"]
  }]
}
</script>

אפשר להשתמש בה גם עם כללי מסמכים שבהם כתובות ה-URL לניחוש זמינות כקישורים בדף:

<script type="speculationrules">
{
  "prerender_until_script": [{
    "where": { "href_matches": "/*" }
  }]
}
</script>

אפשר להשתמש בסקריפט Prerender until script עם האפשרויות הרגילות של Speculation Rules API, כולל ערכי הציפייה השונים.

מכיוון ש-JavaScript לא יופעל, לא ניתן לקרוא את document.prerendering וגם לא את האירוע prerenderingchange. עם זאת, הזמן activationStart לא יהיה אפס.

בדוגמה הבאה אפשר לראות איך פורסים את הדוגמה הקודמת עם חזרה לאחור לטעינה מראש בדפדפנים שלא תומכים ב-prerender_until_script:

<script type="speculationrules">
{
  "prerender_until_script": [{
    "where": { "href_matches": "/*" }
  }],
  "prefetch": [{
    "where": { "href_matches": "/*" }
  }]
}
</script>

‫Chrome יטפל בשכפול הזה ללא בעיה ויבצע את הכלל המתאים ביותר לכל הגדרת מוכנות.

אפשרות אחרת היא להשתמש בהן עם רמות שונות של מוכנות, כדי לבצע אחזור מראש (prefetch) ואז לשדרג לטרום-עיבוד (prerender) עד להפעלת סקריפט עם יותר אותות כמו שהוצע קודם עם prefetch/prerender:

<script type="speculationrules">
{
  "prefetch": [{
    "where": { "href_matches": "/*" },
    "eagerness": "eager"
  }],
  "prerender_until_script": [{
    "where": { "href_matches": "/*" },
    "eagerness": "moderate"
  }]
}
</script>

שימו לב שאי אפשר לשדרג טרום-עיבוד עד להפעלת סקריפט לטרום-עיבוד מלא בדרך הזו, אבל אם אתם רוצים ש-Chrome יתמוך בתבנית כזו, אתם יכולים לסמן את הבאג הזה בכוכב.

האם כל ה-JavaScript מושהה?

לא, רק רכיבי <script> גורמים להשהיית הניתוח. המשמעות היא שרכיבי handler של סקריפטים מוטבעים (לדוגמה, onload) או כתובות URL של javascript: לא יגרמו להשהיה ועשויים לפעול.

לדוגמה, אפשר לרשום Hero image is now loaded ביומן המסוף לפני שמנווטים לדף:

<img src="hero.jpg"
     onload="console.log('Hero image is now loaded!')"
     alt="Example Photo">

לעומת זאת, אם ה-event listener נוסף עם <script>, אז Hero image is now loaded לא יתועד במסוף עד שהדף יופעל:

<img src="hero.jpg" id="hero-image" alt="Example Photo">
<script>
  const heroImage = document.querySelector('#hero-image');
  if (heroImage.complete) {
        console.log('Hero image is now loaded');
  } else {
    heroImage.addEventListener('load',
      (event) => {
        console.log('Hero image is now loaded');
      }
    );
  }
</script>

יכול להיות שזה נשמע לא הגיוני, אבל בהרבה מקרים (כמו בדוגמה הקודמת!) עדיף לבצע את הפעולה באופן מיידי, כי עיכוב שלה עלול להוביל לסיבוכים לא צפויים.

בנוסף, רוב האירועים בתוך התג דורשים פעולה של המשתמש (לדוגמה, onclick, onhover) ולכן הם לא יופעלו עד שהמשתמש יוכל ליצור אינטראקציה עם הדף.

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

<script>...</script>
<img src="hero.jpg"
     onload="console.log('Hero image is now loaded!')"
     alt="Example Photo">

זה רלוונטי במיוחד ל-handlers של סקריפטים מוטבעים שמשתמשים בקוד שהוגדר קודם, שימשיך לפעול כצפוי:

<script>
imageLoadFunction() = {
   ...
}
</script>
<img src="hero.jpg" onload="imageLoadFunction" alt="Example Photo">

מה לגבי סקריפטים עם מאפיינים async ו-defer?

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

איך מפעילים טרום-עיבוד עד להפעלת סקריפט?

האפשרות Prerender until script היא אפשרות חדשה שאנחנו עובדים עליה, והיא כפופה לשינויים. לכן, היא לא זמינה לשימוש בלי להפעיל אותה קודם כדי להביע הסכמה.

מפתחים יכולים להפעיל אותו באופן מקומי באמצעות chrome://flags/#prerender-until-scriptהתכונה הניסיונית של Chrome או באמצעות --enable-features=PrerenderUntilScriptהתכונה הניסיונית של שורת הפקודה.

התכונה Prerender until script is also now available as an origin trial from Chrome 144. ניסויים ב-Origin מאפשרים לבעלי אתרים להפעיל תכונה באתרים שלהם כדי שמשתמשים אמיתיים יוכלו להשתמש בה בלי להפעיל אותה באופן ידני. כך אפשר למדוד את ההשפעה של התכונה על משתמשים אמיתיים ולוודא שהיא פועלת כמצופה.

כדאי לנסות ולשתף איתנו משוב

אנחנו מאוד מתלהבים מההצעה הזו להוסיף את התכונה הזו ל-Speculation Rules API, וממליצים לבעלי אתרים לנסות אותה.

אתם מוזמנים לשתף את המשוב שלכם על ההצעה במאגר GitHub. כדי לשלוח משוב על ההטמעה של Chrome, אפשר לדווח על באג ב-Chromium.