שיפור ביצועי החנות המקוונת שלך

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

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

ביצועי האתר מתמקדים במיטוב חוויית המשתמש. כיום, ביצועי האתר מתמקדים בשלושה תחומים עיקריים שבאים לידי ביטוי גם ב-Core Web Vitals:

• מהירות טעינה, הנמדדת על ידי Largest Contentful Paint (LCP)
• יציבות הפריסה, הנמדדת על ידי Cumulative Layout Shift (CLS)
• זמן התגובה לאינטראקציה של המשתמש, הנמדד על ידי Interaction to Next Paint (INP)

משמעות המיטוב של ביצועי האתר היא שיש סיכוי גבוה יותר שהלקוחות יישארו באתר ויבצעו המרה.

אופטימיזציות עבור החנות המקוונת שלך

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

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

גורמים שמשפיעים על ביצועי האתר

עבור חנויות Shopify, להלן הגורמים המשמעותיים ביותר שמשפיעים על ביצועי האתר:

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

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

• יש להשתמש בערכת נושא עדכנית שעברה אופטימיזציה. כל משפחת ערכות הנושא Horizon וערכות הנושא של Online Store 2.0 מבית Shopify הן חינמיות ומותאמות לביצועים מיטביים באינטרנט. בנוסף, ערכות נושא רבות אחרות של צד שלישי עברו גם הן אופטימיזציה לשיפור ביצועי האתר. אפשר לעיין בנתוני הביצועים העדכניים של ערכות הנושא.
• אם ערכת הנושא מציעה מעברי דפים או הנפשות אחרות, כדאי להשוות את ביצועי האתר לפני ואחרי הפעלתם. הנפשות יכולות להאט את הדפים.
• מומלץ להימנע מהוספת מקטעים רבים מדי לתבניות דפים בערכת הנושא. מספר גבוה של מקטעים בדפים עלול לפגוע בביצועי האתר.
• אם יש לך אוספים המכילים כמות גדולה של מוצרים, כדאי לשקול להפעיל עימוד (pagination) כדי להגביל את מספר המוצרים הנטענים בבת אחת.
• יש להעריך את היישומים המותקנים וקוד הצד השלישי כדי להבטיח שהם מייצרים מספיק ערך כדי לקזז פגיעה אפשרית בביצועים.
• כדאי לבדוק את מנהל התגים כדי להסיר תגים שאינם בשימוש או שהם בעלי ערך נמוך. למידע נוסף על שיטות עבודה מומלצות עבור תגים ומנהלי תגים.

כלי בדיקה

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

• דוחות ביצועי אינטרנט: דוחות ביצועי האינטרנט של Shopify משתמשים במדדי Core Web Vitals כדי למדוד איך משתמשים אמיתיים חווים את החנות המקוונת שלך.
• PageSpeed Insights: אפשר להפיק דוחות משלך באמצעות PageSpeed Insights של Google כדי לצפות במדדים מפורטים יותר עבור הדפים בחנות.

הבנת המלצות לשיפור ביצועים של צד שלישי

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

אופטימיזציות שכבר כלולות ב-Shopify

חנות ה-Shopify שלך כוללת באופן אוטומטי את האופטימיזציות הבאות לביצועים:

רשת למסירת תוכן (CDN): פלטפורמת Shopify מספקת CDN ברמה עולמית ללא תשלום נוסף, מה שמבטיח ביצועים מהירים גלובליים. כל הנכסים מוגשים באמצעות HTTP/2, המפחית עומס תקורה בהשוואה לפרוטוקולים ישנים יותר.

אחסון במטמון של הדפדפן: פלטפורמת Shopify מגדירה את האחסון במטמון הדפדפן (caching) למשאבים הניתנים לאחסון למשך שנה אחת, משך הזמן המרבי האפשרי. משמעות הדבר היא שמבקרים חוזרים בחנות ייהנו מזמני טעינה מהירים יותר.

דחיסת Gzip: פלטפורמת Shopify משתמשת בדחיסת gzip עבור קובצי CSS, JavaScript, מסמכים ודפים כדי לצמצם את רוחב הפס ולשפר את זמני הטעינה. חיבור Keep-alive מופעל גם הוא עבור אחזור מרובה של קבצים.

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

