יש לצמצם את מספר הבקשות ואת גודל ההעברות

הדוח Lighthouse מדווח כמה בקשות רשת נשלחו וכמה נתונים הועברו בזמן טעינת הדף:

צילום מסך של בדיקת הבקשות במסגרת Lighthouse Keep נמוך ובמספר קטן של העברות
  • כדי לחשב את הערכים Requests ו-Transfer size בשורה Total, מוסיפים את הערכים בשורות Image, Script, Font, Stylesheet, Other, Document ו-Media.
  • העמודה צד שלישי לא מביאה בחשבון את הערכים בשורה סה"כ. המטרה היא ליידע אתכם לגבי מספר הבקשות הכולל וכמה מנפח ההעברה הכולל הגיע מדומיינים של צד שלישי. הבקשות של צד שלישי יכולות להיות שילוב של כל אחד מסוגי המשאבים האחרים.

איך לצמצם את מספר המשאבים ואת הגודל של ההעברות

ההשפעה של מספר משאבים גבוה או גדלי העברה גדולים על ביצועי העומס תלויה בסוג המשאב המבוקש.

CSS ו-JavaScript

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

המדדים המושפעים: הכול

תמונות

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

המדדים המושפעים: הצגת תוכן ראשוני (FCP), הצגת התוכן העיקרי (FMP), אינדקס המהירות

גופנים

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

המדדים המושפעים: הצגת תוכן ראשוני (FCP)

מסמכים

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

המדדים המושפעים: הצגת תוכן ראשוני (FCP)

מדיה

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

המדדים המושפעים: הצגת תוכן ראשוני (FCP)

השתמשו בתקציבי ביצועים כדי למנוע רגרסיות

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

מקורות מידע

קוד מקור לביקורת שמירה על מספר בקשות נמוך וכמות קטנה של העברות