דפי מוצר ב-WooCommerce ידועים לשמצה כאיטיים. וכנה? זה מוצדק. בין גלריות מוצר, סקריפטים של וריאציות, קטעי ביקורות, לוגיקת הוספה לעגלה, ומה שהתבנית שלך טוענת מעל כל זה - דף מוצר בודד יכול בקלות להגיע לזמן טעינה של 4-6 שניות.
החדשות הטובות: רוב בעיות המהירות האלה ניתנות לתיקון בלי לכתוב שורת קוד אחת. פשוט צריך לדעת איפה לחפש ואיזה כלים להשתמש בהם.
למה דפי מוצר ב-WooCommerce איטיים כברירת מחדל
WooCommerce טוען הרבה JavaScript ו-CSS בכל דף - כולל דפים שבהם רוב הקוד הזה פשוט לא נחוץ. פוסטים בבלוג לא צריכים סקריפטים של עגלה. דף הבית לא צריך את ה-stylesheet של הקופה. אבל WooCommerce טוען אותם בכל מקרה, כי זו ברירת המחדל הבטוחה.
דפי מוצר סובלים במיוחד. דף מוצר טיפוסי מפעיל שאילתות לנתוני מוצר, מוצרים קשורים, ביקורות, מצב מלאי ומחירים - וכל זה עוד לפני שמתחיל לצייר משהו גלוי למבקר.
הוסף לזה בונה דפים, כמה תוספי ביקורות, כלי רשימת משאלות ומחליף מטבעות, ואפשר להבין איך הדברים מסתבכים. בעיית שיפור מהירות וורדפרס ברוב חנויות WooCommerce היא לא דבר אחד גדול - אלה חמישים דברים קטנים שמצטברים.
התחל עם אבחון אמיתי
לפני שאתה משנה משהו, קבל תמונה ברורה של מה שבאמת איטי. לנחש זה בזבוז זמן. כלים כמו Google PageSpeed Insights ו-GTmetrix נותנים לך פירוט חינמי של ה-Largest Contentful Paint (LCP), Time to First Byte (TTFB), וה-Total Blocking Time שלך.
הרץ בדיקה על אחד מדפי המוצר שלך באופן ספציפי - לא רק על דף הבית. התוצאות לעתים קרובות שונות מאוד. דף הבית שלך עשוי לקבל ציון 85 בעוד דפי המוצר שלך מקבלים 42.
אם אתה על אחסון WordPress מנוהל, ייתכן שיש לך כלי פרופיילינג מובנה שמראה לך ספירת שאילתות מסד נתונים, שימוש בזיכרון ואיזה רכיבים לוקחים הכי הרבה זמן לטעון. רמת פירוט כזו הרבה יותר שימושית מציון כללי.
תיקוני המהירות ב-WooCommerce שלא דורשים קוד
1. טען סקריפטים של WooCommerce רק היכן שצריך
זו אחת השינויים בעלי ההשפעה הגבוהה ביותר שאפשר לבצע. WooCommerce טוען את סקריפט ה-cart fragments בכל דף כברירת מחדל, אפילו בדפים ללא פונקציונליות עגלה. הסקריפט הזה מבצע בקשת AJAX בכל טעינת דף, מה שמוסיף עיכוב בכל מקום.
תוסף ביצועים טוב ל-WordPress יאפשר לך להשבית טעינת נכסי WooCommerce בדפים שאינם דפי חנות. חפש הגדרה בשם משהו כמו "Disable WooCommerce scripts on non-WooCommerce pages". הפעלה של זה אומרת שסקריפטי עגלה וקופה יופעלו רק כשהם באמת נחוצים. מבקרים שגולשים בבלוג שלך או בדף "אודות" לא ישלמו את מחיר הביצועים של WooCommerce כלל.
2. דחוס וטען תמונות מוצר באופן עצל
תמונות מוצר הן כמעט תמיד הנכסים הכבדים ביותר בדף מוצר. גלריה עם ארבעה JPEG לא מאופשרים יכולה להוסיף 3-4MB לטעינת דף בודד.
שני שינויים פותרים את רוב זה בלי קוד:
- הפעל טעינה עצלה (lazy loading) - תמונות מתחת לקו הגלילה לא נטענות עד שהמבקר גולל אליהן. זה מפחית באופן משמעותי את משקל הדף הראשוני.
- המר לפורמטים מודרניים - תמונות WebP קטנות בדרך כלל ב-25-35% מ-JPEG באותה איכות ויזואלית. תוספי אופטימיזציה רבים מטפלים בהמרה אוטומטית.
אם האחסון שלך כולל כלי אופטימיזציה לתמונות, הוא לעתים קרובות יכול לטפל גם בדחיסה וגם בהמרת פורמט אוטומטית בכל פעם שאתה מעלה תמונת מוצר חדשה. עסקנו בזה לעומק במאמר איך אופטימיזציה של תמונות לבדה יכולה לשנות את זמני טעינת הדפים ב-WordPress.
3. הפעל שמירת אובייקטים במטמון לשאילתות מסד נתונים
WooCommerce תלוי מאוד במסד נתונים. כל דף מוצר מפעיל שאילתות מרובות - נתוני מוצר, מוצרים קשורים, רמות מלאי, ביקורות לקוחות ומחירים. בחנות עמוסה, השאילתות האלה רצות אלפי פעמים בשעה, לעתים קרובות מביאות נתונים זהים בכל פעם.
שמירת אובייקטים במטמון שומרת את תוצאות השאילתות בזיכרון (בדרך כלל באמצעות Redis), כך שבקשות חוזרות שולפות מהמטמון במקום לפגוע שוב במסד הנתונים. ההבדל בזמן ביצוע השאילתה דרמטי - מיקרושניות מהמטמון לעומת אלפיות שניה ממסד הנתונים.
באחסון מנוהל מוגדר היטב, הפעלת Redis object caching היא בדרך כלל לחיצה על מתג אחד. ברגע שזה פועל, זה עובד בשקיפות. שיעור פגיעה במטמון בריא מעל 80% אומר שמסד הנתונים שלך עושה רק חלק קטן מהעבודה הקודמת, ודפי המוצר שלך נטענים מהר יותר באופן מורגש.
4. דחה ועכב JavaScript
JavaScript הוא אחד התורמים הגדולים ביותר לציוני מהירות גרועים ב-WooCommerce. סקריפטים חוסמים עיבוד - הדפדפן לא יכול לצייר שום דבר גלוי עד שהוא מסיים להוריד ולנתח כל סקריפט.
דחיית JS אומרת שסקריפטים נטענים אחרי ה-HTML הראשוני. עיכוב JS הולך צעד נוסף - הוא מחזיק סקריפטים עד לאינטראקציה של המשתמש כמו גלילה או לחיצה. שתי הטכניקות מפחיתות את ה-Total Blocking Time ומשפרות את ציון ה-LCP שלך בלי לשבור פונקציונליות.
רוב תוספי אופטימיזציית הביצועים כוללים אפשרויות אלה. המפתח הוא לבדוק אחרי שאתה מפעיל אותן. כמה סקריפטים של WooCommerce - במיוחד כל מה שקשור לכפתור הוספה לעגלה או בוחרי וריאציות - צריכים להיות מוחרגים מכללי העיכוב, אחרת כפתורים עלולים לא לעבוד בטעינה הראשונית של הדף. הוסף את הסקריפטים האלה לרשימת ההחרגה ואתה מוכן.
5. הסר CSS לא בשימוש עם RUCSS
התבנית והתוספים שלך טוענים CSS לתכונות שלא מופיעות בכל דף. דף מוצר לא צריך את ה-CSS של טופס יצירת הקשר, גריד התיק העבודות, או סרגל הצד של הבלוג. אבל כל ה-CSS הזה נטען בכל מקרה, מנפח את הדף ומוסיף עומס חוסם עיבוד.
כלי Remove Unused CSS (RUCSS) מנתחים כל סוג דף ומייצרים קובץ CSS רזה שמכיל רק את הכללים שבאמת חלים על אותו דף. דף מוצר WooCommerce מסיים עם stylesheet קל יותר, מה שאומר ניתוח ועיבוד מהירים יותר.
זה משתלב היטב עם critical CSS - שבו אתה מטמיע רק את הסגנונות הנחוצים לתוכן מעל קו הגלילה ודוחה את השאר. יחד, הם עושים הבדל גדול בזמן הטעינה הנתפס, במיוחד במובייל. לסקירה מעמיקה יותר של CSS ועיבוד, ראה איך אופטימיזציה של נתיב העיבוד הקריטי מציגה את הדף שלך מהר יותר.
6. צמצם מוצרים קשורים ו-Upsells
דפי מוצר ב-WooCommerce לעתים קרובות מציגים מוצרים קשורים, upsells ו-cross-sells בתחתית הדף. כל אחד מהבלוקים האלה מפעיל שאילתות מסד נתונים נוספות וטוען תמונות נוספות.
יש לך כמה אפשרויות ללא קוד:
- צמצם את מספר המוצרים הקשורים המוצגים (4 במקום 8 מפחית את עומס השאילתות בערך בחצי)
- השבת מוצרים קשורים לחלוטין אם הם לא תורמים להמרות
- טען את קטע המוצרים הקשורים באופן עצל כך שיעובד רק אחרי תוכן המוצר הראשי
תוספים כמו YITH WooCommerce Product Add-Ons ו-Related Products for WooCommerce נותנים לך שליטה על זה בלי קוד.
7. הפעל שמירת דפים במטמון
שמירת דפים במטמון שומרת תמונת HTML סטטית של דפי המוצר שלך ומגישה את התמונה הזו למבקרים במקום לבנות מחדש את הדף מאפס בכל בקשה. לדפי מוצר שהתוכן בהם לא משתנה בכל ביקור, זו אחת מטכניקות שיפור מהירות וורדפרס היעילות ביותר הקיימות.
הדבר המסובך עם WooCommerce הוא שחלק מהאלמנטים - כמו ספירת פריטים בעגלה ומצב מלאי - הם דינמיים. הגדרות מטמון טובות מטפלות בזה על ידי שמירת הדף במטמון אך החרגה של אותם קטעים דינמיים ספציפיים. רוב תוספי הביצועים ופלטפורמות האחסון המנוהל מטפלים בזה אוטומטית לחנויות WooCommerce.
אם אתה רוצה להבין את הנושא של מטמון ברמה עמוקה יותר, איך להשתמש בתוספי מטמון בלי לשבור את אתר WordPress שלך בטעות עובר על המלכודות הנפוצות ואיך להימנע מהן.
המלצות תוספים לשיפור מהירות WooCommerce
כמה תוספים שכדאי להכיר לאופטימיזציה של WooCommerce ללא קוד:
- LiteSpeed Cache או WP Rocket - תוספי ביצועים מלאים עם הגדרות מותאמות ל-WooCommerce מובנות
- Smush או ShortPixel - דחיסת תמונות בכמות גדולה והמרת WebP
- Query Monitor - תוסף חינמי שמראה לך שאילתות מסד נתונים איטיות וזמני טעינת תוספים (מצוין לאבחון)
- WooCommerce Booster Plus - מאפשר לך להשבית סקריפטים ותכונות ספציפיות של WooCommerce שאינך משתמש בהן
מה דף מוצר מהיר יותר אומר בפועל לחנות שלך
שיפור של שנייה אחת בזמן הטעינה של דף מוצר מתורגם ישירות לשיעור המרה. מחקרים מראים בעקביות שדפים שנטענים בפחות מ-2 שניות מביאים להמרות בשיעור גבוה משמעותית מאלה שלוקחים 4 שניות ומעלה. לחנות מסחר אלקטרוני, זה לא מדד ביצועים - זה הכנסה.
התיקונים שלמעלה כולם ניתנים לביצוע בלי לגעת בקבצי התבנית שלך, לכתוב PHP, או לשכור מפתח. התחל עם אבחון, ואז עבור על מטמון, אופטימיזציה של תמונות וניהול סקריפטים לפי הסדר. רוב החנויות רואות שיפורים משמעותיים כבר משלושת השינויים הראשונים בלבד.
לסקירה רחבה יותר של האופן שבו סביבת האחסון משפיעה על מהירות WooCommerce, ראה את הסקירה שלנו על שיפור מהירות וורדפרס ומטמון ברמת השרת.
