על פי ארכיון HTTP עולה כ- 50% מגודל הקובץ של דף אינטרנט ממוצע נובע מתמונות. עבור חנות WooCommerce של וורדפרס בעלת תמונות רבות של מוצרים, ניתן לשער כי האחוז אף גבוה יותר שכן תמונות הן חלק חשוב בכל חנות מסחר אלקטרוני על מנת לתת לקונים תמונות מפורטות של המוצר ולעזור להם לקבל החלטות רכישה. יחד עם זאת, לא ניתן לקבל מצב בו יאט נפח התמונות של החנות המקוונת את האתר, מכיוון שלזמני טעינת דפי האתר קיימת השפעה הן על דירוג הדפים והן על שיעורי ההמרות של החנות המקוונת.
על ידי אופטימיזציה של תמונות המוצרים בחנות WooCommerce עדיין ניתן לספק שפע של תמונות מוצרים מפורטות ואיכותיות, אך מבלי להאט את זמני הטעינה של החנות המקוונת (או לפחות להפוך את ההשפעה קטנה ככל האפשר).
להלן מספר עצות באשר לדרכי אופטימיזציה של רכיב WooCommerce:
כיווץ תמונות מוצרים: קיימות שתי דרכים עיקריות לכיווץ תמונות – א. Lossless: הפחתה קטנה בגודל הקובץ עם אפס שינוי באיכות. ב. Lossy: הפחתה גדולה יותר בגודל הקובץ, אך לפעמים יכול להיות שינוי קטן באיכות. לרוב, אין העין האנושית יכולה להבחין בהבדל בדחיסה ובכל מקרה, מומלץ להשתמש בסוג דחיסה כלשהו בתמונות WooCommerce מכיוון שזו דרך קלה לקצץ את גודל הקובץ מבלי לשנות דבר (בשימוש בפוטושופ כחלק מיצירת תמונות המוצרים מומלץ להשתמש באפשרות שמור לאינטרנט). כמו כן, ניתן להתקין באתר וורדפרס פלאגין Imagify של wp-rocket אשר מכווץ אוטומטית תמונות שהועלו לאתר וורדפרס בהתאם להגדרות שנקבעו מראש על ידי מנהלי התוכן של אתר הוורדפרס.
הקטנת גודל תמונות המוצרים: בנוסף לדחיסת התמונות של החנות המקוונת, מומלץ מאד גם לשנות את מימדי תמונות המוצרים על מנת לכווץ עוד יותר את גודלן: מידות קטנות יותר (גובה ורוחב) שווה לנפח קובץ קטן יותר. רכיב WooCommerce אמנם עושה זאת אוטומטית באזורים מסוימים בחנות המקוונת אולם לא עבור תמונה ראשית בדף מוצר יחיד. חנות WooCommerce אשר מוכרת מוצרים פשוטים כגון חולצות טיקו לבנות רגילות, ניתן להקטין לגודל של 800 – 1000 פיקסלים משום שאין פרטים רבים בתמונה. עם זאת, חנות WooCommerce אשר מוכרת תכשיטים או מוצרים דומים שלקוחות רוצים להגדיל ולראות פרטים קטנים, מומלץ לשמור בגודל של מינימום 2000 פיקסלים. בכל מקרה, לעולם אין להעלות לאתר וורדפרס וחנות WooCommerce את התמונות שיצאו מהמצלמה כברירת מחדל ותמיד כדאי לנסות להקטין את מימדי התמונות מבלי להשפיע לרעה על חווית הקנייה. גם כאן, תוסף הדחיסה Imagify לאתרי וורדפרס יכול לשנות את גודל התמונות אוטומטית למימדים מקסימליים מוגדרים מראש, כאשר מעלים את התמונות לאתר.
תמונות ממוזערות (thumbnails): כאשר מעלים תמונה לאתר וורדפרס, וורדפרס תשנה את גודל התמונה באופן אוטומטי לממדים שונים – תמונות ממוזערות. מידות אלו נשלטות בדרך כלל על ידי ערכת העיצוב, אך WooCommerce קובע גודל משלו לתמונות ממוזערות – תמונות המשמשות בעמוד הקטלוג ובאזורים אחרים של החנות המקוונת. ניתן לשלוט בגודל התמונות הממוזערות ולדוגמה, אם העיצוב בחנות המקוונת מציג תמונות ברוחב של 200 פיקסלים בעמוד הקטלוג, מומלץ להפוך את רוחב התמונה הממוזערת ל- 200 פיקסלים במקום ברירת המחדל של 300 פיקסלים.
שימוש בתמונות מסוג JPEG: כשמדובר בתמונות מקוונות, קיימים מספר פורמטים שונים שבהם ניתן להשתמש, כאשר האפשרויות הנפוצות ביותר הן PNG, JPEG או GIF. בדרך כלל, מומלץ להשתמש ב- JPEG לתמונות מוצר, מכיוון ש- JPEG עובד מצוין עם תמונות בעלות צבעים רבים ולרוב נפחם קטן יותר מקבצי PNG וקל יותר לדחיסה. אזהרה אחת בנושא – שקיפות – JPEG אינו תומך בשקיפות ובמידה ויש צורך בשקיפות מומלץ להשתמש ב- PNG במקום.
שימוש ברקע פשוט לתמונות מוצרים: אמנם זה מפתה להיות יצירתי עם תמונות המוצרים בחנות המקוונת, אולם יש סיבה שכמעט כל חנות וגם חנויות גדולות (אמזון, וולמארט) משתמשות ברקע לבן רגיל: לא רק שרקע לבן מציג בצורה ברורה את המוצר, הוא גם מסייע להקטין את נפח קבצי תמונות המוצים על ידי הקבלת כמות המידע שבתמונה. בעיקרון, המשמעות של פחות צבעים הינה נפח קובץ קטן יותר ורקע לבן פשוט הוא דרך להשיג זאת מבלי להתפשר על בהירות התמונה.
שימוש ברשת העברת תוכן – CDN: כברירת מחדל, כל תמונות המוצרים של חנות WooCommerce באתר וורדפרס נטענות משרת אחסון האתר ומצב זה הינו תקין במידה וקהל היעד של האתר ממוקם גיאוגרפית באזור שרת אחסון האתר. המצב אינו תקין במידה וחנות WooCommerce היא בינלאומית מכיוון שקירבה פיזית לשרת אחסון האת משפיעה על מהירות הטעינה של התוכן וקהל יעד הממוקם גאוגרפית רחוק משרת אחסון האתר, יחוו זמני טעינה גבוהים יותר. שימוש ב- CDN פותר את הבעיה בזכות טעינת קבצים סטטיים מתוך רשת של שרתים ברחבי העולם – בהתאם למיקום הגיאוגרפי של המבקרים באתר.