תקציב הביצועים הראשון שלכם

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

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

כך מגדירים את תקציב הביצועים הראשון בכמה שלבים פשוטים.

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

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

האפשרות Lighthouse תופיע בחלונית Audits (ביקורות) בכלי הפיתוח ל-Chrome. אפשר להריץ ביקורות על כל דף בחלון אורח כדי לתעד את שתי הפעמים הבאות:

החלונית Lighthouse בכלי הפיתוח ל-Chrome

ניקח לדוגמה מנוע חיפוש מיוחד מאוד,doggos.com. המטרה שלdoggos.com היא להוסיף לאינדקס את כל הדברים שקשורים לכלבים באינטרנט, והדפים החשובים ביותר הם דפי הבית ודפי התוצאות. אלה מספרי ה-FCP ו-TTI שנמדדו באתר במחשב ובנייד.

מחשב FCP מדריך אינטראקטיבי
דף הבית 1,680 אלפיות השנייה 5,550 אלפיות השנייה
דף תוצאות 2,060 אלפיות השנייה 6,690 אלפיות השנייה
ניתוח נתונים במחשב שלdoggos.com
נייד FCP מדריך אינטראקטיבי
דף הבית 1,800 אלפיות השנייה 6,150 אלפיות השנייה
דף תוצאות 1,100 אלפיות השנייה 7,870 אלפיות השנייה
ניתוח נתוני נייד שלdoggos.com

ניתוח תחרותי

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

אם אינך בטוח באילו אתרים לחפש, הנה כמה כלים שתוכל לנסות:

  1. מילת המפתח "קשורה:" בחיפוש Google
  2. התכונה אתרים דומים של Alexa
  3. SimilarWeb

צילום מסך של חיפוש Google עם מילת המפתח הקשורה

כדי לקבל תמונה מציאותית, נסו למצוא בערך 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 אלפיות השנייה
ניתוח תחרותי שלdoggos.com ברשת 3G
כלב שיושב ליד מחשב
נראה ש-doggos.com נראה בסדר מבחינת מדד ה-FCP, אבל ממש מתעכב ב-TTI

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

מדידה שעה נוכחית תקציב (20% יותר מהר מהמתחרים)
FCP 1,800 אלפיות השנייה 704 אלפיות השנייה
מדריך אינטראקטיבי 6,500 אלפיות השנייה 2,520 אלפיות השנייה
תקציב ביצועים שיגרום ל-doggos.com להיות בעדיפות גבוהה יותר מהמתחרים

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

עבורdoggos.com, תקציב מתוקן עשוי להיראות כך.

מדידה שעה נוכחית התקציב הראשוני (20% יותר מהר מהזמן הנוכחי) יעד לטווח ארוך (20% יותר מהר מהמתחרים)
FCP 1,800 אלפיות השנייה 1,440 אלפיות השנייה 704 אלפיות השנייה
מדריך אינטראקטיבי 6,500 אלפיות השנייה 5,200 אלפיות השנייה 2,520 אלפיות השנייה
תקציב הביצועים Reviseddoggos.com

שילוב מדדים שונים

תקציב מבוסס-ביצועים משלב סוגים שונים של מדדים. כבר הגדרנו את התקציב לתזמונים של אבני דרך, ועכשיו נוסיף עוד שניים לתמהיל:

  • מדדים המבוססים על כמות
  • מדדים מבוססי-כללים

תקציב למדדים המבוססים על כמות

לא משנה מה מספר המשקל הכולל של הדף שהעליתם, נסו לספק עד 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.

נתוני הפצה של מכשירים מדוח חוויית המשתמש ב-Chrome
נתוני הפצת מכשירים מדוח חוויית המשתמש ב-Chrome

השלבים הבאים

חשוב לוודא שתקציב הביצועים נאכף בכל הפרויקט ולשלב אותו בתהליך ה-build.