כללי ספקולציות לניפוי באגים באמצעות כלי הפיתוח ל-Chrome

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

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

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

הסבר של 'pre- ' תנאים

יש הרבה "לפני" מונחים שמבלבלים, לכן נתחיל בהסבר על הנושאים הבאים:

  • שליפה מראש (prefetch): אחזור של משאב או מסמך מראש כדי לשפר את הביצועים בעתיד. בפוסט הזה מוסבר על שליפה מראש של מסמכים באמצעות Speculation Rules API, ולא על האפשרות הדומה, אבל הישנה יותר, של <link rel="prefetch">, שמשמשת לעיתים קרובות לשליפה מראש של משאבי משנה.
  • עיבוד מראש: שלב זה הוא מעבר לשליפה מראש (prefetch) ולמעשה מוצג הדף כולו כאילו המשתמש עבר אליו, אבל הוא נשאר בתהליך מוסתר ברקע ומוכן לשימוש אם המשתמש מנווט לשם. שוב, המסמך הזה עוסק בגרסה החדשה יותר של Speculation Rules API ולא באפשרות <link rel="prerender"> הישנה יותר (שכבר לא מבצעת עיבוד מראש מלא).
  • ספקולציות ניווט: המונח הקולקטיבי של האפשרויות החדשות של שליפה מראש (prefetch) ועיבוד מראש שמופעלות על ידי כללי הטעינות מראש.
  • טעינה מראש: מונח בעומס יתר שיכול להתייחס לכמה טכנולוגיות ותהליכים, כולל <link rel="preload">, סורק הטעינה מראש וטעינות מראש בניווט של Service Worker. הפריטים האלה לא נכללים כאן, אבל המונח נכלל כדי להבחין באופן ברור ביניהם לבין 'השערות לניווט' מונח.

כללי ספקולציות עבור prefetch

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

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

לשימוש בכללי ספקולציות לשליפה מראש (prefetch) של ניווט יש כמה יתרונות על פני התחביר הישן של <link rel="prefetch">, למשל API עם יכולת אקספרסיביות יותר והתוצאות נשמרות במטמון הזיכרון ולא במטמון הדיסק של HTTP.

ניפוי באגים בכללי הטעינות מראש ב-prefetch

ניתן לראות פעולות של שליפה מראש (prefetch) שמופעלות על ידי כללי הטעינות בחלונית רשת באותו אופן כמו אחזורים אחרים:

חלונית רשת בכלי הפיתוח ל-Chrome שמוצגים בה מסמכים שנשלפו מראש
חלונית רשת בכלי הפיתוח ל-Chrome שמוצגים בה מסמכים שנשלפו מראש

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

לחיצה על אחת מהשורות תציג גם את כותרת ה-HTTP Sec-Purpose: prefetch, כך אפשר לזהות את הבקשות האלה בצד השרת:

אחזור מראש של כותרות בכלי הפיתוח ל-Chrome עם הגדרת Sec-Purpose לשליפה מראש (prefetch)
אחזור מראש של כותרות בכלי הפיתוח ל-Chrome, עם הגדרת Sec-Purpose לשליפה מראש (prefetch)

ניפוי באגים ב-prefetch באמצעות כרטיסיות הטעינה הספקולטיבית

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

כרטיסיות טעינה ספקולטיבית של כלי פיתוח ל-Chrome שמציגות כלל שליפה מראש
כרטיסיות טעינה ספקולטיבית של כלי הפיתוח ל-Chrome שמציגות כלל שליפה מראש

הקטע הזה כולל שלוש כרטיסיות:

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

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

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

כרטיסיית המפרטים של כלי הפיתוח ל-Chrome, שבה מוצגות כתובות URL שנשלפו מראש והסטטוס שלהן
הכרטיסייה 'ספקולציות של כלי פיתוח ל-Chrome' שמציגה כתובות URL שנשלפו מראש והסטטוס שלהן

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

בצילום המסך הזה אפשר לראות את הסיבה לכשל בדף next3.html (שאינו קיים ולכן מחזיר קוד 404, שהוא קוד מצב HTTP שאינו 2xx).

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

בדף שנשלף מראש אמורה להופיע הודעה מוצלחת כשהמשתמש עובר אל:

הכרטיסייה &#39;טעינות ספקולטיביות&#39; בכלי הפיתוח ל-Chrome, שבה מוצגת שליפה מראש (prefetch) שהצליחה
הכרטיסייה 'טעינה ספקולטיבית' של כלי הפיתוח ל-Chrome שמציגה שליפה מראש (prefetch) שבוצעה בהצלחה

ספקולציות לא תואמות

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

הכרטיסייה &#39;טעינה ספקולטיבית&#39; של כלי הפיתוח ל-Chrome, שמראה איך כתובת ה-URL הנוכחית לא תאמה לאף אחת מכתובות ה-URL בכללי הטעינות מראש של הדף הקודם
כתובות URL שלא תואמות מודגשות בכלי הפיתוח

לדוגמה, כאן עברנו אל next4.html, אבל רק next.html, next2.html או next3.html הן שליפות מראש, כך שאנחנו יכולים לראות שהן לא תואמות לאף אחד משלושת הכללים האלה.

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

לגבי השליפה מראש (prefetch) עצמה, סביר להניח שהחלונית Network מוכרת יותר. בדוגמה של כשל בשליפה מראש (prefetch), אפשר לראות כאן את קוד 404 של השליפה מראש:

החלונית &#39;רשת כלי הפיתוח ל-Chrome&#39; שמציגה שליפה מראש שנכשלה
החלונית 'רשת כלי הפיתוח ל-Chrome' שמציגה שליפה מראש שנכשלה

