כשאתם מגדירים תקציב אישי, עסקי או משפחתי, אתם מגבילים את ההוצאות ומוודאים שלא תחרגו ממנו. תקציבי ביצועים פועלים באותו אופן, אבל לצורך מדדים שמשפיעים על ביצועי האתר.
לאחר הגדרה ואכיפה של תקציב ביצועים, תוכלו להיות בטוחים שהאתר שלכם יוצג במהירות האפשרית. כך המבקרים יוכלו ליהנות מחוויה טובה יותר, וישפיע לטובה על המדדים העסקיים.
כך מגדירים את תקציב הביצועים הראשון בכמה שלבים פשוטים.
ניתוח ראשוני
אם אתם מנסים לשפר את הביצועים של אתר קיים, התחילו בזיהוי הדפים החשובים ביותר. לדוגמה, אלה יכולים להיות דפים עם הכמות הרבה ביותר של תנועת משתמשים או דף נחיתה של מוצר.
לאחר שתזהו את הדפים המרכזיים שלכם, הגיע הזמן לנתח אותם. קודם כל, נתמקד בציוני הדרך בתזמון שמודדים בצורה הטובה ביותר את חוויית המשתמש.
האפשרות Lighthouse תופיע בחלונית Audits (ביקורות) בכלי הפיתוח ל-Chrome. אפשר להריץ ביקורות על כל דף בחלון אורח כדי לתעד את שתי הפעמים הבאות:
ניקח לדוגמה מנוע חיפוש מיוחד מאוד,doggos.com. המטרה שלdoggos.com היא להוסיף לאינדקס את כל הדברים שקשורים לכלבים באינטרנט, והדפים החשובים ביותר הם דפי הבית ודפי התוצאות. אלה מספרי ה-FCP ו-TTI שנמדדו באתר במחשב ובנייד.
| מחשב | FCP | מדריך אינטראקטיבי |
|---|---|---|
| דף הבית | 1,680 אלפיות השנייה | 5,550 אלפיות השנייה |
| דף תוצאות | 2,060 אלפיות השנייה | 6,690 אלפיות השנייה |
| נייד | FCP | מדריך אינטראקטיבי |
|---|---|---|
| דף הבית | 1,800 אלפיות השנייה | 6,150 אלפיות השנייה |
| דף תוצאות | 1,100 אלפיות השנייה | 7,870 אלפיות השנייה |
ניתוח תחרותי
לאחר שתנתחו את האתר שלכם, הגיע הזמן לנתח את האתרים של המתחרים שלכם. השוואת תוצאות מאתרים דומים לשלכם היא דרך מצוינת לקבוע תקציב ביצועים. זהו שלב חשוב בין אם אתם עובדים על פרויקט קיים או מתחילים מאפס. אתם מרוויחים יתרון תחרותי כשאתם מהירים יותר מהמתחרים.
אם אינך בטוח באילו אתרים לחפש, הנה כמה כלים שתוכל לנסות:
- מילת המפתח "קשורה:" בחיפוש Google
- התכונה אתרים דומים של Alexa
- SimilarWeb
כדי לקבל תמונה מציאותית, נסו למצוא בערך 10 מתחרים.
התקציב של אבני דרך בתזמון
למנוע החיפוש הנישתי שלנו בדוגמה זו יש כמה מתחרים, ואנחנו נתמקד באופטימיזציה של דף הבית למכשירים ניידים. יותר ממחצית מהתנועה באינטרנט מתבצעת כיום ברשתות סלולריות, ושימוש במספרים ניידים כברירת מחדל יועיל לא רק למשתמשים בנייד, אלא גם למשתמשים במחשבים.
מומלץ ליצור תרשים עם זמני FCP ו-TTI לכל האתרים הדומים, ולהדגיש את המהירות הגבוהה ביותר מבין האפשרויות הבאות. תרשים כזה מאפשר לכם לקבל תמונה ברורה יותר של ביצועי האתר שלכם בהשוואה לאלו של המתחרים.
| אתר/דף הבית | FCP | מדריך אינטראקטיבי |
|---|---|---|
| goggles.com | 880 אלפיות השנייה | 3,150 אלפיות השנייה |
| Doggos.com | 1,800 אלפיות השנייה | 6,500 אלפיות השנייה |
| quackquackgo.com | 2,680 אלפיות השנייה | 4,740 אלפיות השנייה |
| ding.xyz | 2,420 אלפיות השנייה | 7,040 אלפיות השנייה |
יש מקום לשיפור והנחיה טובה לכך היא כלל 20%. מחקרים מראים שמשתמשים מזהים הבדל בזמני התגובה כאשר הוא גדול מ-20%. כלומר, אם אתם רוצים להיות טובים באופן משמעותי מהאתר להשוואה, עליכם להיות מהר יותר ב-20% לפחות.
| מדידה | שעה נוכחית | תקציב (20% יותר מהר מהמתחרים) |
|---|---|---|
| FCP | 1,800 אלפיות השנייה | 704 אלפיות השנייה |
| מדריך אינטראקטיבי | 6,500 אלפיות השנייה | 2,520 אלפיות השנייה |
אם אתם מנסים לבצע אופטימיזציה לאתר קיים, ייתכן שלא תוכלו להגיע ליעד הזה. זה לא סימן לוותר. מתחילים בצעדים קטנים ומגדירים תקציב מהיר יותר ב-20% מהמהירות הנוכחית. משם אפשר להמשיך לבצע אופטימיזציה.
עבורdoggos.com, תקציב מתוקן עשוי להיראות כך.
| מדידה | שעה נוכחית | התקציב הראשוני (20% יותר מהר מהזמן הנוכחי) | יעד לטווח ארוך (20% יותר מהר מהמתחרים) |
|---|---|---|---|
| FCP | 1,800 אלפיות השנייה | 1,440 אלפיות השנייה | 704 אלפיות השנייה |
| מדריך אינטראקטיבי | 6,500 אלפיות השנייה | 5,200 אלפיות השנייה | 2,520 אלפיות השנייה |
שילוב מדדים שונים
תקציב מבוסס-ביצועים משלב סוגים שונים של מדדים. כבר הגדרנו את התקציב לתזמונים של אבני דרך, ועכשיו נוסיף עוד שניים לתמהיל:
- מדדים המבוססים על כמות
- מדדים מבוססי-כללים
תקציב למדדים המבוססים על כמות
לא משנה מה מספר המשקל הכולל של הדף שהעליתם, נסו לספק עד 170KB של משאבים קריטיים למשאבים (דחוסים/קטועים). כך ניתן להבטיח שהאתר שלכם יהיה מהיר גם במכשירים לא יקרים וברשת 3G איטית.
אפשר להגדיר תקציב גדול יותר לחוויית המוצר במחשב, אבל אל תשתולל. לפי נתוני HTTP Archive בשנה האחרונה, משקל הדף החציוני במחשבים ובניידים הוא מעל 1MB. כדי לקבל אתר עם ביצועים טובים, עליך לכוון אותו הרבה מתחת למספרים החציוניים האלה.
הנה מספר דוגמאות המבוססות על תקציבי TTI:
| רשת | מכשיר | JS | תמונות | CSS | HTML | גופנים | סה"כ | זמן עד לתקציב אינטראקטיבי |
|---|---|---|---|---|---|---|---|---|
| 3G איטי | Moto G4 | 100 | 30 | 10 | 10 | 20 | ~170 KB | 5 שנ' |
| 4G איטי | Moto G4 | 200 | 50 | 35 | 30 | 30 | ~345 KB | 3 שנ' |
| WiFi | מחשב | 300 | 250 | 50 | 50 | 100 | ~750 KB | 2 שנ' |
הגדרת תקציב על סמך מדדי כמות היא עסק מורכב. אתר מסחר אלקטרוני שמכיל הרבה תמונות של מוצרים שונה מאוד מפורטל חדשות שכולל בעיקר טקסט. אם באתר שלכם יש מודעות או ניתוח נתונים, השימוש ב-JavaScript גדל.
היעזרו בטבלה שלמעלה כנקודת התחלה, ובצעו התאמות בהתאם לסוג התוכן שאיתו אתם עובדים. הגדירו מה ייכללו בדפים, בדקו את המחקר שלכם וקבלו ניחוש מושכל לגבי גדלים ספציפיים של נכסים. לדוגמה, אם בונים אתר עם הרבה תמונות, מגדירים מגבלות מחמירות יותר על גודל ה-JS.
אחרי יצירת אתר פעיל, ניתן לבדוק את הביצועים שלך לפי מדדי ביצועים שמתמקדים במשתמשים ולשנות את התקציב.
תקציב למדדים מבוססי-כללים
מדדים מבוססי-כללים יעילים מאוד הם ציונים של Lighthouse. אפליקציית Lighthouse נותנת ציונים לאפליקציה ב-5 קטגוריות, ואחת מהן היא הביצועים. ציונים של ביצועים מחושבים על סמך 5 מדדים שונים, כולל הצגת התוכן הראשון והזמן עד לפעילות מלאה.
כשמנסים ליצור אתר מעולה, צריך להגדיר את ציון הביצועים של Lighthouse ל-85 (מתוך 100). אפשר להשתמש ב-Lighthouse CI כדי לאכוף בקשות משיכה.
תעדוף
כדאי לשאול את עצמכם מהי רמת האינטראקציה הצפויה באתר שלכם. אם זה אתר חדשות, המטרה העיקרית של המשתמשים היא לקרוא את התוכן, לכן עליכם להתמקד ברינדור מהיר ובשמירה על ערך FCP נמוך. המבקרים ב-doggos.com רוצים ללחוץ על קישורים רלוונטיים בהקדם האפשרי, ולכן העדיפות העליונה היא TTI נמוכה.
חשוב להבין איזה חלק מהקהל גולש במחשבים לעומת מכשירים ניידים ולתעדף בהתאם. אחת הדרכים לגלות זאת היא לבדוק מה הקהל שלכם עושה באתרים של מתחרים, באמצעות מרכז הבקרה של דוח חוויית המשתמש ב-Chrome.
השלבים הבאים
חשוב לוודא שתקציב הביצועים נאכף בכל הפרויקט ולשלב אותו בתהליך ה-build.