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

Barry Pollard
Lingqi Chi
Lingqi Chi
GitHub

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

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

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

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

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

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

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

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

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

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

מה זה prerender until script?

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

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

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

איך משתמשים ב-prerender until script?

קודם מפעילים את התכונה, ואז משתמשים ב-prerender until script באותו אופן כמו באפשרויות האחרות של 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 until script עם יותר אותות כמו שהוצע קודם עם prefetch/prerender:

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

שימו לב שאי אפשר לשדרג prerender until 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) ולכן הם לא יופעלו עד שהמשתמש יוכל ליצור אינטראקציה עם הדף.

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

<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?

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

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

‫prerender until script זמין עכשיו גם כגרסת מקור לניסיון מ-Chrome 144. ניסויים ב-Origin מאפשרים לבעלי אתרים להפעיל תכונה באתרים שלהם כדי שמשתמשים אמיתיים יוכלו להשתמש בה בלי להפעיל אותה באופן ידני. כך אפשר למדוד את ההשפעה של התכונה על משתמשים אמיתיים כדי לוודא שהיא פועלת כמצופה.

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

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

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