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

פורסם:
יוני 30, 2023
אופטימיזציה של מהירות אתר אינטרנט: 12 טכניקות להשגת מהירות אתר מסחר אלקטרוני מהירה במיוחד

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

מדריך זה משתף כיצד לעשות בדיוק את זה.

מהי אופטימיזציה של מהירות אתר אינטרנט?

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

ישנם שני מדדים עיקריים המשמשים למדידת מהירות:

  1. מהירות דף, אשר מודד את הזמן שלוקח לתוכן בכתובת URL להיטען. 
  2. מהירות האתר, אשר מייצג את ביצועי האתר שלך באופן כללי. הוא מדורג על ידי שירותים כמו Google PageSpeed ​​Insights, אשר בוחנים זמני טעינה שונים באתר שלך באופן מצטבר.

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

אם אתם מפעילים חנות עם ערך הזמנה ממוצע של 60 דולר ו-5,000 מבקרים בכל יום, לדוגמה, עיכוב של שנייה אחת במהירות האתר עלול לעלות לכם 9,000 דולר ביום. 

מדוע מהירות האתר חשובה?

ככל שהאתר שלכם מהיר יותר, כך תוכלו למשוך לקוחות טובים יותר - כולל כאלה שנוטשים את האתר האיטי יותר של המתחרים.

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

מחקר של חברת Portent מאשר את הממצאים הללו. הוא מצא שאתרי מסחר אלקטרוני שנטענים תוך שנייה אחת סובלים מ... XNXX גבוה יותר שיעור המרה מאשר אלו שנטענים תוך חמש שניות.

תרשים עמודות המציג כיצד שיעור ההמרה עבור אתר שנטען תוך שנייה אחת הוא 3.05%, בהשוואה ל-1.68% בלבד במשך שתי שניות.

שיעור ההמרה יורד ככל שמהירות טעינת הדף עולה.

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

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

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

פלטפורמת המסחר האלקטרוני שלך

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

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

Shopify"S מעבד חזיתות חנות ‏(SFR), לדוגמה, היא אפליקציה המוקדשת לשירות בקשות לחנות במהירות האפשרית, מה שמוביל לשיפור ביצועי צד השרת של פי 2.5 עד 5 ממהירות בקשות שבוצעו ללא SFR.

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

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

ביגוד רון התחלתי להשתמש ב-SFR באפריל 2020 וראה שיפורים דרמטיים לעומת החודש הקודם:

  • גידול בהכנסות של 15%
  • עלייה של 17% בשיעור ההמרה
  • ירידה של 12% בטעינת העמוד הממוצעת
  • ירידה של 37.95% בזמן התגובה הממוצע של השרת
  • ירידה של 3% בשיעור הנטישה

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

אירוח

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

רשימת קמעונאי מותגים חווים קריסות של אתרי מסחר אלקטרוני בתקופות מכירות מרכזיות כמו בלאק פריידי - כמו לולולמון, ג'יי קרו, ו של לואי—ממשיך לגדול. שמונים ואחד אחוז מהנשאלים בסקר אחד אמרו ש-60 דקות של זמן השבתה עולות לעסק שלהם יותר מ $300,000.

כשאתם חוקרים את דרישות פלטפורמת האירוח, שימו לב ל:

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

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

הפסקות אתרים אף פעם לא קלות להתמודדות, אך הן יכולות להיות קשות במיוחד עבור חברה בשווי 5 מיליארד דולר במהלך עונת המכירות הגדולה ביותר שלה בשנה. JB Hi-Fiהאתר של היה מושבת במשך שעתיים במהלך כנס BFCM עקב בעיות באתר. "ראינו אתרי אינטרנט של קמעונאים בולטים נופלים", אומר כריס לאנג, מנהל ההנדסה של JB Hi-Fi. "כל המדינה יודעת על זה. זה רע ללקוחות, וזה רע למותג. היינו עושים הכל כדי למנוע את זה". 

לאחר שינוי פלטפורמה ל-Shopify PlusJB Hi-Fi רשמה מכירות שוברות שיאים, הודות לכמעט הכפלה של התנועה המקוונת במהלך BFCM - והכל ללא בעיות ביצועי אתר. 

בעזרת התשתית מבוססת הענן שלה, Shopify ל-Plus יש זמן פעילות כולל של 99.98%, עם חנות ש נטען פי 2.97 מהר יותר מאשר פלטפורמות SaaS אחרות.

אדריכלות אתרים

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

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

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

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

ביצועי האתר מחמירים ככל שהאתר שלך מתרחב.

