בדיקת ביצועים ומהירות האתר באמצעות WebPageTest

כיצד להשתמש ב WebPageTest לניתוח ביצועים ומהירות האתר ומדוע הוא עדיף על הכלים האחרים?

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

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

מה WebPageTest עושה?

הכלי נוצר במקור ב AOL על ידי Patrick Meenan בשנת 2018 וכעת נהנה ממימון של גוגל כחלק מהתהליך של שיפור מהירות ה WEB. הכלי WebPageTest הוא ללא ספק הכלי הטוב ביותר בשוק למדידת מהירות האתר שלכם. ולמרות שלכלי עצמו יכולות מאד מגוונות, עם מעט הדרכה תגלו כי כמה כלי זה חיוני והכרחי לשיפור מהירות האתר שלכם.

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

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

אך מה שציינו כאן הוא פִּשּׁוּט של כל האפשרויות והיכולות של כלי זה. WPT יכול לעשות הרבה יותר, כל כך הרבה שאפילו נכתב ספר בעל יותר מ 200 עמודים על הכלי. למרות זאת, ללא קריאה של הספר ועם מעט הדרכה אתם יכולים לנצל את הכלי לאופטימיזציה ושיפור ביצועי האתר שלכם.

מדוע WebPageTest עדיף על GTmetrix ועל Pingdom לבדיקת מהירות וביצועים?

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

  • אין אפשרות לבחור מיקום גיאוגרפי של שרתים בישראל. כמובן שיש לכך השפעה על תוצאות הבדיקה ועל זמן הטעינה הכולל. באופן כללי מספר מיקומי השרתים האפשרי ב WPT גדול בהרבה מהכלים האחרים.
  • מספר סוגי החיבורים (Connection Throttling) הרבה יותר רחב ב WPT.
  • רק WPT ו GTmetrix תומכים ב HTTP/2.
  • גירסאות הדפדפן שכלים אלו משתמשים ישנות יותר מהגירסה בה משתמש WebPageTest. לדוגמה, WPT משתמש בכרום 69 כאשר GTmetrix משתמש בכרום בגירסה 62 ו Pingdom הרחק מאחור ומשתמש בגירסת כרום 39 שאינה תומכת כלל בפרוטוקול HTTP/2.

ניתן לראות את הגירסאות בהן כלים אלו משתמשים על ידי מבט ב User-Agent תחת Request Headers בתוצאות הבדיקה (ראו תמונות).

User Agent - Pingdom

User Agent – Pingdom

User Agent - GTmetrix

User Agent – GTmetrix

User Agent - WebPageTest

User Agent – WebPageTest

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

בדיקת מהירות האתר שלכם באמצעות WebPageTest

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

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

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

WebPageTest Speed Test

בחלון זה תמצאו שתי אפשרויות:

Test Location – המיקום ממנו תתבצע הבדיקה: תחת אפשרות זו תמצאו מעל 40 מיקומים גיאוגרפים שונים מהם תוכלו לבצע את הבדיקה. באמצעות תוכנית שותפים, WPT נמצא פיזית על שרתים הנמצאים במיקומים אלו.

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

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

אז בואו נשנה את מיקום השרתים לישראל ונשאיר את דפדפן ברירת המחדל (כרום). המשיכו ולחצו על האפשרויות המתקדמות (Advanced Settings) ויופיע מולכם החלון הבא:

WebPageTest Advanced Settings

חלון אפשרויות מתקדמות – Advanced Settings

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

Connection – חיבור: מדמה את מהירות החיבור. לא משנה כל כך כרגע אלא אם אתם מבצעים בדיקות מתקדמות יותר. השאירו אותו כל ברירת המחדל של Cable 5/1 Mbps 28ms RTT.

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

בכדי לקבל תוצאות אמינות נכון יהיה לבצע את הבדיקה מספר פעמים ולתת ל WPT לבחור את התוצאה הממוצעת (Median Results). מומלץ לקבוע אפשרות זו על לפחות 3 בדיקות.

Repeat Views – בדיקה חוזרת: אפשרות זו מגדירה האם על כל בדיקה להתבצע פעם אחת (כאשר לא קיים זכרון מטמון / Cache) או לחילופין, פעם אחת כאשר ה Cache נקי ולאחר מכן בדיקה כאשר קיים.

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

זה מסביר מדוע כמעט תמיד הביקור הראשוני שלכם באתר מסויים איטי יותר מהפעם הבאה שתכנסו אל אותו אתר. אני ממליץ כי תשנו הגדרה זו ל First View and Repeat View בכדי שתוכלו להבין את חוויות הגולשים החדשים כמו גם את החוויה עבור אלו שכבר ביקרו באתר שלכם.

