סיקור ומחקר על Shopify ומסחר אלקטרוני
Largest Contentful Paint הוא ה-Core Web Vital שחנויות Shopify נכשלות בו בצורה הבולטת ביותר, והביקורת שלנו מראה למה: ב-15 דמו של תבניות רשמיות, הצביעה הראשונה הגיעה תוך כ-2 עד 5 שניות, ואז הקונים חיכו עד 13.9 שניות נוספות למדיית ההירו. לפניכם המכניזם ורשימת התיקונים, עם מספרים.
Largest Contentful Paint מודד רגע אחד: מתי האלמנט הגלוי הגדול ביותר במסך הראשון מסיים להתרנדר. בחנות Shopify האלמנט הזה הוא כמעט תמיד תמונת ההירו, תצלום המוצר הראשון או פריים פוסטר של וידאו שמתנגן אוטומטית, וזו בדיוק הסיבה שציוני ה-LCP של Shopify נכשלים. השרתים של הפלטפורמה מגיבים במהירות ומעטפת התבנית נצבעת מוקדם; ואז הקונה בוהה בשלד בזמן שמגה-בייטים של מדיית הירו זוחלים במורד חיבור סלולרי.
הנתונים שלנו הופכים את המכניזם לגלוי. ב-14 ביולי 2026 הרצנו 45 ביקורות Lighthouse על 15 דמו של תבניות רשמיות, והמספר המעניין הוא לא ה-LCP עצמו אלא המרחק בין First Contentful Paint ל-LCP. FCP הוא רגע הגעת המעטפת; הפער בין FCP ל-LCP הוא מדיית ההירו שמשאירה את כולם בהמתנה.
| דמו תבנית | FCP | LCP | פער (המתנה להירו) |
|---|---|---|---|
| Ultra | 1.91s | 1.91s | 0.0s |
| Boutique | 2.20s | 3.67s | 1.5s |
| Symmetry | 1.53s | 6.33s | 4.8s |
| Impression | 5.22s | 12.19s | 7.0s |
| Horizon | 3.57s | 12.32s | 8.8s |
| Motion | 1.88s | 15.78s | 13.9s |
קראו את השורה של Motion שוב: צביעה ראשונה ב-1.88 שניות, מהר יותר מכמעט כל דבר שבדקנו, ואז המתנה של 13.9 שניות להירו. הקוד של התבנית הוא לא צוואר הבקבוק; אסטרטגיית המדיה היא. Horizon מספר את אותו סיפור מזווית אחרת: זמן החסימה הכולל שלו היה 29ms, מההתנהגויות הטובות ביותר של JavaScript בביקורת, לצד LCP של 12.32 שניות. הנדסה מעולה, ראווה כבדה.
והדוגמה הנגדית מוכיחה שהתקרה אמיתית: בדמו של Ultra האלמנט הגדול ביותר התרנדר יחד עם הצביעה הראשונה, 1.91 שניות לשניהם, הדמו היחיד מבין 15 שהיה מתחת לסף של 2.5 שניות של Google. כך נראה בנתונים מסך ראשון ממושמע.
1. שקלו את ההירו שלכם. פתחו את עמוד הבית ב-PageSpeed Insights, הרחיבו את האבחון של LCP ובדקו מה אלמנט ה-LCP בפועל. אם זו תמונה של 2 עד 4MB או וידאו, שום דבר אחר ברשימה הזו לא משנה עד שזה ישתנה. ייצאו את ההירו בגודל שבו הוא מוצג, הגישו WebP או AVIF דרך פרמטרי הרוחב של image_url ב-Shopify, והגבילו את הקובץ לסביבות 200KB. אם ההירו הוא וידאו שמתנגן אוטומטית, תנו לו פריים פוסטר קליל ואפשרו לווידאו להיטען אחרי הצביעה הראשונה, או הזיזו אותו מתחת לקו הקיפול.
2. הפסיקו טעינה עצלה של תמונת ה-LCP. תקלת תצורה נפוצה ב-Shopify: התבנית או אפליקציה מחילות loading="lazy" על הכול, כולל תמונת ההירו הראשונה, מה שמעכב את ההורדה היחידה שמגדירה את הציון שלכם. תמונת ה-LCP צריכה להיטען בצורה נלהבת (eager) עם עדיפות שליפה גבוהה; כל מה שמתחת לקו הקיפול צריך להישאר עצל.
3. עברו על מערך האפליקציות. כל אפליקציה מותקנת יכולה להחדיר סקריפטים שרצים לפני שההירו שלכם מתחיל להיטען. הסירו את מה שאינכם משתמשים בו באופן פעיל, ואז בדקו בקוד התבנית אם נשארו תגי סקריפט יתומים שאפליקציות השאירו מאחור. מסמכי הביצועים של Shopify עצמה מציינים את משקל האפליקציות כגורם מרכזי במהירות התבנית.
4. קצצו את המסך הראשון. מצגות עם חמישה שקפים של 2MB, פסי הודעות מונפשים, ווידג’טים של צ’אט שנטענים מיד: כל אחד מהם מתחרה באלמנט ה-LCP. המסך הראשון צריך מסר אחד ותמונה אחת.
5. ואז, ורק אז, שקלו את התבנית. בחירת התבנית קובעת את התקרה שלכם. מדדנו פער של פי 8 בין הדמואים המהירים והאיטיים ביותר באותה חנות, בתנאים זהים, וההבדל היה בעיקר משמעת: כמה נושא המסך הראשון המוגדר כברירת מחדל בתבנית. אם אתם כבר מחפשים תחליף, הדירוג המלא שלנו של 15 דמואים שנמדדו הוא המקום להתחיל בו, והספק שהדמו שלו הוביל אותו, UTD, מציג את כל התבניות שלו כאן. אבל החלפת תבנית כשההירו שלכם שוקל 3MB רק מעבירה את אותה בעיה לטיפוגרפיה נחמדה יותר.
מדדו לפני ואחרי, באותה דרך בכל פעם. Lighthouse ב-Chrome DevTools או PageSpeed Insights, פרופיל מובייל, שלוש הרצות, קחו את החציון, כי הרצות בודדות מתנדנדות. עקבו אחרי שני מספרים: ה-LCP עצמו, והפער בין FCP ל-LCP מהתרשים שלמעלה. אם התיקונים שלכם עובדים, הפער מתכנס ראשון, וזה הסימן שההירו סוף סוף מגיע יחד עם העמוד ולא אחריו. נתוני משתמשים אמיתיים בדוח Core Web Vitals ב-Search Console יגיעו בעקבות זאת בתוך שבועות ספורים, שכן Google מעריכה LCP על בסיס נתוני שדה, לא הרצות מעבדה.
כמעט תמיד בגלל שהאלמנט הגדול ביותר בחלק העליון של המסך הוא תמונת הירו כבדה או וידאו שמתנגן אוטומטית ומתחיל להיטען באיחור. נתוני הביקורת שלנו מראים את התבנית בבירור: דמואים עם צביעה ראשונה מהירה עדיין רשמו LCP של 8 עד 14 שניות כשמדיית ההירו הייתה כבדה. אפליקציות שמחדירות סקריפטים שחוסמים רינדור דוחות את תחילת ההורדה הזו אף יותר.
ספי הסף של Google הם מתחת ל-2.5 שניות טוב, מעל 4 שניות גרוע, נמדד עבור משתמשים אמיתיים במובייל. לשם השוואה, רק 1 מתוך 15 הדמואים הרשמיים של התבניות שבדקנו בהאטת מובייל מדומה הגיע מתחת ל-2.5 שניות.
היא יכולה, וזו החלטת המהירות היחידה שמקבלים פעם אחת. מדדנו פער של פי 8 בחציון ה-LCP במובייל בין דמו התבנית המהיר ביותר (1.91s) לאיטי ביותר (15.78s). אבל קודם תקנו את מדיית ההירו ומערך האפליקציות שלכם: תבנית מהירה עם הירו של 4MB עדיין תיכשל.
כן. כל אפליקציה שמחדירה סקריפט לתבנית שלכם מתחרה עם תמונת ה-LCP על רוחב פס ועל זמן ב-main thread לפני הצביעה הראשונה. עברו על האפליקציות המותקנות, הסירו את מה שאינכם משתמשים בו, ובדקו אם נשארו תגי סקריפט בקוד התבנית לאחר ההסרה.