חדשות מג'נטו

מג'נטו - אופטימיזציית תמונות לנייד

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

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

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

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

שיפור טעינת תמונות באתר מג'נטו

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

אין כללים חקוקים באבן לגבי גודל קבצי תמונות הטובים ביותר לנייד. המטרה היא שהדפדפן יטען את התמונה הנכונה בכל מקום בו המבקר משתמש - שולחן העבודה או הנייד. יש לשקול שני קריטריונים: ממד viewport למחשב שולחני (1280 פיקסלים) (640 פיקסלים) ולנייד (320 פיקסלים) וכן, גודל התמונה ביחס ל- viewport.

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

לבחירת פורמט קובץ התמונה המתאים תהיה השפעה חיובית על הקטנת גודל התמונה בנייד, כאשר לא תמיד JPG או PNG הן התשוהות. מומלץ להשתמש בפורמט WebP ככל שניתן. פורמט מודרני זה חוסך בממוצע כ- 25% יותר נפח אחסון מאשר קבצי JPEG או PNG.

הטמעה של טעינה עצלה - lazy loading התמונות באתר מג'נטו תעזור לדף הנייד להיטען מהר יותר מכיוון שטעינה עצלה דוחה את הטעינה של אלמנטים גדולים (כמו תמונות) שאין בהם צורך מיידי בנייד.

CDN יוצר מרחק חיבור קצר יותר בין המשתמש לשרת אחסון מג'נטו. שימוש ברשתות העברת תוכן (CDN) מומלץ מאד כדי ליעל את משלוח התמונה לניידים. על פי web.dev, העברת תמונות דרך CDN יכולה להניב חיסכון של 40%–80% בגודל קובץ התמונה!