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

Sam Dutton

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

צריך לבצע ביקורת לכל יעד.

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

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

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

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

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

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

לפני שמתחילים לבצע ביקורת על השימוש ברשת, חשוב להשבית את המטמון של הדפדפן כדי להבטיח שתקבלו נתונים סטטיסטיים מדויקים לגבי ביצועי הטעינה הראשונה. אם אתם כבר משתמשים במטמון דרך service worker, צריך לנקות את האחסון של Cache API. מומלץ להשתמש בחלון פרטי כדי שלא תצטרכו לדאוג להשבתת המטמון בדפדפן או להסרת רשומות שהוגדרו קודם לכן במטמון.

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

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

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

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

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

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

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

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

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

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

  

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

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

ב-Lighthouse נבדק גם אם האתר יכול לספק חוויה מקוונת מקובלת.

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

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

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

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

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

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

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

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

    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. אתם מקבלים תיעוד בזמן אמת של מהירות הטעינה של רכיבי הדף: מה מהיר ומה איטי. שומרים הקלטות וידאו וסרטוני מסך כדי להשוות אותם לשיפורים שבוצעו בהמשך.

השוואה בין שתי תמונות – אחת לפני השינוי ואחת אחריו – יכולה להיות דרך מצוינת להמחיש את השיפורים.

מה עוד?

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

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

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