לפני כמה שבועות פרסמתי פוסט בקהילה ובו טענתי שהתוסף elementor optimizer עשה פלאים בשיפור הביצועים של אתר שבניתי. תפסתם אותי על חם וירדתם עלי בתגובות (ובצדק!) – הרצתי את הבדיקות באמצעות GTmetrix, ובעוד הבדיקה של ׳לפני׳ בוצעה דרך שרת בקנדה, זו של ׳אחרי׳ בוצעה דרך שרת באירופה.
הא לכם טיפ מעולה לשיפור ביצועים של אתרים 😍
הבטחתי לחזור עם סקירה יותר יסודית.
אז הנה:
התגלגל לפתחי קייס סטאדי מושלם – אתר תדמית ותיק שבניתי לפני כ 3 שנים ולא עבר כמעט תחזוקה מאז. מאוחסן ביופרס על שרת שיתופי.
הלקוחה פנתה אלי כי היא קיבלה הודעה מיופרס שנפח האתר חורג מהחבילה שהיא רכשה (חבילה של 1G – בעוד נפח האתר עמד על 1.03G ללא סיבה הגיונית). חשדתי שהנפח המוגזם נובע מתמונות כבדות שהיא העלתה ולא עברו אופטימיזציה ואמרתי לה שאבצע באתר שעת תחזוקה ונהיה בקשר.
לפני שעשיתי כל פעולה הרצתי בדיקה בגוגל פייג׳ ספיד אינסייט.
האתר קיבל ציון של 86 בדסקטופ ו56 במובייל.
עיקר הדגש היה על LCP (בדסקטופ ובמובייל), ובנוסף על FCP במובייל בלבד.
מה עשיתי כדי לשפר את הביצועים?
- בשלב הראשון נכנסתי ליופרס וראיתי שקבצי הקאש באתר שוקלים כ600k – ניקיתי אותם – ובכך נפתרה הבעיה של החריגה מחבילת האיחסון.
- עדכנתי את התוספים שלא היו מעודכנים (ביניהם אלמנטור כמובן), ואז ניגשתי להגדרות של אלמנטור תחת הלשונית ׳פיצ׳רים׳, ואיקטבתי את כל ההצעות לתכונות שקשורות לביצועים שהוגדרו כתכונות יציבות.
- התקנתי את תוסף האופטימייזר של אלמנטור ובאמצעותו ביצעתי אופטימיזציה לכל המדיה באתר. נקודה שלא הבנתי – בספריית המדיה של האתר יש לי כ260 תמונות, אך התוסף ביצע אופטימיזציה למעל 1100 תמונות שאין לי מושג מאיפה הוא הקריץ. אשמח לתשובה מה קרה פה, אם למישהו יש….
בכל אופן התוסף הצליח לכווץ את משקל התמונות בכ-40-50%. - בהגדרות של wp-rocket החרגתי מההגדרה של lazy load את התמונות שמופיעות מעל הפולד בדף הבית.
וזהו!
הרצתי שוב בדיקה בגוגל פייג׳ ספיד אינסייט.
קיבלתי תוצאה של 92 במובייל ו99 בדסקטופ.
במובייל עדיין יש דגש על LCP למרות שלהבנתי התמונה המרכזית מעל הפולד מאופטמזצת כמו שצריך.
מה המסקנות שלי לגבי התוסף ובכלל?
- קודם כל לגבי האופטימייזר – החוויה שלו מעולה. הרעיון הכללי שמאפשר לבצע אופטימיזציה רטרואקטיבית לכל התמונות באתר וגם להיות רגועה לגבי התמונות שמנהל האתר/הלקוח יעלה בעצמו בעתיד – הוא מדהים! יש דברים קטנים לשפר ברמת ה-UX, אבל בסך הכל החוויה שלי היתה טובה.
בכל זאת אני אשת ux וגם קרציה אז חייבת לזרוק פה כמה רעיונות:
* בזמן הפרוססינג הייתי שמחה לראות בצורה ויזואלית וברורה על איזו תמונה הוא עובד כרגע, במקום לראות מתחת הפאנל של התוסף רשימה אקראית של קבצי מדיה.
* הייתי שמחה אפשרות לפלטר את המדיה ולראות בצורה ברורה אילו תמונות עברו אופטימיזציה ואילו לא
* הייתי שמחה לאפשרות להפעיל את התוסף על תמונות לפי המיקום שלהן באתר – לדוג׳ על תמונות בדף הבית/רק מעל הפולד/רק תמונות הירו בעמודים הפנימיים וכו׳. כרגע התוסף ״מכריח״ אותי לבצע אופטימיזציה על כל המדיה או לחילופין לחפש בספריית המדיה את התמונות שחשוב לי לטפל בהן.
* עוד משהו שהיה יכול להיות נחמד – אפשרות לבצע אופטימיזציה לתמונה דרך האדיטור עצמו
אבל שוב! בסך הכל החוויה מהשימוש בתוסף טובה והתוצאות מדברות בעד עצמן! - כמו ששמענו אתמול משילה איש ימיני במפגש הפסגה באלמנטור – האופטימייזר לא מגיע לבד, אלא הוא חלק ממהלך שלם שאלמנטור עושים כדי לשפר את הביצועים של האתרים שלנו. התכונות והפיצ׳רים החדשים שמשתחררים מעידים על מאמץ מרוכז שאלמנטור עושים בקטע הזה. אני לא יכולה לדעת כמה אחוז משיפור הביצועים קרה הודות לתוסף וכמה הודות לגרסה המעודכנת של אלמנטור והתכונות החדשות, אבל שיתוף הפעולה ביניהם הביא לתוצאות מצויינות כמו שאפשר לראות כאן.
ירדן ירחי-ברוך
yarden-yarchi.com
