Resource Waterfall משרטט כל בקשה שהדף ביצע על ציר זמן, כל פס מחולק לשלבים האמיתיים שלו - בתור, DNS, TCP, TLS, המתנה והורדה - עם סמנים עבור FCP, LCP, DOMContentLoaded וטעינה.
כשעמוד מרגיש איטי, השאלה תמיד זהה: למה הוא מחכה? התשובה של הדפדפן עצמו נמצאת בחלונית הרשת, כלומר פתיחת DevTools, עגינה של מגירה מעל הדף שאתה בודק וטעינה מחדש כדי לתפוס את תחילת הטעינה.
Resource Waterfall מציב את ציר הזמן הזה בפאנל צף לצד הדף. כל בקשה מופיעה כסרגל הממוקם לפי מועד תחילתה ומפולח לפי המקום שבו עבר הזמן בפועל: בתור או נתקע, חיפוש DNS, חיבור TCP, לחיצת יד של TLS, המתנה לשרת ואז הורדה. קטע כחול ארוך הוא שרת איטי; ירוק ארוך הוא קובץ שומן; ארוך אפור אומר שהבקשה חיכתה לתורה. ההבחנה מחליטה מה עליך לתקן.
סמנים מקווקו על פני ציר הזמן מציגים First Contentful Paint, Largest Contentful Paint, DOMContentLoaded וטעינה, כך שתוכל לראות אילו בקשות מסתיימות לפני שהמשתמש רואה משהו ואילו מהן עדיין מתקיימות לאחר מכן. משאבים חוסמי רינדור והתאמות מטמון מסומנים בכל שורה, ומסנן חסימה יחיד מקצץ את הרשימה למה שמעכב למעשה את הצביעה הראשונה.
סנן לפי סוג, חפש לפי כתובת אתר, או מיין לפי האיטי ביותר או הגדול ביותר כדי למצוא במהירות את העבריין הגרוע ביותר. לחץ על כל שורה עבור כתובת האתר המלאה שלה, הפרוטוקול, גדלים ההעברה והפענוח, הסטטוס ופירוט השלבים המלא. בקשות שמגיעות בזמן שהפאנל פתוח זורמות ישר פנימה, ו-Export JSON מעתיק את כל ציר הזמן, כולל אבני דרך, כך שניתן למסור ממצא ביצועים למישהו אחר ללא צילום מסך.
כל פס מפוצל לתור, DNS, TCP, TLS, המתנה והורדה, כך שניתן להבחין מיד בין שרת איטי, קובץ שמן ובקשה בתור.
קווים מקווקוים עבור FCP, LCP, DOMContentLoaded וטעינה מראים אילו בקשות הושלמו לפני שהמשתמש רואה תוכן ואילו עדיין פועלות אחריו.
לחיצה אחת מצמצמת את הרשימה למשאבים המחזיקים בפועל את הצבע הראשון, עם ספירת חסימה כוללת בסרגל הסיכום.
משאבים המוגשים מהמטמון מסומנים ומתויגים במקום להופיע כשורות מסתוריות של אפס בתים, כך שתוכל לוודא שהמטמון שלך באמת עובד.
צמצם לפי סוג - מסמך, CSS, JS, תמונות, גופנים, XHR, מדיה - חפש לפי כתובת אתר, או מיין לפי האיטי ביותר או הגדול ביותר כדי להגיע לעבריין הגרוע ביותר תוך שניות.
העתק את כל המפל כ-JSON, כולל אבני דרך, סכומים ושלבים לכל בקשה, כדי לצרף לכרטיס או להשוות מול ריצה מאוחרת יותר.
סנן למשאבים חוסמי רינדור וראה את גיליונות הסגנונות והסקריפטים המדויקים בין המבקר שלך לתוכן הגלוי.
מיין לפי האיטי ביותר וצפה בספק אנליטיקס, גופן או צ'אט מופיע בראש עם שלב המתנה ארוך שאין לו שום קשר לקוד שלך.
קרא את צבעי השלב: זמן ההמתנה הוא בעיית קצה או CDN, זמן ההורדה הוא בעיה בגודל הקובץ. התיקון שונה עבור כל אחד.
טען מחדש ואשר שהנכסים מגיעים מהמטמון ושגדלי ההעברה קטנים בהרבה מהגדלים המפוענחים, מה שמוכיח שהדחיסה אכן פועלת.
ייצא את ציר הזמן כ-JSON וצרף אותו לכרטיס כך שהאדם הבא יראה את אותם המספרים במקום לנסות לשחזר את ההפעלה שלך.
לחץ על סמל Resource Waterfall ברציף DevSuite Pro. כל מה שהדף טען עד כה מופיע על ציר הזמן באופן מיידי.
טען מחדש כשהפאנל פתוח כדי ללכוד את העומס מהבקשה הראשונה, כולל המסמך עצמו ואבני הדרך של הצבע.
לחץ על שבב החסימה כדי לראות רק משאבים חוסמי רינדור, או בחר סוג כגון js או img. מיין לפי האיטי ביותר כדי לשים את העבריין הגרוע ביותר בראש.
לחץ על כל שורה עבור כתובת האתר המלאה שלה, פרוטוקול, גדלים, סטטוס ופירוט שלב אחר שלב באלפיות שניות - והעתק את כתובת האתר אם תזדקק לה.
ייצוא JSON מעתיק את ציר הזמן המלא עם אבני דרך וסיכומים, מוכן להדבקה בכרטיס או לשמור כתיעוד לפני ואחרי.
התקן את DevSuite Pro בחינם ופתח 71+ כלי פיתוח לדפדפן שלך.
