עודכן לאחרונה ב-29.9.2024
Console | קודים לבדיקת זמן תגובה וזמן רינדור של העמוד
קודים לבדיקת זמן התגובה של האתר
console.log(`Time to First Byte (TTFB): ${performance.timing.responseStart - performance.timing.navigationStart}ms`);
console.log(`Time to Load: ${performance.timing.loadEventEnd - performance.timing.navigationStart}ms`);
קוד לבדיקת זמן הרינדור של העמוד
console.log(`DOMContentLoaded: ${performance.timing.domContentLoadedEventEnd - performance.timing.navigationStart}ms`);
console.log(`Complete Load: ${performance.timing.loadEventEnd - performance.timing.navigationStart}ms`);
פירוט הערכים:
- Time to First Byte (TTFB): עבור אתר מהיר הערך צריך להיות בדרך כלל מתחת ל-200 מילישניות. ערך גבוהה מידי בדרך כלל מצביע על עיכוב בתגובת השרת.
- DOM Content Loaded: זמן זה מייצג את הזמן שלוקח לדף לטעון את ה-DOM (מבנה הדף). עבור אתר מהיר, זמן זה צריך להיות בדרך כלל פחות מ-1000 מילישניות.
- Complete Load: זהו הזמן שלוקח לדף לטעון לחלוטין, כולל כל התמונות, סקריפטים וכו’. עבור אתר מהיר, זמן זה צריך להיות פחות מ-2000-3000 מילישניות.
Console | ניתוח זיכרון
console.log(performance.memory);
קוד זה מדפיס מידע על השימוש בזיכרון בדפדפן (חשוב לשים לב שזה לא נתמך בכל הדפדפנים). התוצאה מהפקודה performance.memory מספקת מידע על שימוש בזיכרון של JavaScript בדפדפן, הפירוט של הערכים:
- totalJSHeapSize: זהו גודל הערימה הכולל של JavaScript (JS Heap) בבייטים. זהו כמות הזיכרון שהוקצתה על ידי מנוע JavaScript בזמן הריצה.
- usedJSHeapSize: זהו כמות הזיכרון שנמצאת בשימוש על ידי אובייקטים של JavaScript.
- jsHeapSizeLimit: זהו הגבול המרבי של זיכרון שמנוע JavaScript יכול להשתמש בו.
מקום נוסף לבדיקת זמן תגובה שחשוב לבדוק (עבור כל אלמנט):
Network
ומשם סימניית ה-Timing (בעת בחירת אלמנט)
במקרה הטוב רצוי שהערכים יהיו פחות מ-1ms