אפליקציות צד שלישי מוגזמות

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

גייס מפתח כדי להסיר אפליקציות מיותרות. לאחר מכן, הרץ בדיקות מהירות דף באמצעות כלים כמו GTmetrix או PageSpeed ​​Insights, או אפילו בדיקה ידנית באמצעות כלי המפתחים של Chrome. לחץ על הכרטיסייה "רשת" וטען מחדש את הדף.

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

רוב קבצי הסקריפט/CSS עבור אפליקציות שהורדו באמצעות Shopify Plus Admin מוזרקים לתוך קובץ theme.liquid שלך בתוך {{ content_for_header }}.

יש לרנדר אפליקציה לפני טעינת כל קוד אחר.

"ניווט במתח הזה בין טעינה מהירה יותר לבין ערך חווייתי וערך מכירות של אפליקציות הוא הסיבה שאנו אסנכרנים סקריפטים לטעינה שנוספו עם Script Tag API - כך שטעינת העמוד לא נעצרת", אומר ג'ייסון באומן, ראש צוות הנדסת פתרונות ב-Shopify Plus. "עם זאת, שנוסף ישירות לתוך לעתים קרובות יש לו באופן מיידי השפעה על ביצועים."

דרכים לגשת למידע על מהירות אתר אינטרנט

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

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

תובנות Google Page Speed

תובנות PageSpeed הוא כלי של Google Labs שנותן לך הצעות מותאמות אישית לשיפור ביצועי האתר שלך. הוא גם מציין את האלמנטים באתר שלך שמאטים את הדף, כמו CSS ו-JavaScript.

"אני מוודא שכל פרויקט שאני עובד עליו נבדק באופן עקבי ב-Google PageSpeed ​​Insights או בכלי דומה", אומר ג'וש סטאט. "אתה צריך לדעת איך אתה מתפקד ומהן נקודות התורפה שלך לפני שתוכל להשתפר". 

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

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

דוח לדוגמה של Google PageSpeed ​​Insights.

GTMetrix

GTMetrix נותן לאתר שלך ציון מהירות מ-A עד F. הוא מאחד נתונים מ-Yslow ומ-PageSpeed ​​Insights כדי לספק דוח ביצועי אתר הכולל:

  • מהירות טעינת הדף שלך
  • ניתוח נתוני ויטמין Web ו-Lighthouse
  • הזדמנויות לאופטימיזציה של מהירות האתר
  • פירוט הרכב העמוד לפי בקשות וגודל בייט כולל

דוח המציג את המלצת GTMetrix להימנע מעומסי רשת עצומים.

דוח ביצועי אתר לדוגמה של GTMetrix.

Pingdom

pingdom.com ינתח את ביצועי האתר שלך (בין 0% ל-100%). יש לו גם תכונה שימושית של "ניתוח מפל מים" שעוזרת לך לזהות תחומים בעייתיים עיקריים אחרים. ניקוד שורה אחר שורה זה הוא כלי עזר שימושי.

דוח לדוגמה המציג המלצות להפחתת חיפושי DNS, ביצוע פחות בקשות HTTP ודחיסת רכיבים.

דוח לדוגמה של Pingdom עבור אתר מסחר אלקטרוני.

כיצד לייעל את מהירות האתר שלך

השתמש ברשת אספקת תוכן (CDN)

רשת אספקת תוכן, או רשת הפצת תוכן (CDN), היא קבוצת שרתים הפזורים ברחבי העולם. היא מפזרת את עומס אספקת התוכן דרך השרת הקרוב ביותר למיקום המבקר שלך, מה שהופך את חוויות המשתמש המקומיות למהירות יותר.

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

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

בסך הכל, רשתות CDN מגבירות את המהירות תוך הפחתת עלויות. "קבלת הרישיון, האירוח וה-CDN מ-Shopify Plus חסכה לנו כ-100,000 דולר בשנה מיד עם ההתחלה", אומר בוטיק לבוש אדום הבעלים דיאנה הארבור.

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

עשו זאת עם Shopify

סוחרי Shopify יכולים להשתמש במסנן asset_url ולהוסיף אוטומטית מספרי גרסה לכל כתובות ה-URL שאנו יוצרים. לדוגמה, מספר גרסה המצורף לסוף כתובת URL עשוי להיראות כך: ?v=1384022871. מסנן זה מורה ל-CDN למשוך את הגרסה הנכונה. בלעדיו, ייתכן שלא תראו את הנכס שאתם מצפים לו לאחר שביצעת שינויים בתוכן שלכם.

