שימוש בכלים למדידת ביצועים

Sam Dutton

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

נדרשת בדיקה לכל מטרה.

יש מגוון רחב של כלים וטכניקות לבדיקת אתרים:

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

בהמשך נסביר איזו גישה רלוונטית לכל סוג של ביקורת.

תיעוד בקשות למשאבים: מספר, גודל, סוג ותזמון

מקום טוב להתחיל בבדיקת אתר הוא לבדוק דפים באמצעות כלי הרשת של הדפדפן שלך. אם לא ברור לך איך לעשות את זה, אפשר לעיין בחלונית הרשת של כלי הפיתוח ל-Chrome במדריך לתחילת העבודה. כלים דומים זמינים ב-Firefox, ב-Safari, ב-Internet Explorer וב-Edge.

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

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

הנה כמה תכונות ומדדים עיקריים שכדאי לבדוק באמצעות כלי הדפדפן:

• ביצועי טעינה: Lighthouse מספק סיכום של מדדי הטעינה. Addy Osmani כתב סיכום נהדר על רגעים משמעותיים של משתמשים בטעינת הדף.
• אירועי ציר זמן לטעינה ולניתוח של משאבים ושימוש בזיכרון. אם אתם רוצים להעמיק בנושא, הפעילו את הזיכרון ואת הפרופיל של JavaScript.
• משקל הדף הכולל ומספר הקבצים.
• המספר והמשקל של קובצי JavaScript.
• קובצי JavaScript בודדים גדולים במיוחד (יותר מ-100KB), למשל.
• JavaScript שלא נמצא בשימוש. אפשר לבדוק זאת באמצעות כלי הכיסוי של Chrome.
• המספר הכולל והמשקל הכולל של קובצי תמונות.
• קובצי תמונה בודדים גדולים במיוחד.
• פורמטים של תמונות: האם יש קובצי PNG שיכולים להיות בפורמט JPEG או SVG? האם משתמשים ב-WebP עם חלופות?
• האם נעשה שימוש בטכניקות של תמונות רספונסיביות (כמו srcset).
• הגודל של קובץ ה-HTML.
• המספר הכולל והמשקל של קובצי CSS.
• שירות CSS שאינו בשימוש. (ב-Chrome, השתמשו בלוח הכיסוי).
• בדוק אם נעשה שימוש בעייתי בנכסים אחרים, כגון Web Fonts (כולל גופני סמלים).
• כדאי לבדוק אם יש משהו שחוסם את טעינת הדף בציר הזמן של כלי הפיתוח.

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

בדיקת הזיכרון והעומס על המעבד (CPU)

לפני שמבצעים שינויים, מומלץ לתעד את השימוש בזיכרון ובמעבד (CPU).

ב-Chrome אפשר לגשת אל 'מנהל המשימות' מהתפריט 'חלון'. זו דרך פשוטה לבדוק את הדרישות של דף אינטרנט.

בדיקת ביצועי הטעינה הראשונה והעוקבות

בעזרת Lighthouse, WebPagetest ו-Pagespeed Insights, אפשר לנתח את המהירות, עלויות הנתונים והשימוש במשאבים. בדיקת WebPagetest תבדוק גם שמירה של תוכן סטטי במטמון, זמן עד לבייט ראשון, ואם האתר שלכם עושה שימוש יעיל ב-CDN.

שמירת התוצאות

• WebPagetest: לכל תוצאות בדיקה יש כתובת URL משלה.
• Pagespeed Insights: הכלי האינטרנט של Pagespeed Insights כולל עכשיו נתוני דוח של חוויית המשתמש ב-Chrome, עם נתונים סטטיסטיים של ביצועים בעולם האמיתי.
• Lighthouse: ניתן לשמור דוחות מחלונית הביקורת של Chrome DevTools בלחיצה על לחצן ההורדה:

  

בדיקה של דרישות הליבה של Progressive Web App

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

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

תוכלו להוריד דוח של Lighthouse כ-JSON, או במקרה שאתם משתמשים בתוסף Lighthouse ל-Chrome, לשתף את הדוח בתור GitHub Gist: לוחצים על הלחצן Share, בוחרים באפשרות 'Open in Viewer' ואז לוחצים שוב על לחצן השיתוף בחלון החדש ועל 'שמירה כ-Gist'.

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

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

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

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

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

מערכת Google Analytics משתמשת בנתונים מה-Navigation Timing API.

תוכלו לתעד את הנתונים באמצעות אחד מממשקי ה-API של JavaScript או באמצעות המדדים שלכם, לדוגמה:

    const subscribeBtn = document.querySelector('#subscribe');

    subscribeBtn.addEventListener('click', (event) => {
     // Event listener logic goes here...

     const lag = performance.now() - event.timeStamp;
     if (lag > 100) {
      ga('send', 'event', {
       eventCategory: 'Performance Metric'
       eventAction: 'input-latency',
       eventLabel: '#subscribe:click',
       eventValue: Math.round(lag),
       nonInteraction: true,
      });
     }
    });

אפשר גם להשתמש ב-ReportingObserver כדי לבדוק אם יש אזהרות לגבי הוצאה משימוש והתערבות של הדפדפן. זהו אחד מממשקי API רבים לקבלת מדידות בזמן אמת ממשתמשים אמיתיים.

חוויה בעולם האמיתי: צילום מסך ווידאו

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

כדאי לשמור גם הקלטות מסך. יש הרבה אפליקציות להקלטת מסך ב-Android, ב-iOS ובפלטפורמות למחשב (וסקריפטים לביצוע זאת).

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

השוואה מפורטת לפני ואחרי זה יכולה להיות דרך נהדרת להדגים שיפורים!

מה עוד?

אם רלוונטי, ניתן לקבל Web Bloat Score. זו בדיקה כיפית, אבל היא יכולה להיות גם דרך משכנעת להדגים את ה-bloat הקוד או להראות שביצעתם שיפורים.

במאמר What does My Site Cost? (מה עלות האתר שלי אפשר לראות בהמשך) שמספק מדריך כללי לעלות הפיננסית של טעינת האתר באזורים שונים.

יש הרבה כלים עצמאיים ואונליין אחרים: ראו perf.rocks/tools.