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

Sam Dutton

יש כמה יעדים מרכזיים לבניית אתר יעיל וגמיש עם עלות נתונים נמוכה.

לכל מטרה צריך ביקורת.

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

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

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

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

הערה: במקרים רבים אפשר להשתמש בכלים של הדפדפן כדי לזהות בעיות, פשוט על ידי בדיקת התגובות ברשת ומיון לפי גודל. לדוגמה: קובץ ה-PNG בגודל 349KB כאן נראה כאילו הוא עלול להיות בעייתי:

ואכן, התברר שהתמונה הייתה ברוחב 1,600 פיקסלים, בעוד שרוחב התצוגה המקסימלי של הרכיב היה 400 פיקסלים בלבד. אחרי פריסת הקובץ, התמונה תפסה יותר מ-4MB בזיכרון, וזה הרבה בטלפון נייד. שמירה מחדש של התמונה כקובץ JPEG ברוחב 800 פיקסלים (כדי להתמודד עם רוחב תצוגה של 400 פיקסלים במסכים עם רזולוציה כפולה) ואופטימיזציה באמצעות ImageOptim הניבו קובץ בגודל 17KB: השוו בין קובץ ה-PNG המקורי לבין קובץ ה-JPEG שעבר אופטימיזציה.

זה שיפור של 95%!

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

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

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

מנהל המשימות של Chrome – שימו לב לזלילת זיכרון ו-CPU

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

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

הערה: כדי להפעיל שמירה במטמון של תוכן סטטי, כך שדפדפנים יוכלו לשמור נכסים במטמון בפעם הראשונה שהם מתבקשים, צריך להגדיר את השרת כך שיכלול כותרות מתאימות. אם דפדפן יכול לשמור משאבים במטמון, הוא לא יצטרך לאחזר אותם מהרשת בביקורים הבאים. כך אפשר לשפר את מהירות הטעינה, להפחית את עלות הנתונים ולהקטין את העומס על הרשת ועל השרת – גם בדפדפנים שלא תומכים בשמירה במטמון באמצעות Service Worker. גם אם אתם משתמשים ב-Cache API, חשוב להפעיל את השמירה במטמון של הדפדפן. כדי לקבל מידע נוסף, כדאי לעיין בPageSpeed Tools ובמקורות המידע של Web Fundamentals (היסודות של בניית אתרים) (במיוחד בקטע "ביטול תוקף ועדכון של תגובות שנשמרו במטמון").

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

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

  

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

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

‫Lighthouse גם בודק אם האתר יכול לספק חוויית שימוש מקובלת במצב אופליין.

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

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

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

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

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

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

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

השוואה של "לפני" ו"אחרי" זו דרך מצוינת להראות את השיפורים.

מה עוד?

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

הכלי What Does My Site Cost?‎, שמוצג בהמשך, מספק מדריך כללי לעלות הכספית של טעינת האתר באזורים שונים.

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