תובנות לגבי הביצועים: תובנות פרקטיות לגבי ביצועי האתר

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

סקירה כללית

בחלונית תובנות לגבי הביצועים אפשר לבצע את הפעולות הבאות:

• תיעוד ומדידה של ביצועי טעינת הדף
• הצגת מדדי הביצועים של Web Vitals
• לצפייה בפעילות ברשת.
• סימולציה של מהירויות איטיות יותר של המעבד (CPU) והרשת.
• לייבא ולייצא הקלטות.

למה חלונית חדשה?

החלונית החדשה תובנות לגבי הביצועים היא ניסוי שנועד לטפל ב-3 נקודות החולשה הבאות של המפתחים כשהם עובדים עם החלונית הקיימת ביצועים:

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

מבוא

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

פתיחת החלונית 'תובנות לגבי הביצועים'

1. פותחים את כלי הפיתוח.

2. לוחצים על אפשרויות נוספות more_vert > כלים נוספים > תובנות לגבי ביצועים.

   

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

   

הקלטת ביצועים

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

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

2. אפשר להגביל את הרשת ואת המעבד בזמן הצילום. במדריך הזה, מסמנים את האפשרות Disable cache (השבתה של המטמון) ומגדירים את CPU (מעבד) ל-4x slowdown (האטה פי 4) בתפריט הנפתח:

   

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

   

הפעלה חוזרת של הקלטת ביצועים

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

דוגמה לאופן שבו עושים זאת.

• לוחצים על play_arrow הפעלה כדי להפעיל את ההקלטה.
• לוחצים על pause השהיה כדי להשהות את ההפעלה החוזרת.
• משנים את מהירות ההפעלה באמצעות התפריט הנפתח.
• לוחצים על preview החלפת מצב התצוגה החזותית כדי להציג או להסתיר את התצוגה החזותית.

ניווט בהקלטה של ביצועים

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

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

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

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

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

הצגת תובנות לגבי הביצועים

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

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

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

הצגת מדדי הביצועים של Web Vitals

Web Vitals היא יוזמה של Google שמטרתה לספק הנחיות אחידות לגבי אותות איכות שחשובים מאוד לספק חוויית משתמש מעולה באינטרנט.

המדדים האלה מוצגים בחלונית ציר הזמן ובחלונית תובנות.

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

זיהוי עיכובים בזמן הטעינה של רכיב התוכן הכי גדול (LCP)

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

ציון LCP טוב הוא 2.5 שניות או פחות.

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

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

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

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

זמן הרינדור של LCP מורכב מהחלקים המשניים הבאים:

חלק משנה של LCP	תיאור
המהירות שבה מגיע בייט התגובה הראשון (TTFB)	הזמן שחולף מהרגע שבו המשתמש מתחיל את הטעינה של הדף ועד שהדפדפן מקבל את הבייט הראשון בתגובה של מסמך ה-HTML.
עיכוב בטעינת המשאבים	ההפרש בין TTFB לבין המועד שבו הדפדפן מתחיל לטעון את משאב ה-LCP.
זמן הטעינה של משאבים	משך הזמן שנדרש לטעינה של משאב ה-LCP עצמו.
עיכוב בעיבוד הרכיב	ההפרש בין הזמן שבו משאב ה-LCP מסיים את הטעינה לבין הזמן שבו רכיב ה-LCP עבר עיבוד מלא.

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

הצגת הפעילות של שינויי הפריסה

הצגת הפעילות של שינויי הפריסה במסלול שינויי פריסה.

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

Cumulative Layout Shifts‏ (CLS) הוא אחד ממדדי הליבה לבדיקת חוויית המשתמש באתר. בעזרת המעקב אחרי שינויי פריסה תוכלו לזהות בעיות פוטנציאליות ואת הסיבות לשינויי פריסה.

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

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

בדוגמה שלנו, גורם השורש הפוטנציאלי הוא מדיה ללא הגדרת גודל. במאמר אופטימיזציה של Cumulative Layout Shift מוסבר איך פותרים את הבעיה הזו.

הסבר על הציון של שינויי הפריסה

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

אם כל הדף השתנה, הציון המקסימלי של כל שינוי פריסה הוא 1. בדוגמה שלנו, השינוי הראשון בפריסת הדף קיבל ציון 0.15. שינוי הפריסה השני קיבל ציון 0.041.

הציון הכולל של חלון הסשן הזה הוא 0.19. על סמך הסף של CLS, יש צורך בשיפור. צבע הרקע של חלון הסשן משקף את אותו הדבר.

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

הצגת הפעילות ברשת

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

הצגת הפעילות של ה-Renderer

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

הצגת הפעילות של GPU

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

הצגת תזמוני משתמשים

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

כדאי לעיין בדף ההדגמה הזה, שבו מחושב הזמן שחלף מתחילת הטעינה של הטקסט.

כדי להציג את זמני הפעילות של המשתמשים:

1. מסמנים מקומות באפליקציה באמצעות performance.mark().
2. כדי למדוד את משך הזמן שחלף בין סימנים, משתמשים ב-performance.measure().
3. תיעוד הביצועים.
4. אפשר לראות את המדידות במסלול Timings. אם הטראק לא מופיע, בודקים את האפשרות תזמונים של משתמשים בהגדרות.
5. כדי להציג את הפרטים, לוחצים על תזמון הטראק.

התאמה אישית של ממשק המשתמש

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

ייצוא הקלטה

כדי לשמור את ההקלטה, לוחצים על ייצוא download.

ייבוא הקלטה

כדי לטעון הקלטה, בוחרים באפשרות ייבוא publish.

מחיקת הקלטה

כדי למחוק הקלטה:

1. לוחצים על delete מחיקה. נפתחת תיבת דו-שיח לאישור.
2. בתיבת הדו-שיח, לוחצים על מחיקה כדי לאשר את המחיקה.