ביצועים הם חלק חשוב בחוויית המשתמש, והם משפיעים על מדדים עסקיים. מפתה לחשוב שמפתחים טובים יקבלו אתר עם ביצועים טובים. אבל האמת היא שביצועים טובים רק לעיתים רחוקות גורמים לתופעות לוואי. כמו ברוב הדברים האחרים — כדי להשיג יעד, צריך להגדיר אותו בבירור. מתחילים את התהליך כשמגדירים תקציב ביצועים.
הגדרה
תקציב ביצועים הוא קבוצה של מגבלות שהוטלו על מדדים שמשפיעים על ביצועי האתר. זה יכול להיות הגודל הכולל של דף, הזמן שלוקח לטעון ברשת סלולרית או אפילו מספר בקשות ה-HTTP שנשלחות. הגדרת תקציב עוזרת להתחיל את השיחה בנוגע לביצועים באינטרנט. הוא משמש כנקודת התייחסות לקבלת החלטות לגבי עיצוב, טכנולוגיה והוספת תכונות.
תקציב מאפשר למעצבים לחשוב על ההשפעות של תמונות ברזולוציה גבוהה ועל מספר הגופנים באינטרנט שהם בוחרים. הוא גם עוזר למפתחים להשוות גישות שונות לבעיה ולהעריך frameworks וספריות על סמך הגודל שלהן וניתוח העלות.
בחירת מדדים
מדדים מבוססי כמויות ⚖️
המדדים האלה שימושיים בשלבים המוקדמים של הפיתוח כי הם מדגישים את ההשפעה של הכללת תמונות וסקריפטים כבדים. קל גם להעביר את המצגת גם למעצבים וגם למפתחים.
כבר הזכרנו כמה דברים שאפשר לכלול בתקציב ביצועים, כמו משקל הדף ומספר בקשות ה-HTTP, אבל אפשר לפצל אותם למגבלות מפורטות יותר, כמו:
- גודל מקסימלי של תמונות
- מספר גופני מקסימלי של אינטרנט
- גודל מקסימלי של סקריפטים, כולל frameworks
- המספר הכולל של משאבים חיצוניים, כמו סקריפטים של צד שלישי
עם זאת, המספרים האלה לא נותנים לכם מידע רב על חוויית המשתמש. העיבוד של שני דפים עם אותו מספר בקשות או אותו משקל עשוי להשתנות בהתאם לסדר שבו מקבלים את הבקשות למשאבים. אם משאב קריטי, כמו תמונה ראשית (Hero) או גיליון סגנונות של אחד מהדפים, נטען בשלב מאוחר בתהליך, המשתמשים ימתינו זמן רב יותר כדי לראות משהו מועיל והם יחשבו שהדף איטי יותר. אם בדף האחר החלקים החשובים ביותר נטענים במהירות, יכול להיות שהם לא יבחינו אפילו אם שאר החלקים בדף לא נטענים.
לכן חשוב לעקוב אחרי מדדים מסוג אחר.
לוחות זמנים של יעדים ⏱️
תזמוני אבן דרך מסמנים אירועים שמתרחשים במהלך טעינת דף, כמו אירוע DOMContentLoaded או load. התזמונים השימושיים ביותר הם מדדי ביצועים שמתמקדים במשתמשים, שמספקים מידע כלשהו על החוויה של טעינת דף. המדדים האלה זמינים דרך ממשקי API של הדפדפן וכחלק מדוחות Lighthouse.
המדד First Contentful Paint (FCP) מציין מתי הדפדפן מציג את קטע התוכן הראשון מה-DOM, כמו טקסט או תמונות.
משך הזמן עד לאינטראקטיביות (TTI) מודד כמה זמן עובר עד שדף הופך לאינטראקטיבי באופן מלא ולהגיב באופן מהימן לקלט של משתמשים. חשוב מאוד לעקוב אחריו אם מצפים לאינטראקציה כלשהי מצד המשתמש בדף, כמו לחיצה על קישורים, לחצנים, הקלדה או שימוש ברכיבי טופס.
מדדים מבוססי-כללים ⚡
במסגרת Lighthouse ו-WebPageTest, המערכת מחשבת ציוני ביצועים על סמך כללים כלליים של שיטות מומלצות, שאפשר להשתמש בהם כהנחיות. כבונוס, Lighthouse ניתן גם טיפים לאופטימיזציות פשוטות.
כדי להשיג את התוצאות הטובות ביותר, כדאי לעקוב אחר שילוב של מדדי ביצועים שמבוססים על כמות ומדדי ביצועים שמתמקדים במשתמשים. כדאי להתמקד בגודלי הנכסים בשלבים המוקדמים של הפרויקט ולהתחיל לעקוב אחרי FCP ו-TTI בהקדם האפשרי.
הגדירו בסיס
הדרך היחידה לדעת מה הכי מתאים לאתר שלכם היא לנסות אותו - לערוך מחקר ולאחר מכן לבדוק את הממצאים. אתם יכולים לנתח את המתחרים כדי לראות מה מצב ההתקדמות שלכם. 🕵️
אם אין לכם זמן, ריכזנו כאן מספרי ברירת מחדל מומלצים שיעזרו לכם להתחיל:
- זמן של פחות מ-5 שנ' עד למצב אינטראקטיבי
- פחות מ-170KB של משאבים בנתיב קריטי (דחוס/מוקטן)
המספרים האלה מחושבים על סמך מכשירים בסיסיים בעולם האמיתי ומהירות הרשת של 3G. יותר ממחצית מהתנועה באינטרנט מגיעה היום ברשתות סלולריות, לכן מומלץ להתחיל להשתמש במהירות רשת 3G.
דוגמאות לתקציבים
צריך להגדיר תקציב לסוגים שונים של דפים באתר, כי התוכן שלהם משתנה. למשל:
- דף המוצר שלנו חייב לשלוח פחות מ-170KB של JavaScript בנייד
- דף החיפוש שלנו צריך לכלול פחות מ-2MB של תמונות במחשב
- דף הבית שלנו צריך להיטען ולהיות אינטראקטיבי תוך פחות מ-5 שניות ב-3G איטי בטלפון Moto G4
- הבלוג שלנו צריך לקבל ציון של יותר מ-80 בביקורות ביצועים של Lighthouse
הוספת תקציבי ביצועים לתהליך ה-build
בחירת הכלי לביצוע הפעולות האלה תלויה במידה רבה בהיקף הפרויקט ובמשאבים שאפשר להקדיש למשימה. יש כמה כלים בקוד פתוח שיכולים לעזור לכם להוסיף תקציב לתהליך ה-build:
אם משהו חורג מסף שהוגדר, אפשר:
- ביצוע אופטימיזציה של תכונה או נכס קיימים 🛠️
- הסרה של תכונה או נכס קיימים 🗑️
- לא להוסיף את התכונה או הנכס החדשים ✋⛔
מעקב אחרי ביצועים
כדי לוודא שהאתר מהיר מספיק, יש להמשיך למדוד את הביצועים גם אחרי ההשקה הראשונית. מעקב אחרי המדדים האלה לאורך זמן וקבלת נתונים ממשתמשים אמיתיים יראה לכם איך שינויים בביצועים משפיעים על מדדים עסקיים מרכזיים.
סיכום
המטרה של תקציב ביצועים היא להבטיח שתתמקדו בביצועים לאורך כל הפרויקט, והגדרה מוקדמת של התקציב תעזור לכם למנוע מצבים כאלה מאוחר יותר. הדף הזה צריך לשמש כנקודת התייחסות כדי לעזור לכם להבין מה צריך לכלול באתר. הרעיון המרכזי הוא להגדיר יעדים כדי שתוכלו לאזן טוב יותר את הביצועים בלי לפגוע בפונקציונליות או בחוויית המשתמש.🎯
במדריך הבא מוסבר איך להגדיר את תקציב הביצועים הראשון בכמה שלבים פשוטים.