ביצועי דף מספק סקירת ביצועים מיידית של כל דף אינטרנט — מדדי תזמון טעינה (FCP, DOMContentLoaded, טעינה מלאה, TTI), נתוני DOM (מספר אלמנטים, עומק קינון, מאזיני אירועים) ופירוט משאבים המציג את הכמות והגודל של JavaScript, CSS, תמונות, פונטים ונכסים נוספים. ציון ביצועים עם קידוד צבעוני מספק אינדיקטור תקינות מהיר.
פרופיל ביצועים עם Lighthouse או WebPageTest מספק ניתוח מעמיק אך דורש זמן הרצה ומייצר דוחות מורכבים. לפעמים כל מה שצריך הוא תשובה מהירה: "האם הדף הזה מהיר או איטי? מה הבעיה הגדולה ביותר?" ביצועי דף מעניק לך את הסקירה המיידית הזו. הכלי קורא נתוני תזמון מ-Performance API ו-Navigation Timing API של הדפדפן (נתונים שכבר נאספו — ללא צורך בטעינת דף נוספת) ומציג אותם בלוח מחוונים ויזואלי ונקי. החלק העליון מציג מדדי תזמון מרכזיים: First Contentful Paint (מתי מופיע התוכן הראשון), DOMContentLoaded (מתי ה-HTML מפורסר במלואו), Full Load (מתי כל המשאבים מסיימים) ו-Time to Interactive (מתי הדף הופך לאינטראקטיבי). כל מדד מקודד בצבע — ירוק למהיר, צהוב לבינוני, אדום לאיטי — על בסיס סף Web Vitals. מתחת לכך, פירוט המשאבים מציג כמה רוחב פס מוקצה ל-JavaScript, CSS, תמונות, פונטים וסוגי משאבים נוספים, עם גרפי עמודות ויזואליים להשוואה קלה. חלק נתוני ה-DOM מציג את מספר האלמנטים הכולל, עומק הקינון המרבי ומספר מאזיני האירועים — מחוונים של מורכבות DOM המשפיעים על ביצועי הרינדור.
מציג First Contentful Paint (FCP), DOMContentLoaded, טעינת דף מלאה ו-Time to Interactive (TTI) — ארבעת מדדי הביצועים החשובים ביותר. כל אחד מקודד בצבע: ירוק (מהיר), צהוב (בינוני), אדום (איטי) על בסיס סף Web Vitals מבוסס.
גרף עמודות ויזואלי המציג את הכמות והגודל הכולל של כל סוג משאב: קבצי JavaScript, גיליונות סגנון CSS, תמונות, פונטים ונכסים נוספים. ראה מיד איזה סוג משאב תורם הכי הרבה למשקל הדף.
מציג את מספר אלמנטי ה-DOM הכולל, עומק הקינון המרבי ומספר מאזיני האירועים הכולל. DOM גדול (2000+ אלמנטים) וקינון עמוק (15+ רמות) מסומנים כצווארי בקבוק פוטנציאליים לביצועים.
ציון יחיד בסולם 0-100 מסכם את תקינות ביצועי הדף, מקודד בצבע ירוק (85+), צהוב (50-84), או אדום (0-49). מבוסס על שילוב משוקלל של מדדי תזמון ויעילות משאבים.
מציג את הגודל המשולב של כל המשאבים שהורדו ב-MB. מפורט לפי קטגוריה כך שניתן לראות ש-842 KB הם JavaScript, 245 KB הן תמונות ו-128 KB הוא CSS — לזיהוי התורמים הכבדים ביותר.
קורא נתוני ביצועים מ-Performance API של הדפדפן — נתונים שכבר נאספו במהלך טעינת הדף הרגילה. ללא בדיקה סינתטית חוזרת, ללא בקשות רשת נוספות וללא השפעה על ביצועים מהפעלת הכלי.
פתח כל דף וקבל סקירת ביצועים מיידית. האם הוא מהיר (ציון ירוק), בינוני (צהוב) או איטי (אדום)? לוח המחוונים עונה על כך תוך פחות משנייה — ללא המתנה להרצת Lighthouse.
אם הדף איטי, פירוט המשאבים מראה מדוע. 1.2 MB של JavaScript? זה צוואר הבקבוק. 800 KB של תמונות לא מאופטמות? זה הפתרון. הפירוט הויזואלי מבהיר מיד את התורמים הכבדים ביותר.
הפעל את ביצועי דף לפני ביצוע אופטימיזציות ורשום את המדדים. בצע את השינויים, טען מחדש והפעל שוב. השווה FCP, זמן טעינה ומשקל הדף הכולל כדי לוודא שהאופטימיזציות הניבו את ההשפעה הצפויה.
הפעל את ביצועי דף על האתר שלך ועל אתרי המתחרים. השווה זמני טעינה, משקל דפים והתפלגות משאבים. האם המתחרים שולחים פחות JavaScript? האם התמונות שלהם מאופטמות טוב יותר?
הפעל את הכלי על דפים מרכזיים באופן קבוע במהלך הפיתוח. אם ציון הביצועים יורד או משקל הדף עולה פתאום, ייתכן שהכנסת רגרסיה — אתר אותה לפני שתגיע לייצור.
פתח את תפריט הצף של DevSuite Pro ולחץ על סמל ביצועי דף. לוח המחוונים מופיע מיד עם נתוני ביצועים של טעינת הדף הנוכחית.
בדוק את ארבעת מדדי התזמון המרכזיים בראש הדוח: FCP, DOMContentLoaded, Full Load ו-TTI. ערכים ירוקים מהירים, צהוב בינוני, אדום דורש שיפור.
בחן את גרף עמודות המשאבים כדי לראות איזה סוג נכס הכי כבד. JavaScript הוא לרוב התורם הגדול ביותר — אם JS עולה על 500 KB, כדאי לשקול code-splitting או lazy-loading.
עיין בנתוני ה-DOM. אם מספר האלמנטים עולה על 1500 או עומק הקינון עולה על 15, שקול לפשט את ה-markup לשיפור ביצועי הרינדור.
הציון הכולל מספק נקודת ייחוס מהירה. הפעל את הכלי לפני ואחרי אופטימיזציות כדי למדוד את השיפור.
התקן את DevSuite Pro בחינם ופתח 39+ כלי פיתוח לדפדפן שלך.