צמצום קבצים (Minification): פלטפורמת Shopify מצמצמת באופן אוטומטי קובצי CSS ו-JavaScript כשהם מתבקשים על ידי חזית החנות שלך, ובכך מקטינה את גודל הקבצים ללא פגיעה בפונקציונליות.

מקרים בהם המלצות של צד שלישי אינן רלוונטיות

כלי סריקה של צד שלישי עשויים להציע שינויים שאינם רלוונטיים לחנויות Shopify:

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

יישום המלצות רלוונטיות

יש להתמקד בהמלצות הנוגעות לתוכן ולתכונות הספציפיים של החנות שלך:

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

פתרון בעיות בדפים שנטענים לאט

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

שלב 1: אימות הבעיה

1. יש לבדוק את מהירות הטעינה של החנות בעצמך, ממכשירים שונים ומחיבורי אינטרנט שונים.
2. כדאי לבקש מאנשים אחרים לבדוק את החנות, כדי לוודא שלא מדובר בבעיה מקומית בחיבור האינטרנט שלך.
3. מומלץ להשתמש בכלי בדיקה כמו PageSpeed Insights כדי לקבל מדדי ביצועים ספציפיים.

שלב 2: זיהוי הגורם

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

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

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

שלב 3: נקיטת פעולה

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

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

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

קבלת תמיכה בנושא ביצועים של חנות מקוונת

אם נעשה שימוש בערכת נושא חינמית של Shopify, ייתכן שהתמיכה של Shopify תוכל לעזור לך עם שיפורים בסיסיים בביצועים.

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

אם בעיית הביצועים נובעת מיישום, אפשר ליצור קשר עם מפתח היישומים שלך.

אם יש לך צוות פיתוח או שותף סוכנות, אפשר לפנות גם אליהם לקבלת עזרה נוספת.

מידע טכני ומשאבים לפתרון בעיות

למפתחים המעוניינים לשפר את הביצועים של חזית חנות, ערכת נושא או יישום ב-Shopify, ניתן לעיין במשאבים הבאים עבור כל מדד של Core Web Vitals. למידע נוסף על שיטות עבודה מומלצות לביצועים עבור ערכות נושא של Shopify.

מהירות טעינה

המדד Largest Contentful Paint (LCP) מודד את מהירות הטעינה, בהתבסס על המהירות שבה הרכיב הגדול ביותר במסך הופך לגלוי. המדדים Time to first byte (TTFB) ו-first contentful paint (FCP) הם מדדים תומכים שיעזרו לך להבין טוב יותר מהו הגורם השורשי לבעיה. ניתן לקרוא מידע נוסף על ניפוי באגים בגורמים נפוצים לטעינה איטית בחזיתות חנות של Shopify Liquid.

יציבות חזותית

המדד Cumulative Layout Shift (CLS) מודד יציבות חזותית, בהתבסס על מידת התזוזה הבלתי צפויה של התוכן במהלך הטעינה. לקריאה מעמיקה על ניפוי באגים של CLS, יש לקרוא את המאמר כיצד לבצע אופטימיזציה למדד Cumulative Layout Shift (CLS) באתרי Shopify.

אינטראקטיביות

המדד Interaction to Next Paint (INP) מודד אינטראקטיביות, בהתבסס על משך הזמן שלוקח לדף להגיב למרבית פעולות המשתמש. לדוגמה, פעולות משתמש כמו לחיצה על קישור או על לחצן.

אם נתקלת בביצועים ירודים של INP, סביר להניח שיש יותר מדי קוד JavaScript בחנות שלך, בין אם מקוד ערכת הנושא, מקוד היישומים או מקוד של צד שלישי / מנהל תגיות. יש לפעול לניקוי הגורמים הבעייתיים ביותר. למידע נוסף על 3 דרכים למצוא את גורמי ה-JavaScript הבעייתיים ביותר בטעינת הדף. אם עדיין יש לך בעיות עם INP, אפשר למצוא מידע נוסף במשאבים שב-web.dev.