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

ה-Waterfall Chart מיוצר על ידי כל כלי בדיקת האתרים כגון Fiddler, HttpWatch, DynaTrace Ajax Edition ואתרים חינמיים ובראשם WebPageTest. הדוגמאות שאציג לקוחות מתוך WebPageTest אבל העקרונות זהים לכל כלי המייצר Waterfall Chart. תהיתי אם לבחור באתר ישראלי לשם ההדגמה, אבל החלטתי שבשלב זה, למען שוויון ההזדמנויות אבחר באתר בינלאומי ובחרתי באתר של CNN. אם תרצו, תוכלו לכתוב לי ולבקש את ניתוח ה-Waterfall Chart של אחד הדפים באתר שלכם.

רושם ראשוני כן קובע !!

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

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

הצבעים שעושים את כל ההבדל

לצבעים המוצגים בכל שורה יש משמעות. בכל אחד מהכלים בו תבחרו להשתמש לטובת ניתוח מהירות טעינת הדף תמצאו גם מקרא צבעים. ב-WebPageTest מקרא הצבעים נמצא בראש ה-waterfall chart ונראה כך:

אז מה משמעות כל צבע ?

DNS Lookup (צבע טורקיז) הוא השלב שבו הדפדפן מחפש את ה-Domain שבו נמצא הרכיב המבוקש. ברוב האתרים, שלב זה אינו המקור לצרות ובכל מקרה, לכם אין יותר מדי השפעה על שלב זה.

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

Time To First Byte (צבע ירוק) הוא הזמן מרגע שליחת הבקשה לשרת ועד לקבלת הבייט הראשון של התשובה. זמן זה מושפע ממהירות החיבור לאינטרנט אבל לא פחות מושפע מהזמן שלוקח לשרת "לחשוב" עד למתן התשובה.

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

מעבר למרכיבים של העמודה בכל שורה, תמצאו ב-waterfall chart גם שני קווים אנכיים, אחד בירוק והשני בכחול. הקו הירוק, Start Render Time, הינו הנקודה בזמן שבה הגולש מתחיל לראות שינוי בדפדפן לאחר הבקשה. בשלב זה, הדפדפן קיבל כבר מספיק רכיבים מהשרת ויכול להתחיל לצייר את הדף המבוקש.

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

אז מה לחפש ?

התחילו בשלושה דברים עיקריים:

1. מספר הקוביות הכתומות במפל (Initial Connection)
2. מספר  ואורך הקוביות הירוקות במפל (Time To first Byte)
3. מספר  ואורך הקוביות הכחולות במפל (Content Download)

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

דוגמא לניתוח waterfall chart

אם ניקח את דוגמת התרשים שהוצג בתחילת המאמר, טעינת דף הבית של אתר CNN באמצעות IE8 שהורץ בארה"ב, נוכל לראות כי הדף מכיל הרבה מאד רכיבים (165 ליתר דיוק). זוהי כמות רבה של בקשות ואין ספק שהיא משפיעה על הזמן הארוך שלוקח לדף להיטען במלואו (8.5 שניות). הזמן שלוקח עד תחילת ציור הדף (Start Render Time) גם הוא ארוך יחסית ועומד על 3.2 שניות.

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

אז מה ניתן לעשות במקרה כזה ?

• לאחד קבצים במידת האפשר (CSS, JS ואפילו ליצור CSS Sprites)
• להקטין תמונות וקבצים אחרים
• לשנות את סדר הופעת קבצי ה-CSS וה-JS בדף. לנושא זה ישנה חשיבות בדפדפנים רבים.

בשורה התחתונה

כאשר אתם מסתכלים על Waterfall chart מעניין אתכם לראות:

1. כמה שפחות שורות ככל האפשר
2. כמה שפחות קוביות כתומות ככל האפשר
3. כמה שפחות קוביות ירוקות ושיהיו קצרות ככל האפשר
4. כמה שפחות קוביות כחולות ושיהיו קצרות ככל האפשר
5. הקווים האנכיים בירוק וכחול (Start Render ו-Document Complete)מתחילים קרוב ככל האפשר לביצוע הבקשה והם קרובים ככל האפשר אחד לשני

ניתן להפנות אלינו שאלות נוספות בנושא זה ונשמח לענות עליהן.