כל שנייה נוספת של זמן טעינה במובייל מורידה את שיעור ההמרה בכ-7%. גוגל משתמשת ב-Core Web Vitals כסיגנל דירוג מאושר. ובכל זאת, רוב חנויות ה-Shopify עדיין נטענות ב-4–6 שניות במובייל. החדשות הטובות: הגעה ל-LCP של פחות מ-2.5 שניות היא לא קסם. זו רשימת תיוג בת 12 נקודות שרוב החנויות יכולות להשלים בתוך 10–15 ימי עסקים.
הנה היא, לפי סדר עדיפויות.
1. המירו תמונות Hero לפורמט WebP/AVIF עם srcset רספונסיבי
תמונת ה-Hero בדף הבית היא בדרך כלל אלמנט ה-LCP. תמונת JPEG בגודל 600KB יכולה להצטמצם ל-80KB בפורמט WebP ללא איבוד איכות נראה לעין. הטמיעו srcset כך שהמובייל ימשוך גרסת 768px במקום המקור של הדסקטופ. זה לבדו מקצר לעיתים קרובות את ה-LCP ב-30–40%.
2. בצעו Preload לתמונת ה-Hero והפונט הקריטיים
הוסיפו <link rel="preload" as="image" href="hero.webp"> בתוך קובץ ה-theme.liquid עבור ה-Hero של דף הבית. עשו זאת גם עבור הפונט הראשי. הדפדפנים יתחילו למשוך אותם מיד, עוד לפני ניתוח שאר ה-HTML.
3. השתמשו ב-font-display: swap ובצעו Subset לפונטים שלכם
רוב התבניות טוענות 5 משקלים ומעלה של גופן Google. אתם כנראה משתמשים ב-2. בצעו Subset לקבצי הפונטים שלכם רק למשקלים ולתווים שאתם באמת צריכים. הוסיפו font-display: swap כך שהטקסט יוצג מיד עם גופן חלופי בזמן שהפונט המותאם אישית נטען.
4. דחו טעינת JavaScript לא קריטי
הוסיפו defer או async לכל סקריפט שאינו קריטי ל-First Paint. רוב חבילות התבניות כוללות סקריפטים למצגות (slideshows), פופ-אפים ואנימציות שלא צריכים לרוץ לפני שהדף מוצג.
5. בצעו ביקורת לכל אפליקציית צד-שלישי
כל אפליקציית Shopify שאתם מתקינים יכולה להזריק JavaScript דרך ה-app embed ב-theme.liquid. חלק מהאפליקציות מוסיפות מעל 100KB של JS סינכרוני. השתמשו בלשונית ה-Coverage בכלי המפתחים של כרום כדי לראות כמה מכל סקריפט באמת בשימוש. דחו או הסירו את אלו שלא מחזירים את ההשקעה שלהם בהכנסות.
אם אפליקציה מזריקה 200KB של JS עבור תכונה שאתם משתמשים בה ב-0.1% מהדפים, דחו אותה או הסירו אותה. אין פתרונות אמצע.
6. העבירו ווידג'טים של ביקורות אל מתחת לקו הקיפול (Below the fold)
ווידג'טים של Yotpo, Stamped ו-Judge.me מופיעים לעיתים קרובות מעל קו הקיפול וחוסמים את ה-LCP. העבירו את הרינדור של הווידג'ט לטריגר של Lazy-load שמופעל רק כשהמשתמש גולל מעבר ל-50% מהדף. ביקורות הן חשובות, אבל הן לא צריכות להרונדר ב-2 השניות הראשונות.
7. שמרו מקום לאלמנטים שגורמים ל-Layout Shift
היעד הוא CLS (שינוי פריסה מצטבר) מתחת ל-0.1. האשמים הרגילים: תמונות בטעינה עצלה (lazy-loaded) ללא הגדרות מימדים, פסי הוכחה חברתית שנטענים מאוחר, ופונטים שמתחלפים ומשנים את גודל הטקסט. הוסיפו רוחב/גובה מפורשים לכל תמונה, שמרו מקום לבאנרים, וכוונו את המדדים של הפונט החלופי כך שהטקסט לא יזוז כשהפונט המותאם אישית נטען.
8. הטמיעו CSS קריטי ישירות בקוד (Inline)
ה-CSS הדרוש לרינדור החלק העליון של הדף (Above-the-fold) צריך להיות מוטמע בתוך ה-<head>. השאר יכול להיטען בצורה אסינכרונית. זה מבטל נסיעה הלוך-חזור אחת שחוסמת רינדור ובדרך כלל משפר את ה-LCP ב-200–400 מילי-שניות.
9. הסירו לולאות Liquid לא בשימוש
תבניות מותאמות אישית כוללות לעיתים קרובות מקטעי Liquid שמבצעים לולאה על כל מוצר בדף הבית גם כשמוצגים רק 12. עברו על ה-sections.json של דף הבית והסירו לוגיקה לא בשימוש.
10. השתמשו בטעינה עצלה (Lazy-loading) מובנית לדפי מוצר וקטגוריות
הוסיפו loading="lazy" לכל תמונה שאינה נמצאת ב-viewport הראשוני. דפדפנים מטפלים בזה כיום בצורה מובנית, אין צורך בספריית JavaScript. זה מקצץ את משקל הדף הראשוני ב-50% או יותר בדפי קטגוריות ומוצרים.
11. צמצמו חבילות JavaScript לא בשימוש
השתמשו בלשונית ה-Coverage בכלי המפתחים של כרום כדי לזהות קוד שאתם שולחים אך לא משתמשים בו. רוב חבילות התבניות שולחות 200–400KB של JS כאשר רק 80–120KB נמצאים בשימוש בכל דף נתון. בצעו Tree-shake או פיצול קוד (code-split).
12. בצעו בנצ'מרק במכשירי מובייל אמיתיים
ה-Lighthouse על המקבוק שלכם משקר. הריצו WebPageTest על מכשיר אנדרואיד אמיתי בטווח ביניים (כמו Moto G Power או Pixel 6a) דרך חיבור 4G מוגבל. שם הלקוחות שלכם באמת קונים. ציוני Lighthouse של 90+ בדסקטופ יכולים להיות 40–50 במובייל אמיתי.
כרטיס ניקוד לפני השקה
לפני תחילת העבודה על המהירות, תעדו את מספרי הבסיס הללו מ-PageSpeed Insights למובייל:
- LCP (יעד <2.5 שניות)
- CLS (יעד <0.1)
- INP (יעד <200 מילי-שניות)
- FCP (יעד <1.8 שניות)
- משקל דף כולל (יעד <1MB)
- משקל JavaScript (יעד <200KB)
לאחר השלמת רשימת התיוג בת 12 הנקודות, הריצו שוב והשוו. רוב החנויות רואות את כל ששת המדדים נכנסים לטווח הירוק תוך 10–15 ימי עסקים.
צריכים עזרה בביצוע?
אנחנו מריצים את רשימת התיוג הזו עבור מותגי Shopify מדי שבוע. רוב הפרויקטים מספקים שיפורים נראים לעין ב-Core Web Vitals בתוך 10–15 ימי עסקים. שלחו לנו את ה-URL שלכם. נשלח לכם בחזרה סרטון Loom בחינם שעובר על 5 ההזדמנויות המובילות הספציפיות לחנות שלכם.
תגובות (0)
עדיין אין תגובות. היו הראשונים להגיב.