Shopify ביצועים וחוויה ניידת
חנות מהירה לא רק גובה מהר יותר היא מגיבה מהר יותר לכוונות הלקוחות.
המטרה היא לא להשיג ציון מושלם מבודד, אלא לשפר את הטעינה, ההיענות והיציבות של הדפים בהם נעשה שימוש בפועל התחל במדידה, זהה את האחראי ולאחר מכן תקן בהתאם להשפעה העסקית.
אל תבלבלו את Shopify עם מה שהתווסף ל-Shopify
הפלטפורמה מספקת אירוח, CDN ומספר אופטימיזציות האטות מגיעות לרוב מערכת נושא, אפליקציות, סקריפטים שיווקיים, מדיה והתאמות אישיות.
ציון בודד לא מספר את כל הסיפור
השווה נתוני משתמשים אמיתיים, סוגי דפים מרובים ובדיקות מעבדה דף בית מהיר אינו מפצה על גיליון מוצרים איטי.
שלושת המימדים שיש להיזהר מהם
מודד כאשר תוכן ראשי גלוי הופך זמין, לעתים קרובות תמונה או כותרת גדולה.
צופה במהירות התגובה לאחר אינטראקציות: תפריט, גרסאות, מסננים, סל או כפתורים.
מודד תנועות תוכן בלתי צפויות במהלך הטעינה.
Shopify מאגדת את המדדים הללו לדוחות ביצועי האינטרנט שלה מנתונים אמיתיים כאשר נפח מספיק זמין.
שיטת האבחון בת 6 השלבים
בחר דפים חשובים
בדוק לפחות את קבלת הפנים, אוסף גדול, דף מוצר מייצג, הסל ודף עריכה.
התחל עם הנייד
חיבורים, מעבדים וגדלים של מסך הופכים את הבעיות לגלויות יותר השתמש בטלפון אמיתי כדי להשלים את הכלים.
קרא דוחות של Shopify
צפה בחיוניות ליבה באינטרנט, סוגי דפים מושפעים ואירועים התואמים להתקנה או שינוי.
השווה עם PageSpeed Insights
בדיקות מעבדה עוזרות לזהות משאבי חסימה, תמונות כבדות, סקריפטים ועבודת דפדפן מוגזמת.
לבודד סיבה
בדוק עותק של ערכת הנושא, השבת זמנית בלוק יישום או סקריפט, ולאחר מכן השווה לפני ואחרי.
מידה לאחר פרסום
לנתונים בפועל לוקח זמן לשקף שינויים. לתעד את התאריך וגם לפקח על ההמרה.
האופטימיזציות החסכוניות ביותר
בקשות ביקורת
הסר פונקציות ללא ערך מספיק ובדוק את הסקריפטים שנותרו לאחר הסרת ההתקנה.
הבהרת תמונה ראשית
מגישים בגודל מתאים, שומרים על איכות שימושית ונמנעים מעיכוב התמונה המהווה את התוכן העיקרי.
השתמש בתמונות רספונסיביות
הדפדפן צריך להוריד גרסה ידידותית למסך ולא קובץ שולחן עבודה ענק בנייד.
צמצם JavaScript
העדיפו HTML ו-CSS כשאפשר. טען פונקציות רק בדפים שזקוקים להן.
דחה תסריטים לא חיוניים
לא כל הצ'אט, הביקורות, המפות, הסרטונים וכלי השיווק צריכים לחסום את התצוגה הראשונה.
גופנים מאסטר
הגבל משפחות ושומנים, טען מראש רק קבצים חיוניים, או שקול גופן מערכת.
מידות מילואים
הגדר רוחב וגובה של תמונות, סרטונים ווידג'טים כדי למנוע קפיצות תוכן.
חתור על הקולקציות הגדולות
אל תטען מאות מוצרים בבת אחת כאשר די בעימוד או טעינה מבוקרת.
נקה מעקב שיווקי
הסר תגים שאינם בשימוש ובדוק את הערך של כל כלי שנטען באמצעות מנהל התגים.
תעדוף לפי השפעה
| פעולה | עדיפות רגילה | למה |
|---|---|---|
| מחק אפליקציה כבדה ולא מועילה | גבוה | יכול להפחית JavaScript, שאילתות ועבודת דפדפן על פני מספר דפים |
| בצע אופטימיזציה לגיבור הנייד | גבוה | האלמנט הנראה הגדול ביותר משפיע לעתים קרובות על הטעינה הנתפסת |
| השהה סרטון מתחת לקו המים | גבוה | הימנע מטעינה מיידית של מדיה בלתי נראית |
| הגבל גופנים ושומנים | ממוצע | מפחית הורדות ומאיץ את הצגת הטקסט |
| נקה קוד נוזלי חוזר | ממוצע | יכול לשפר את זמן העיבוד בדגמים מורכבים |
| תעלה כמה קילובייט על אייקון קטן | חלש | השפעה מוגבלת אם התסריטים והמדיה הגדולים יישארו כבדים |
תמונות: ההגדרות שבאמת חשובות
כדי לעשות
- השתמש במסנני תמונה של Shopify עם מספר רוחבים
- הזן מידות כדי לשמור מקום
- טוען בעצלתיים מדיה מתחת למסך
- משאבי אירוח ב-Shopify CDN
- בדוק חיתוך נייד
כדי להימנע
- שלח את אותה תמונה של 3000 פיקסלים לכל המסכים
- שים עומס מושהה על הוויז'ואל הראשי ללא סיבה
- השתמש במספר מחוונים כבדים
- טען וידאו אוטומטי בחדות גבוהה
- הכפל תמונות בלתי נראות בקרוסלות
יישומים וסקריפטים של צד שלישי: להחליט לפי ערך
זהה את הפונקציה
מה זה בעצם מייצר: מכירות, אמון, תמיכה, נתונים או קישוט פשוט?
מדוד את הטווח
האם הסקריפט נטען בכל הדפים כאשר הוא שימושי רק במוצר או בעגלה?
חפש פונקציה מקורית
הנושא או Shopify עשויים כבר להציע פתרון קל יותר.
בדיקה לפני/אחרי
השווה עותק של ערכת הנושא עם ובלי הבלוק, ולאחר מכן בדוק שהנתונים והמכירות נשארים נכונים.
מחק נקי
לאחר הסרת ההתקנה, בדוק אם יש קטעי קוד, תגים וקבצים שעשויים להישאר פעילים.
מסמך
שמור את הבעלים, המטרה ותאריך העדכון של כל סקריפט חיצוני.
אופטימיזציות טכניות של הנושא
JavaScript פרוגרסיבי
תכונות חיוניות כמו גילוי ורכישת מוצר צריכות להישאר חזקות השתמש ב-JavaScript כדי לשפר, לא כדי להפוך את הדף כולו לתלוי.
סקריפטים לא חוסמים
תכונות מותאמות וטעינה מותנית מונעים מקבצים לעכב את בניית העמוד הראשונית.
נוזל יעיל
הימנע מחישובים מורכבים חוזרים ונשנים בלולאות ונתח קטעים איטיים עם כלי Shopify.
Css ממוקד
צמצם את התלות הכוללת והימנע מטעינת סגנונות רכיבים שחסרים בדף.
משאבים קריטיים
טען מראש רק את המשאבים החיוניים במסך הראשון יותר מדי טעינות מראש יוצרות תחרות חדשה.
כלי בקרה
בדיקת ערכת נושא יכולה לזהות חבילות גדולות, משאבים מרוחקים, חסימת JavaScript וכמה תלות ב-CSS.
מה לא לעשות
לרדוף אחרי ציון 100 בכל מחיר
אל תסיר תכונה רווחית עבור כמה נקודות השווה עלות טכנית וערך מסחרי.
ייעול הקבלה בלבד
מבקרים מגיעים לרוב ישירות על גיליון מוצר, אוסף או פריט.
התקן אפליקציית מהירות ללא אבחון
שכבה נוספת לא תמיד מתקנת את הסיבה ועשויה להוסיף JavaScript.
טען בעצלתיים את כל התוכן
החזותי החשובה הראשונה צריכה להופיע במהירות העמסה עצלה שימושית במיוחד מתחת לאזור הנראה.
הסר מעקב חיוני
שמור על הכלים הדרושים להזמנות, הקצאה ותאימות, ולאחר מכן ייעל את הטעינה שלהם.
ערוך ערכת נושא פעילה מבלי להעתיק
עבדו על שכפול, בדקו את הקורסים ושמרו על גרסה ניתנת לשחזור.
תוכנית פעולה ל-7 ימים
שאלות נפוצות
לאיזה ציון PageSpeed כדאי לשאוף?
אין ציון אחד שמבטיח חוויה טובה מעל הכל, חפשו לשפר מדדים, דפים חשובים ונתונים אמיתיים מבלי להסיר פונקציות שימושיות.
האם Shopify איטי באופן טבעי?
Shopify מספקת תשתית אופטימלית ו-CDN. הביצועים הסופיים תלויים במידה רבה בנושא הנוסף, במדיה, ביישומים ובסקריפטים.
האם כל האפליקציות מאטות את החנות?
מס 'השפעתם משתנה בהתאם לקוד שלהם, טעינת דפים ופונקציה.Evaluate כל אחד בנפרד.
האם עלי לדחוס את כל התמונות באופן ידני?
Shopify עושה טרנספורמציות ומגישה תמונות באמצעות ה-CDN שלה, אבל תמיד כדאי לבקש מידות מתאימות ולהימנע מקבצי מקור גדולים שלא לצורך.
כמה זמן לפני שתראו שיפור?
בדיקות מעבדה מגיבות מיד, בעוד שדיווחים המבוססים על משתמשים בפועל דורשים ביקורים נוספים ועשויים להראות פיגור.
אופטימיזציה טובה מסירה את הבלמים מבלי להסיר את הערך
הפוך את חנות Shopify שלך למהירה יותר, יציבה יותר ומהנה יותר בנייד
בדוק את הנושא, האפליקציות, הסקריפטים והמדיה שלך לפני ביצוע שינויים כלשהם.
