זיהוי משאבים שנטענו מהרשת

ג'ף פוזניק

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

לדעת מה נטען

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

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

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

לדעת מתי מתבצעת הטעינה

חלק נוסף מתמונת הטעינה הכוללת הוא הזמן שבו הכול נטען.

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

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

העמודות 'שם' ו'סוג' עוזרות

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

השם מייצג את כתובת ה-URL שהדפדפן ביקש, על אף שיופיע רק החלק האחרון של נתיב כתובת ה-URL. לדוגמה, אם הפקודה https://example.com/main.css נטענה, יופיע רק הערך main.css בקטע 'שם'.

התווים האחרונים בנתיב של כתובת ה-URL, אחרי הנקודה (למשל "css"), נקראים 'הסיומת של כתובת ה-URL'. התוסף של כתובת ה-URL מראה בדרך כלל את סוג המשאב המבוקש וממופה ישירות למידע שמוצג בעמודה 'סוג'. לדוגמה, v2.html הוא מסמך ו-main.css הוא גיליון סגנונות.

העמודה 'מפל מים' עוזרת לזהות

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

הבקשה הראשונה ב-Waterfall תמיד תהיה עבור מסמך ה-HTML, לדוגמה, v2.html. כל הבקשות הבאות יזרמו (כמו מפל!) מבקשת הניווט הראשונית הזו על סמך התמונות, הסקריפטים והסגנונות שאליהם מתייחס מסמך ה-HTML.

לפי ה-Waterfall, מיד אחרי שהטעינה של v2.html תסתיים, הבקשות לנכסים שאליהם הוא מפנה (שנקראים גם משאבי משנה) מתחילות. הדפדפן יכול לבקש כמה משאבי משנה בו-זמנית, והעמודות האלה מיוצגות על ידי העמודות החופפות בעמודה ב-Waterfall של main.css ושל logo.svg. לבסוף, ניתן לראות בצילום המסך שהטעינה של main.js מתחילה בסוף, והיא מסתיימת גם אחרי ששלוש כתובות ה-URL האחרות הושלמו.