גרסת מקור חדשה לניסיון של ניווטים רכים

Barry Pollard
Michal Mocny

פורסם: 31 ביולי 2025

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

מהן העברות רכות?

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

למה צריך את Soft Navigation API

Soft Navigations API הוא API מוצע שמאפשר זיהוי היוריסטי של מה שנקרא 'ניווטים רכים' כפי שנעשה שימוש בהם באתרים של אפליקציות דף יחיד (SPA). בניווט רך לא מתבצע ניווט בפועל בדף, ולכן צריך לנהל באופן ידני באמצעות JavaScript פעולות מסוימות שמתבצעות בדרך כלל בניווט. אפשר לבצע חלק מהפעולות, כמו ניהול היסטוריית הניווט, באמצעות ממשקי ה-API הנוכחיים. עם זאת, אי אפשר לבצע פעולות אחרות, כמו מדידת מדדי Core Web Vitals, במעברים האלה.

‫Soft Navigation API מאפשר מעקב אחר ניווטים רכים. ה-JavaScript שמתחיל את הניווט הרך (בדרך כלל מסגרת JavaScript) יודע מתי מתרחש ניווט, אבל סקריפטים אחרים של JavaScript והדפדפן עצמו לא יודעים על כך.

מדדי הליבה לבדיקת חוויית המשתמש באתר ויישומי SPA

אחת הסיבות העיקריות ליצירת Soft Navigation API היא לאפשר מדידה של מדדי הליבה לבדיקת חוויית המשתמש באתר (Core Web Vitals) עבור SPAs. המדדים הבסיסיים של חוויית המשתמש נמדדים על ידי הדפדפן (כדי להציג אותם בכלי כמו הדוח על חוויית המשתמש ב-Chrome) ועל ידי ספריות JavaScript של ניטור משתמשים אמיתיים (RUM).

יכול להיות שחלק מההיבטים של מדדי הליבה לבדיקת חוויית המשתמש באתר יימדדו על ידי מסגרות JavaScript. במיוחד מהירות התגובה לאינטראקציה באתר (INP) והשינוי המצטבר בפריסת הרכיבים (CLS) מבוססים על פרימיטיבים (Event Timing API ו-Layout Instability API בהתאמה) שאפשר למדוד בכל פרק זמן כדי לחשב את מדדי ה-INP וה-CLS. עם זאת, מדדים אחרים כמו Largest Contentful Paint ‏ (LCP) מופקים רק על ידי הדפדפן – על סמך ניווטים בדף והם מסתיימים לאחר אינטראקציה.

איך Soft Navigation API מאפשר מדידה של מדדי הליבה לבדיקת חוויית המשתמש באתר עבור SPA

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

בגרסה האחרונה הזו יש גישה שונה, והמושגים האלה מופרדים ל-Soft Navigation API ולרשומה חדשה של ביצועים שנקראת Interaction to Contentful Paint (מהירות התגובה לאינטראקציה באתר עד לציור התוכן). הערך interaction-contentful-paint מייצג את מדד ה-contentful paint אחרי אינטראקציות. בשלב הזה, האירוע הזה מופעל רק כשמדובר בניווטים רכים, אבל אם מפעילים אותו לכל האינטראקציות, אפשר להשתמש בו גם בתרחישים אחרים מעבר ל-LCP.

בנוסף, כל אחת מהרשומות של ביצועי largest-contentful-paint, interaction-contentful-paint, event-timing ו-layout-shift הורחבה ב-API כך שתכלול מזהה של רכיב הניווט שאליו מתייחסת הרשומה. רשומות הביצועים מופקות אחרי האירוע שהן מודדות – בדרך כלל בזמן שהמערכת לא פעילה. כלומר, כתובת ה-URL לרוב תשתנה עד שהנתונים על הביצועים יועברו. כשכוללים את הניווט עם הרשומה, קל יותר למדוד את המדדים הבסיסיים של חוויית המשתמש עבור כתובת ה-URL הנתונה, בלי צורך להשוות בין זמני הכניסה של הביצועים לבין זמני הכניסה של הניווט הרך.

למה כדאי להשתמש בהיוריסטיקה?

ה-API של ניווט רך מתייחס לניווט רך במקרים הבאים:

  • מתרחשת אינטראקציה מבוססת-משתמש (עדכוני כתובות URL ללא אינטראקציה של משתמש לא נספרים)
  • … מה שמוביל לשינוי ב-DOM ולרנדור
  • … ומתבצע עדכון של כתובת ה-URL
  • עדכון כתובת URL, כולל שינוי בהיסטוריה.

ה-API משתמש בגישה הזו שמבוססת על היוריסטיקה, במקום לאפשר ל-framework של JavaScript "לפלוט" ניווט רך, או להתבסס על Navigation API. כך אפשר להבין באופן עקבי מה נחשב ניווט רך, בלי קשר ל-framework או לאופן שבו מפתחים משתמשים בו.

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

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

גם פיתוחים ומפתחים יכולים להתעלם מהיוריסטיקה של Soft Navigations API ולהשתמש בממשקי ה-API הבסיסיים של Event Timing,‏ Layout Instability ו-Interaction to Contentful Paint כדי למדוד מדדי ביצועים נוספים לפי הצורך, אבל אנחנו ממליצים להשתמש במדדי הליבה לבדיקת חוויית המשתמש באתר באמצעות היוריסטיקה כדי לאפשר מדידה באתרים.

נדרשת עזרה בבדיקה של Soft Navigation API

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

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

בנוסף, אנחנו רוצים להבין אם ה-API הזה, והפרימיטיב החדש Interaction to Contentful Paint, נותנים מענה לתרחיש השימוש העיקרי של מדידת מדדי הליבה לבדיקת חוויית המשתמש באתר עבור SPAs.

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

איך בודקים

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

פרטים טכניים נוספים על ה-API, ובמיוחד הסבר על מדידת המדדים הבסיסיים של חוויית המשתמש, זמינים במאמרי העזרה שלנו או במאגר ב-GitHub. בנוסף, זמינה גרסת ניסוי של ספריית web-vitals עם ניווט רך.

משוב

אנחנו מבקשים משוב על הניסוי הזה במקומות הבאים:

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