בנוסף, אם אתם מפנים ישירות לתוכן ב-CSS שלכם, כתובת ה-URL תהיה סטטית. היא גם לא תציג את גרסת הנכס המעודכנת אוטומטית על ידי Shopify.

כדי להבטיח עדכונים אוטומטיים, שנה את תחביר ה-CSS שלך כך שיכלול את המסנן asset_url. למידע על כל מסנני ה-URL שעוזרים למשוך נכסים, בקר ב מרכז העזרה של Shopify.

אל תגזימו עם התאמות נושא 

המראה של אתר אינטרנט משפיע או משפיע על הסבירות של הלקוח ליצור בו אינטראקציה. מחקרים מראים שרושם ראשוני קשור ב-94% לעיצוב - והחלטות אלו מתרחשות במהירות שיא. הרושם הראשוני של מבקר באתר נוצר תוך עשירית שנייה. 

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

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

הפעלת תצוגה מהירה בדפי קטגוריות

חלונות קופצים של תצוגה מהירה מציגים מוצר - ישירות מדף רשימת מוצרים - במקום לגרום לך לבקר בדף פרטי מוצר. 

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

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

יישומים של חלונות קופצים של תצוגה מהירה (מובנים בתוך ערכת נושא או מאפליקציה) יכולים לפעמים לטעון מראש את המידע מדף מוצר שלם במקרה שמבקר לוחץ על כפתור "תצוגה מהירה".

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

כמה אפליקציות שיכולות לעזור כוללות:

לחץ על דוגמה למפה עבור דף הבית של אתר Hotjar.

כלי מיפוי הקליקים של Hotjar.

מצא תצוגה מהירה ב-Shopify

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

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

השתמש AJAX כדי לשלוף את פרטי המוצר לאחר שמבקר לוחץ על כפתור התצוגה המהירה. לחלופין, שמור קבוצה מוגבלת של פרטי מוצר כתכונות נתונים בפריט רשת המוצר. לאחר מכן בנה את ה-HTML והחלון הקופץ באופן דינמי באמצעות JavaScript.

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

הסר חלונות קופצים מיותרים

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

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

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

הקלו על מחווני הגיבורים של דף הבית

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

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

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

  • היצמדו לשתיים עד שלוש שקופיות
  • הצג את השקופיות כקטעי תוכן סטטיים במקום קרוסלות מסתובבות אוטומטית 
  • השתמש srcset or טען Lazy כפתרון כולל

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

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

דחיסה, שינוי גודל והקטנה של תמונות

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

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

ניתן למזער את גודל התמונה מבלי לפגוע באיכות בעזרת דחיסה ללא אובדן נתונים, בעזרת כלים כמו TinyJPG or TinyPNG.

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

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

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

השתמש בהטמעות לייט לסרטונים

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

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

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

תמונות ממוזערות של יוטיוב הן בגודל של כ-15 קילובייט, כך שהטמעות קלות יכולות להקטין את גודל דפי האינטרנט בכמעט מגה-בייט.

צמצום הפניות וקישורים שבורים

יותר מדי הפניות וקישורים שבורים יכולים לגרום נזק שלילי השפעה ביצועים ופגיעה בדירוג ה-SEO שלך.

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

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

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

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

Shopify Plus סוחר Gymshark מפנה אנשים שנמצאים בקישור שבור אל שתי הקטגוריות הגדולות ביותר שלו: בגדי נשים וגברים.

הפעל טעינה עצלה

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

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

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

בטל את חסימת הדפדפן מפני סקריפטים חוסמי מנתחים

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

למרבה המזל, יש תיקון קל וכל מה שצריך הוא את התכונה "async" או "defer".

חסימת מנתח: לא חסימת מנתח:

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

ארגון המעקב באמצעות מנהל התגים של גוגל

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

נתוני לקוחות איסוף יכול גם להיות נטל של זמן ומשאבים עבור צוותי המפתחים, ה-IT או השיווק שלכם. מערכת ניהול תגיות (TMS) כמו Google Tag Manager מרכזת את כל התגים שלכם לבקשת JavaScript אחת. אם כשל בתג גורם להשבתת האתר שלכם, שימוש ב-TMS גם עוזר לכם להסיר את התג במהירות.

נירב שת' מוסיף שכאשר אנאטה עסקה בייעול מהירות האתר של אתר מסחר אלקטרוני בתחום היופי, "מה שהניע את מהירות האתר יותר מכל דבר אחר היה השילוב של מינוף ממשקי ה-API של Shopify וניקוי מנהל התגים של גוגל."

