איך אסטרטגיית התעדוף של תמונות ב-Nuvemshop הובילה לשיפור של 68% ב-LCP ולעלייה של 8.9% בהמרות

Federico Iglesias

Jesus Biaggioni

Kaio Graco Cardamone

Lucas Demarchi

Mari Viana

תאריך פרסום: 24 ביוני 2026

‫Nuvemshop (שנקראת Tiendanube באמריקה הלטינית דוברת הספרדית) היא פלטפורמת המסחר האלקטרוני המובילה באזור, שמפעילה יותר מ-180,000 חנויות אונליין. המוֹכרים יכולים להתאים אישית את החנויות שלהם באמצעות עיצובים שונים וסידורים דינמיים של התוכן, ולכן יש אתגרים טכניים ייחודיים שקשורים לטעינה מהירה של הדפים במגוון הזה.

• השיפור בסטטוס של מדד LCP (הצגת חלק התוכן הגדול ביותר) הוא 68%, מ-57% ל-96% בשנה אחת. השיפור הזה משקף שינוי משמעותי באופן שבו חנויות מעבדות תוכן בחלק העליון של אזור התצוגה עבור משתמשים אמיתיים.
• שיעור ההצלחה של Core Web Vitals עלה מ-48% ל-72%, כלומר כמעט 3 מתוך 4 חנויות עומדות עכשיו בסף הביצועים הבסיסי של Google.
• הייתה עלייה מדידה במעורבות בשופינג: בניתוח של אותה קבוצת חנויות בברזיל שהיו פעילות בינואר 2025 ובינואר 2026, נתוני המבקרים בנייד מחיפוש אורגני ב-Google הראו את הנתונים הבאים:
  • עלייה של 8.9% בשיעור ההמרה (מפגישה להזמנה בתשלום)
  • עלייה של 8.4% בשיעור ההתעניינות בעגלת הקניות (סשן עד עגלת קניות)
• השיפורים הגדולים ביותר נרשמו במובייל, בהתאם למקומות שבהם השיפורים ב-LCP היו המשמעותיים ביותר.

התוצאות האלה תואמות למחקר של Deloitte שהוזמן על ידי Google (מעל 30 מיליון סשנים ב-37 מותגים), שבו נמצא ששיפור של 0.1 שניות במהירות הטעינה יכול להגדיל את שיעורי ההמרה של קמעונאים ב-8.4%, וכך מאשש את הכיוון של ההשקעות שלנו.

האתגר: זיהוי LCP בפריסות דינמיות של מסחר אלקטרוני

בתחילת 2025, רק 48% מהחנויות שלנו עברו את הסף של Core Web Vitals, ו-57% מהחנויות קיבלו ציונים טובים במדד LCP. ההשערה הראשונית שלנו הייתה משקל התמונה או זמן האחזור של השרת. טעינו.

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

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

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

איך פריסות דינמיות משפיעות על בחירת רכיב LCP

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

זיהינו שלושה גורמים שורשיים:

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

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

הטמעה: תיקון של שלוש הסיבות העיקריות לבעיות בהיקף רחב

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

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

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

  <!-- Before -->
  <img src="slide-1.webp" loading="lazy" alt="Featured product">
  <!-- After -->
  <img src="slide-1.webp" alt="Featured product">
  

• נוספו אותות עדיפות מפורשים. הוספת fetchpriority="high" מאפשרת לנו להודיע לסורק הטעינה מראש של הדפדפן שתמונת ה-LCP היא משאב בעדיפות גבוהה, כך שהיא תתגלה ותיטען מוקדם יותר, לפני שהפריסה והעיבוד יסתיימו. הוספנו לוגיקה של אימות כדי לוודא שאותות העדיפות יחולו רק כשהרכיב נמצא בפועל במיקום שבו הוא יכול להיות מועמד ל-LCP: הוספת fetchpriority="high" ליותר מדי תמונות תהיה לא יעילה, כי אם הכול בעדיפות גבוהה, שום דבר לא בעדיפות גבוהה.

  <!-- Before -->
  <img src="slide-1.webp" alt="Featured product">
  <!-- After -->
  <img src="slide-1.webp" fetchpriority="high" alt="Featured product">
  

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

ההשפעה והתוצאות: שיפור של 57% עד 96% ב-LCP

השיפורים האלה מיצבו את Nuvemshop ו-Tiendanube כפלטפורמת המסחר האלקטרוני מספר 1 בברזיל, בארגנטינה ובמקסיקו.

מסקנות עיקריות ולקחים לאחר סיום הפרויקט

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

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

התוצאות מדברות בעד עצמן: שיעורי ההצלחה של LCP עלו מ-57% ל-96%, שיעורי ההצלחה הכוללים של Core Web Vitals עלו מ-48% ל-72%, והמוכרים נהנו משיפורים מדידים: עלייה של 8.9% בשיעור ההמרה ועלייה של 8.4% בשיעור האינטראקציה עם עגלת הקניות בנייד. חנויות מהירות הן לא רק הישג טכני, אלא גם גורם ישיר להצלחת המוכר.