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