Capture Video – לכידת וידאו: אפשרות מאד מגניבה של WPT. היא מאפשרת לכם לראות ויזואלית מה שהמשתמשים רואים לפי המכשיר שבחרתם והמיקום הגיאוגרפי. נגע בזה בהמשך אך לבינתיים וודאו כי אפשרות זו מסומנת.

נשאיר את שאר האפשרויות במצב הדיפולטיבי. הכניסו את כתובת האתר אותו תרצה לבדוק ולחצו על Start Test. בדרך כלל לוקח 30-60 שניות על מנת לקבל תוצאה, בהתאם לאפשרויות שבחרתם וכמה אנשים מחכים בתור 🙂

כעת בואו ניתן מבט בתוצאות…

ניתוח התוצאות של WebPageTest

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

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

תוצאות הבדיקה – Performance Results

אנו נתרכז במספרים והמדדים שנמצאים תחת הכותרת Performance Results – Median Run. אלו בעצם המדדים החשובים ביותר אליהם יש להתייחס.

WebPageTest Performance Results

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

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

  1. First Byte – זהו ה First Byte Time או TTFB (נתון חשוב וארחיב על נתון זה עוד רגע). בגדול, זהו הזמן שלוקח לקבל את הבייט הראשון של ה HTML Document והוא בדרך כלל מאד נמוך יחסית לזמן הכללי של טעינת העמוד. התמונות, קבצי ה Javascript ובאופן כללי הנכסים בעמוד הם אלו שלוקח להם את הזמן הרב ביותר להטען. השאיפה שלכם היא להגיע למצב בו ה First Byte Time הוא בין 200-400ms.
  2. Start Render – זהו הזמן שלוקח עד שרואים אלמנט כלשהו ויזואלית על המסך מעבר למסך הלבן.
  3. Document Complete – זהו הזמן בו נטענו כל הקומפוננטות הראשוניות ב HTML DOM ואתם כבר יכולים להתחיל לבצע אינטראקציה עם העמוד (כגון גלילה וכדומה).
  4. Fully Loaded – זוהי הנקודה בזמן בה הטעינה הסתיימה. כל הנכסים, Tracking Codes וכדומה, ממש הכל. הרבה אתרים מכוונים למצב בו הם מנסים לשפר את זמן ה Document Complete (הסעיף הקודם) על חשבון הזמן שלוקח לעמוד להטען במלואו (Fully Loaded). כלומר, להמשיך ולטעון דברים ברקע כל עוד המשתמש יכול לבצע אינטראקציה עם העמוד.
  5. Speed Index – מדד זה הוא ייחודי ל WPT והוא בעצם מודד באיזו מהירות תוכן האתר ״מתאכלס״ ויזואלית. הנוסחה בה נתון זה מחושב די מעניינת ואתם מוזמנים לקרוא עוד על נתון זה בדוקומנטציה של WPT. נאמר רק שככל ונתון זה נמוך יותר, העמוד שלכם נטען מהר יותר.
  6. Requests – מספר הבקשות שנעשו לשרת על ידי הדפדפן על מנת לקבל את תוכן העמוד (תמונות, JS, CSS וכדומה).
  7. Bytes In – כמות המידע (משקל בבייטים) שהיה על הדפדפן להוריד לצורך טעינת העמוד. נתון זה בדרך כלל נקרא "Page Size״.

המטרה הכללית באופטימיזצית האתר היא שכל הנתונים שהזכרנו בחלק זה יהיו נמוכים יותר.

Time to First Byte

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

קורלציה בין TTFB לדירוג האתר במנועי חיפוש

קורלציה בין TTFB לדירוג האתר במנועי חיפוש

אז נתון זה הוא המדד לכמה מהר הרשת והשרת החזירו את הבייט הראשון של קובץ ה HTML שהתבקש. ככל שנתון זה נמוך יותר כך טוב יותר מכיוון והאתר מגיב מהר יותר. TTFB גבוה יכול להעיד על שרת חלש במיוחד.

Waterfall Charts

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

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

WebPageTest Waterfall Chart

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

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

מבט ויזואלי על כיצד האתר שלכם נטען

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

זהו מידע מאד שימושי, לדוגמה, כנראה ואינכם עובדים מקרואטיה עם מכשיר מסוג Nexus 7, אך עדיין תוכלו לראות כיצד תראה החוויה של משתמש זה. על מנת לגשת לוידאו, לחצו על הלשונית Summary בתוצאות הבדיקה ולאחר מכן יש ללחוץ על קישור ה Video בעמודה הימנית, ליד הבדיקה לגביה תרצו לראות את אותו וידאו.

WebPageTest Video

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

לסיכום

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

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

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

תגובות ושאלות יתקבלו בברכה…. 🙂

רועי יוסף
רועי יוסף

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

4תגובות...

השאירו תגובה

פעימות