יש כמה יעדים עיקריים ליצירת אתר עמיד עם ביצועים טובים ועלות נמוכה של נתונים.
צריך לבצע ביקורת לכל יעד.
יעד | למה? | מה כדאי לבדוק? |
---|---|---|
שמירה על פרטיות, אבטחה ותקינות נתונים, והפעלת שימוש יעיל ב-API | למה חשוב להשתמש ב-HTTPS | הוטמע חיבור HTTPS לכל הדפים/המסלולים והנכסים באתר. |
שיפור ביצועי הטעינה | 53% מהמשתמשים נוטשים אתרים שהטעינה שלהם נמשכת יותר משלוש שניות | JavaScript ו-CSS שאפשר לטעון באופן אסינכרוני או לדחות. מגדירים יעדים לזמן לפעולה אינטראקטיבית ולגודל של נתוני המטען: לדוגמה, TTI ב-3G. מגדירים תקציב ביצועים. |
הפחתת משקל הדף | • הפחתת עלויות הגלישה למשתמשים עם תוכניות גלישה עם מכסה • הפחתת דרישות האחסון של אפליקציות אינטרנט – חשוב במיוחד למשתמשים במכשירים עם מפרט נמוך • הפחתת עלויות האירוח וההצגה • שיפור הביצועים, המהימנות והעמידות של הצגת התוכן | מגדירים תקציב למשקל הדף: לדוגמה, הטעינה הראשונית צריכה להיות קטנה מ-400KB. בודקים אם יש קוד JavaScript כבד. כדאי לבדוק את גודל הקבצים כדי למצוא תמונות, מדיה, קובצי HTML, CSS ו-JavaScript גדולים מדי. מחפשים תמונות שאפשר לטעון באופן מדורג, ובודקים אם יש קוד שלא בשימוש באמצעות כלים למדידת הכיסוי. |
הפחתת בקשות למשאבים | • צמצום בעיות זמן האחזור • הפחתת עלויות הצגת המודעות • שיפור בביצועים, באמינות ובעמידות של הצגת המודעות | מחפשים בקשות מוגזמות או מיותרות לכל סוג של משאב. לדוגמה: קבצים שנטענים שוב ושוב, JavaScript שנטען בכמה גרסאות, CSS שלא נעשה בו שימוש אף פעם, תמונות שלא מוצגות אף פעם (או טעינה מדורגת). |
השתמש בזיכרון בצורה אופטימלית | זיכרון יכול להפוך לצוואר בקבוק חדש, במיוחד במכשירים ניידים | בעזרת מנהל המשימות של Chrome תוכלו להשוות בין האתר שלכם לאתרים אחרים מבחינת שימוש בזיכרון בזמן טעינת דף הבית ושימוש בתכונות אחרות של האתר. |
הפחתת העומס על המעבד (CPU) | למכשירים ניידים יש מעבד מוגבל, במיוחד למכשירים עם מפרט נמוך | בודקים אם יש קוד JavaScript כבד. איתור רכיבי JavaScript ו-CSS שלא נמצאים בשימוש באמצעות כלים למדידת הכיסוי. בודקים אם יש גודל DOM מוגזם וסקריפטים שפועלים ללא צורך בטעינה הראשונה. מחפשים JavaScript שנטען במספר גרסאות, או ספריות שאפשר להימנע מהן באמצעות טירגוט מחדש קל. |
יש מגוון רחב של כלים ושיטות לבדיקת אתרים:
- כלי מערכת
- כלים מובנים בדפדפן
- תוספים לדפדפן
- בקשות לבדיקות אונליין
- כלי אמולציה
- ניתוח נתונים
- מדדים שמסופקים על ידי השרתים והמערכות העסקיות
- הקלטת מסך והקלטת וידאו
- בדיקות ידניות
בהמשך נסביר איזו גישה רלוונטית לכל סוג של ביקורת.
תיעוד בקשות למשאבים: מספר, גודל, סוג ותזמון
מקום טוב להתחיל בו כשמבצעים ביקורת באתר הוא לבדוק דפים באמצעות כלי הרשת של הדפדפן. אם אתם לא בטוחים איך לעשות זאת, תוכלו לעיין במדריך למתחילים בחלונית הרשת של כלי הפיתוח ל-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 (כולל גופנים של סמלים).
- בודקים את ציר הזמן של 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 worker ומניפסט של אפליקציית אינטרנט.
ב-Lighthouse נבדק גם אם האתר יכול לספק חוויה מקובלת אופליין.
אפשר להוריד דוח של Lighthouse כקובץ JSON. אם אתם משתמשים בתוסף Lighthouse ל-Chrome, תוכלו לשתף את הדוח כ-GitHub Gist: לוחצים על לחצן השיתוף, בוחרים באפשרות 'פתיחה ב'תצוגה', לוחצים שוב על לחצן השיתוף בחלון החדש ובוחרים באפשרות 'שמירה כ-Gist'.
משתמשים בניתוח נתונים, במעקב אחרי אירועים ובמדדים עסקיים כדי לעקוב אחרי הביצועים בעולם האמיתי
אם אפשר, רשמו לפניכם את נתוני הניתוח לפני שאתם מיישמים את השינויים: שיעורי העזיבה, משך הביקור בדף, דפי יציאה: מה שרלוונטי לדרישות העסק שלכם.
אם אפשר, כדאי לתעד מדדים עסקיים וטכניים שעשויים להיות מושפעים, כדי שתוכלו להשוות בין התוצאות אחרי ביצוע השינויים. לדוגמה: אתר מסחר אלקטרוני עשוי לעקוב אחרי הזמנות לדקה או לתעד נתונים סטטיסטיים לצורך בדיקות מתח וסיבולת. צמצום משקל הדף ובקשות המשאבים צפוי לשפר את עלויות האחסון בקצה העורפי, את דרישות המעבד, את עלויות ההצגה ואת העמידות.
אם עדיין לא הטמעתם ניתוח נתונים, זה הזמן לעשות זאת. המדדים העסקיים וניתוח הנתונים הם הגורמים הקובעים אם האתר שלכם פועל או לא. אם יש צורך, כדאי לשלב מעקב אחר אירועים כדי לבצע פעולות של משתמשים, כמו לחיצות על לחצנים והפעלות של סרטונים. כדאי גם להטמיע ניתוח תהליך היעדים: הנתיבים שבהם המשתמשים מנווטים ל'המרות'.
תוכלו לעקוב אחר מהירות האתר ב-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. אתם מקבלים תיעוד של מהירות הטעינה של רכיבי הדף בעולם האמיתי: מה מהיר ומה איטי. שומרים הקלטות וידאו וסרטוני מסך כדי להשוות אותם לשיפורים שבוצעו בהמשך.
השוואה בין שתי תמונות – אחת לפני השינוי ואחת אחריו – יכולה להיות דרך מצוינת להמחיש את השיפורים.
מה עוד?
אם רלוונטי, מקבלים ציון Bloat באינטרנט. זהו מבחן מהנה, אבל הוא יכול גם להיות דרך משכנעת להדגים את הבעיה של קוד מיותר – או להראות שערכתם שיפורים.
What does My Site Cost? (עלות האתר שלי?), מוצגת למטה, ומספקת מדריך כללי לגבי העלות הכספית של טעינת האתר באזורים שונים.
יש עוד הרבה כלים עצמאיים ואונליין זמינים: כדאי לעיין ב-perf.rocks/tools.