קטע קוד אחד הוא כל מה שאתם צריכים כדי לנהל את תגי החנות שלכם ב-Shopify Plus במקום אחד באמצעות Google Tag Manager. למידע נוסף, עיינו בהנחיות במרכז העזרה של Shopify Plus. 

היזהרו מלולאות נוזל מוגזמות

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

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

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

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

לעתים קרובות קל יותר ל השתמש בפונקציה product.options_with_values ​​פשוטה לולאה. עיין בתיעוד כדי להבין כיצד פועלות שפת התבניות ולולאות נוזליות של Shopify.

כיצד להריץ בדיקת מהירות אתר אינטרנט

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

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

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

דוח PageSpeed ​​Insight עבור אתר מסחר אלקטרוני שנכשל בהערכת חיוניות האתר.

דוח חיוניות האינטרנט של Google PageSpeed ​​Insight.

אופטימיזציה של מהירות עבור מובייל

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

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

לאחר שגיליתי רוב המבקרים בנייד לא ביצעו המרהמותג הלבשה ומתנות העסקיות, Merchology, החליט לעצב מחדש את אתר המובייל שלו לחוויית לקוח המותאמת למובייל. חודשיים לאחר השקת האתר המובייל, Merchology השיגה עלייה של 40% בשיעורי ההמרה בנייד.

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

בניית דפי מובייל מואצים

דפים ניידים מואצים (AMP) הוא פרויקט בחסות גוגל אשר מעצב מחדש תוכן אתרים עבור מכשירים ניידים. באתרים שבהם AMP מופעל, גוגל שומרת במטמון כל עמוד וטוענת אותו מחדש בכל פעם שמשתמש מבקר באתר מחיפוש. זה מקצר את זמני טעינת העמודים. וכתוצאה מכך זמן השהייה בדף כפול ועלייה של 20% בהמרות בהשוואה לדפים שאינם AMP.

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

השבתת הפעלה אוטומטית של וידאו בנייד 

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

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

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

אופטימיזציה של התשלום בנייד

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

אי הכללת תהליך התשלום באסטרטגיית אופטימיזציית מהירות האתר שלך עלולה לגרום ל... שיעור נטישת עגלה גבוה יותראנשים בטוחים מספיק כדי לבחור בעצמם פריטים שהם רוצים לקנות. אבל אם הם נתקלים בעיכובים בקופה, הם צריכים... בֶּאֱמֶת אוהבים שהמוצר בעגלה שלהם יישאר. (כלומר: תאבדו את הקונים האימפולסיביים.)

שכר חנות מאפשר לקונים ניידים לעבור את תהליך התשלום במהירות שיא. לפי Shopify, לסוחרים המשתמשים בקופה ב-Shop Pay יש שיעור ביצוע הזמנה בנייד גבוה פי 1.91 מאשר אלו שעוברים דרך התשלום הרגיל. 

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

דוגמה לקופה בחנות Shop Pay עבור Kotn עם שמלה שחורה של אישה בעגלה.

Kotn משתמשת ב-Shop Pay כדי לספק חוויות תשלום מהירות בנייד.

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

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

רבות מהאופטימיזציות הללו הן עשה זאת בעצמך. כאשר זה לא אפשרי, ניתן להיעזר ב- שותף Shopify Plusהם יכולים להדריך אותך כיצד להאיץ את אתר Shopify שלך.

שאלות נפוצות על אופטימיזציה של מהירות אתרים

כיצד אוכל לייעל את מהירות האתר שלי?

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

למה מהירות האתר שלי כל כך איטית?

מהירות האתר שלך יכולה להיות נמוכה אם ארכיטקטורת האתר אינה מותאמת, האתר משתמש בקבצים גדולים מדי (כולל תמונות), או שפלטפורמת המסחר האלקטרוני שבה אתה משתמש אינה בנויה למהירות. 

למה מהירות אתר חשובה במסחר אלקטרוני?

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

מהי מהירות אתר טובה לקידום אתרים (SEO)?

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

קראו עוד

זה הופיע במקור ב Shopify פלוס וזמין כאן לגילוי רחב יותר.

מצא אותנו באינטרנט

תובנות שבועיות על DTC

סומכים על ידי אלפים

שותפים מהימנים

אסטרטגיות צמיחה של Shopify עבור מותגי DTC | סטיב האט | מנהל הצלחה לשעבר של סוחרים ב-Shopify | 460+ פרקי פודקאסט | 50 הורדות חודשיות

בחר שפה