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

Sam Dutton

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

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

מטרה למה? מה כדאי לבדוק?
שמירה על פרטיות, אבטחה ותקינות נתונים, והפעלת שימוש יעיל ב-API למה חשוב להשתמש ב-HTTPS הוטמע חיבור HTTPS לכל הדפים/המסלולים והנכסים באתר.
שיפור ביצועי הטעינה 53% מהמשתמשים נוטשים אתרים שהטעינה שלהם נמשכת יותר משלוש שניות JavaScript ו-CSS שאפשר לטעון באופן אסינכרוני או מושהה. מגדירים יעדים לזמן לפעולה אינטראקטיבית ולגודל של נתוני המטען: לדוגמה, TTI ב-3G. מגדירים תקציב ביצועים.
הפחתת משקל הדף • הפחתת עלויות הגלישה למשתמשים עם תוכניות גלישה מוגבלות • הפחתת דרישות האחסון של אפליקציות אינטרנט – חשוב במיוחד למשתמשים במכשירים עם מפרט נמוך • הפחתת עלויות האירוח וההצגה • שיפור הביצועים, המהימנות והעמידות של הצגת התוכן מגדירים תקציב למשקל הדף: לדוגמה, הטעינה הראשונית צריכה להיות קטנה מ-400KB. בודקים אם יש קוד JavaScript כבד. כדאי לבדוק את גודל הקבצים כדי למצוא תמונות, מדיה, קובצי HTML, CSS ו-JavaScript גדולים מדי. מחפשים תמונות שאפשר לטעון באופן מדורג, ובודקים אם יש קוד שלא בשימוש באמצעות כלים למדידת הכיסוי.
הפחתת הבקשות למשאבים • הפחתת בעיות של זמן אחזור • הפחתת עלויות ההצגה • שיפור הביצועים, האמינות והעמידות של הצגת המודעות מחפשים בקשות מוגזמות או מיותרות לכל סוג של משאב. לדוגמה: קבצים שנטענים שוב ושוב, JavaScript שנטען בכמה גרסאות, CSS שלא נעשה בו שימוש אף פעם, תמונות שלא צופים בהן אף פעם (או שאפשר לטעון אותן באיטרציה).
השתמש בזיכרון בצורה אופטימלית זיכרון יכול להפוך לצוואר בקבוק חדש, במיוחד במכשירים ניידים אתם יכולים להשתמש במנהל המשימות של Chrome כדי להשוות את האתר שלכם לאתרים אחרים מבחינת השימוש בזיכרון בזמן טעינת דף הבית ושימוש בתכונות אחרות באתר.
הפחתת העומס על המעבד למכשירים ניידים יש מעבד מוגבל, במיוחד למכשירים עם מפרט נמוך בודקים אם יש קוד JavaScript כבד. באמצעות כלים למדידת הכיסוי, אפשר למצוא רכיבי JavaScript ו-CSS שלא נמצאים בשימוש. בודקים אם יש גודל DOM מוגזם וסקריפטים שפועלים ללא צורך בטעינה הראשונה. מחפשים JavaScript שנטען במספר גרסאות, או ספריות שאפשר להימנע מהן באמצעות טירגוט מחדש קל.

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

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

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

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

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

מנהל המשימות של Chrome שבו מוצג השימוש בזיכרון ובמעבד של ארבע הכרטיסיות הפתוחות בדפדפן
מנהל המשימות של Chrome – שימו לב לתוכנות שמנצלות יותר מדי זיכרון ו-CPU!

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

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

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

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

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

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

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

צילום מסך שבו מוסבר איך לייצא דוח של Chrome Lighthouse כ-gist
ייצוא דוח ל-gist מהתוסף של Lighthouse ל-Chrome – לוחצים על לחצן השיתוף

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

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

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

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

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

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

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

מה עוד?

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

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

צילום מסך מתוך whatdoesmysitecost.com

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