בעזרת החלונית Network (רשת) בכלי הפיתוח של הדפדפן אפשר לזהות אילו משאבים נטענים ומתי הם נטענים. כל שורה בחלונית 'רשת' תואמת לכתובת URL ספציפית שאפליקציית האינטרנט טוענת.
מה אתם מעלים?
כדי לפתח את אסטרטגיות האחסון במטמון המתאימות לאפליקציית האינטרנט, צריך להבין מה בדיוק אתם מעלים. כשמפתחים אפליקציית אינטרנט אמינה, הרשת יכולה להיות חשופה לכל מיני כוחות אפלים. כדי להתמודד עם נקודות החולשה של הרשת באפליקציה, צריך להבין אותן.
יכול להיות שכבר יש לכם מושג טוב לגבי מה שאפליקציית האינטרנט שלכם טוענת. אם אתם משתמשים רק במספר קטן של קובצי HTML, JavaScript, CSS ותמונות סטטיים, יכול להיות שזה נכון. אבל ברגע שמתחילים לשלב משאבים של צד שלישי שמתארחים ברשתות להצגת תכנים, באמצעות בקשות API דינמיות ותשובות שנוצרות על ידי שרת, התמונה מתחילה להתערפל במהירות.
לדוגמה, שיטת שמירת מטמון שמתאימה לכמה קובצי CSS קטנים לא תהיה רלוונטית למאות תמונות גדולות.
מתי אתם מעלים תוכן
חלק נוסף בתמונה הכוללת של תהליך הטעינה הוא מתי הכול נטען.
חלק מהבקשות לרשת, כמו בקשת הניווט ל-HTML הראשוני, נשלחות ללא תנאי ברגע שמשתמש מבקר בכתובת URL מסוימת. קוד ה-HTML הזה עשוי להכיל הפניות לקבצים קריטיים של CSS או JavaScript, שגם הם צריכים להיטען כדי להציג את הדף האינטראקטיבי. כל הבקשות האלה נמצאות בנתיב הטעינה הקריטי. כדי שהן יהיו מהירות באופן מהימן, תצטרכו לאחסן אותן במטמון באופן אגרסיבי.
יכול להיות שמשאבים אחרים, כמו בקשות API או נכסים שנטענים באיטרציה, יתחילו להיטען הרבה אחרי שהטעינה הראשונית תושלם. אם הבקשות האלה מתרחשות רק לאחר רצף ספציפי של אינטראקציות של משתמשים, יכול להיות שבסופו של דבר תתבצע בקשה לקבוצה שונה לגמרי של משאבים במהלך כמה ביקורים באותו דף. לרוב, אסטרטגיית מטמון פחות אגרסיבית מתאימה לתוכן שזיהיתם כתוכן שנמצא מחוץ לנתיב הטעינה הקריטי.
העמודות Name (שם) ו-Type (סוג) עוזרות לכם להבין מה
העמודות Name ו-Type עוזרות לספק תמונה משמעותית של מה נטען. התשובה לשאלה 'מה נטען?' בדוגמה שלמעלה היא סך של ארבע כתובות URL, שכל אחת מייצגת סוג תוכן ייחודי.
השם מייצג את כתובת ה-URL שהדפדפן ביקש, אבל יופיע רק החלק האחרון בנתיב של כתובת ה-URL. לדוגמה, אם https://example.com/main.css נטען, יופיע רק main.css ברשימה בקטע Name (שם).
התווים האחרונים בנתיב של כתובת ה-URL, אחרי הנקודה (למשל 'css'), נקראים הסיומת של כתובת ה-URL.
בדרך כלל, הסיומת של כתובת ה-URL מציינת את סוג המשאב המבוקש, וממופה ישירות למידע שמוצג בעמודה Type. לדוגמה, v2.html הוא מסמך ו-main.css הוא גיליון סגנונות.
בעמודה Waterfall אפשר לראות מתי
בודקים את העמודה Waterfall, מתחילים בחלק העליון וממשיכים למטה. האורך של כל עמודה מייצג את משך הזמן הכולל של הטעינה של כל משאב. איך אפשר להבחין בין בקשה שנשלחת כחלק מנתיב הטעינה הקריטי לבין בקשה שנשלחת באופן דינמי הרבה אחרי שהטעינה הראשונית של הדף הושלמה?
הבקשה הראשונה בתרשים תמיד תהיה עבור קובץ ה-HTML, לדוגמה, v2.html. כל הבקשות הבאות יתקבלו (כמו מפל!) מהבקשה הראשונית לניווט, על סמך התמונות, הסקריפטים והסגנונות שמסמך ה-HTML מפנה אליהם.
בתרשים Waterfall מוצג שברגע שהטעינה של v2.html מסתיימת, מתחילות הבקשות לנכסים שהיא מפנה אליהם (שנקראים גם משאבי משנה). הדפדפן יכול לבקש כמה משאבי משנה בו-זמנית, והדבר מוצג בסרגלים החופפים בעמודה Waterfall עבור main.css ו-logo.svg. לבסוף, אפשר לראות בצילומי המסך ש-main.js מתחילה להיטען אחרונה, והטעינה שלה מסתיימת אחרי ששלוש כתובות ה-URL האחרות מסתיימות גם הן.