מאז הצגת Lighthouse, צצו פרמטרים חדשים הקשורים למהירות הדף. אחד מהפרמטרים החשובים ביותר הוא First Contentful Paint (FCP). ב-Lighthouse גרסה 10, החל מיוני 2024, ההשפעה של FCP על הציון הכולל היא 10%.

כדי לאמץ ולהבין את FCP כמדד, חיוני תחילה לבחון את הפסיכולוגיה מאחוריו. הרעיון דומה ל- מראות מותקנות במעליות:

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

 

image-11.png
מקור: https://web.dev/fcp/

 

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

ב-Lighthouse, סולם הצבעים עבור FCP נקבע באופן הבא:

  • 0-2 שניות: ירוק => מהיר
  • 2-4 שניות: כתום => טעון שיפור
  • 4+ שניות: אדום => איטי

על פי נתוני HTTP Archive, מספר האתרים שניתן לשקול מהיר זה 25%, ו-50% מהאתרים הקיימים מסווגים כאיטיים.

 

image-10.png
מקור: https://web.dev/first-contentful-paint/

 

מה ניתן לעשות כדי לשפר את FCP?

צמצם את זמן תגובת השרת

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

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

 

image-12.png
מקור: https://gtmetrix.com/blog/first-contentful-paint-explained/

 

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

לדוגמה, בעבר, היו הגדרות כמו זה: כאשר משתמש רצה להיכנס לאתר, הייתה הפניה מ-HTTP ל-HTTPS, ואז אם זה היה נייד, הפנייה מחדש של HTTPS לנייד (למשל, https:// www ל-https://m), ואם הדף הוסר והופנה למקום אחר עם 301, זה הרגיש כאילו המשתמש מועבר משולחן לשולחן במשרד מס. זוהי דוגמה קיצונית להבנה טובה יותר, אבל אם אתה מפנה דף לכתובת אתר אחרת עם הפניית 301 ואז מפנה את הדף לדף אחר עם 301, ייתכן שאתה עושה את אותה הגדרה לא הגיונית.

  • אם אל תשתמש בחיבור מראש או ב-DNS-prefetch קידומות בעת חיבור לשירותי הצד השלישי שלך ומתחברים לשירותי צד שלישי רבים, אינך עושה שום דבר מועיל עבור FCP.

צמצם את משאבי חסימת העיבוד

אני חייב להודות שהנקודה הבודדת הזו שנכתבת כפריט יכולה לקחת חודשים כדי לטפל בה.

image-13.png
מקור: https://gtmetrix.com/eliminate-render-blocking-resources.html

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