עם זאת, הכרטיסיות טעינות ספקולטיביות הופכות לשימושיות הרבה יותר לכללי הטעינות מראש, שמפורטות בהמשך.

כללי ספקולציות עבור prerender

התחביר של כללי הטעינות מראש של העיבוד מראש זהה לזה של כללי הטעינות מראש של השליפה מראש. לדוגמה:

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

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

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

ניפוי באגים ב-prerender באמצעות כרטיסיות הטעינה הספקולטיבית

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

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

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

ב-Chrome 121 השקנו תמיכה בכללים למסמכים. כך הדפדפן יכול לאסוף את הקישורים האלה מאותם קישורי מקור בדף, במקום לפרט קבוצה ספציפית של כתובות URL:

<script type="speculationrules">
{
  "prerender": [
    {
      "source": "document",
      "where": {
        "and": [
          {"href_matches": "/*"},
          {"not": { "href_matches": "/not-safe-to-prerender/*"}}
        ]
      },
      "eagerness": "moderate"
    }
  ]
}
</script>

בדוגמה הזו נבחרו כל קישורי המקור, מלבד אלה שמתחילים ב-/not-safe-to-prerender כמועמדים לעיבוד מראש.

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

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

הכרטיסייה &#39;ספקולציות של כלי פיתוח&#39; עם מספר כתובות URL שלא הופעלו
הכרטיסייה 'ספקולציות של כלי פיתוח ל-Chrome' עם מספר כתובות URL שלא הופעלו

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

הופעלה הכרטיסייה &#39;ספקולציות של כלי פיתוח&#39; ב-Chrome עם דפים שעברו עיבוד מראש
הכרטיסייה 'ספקולציות של כלי הפיתוח ל-Chrome' מופעלת בדפים שעברו עיבוד מראש

ב-Chrome יש מגבלות על עיבודים מראש, כולל עד 2 עיבודים מראש ברמת eagerness של moderate. לכן, אחרי כשמעבירים את העכבר מעל הקישור השלישי, רואים את הסיבה לכשל בכתובת ה-URL הזו:

הכרטיסייה &#39;ספקולציות של כלי הפיתוח ל-Chrome&#39; שמציגה טעינות מראש שנכשלו
הכרטיסייה 'ספקולציות של כלי הפיתוח ל-Chrome' שמציגה טעינות מראש שנכשלו

ניפוי באגים ב-prerender באמצעות חלוניות אחרות של כלי פיתוח

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

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

כלי הפיתוח ל-Chrome מאפשרים עכשיו להחליף בין כלים לרינדור שהמידע מוצג עבורם
בעזרת כלי הפיתוח ל-Chrome אפשר להחליף בין כלי הרינדור של המידע שמוצג עבורם

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

החלונית &#39;רשת כלי הפיתוח ל-Chrome&#39; שמציגה את בקשות הרשת לדף שעבר עיבוד מראש
החלונית 'רשת כלי הפיתוח ל-Chrome', שבה מוצגות בקשות הרשת לדף שעבר עיבוד מראש

מבדיקת כותרות ה-HTTP של המשאבים הבאים ניתן לראות שהם מוגדרים עם הכותרת Sec-Purpose: prefetch;prerender:

חלונית ל-Chrome DevTools Network שבה מוצגת הכותרת Sec-Purpose בדף שעבר עיבוד מראש
החלונית 'רשת כלי הפיתוח ל-Chrome', שבה מוצגת הכותרת Sec-Purpose בדף שעבר עיבוד מראש

או בחלונית Elements, שבה אפשר לראות את תוכן הדף, כמו בצילום המסך הבא שבו אנחנו רואים שהרכיב <h1> מיועד לדף שעבר עיבוד מראש:

חלונית הרכיבים של כלי הפיתוח ל-Chrome בדף שעבר עיבוד מראש
חלונית הרכיבים של כלי הפיתוח ל-Chrome בדף שעבר עיבוד מראש

או בחלונית המסוף, שבה אפשר לראות את יומני המסוף שנוצרו על ידי הדף שעבר עיבוד מראש:

החלונית של מסוף כלי הפיתוח ל-Chrome שבה מוצגת פלט המסוף מדף שעבר עיבוד מראש
החלונית במסוף כלי הפיתוח ל-Chrome שבה מוצגת הפלט של המסוף מדף שעבר עיבוד מראש

כללי ספקולציות לניפוי באגים בדף שעבר עיבוד מראש

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

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

הכרטיסייה &#39;טעינה ספקולטיבית&#39; של כלי הפיתוח ל-Chrome, שבה מוצג דף שעבר עיבוד מראש ודף שהצליח
הכרטיסייה 'טעינה ספקולטיבית' של כלי הפיתוח ל-Chrome מציגה דף שעבר עיבוד מראש ודף שהצליח

בנוסף, כמו במקרה של שליפה מראש (prefetch) – ניווט מדף עם כללי ספקולציות שלא תואמים לדף הנוכחי, ינסה להראות לכם למה כתובות ה-URL לא תאמו את אלה שמפורטות בכללי הטעינות מראש של הדף הקודם בכרטיסייה טעינות ספקולטיביות:

הכרטיסייה &#39;טעינה ספקולטיבית&#39; של כלי הפיתוח ל-Chrome שבה רואים את חוסר ההתאמה של כתובות ה-URL של כתובת ה-URL הנוכחית ושל הכתובות בדף הקודם
כלי הפיתוח ל-Chrome שמוצגים בהם אי-התאמות של כתובות URL

סיכום

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

אישורים

תמונת אהבתי של Nubelson פרננדס ב-Unbounce.