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

Sam Dutton

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

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

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

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

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

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

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