מדריך לשיפור תוצאות Google PageSpeed Insights

Largest Contentful Paint (LCP): התוכן הגדול ביותר (אדום – 5.0 שניות)

איך לשפר?

אופטימיזציה לתמונות:
דחסו תמונות גדולות בפורמטים מודרניים כמו WebP, השתמשו בתגיות srcset לתמונות רספונסיביות, ובצעו טעינה עצלה (Lazy Loading).

שיפור זמן תגובת השרת (TTFB):
בחרו אחסון מהיר יותר, השתמשו ב-CDN (רשת הפצת תוכן) וודאו שהשרת מגיב במהירות.

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

Cumulative Layout Shift (CLS): יציבות הפריסה (ירוק – 0.076)

מה זה אומר?
מדד ליציבות הפריסה החזותית של העמוד. הוא מודד עד כמה אלמנטים בעמוד זזים בזמן הטעינה.
ציון טוב הוא מתחת ל-0.1.

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

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

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

First Contentful Paint (FCP): התוכן הראשון (ירוק – 1.2 שניות)

מה זה אומר?
 הזמן שבו מופיע התוכן הראשון (טקסט, תמונה) על המסך.
זמן אידיאלי הוא מתחת ל-1.8 שניות.

צמצום CSS חוסם רינדור:
 דאגו שה-CSS הקריטי נטען מוקדם והשאר נטען אסינכרונית.

הסרת JS שאינו בשימוש:
צמצמו את כמות ה-JavaScript שנטענת בתחילת העמוד.

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

Total Blocking Time (TBT): זמן חסימה כולל (ירוק – 150 מילישניות)

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

צמצום JavaScript:
צמצמו ודחסו את קבצי ה-JavaScript באתר.

העברת קוד לצד השרת:
בצעו פעולות עיבוד כבדות בצד השרת במקום בצד הלקוח.

שימוש ב-Web Workers:
 אם יש פעולות רקע כבדות, השתמשו ב-Web Workers כדי לא להעמיס על התהליך הראשי.

Speed Index: מדד מהירות (ירוק – 2.4 שניות)

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

אופטימיזציה כללית:
 שיפור כל המדדים האחרים יתרום לשיפור מדד המהירות.

שימוש ב-CDN:
הטמעת רשת הפצת תוכן לשיפור מהירות הטעינה גיאוגרפית.

ARIA: .button, link, and menuitem elements

איך לשפר?
הוסיפו תכונת ARIA-label: השתמשו בתכונת aria-label כדי לתת שם ברור לאלמנטים.
לדוגמה: <button aria-label="שלח טופס">שלח</button>.

• השתמשו בטקסט גלוי: ודאו שלאלמנטים יש טקסט גלוי שמסביר את הפעולה שלהם.

Contrast: Background and foreground colors

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

בדקו ניגודיות: השתמשו בכלים כמו WebAIM Contrast Checker כדי לבדוק את יחס הניגודיות בין צבע הטקסט לרקע. היחס המומלץ הוא 4.5:1 לפחות לטקסט רגיל ו-3:1 לטקסט גדול.

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

Names and Labels

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

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

Navigation

מה זה אומר?
 שימוש ב-tabindex עם ערך גדול מ-0 משנה את סדר הניווט הטבעי באמצעות המקלדת, מה שמקשה על משתמשים לנווט באתר.

איך לשפר?

הימנעו משימוש ב-tabindex>0:
סדרו את מבנה ה-HTML בצורה לוגית כך שסדר הניווט יהיה טבעי.

איך לשפר?

השתמשו ב-tabindex="0":
רק אם יש צורך, השתמשו ב-tabindex="0" כדי להוסיף אלמנטים לסדר הניווט הטבעי.

Navigation: Heading elements

מה זה אומר? כותרות צריכות להיות מסודרות בסדר יורד הגיוני (H1, H2, H3 וכו') כדי ליצור מבנה ברור ותקין לעמוד.

איך לשפר?

סדרו את הכותרות: ודאו שהכותרת הראשית בעמוד היא H1, ושהכותרות הבאות בסדר יורד הגיוני.

הימנעו מדילוגים: אל תדלגו על כותרות (למשל, מ-H2 ל-H4) כדי לשמור על מבנה תקין.