אלמנטור טוענים קבצי JS\CSS לא תמיד עם צורך אמיתי. בגרסה 3.1 הם התחילו בשיפור של זה אבל הוא עדיין לא שלם. בזמן שאני כותב את הפוסט נראה שהטיפול נעשה רק ב swiper וב styles של eicons ו animations. זה שיפור מצוין אבל כאמור לא שלם. (השיפור נעשה גם בטעינה דינאמית של הנדלרים של וויד'טים).
אני מקווה שבעתיד הקרוב הם יפתרו את העניין לגמרי אבל גם אז הפוסט הזה עדיין יהיה מועיל למי שרוצה לעשות over optimization ולשחק עם תזמון טעינת הסקריפטים. כלומר, גם אם סקריפט נצרך בעמוד, תוכלו לאחר אותו לפי אופי השימוש או אפילו לקחת ממנו חלק מאוד קטן שאתם צריכים במקום לטעון קובץ גדול.
הבעיה בביטול טעינה של סקריפטים
אחת הבעיות שכל מי שמשפר ביצועים לאתר שנבנה עם אלמנטור היא טעינת כל מיני סקריפטים שלא ברור לנו מה כל סקריפט עושה ואיזה מהם באמת חייב להיות טעון בעמוד ואיזה לא.
אם רק היינו יודעים מה התפקיד של כל סקריפט, היינו יכולים להשתמש בכלים כמו
Asset Cleanup, Perfmatter, Gonzales ודומיהם כדי לבטל את הטעינה של הסקריפטים שלא נצרכים באותו עמוד.
כשלא יודעים מה התפקיד של כל סקריפט, הדרך לעשות את זה היא פשוט על ידי ניסוי, וכל אחד שעבר את התהליך יודע עד כמה זה לא פשוט.
אנחנו מבטלים טעינה, בודקים שהדף מתפקד טוב ואין שגיאות בקונסול ואם כן יש בעיה אנחנו מבטלים את הביטול ואז יש בעיה אחרת וחוזר חלילה.
הסתייגות
לפני שנתחיל אני רוצה להסתייג. הפוסט הזה לא נועד להיות מסמך רשמי ואני לא לוקח אחריות על שום דבר. ראשית צריך להבין שדברים משתנים – רק עכשיו בגרסאות 3x קרו כמה שינויים.
גם ללא השינויים, זהו פוסט שנועד לתת אינדקציה מסויימת על הסקריפטים. לא עברתי על כל שורה בקוד שלהם כדי לוודא ב100 אחוז מה הם עושים. ויותר מזה, גם לא כיסיתי 100 אחוז מהסקריפטים שעשויים להיטען. עכשיו אפשר להתחיל 🙂
מה (כנראה) חייבים לטעון
יש כמה מודלים שהם הבסיס של עבודה עם אלמנטור.
- elementor-app-loader
- elementor-common-modules
- elementor-common
- elementor-frontend-modules
- elementor-frontend
- elementor-webpack-runtime
האם זה אומר שבהכרח חייבים את כל אלה? אני לא יודע, יתכן שחלק מהם דרושים רק בשביל הבילדר. אם תבטלו טעינה של אחד מהם, תהיו חייבים לעשות את זה בזהירות. כלומר, פר עמוד/פוסט/סוג פוסט. בנוסף תהיו חייבים לוודא ששום דבר לא נשבר.
תלויות צד שלישי
חוץ מסקריפטים של אלמנטור, יש תלויות של אלמנטור בסקריפטים של wordpress, jQuery, backbone. טעינה או אי טעינה של סקריפטים אלו צריכה להתחשב לא רק באלמנטור אלא גם בכל הפלאגינים האחרים שאולי דורשים אותם כמו גם בתבנית ועוד דברים. אם הדרישה היחידה שלהם היא על ידי אלמנטור, תוכלו לא לטעון אותם בהתאם לנכתב בהמשך.
רשימה חלקית של סקריפטים צד שלישי
- wp-request-api – עטיפה מעל rest api של וורדפרס. אלמנטור דורש אותו ב elementor-common.
- backbone.x – ספריות תשתית. נדרשות ב elementor-common.
- jquery – ספריית תשתית. נדרשת ב elementor-common.
- jquery-ui-draggable – ספריית עזר לגרירת אלמנטים. נדרשת ב elementor.common.
- jquery-ui-mouse – ספריית עזר לזיהוי פעולות עכבר. נדרשת ב elementor.common.
- jquery-ui-position – אחראית על מיקום אלמנטים. בשימוש בעיקר בבילדר.
- underscore – ספריית עזר למגוון פונקציות. בשימוש בעיקר בבילדר.
- imageloaded – אחראי על פונקציונאליות של טעינת תמונות ותמונות רקע (נטען, נכשל, בתהליך).
- jquery-slick – לא אמור להיטען בגרסאות חדשות של אלמנטור. בעבר היה אחראי על קרוסלות/סליידרים.
- jquery-numerator – אחראי על אנימציות של מספרים (ווידג'ט קאונטר באלמנטור לדוגמה).
סקריפטים וסטיילים שלא חייבים לטעון
elementor-dialog
אחראי על פופאים ו lightbox. אבל התלות בו מורכבת גם כשאין לכם פופאפ או לייטבוקס.
elementor-waypoints
אחראי על אנימציות ופעולות שקשורות לגלילה – כמו סטיקי למשל, infinite scrolling וכדומה.
share-link
אחראי על פונקציונאליות של שיתוף.
elementor-animations
קובץ css המיועד לסוגי אנימציות.
swiper
כל מה שקשור לקרוסלות וסליידרים. כולל slider ב lightbox.
e-gallery
בשימוש על ידי ווידג'ט גלריה של אלמנטור.
jquery.smartmenus
אחראי על אפשרויות התפריט באלמנטור פרו. רוב הסיכויים שתצטרכו את זה אלא אם כן התפריט שלכם לא נבנה עם אלמנטור ואין משהו אחר שתלוי בזה.
jquery.sticky
פונקציונאליות של sticky.
דרך פעולה כשבאים לבטל טעינה
- ראשית להבין באמת מה תפקידו של הסקריפט.
- לאחר מכן, מעבר על לשונית coverage פר דף/פוסט/סוג.
- בעת המעבר לא רק לטעון את הדף אלא לגלול לכל ארכו + לשחק בכל פונקציונאליות שקיימת בו – טופס, לייטבוקס, אנימציה, אינטגרציה עם צד שלישי כגון פעולות אחרי שליחת טופס וכו'.
- ביטול טעינה מהבן התחתון לכיוון מעלה – כלומר, נסו ראשית לבטל טעינה לסקריפט עם ההשפעה הפחותה ביותר מבחינת עץ התלויות. חלק מהתלויות רשמתי פה אז תוכלו לבדוק בפוסט, בנוסף חלק מהכלים של assets manager מראים את התלויות.
- איחור טעינה של סקריפטים שנצרכים רק לאחר גלילה. גם פה נצטרך להכיר תלויות, משום שסקריפט שלכאורה יכול להיטען מאוחר נצרך בשביל סקריפט אחר שכן נצרך לפני גלילה.
ועוד דבר אחד חשוב
כתבתי על זה כבר פוסט פעם אבל שווה לחזור על זה. ברגע שתדעו למה משמש כל סקריפט, תוכלו מראש, כבר בעת בניית האתר לתכנן את הדף כך שבראשו לא נצטרך יותר מדי סקריפטים. כך גם אם בהמשך נשעה דברים מורכבים שדורשים הרבה סקריפטים, נוכל לטעון אותם באיחור.
סיכום
טעינת קבצים מיותרים משפיעה לרעה על ציון מהירות האתר. כדאי לדעת איך לנטרל חלק מהקבצים שלא בשימוש ובשביל זה צריך להבין מה תפקידם.
חשוב לציין שגם אם קובץ כן בשימוש בחלק מסוים בעמוד, זה לא אומר שהוא חייב להיטען ישר בהתחלה ויותר מזה, הוא לא חייב להיטען בשלמותו. וגם בשביל זה חשוב להבין מה עושה הסקריפט כדי לדעת באיזה חלק בעמוד הוא נדרש.
אם אין בו צורך בתחילת הדף – above the fold – ניתן לאחר את טעינתו. כמובן שצריך לדעת אם זה אפשרי כי לפעמים סריפט אחר שכן נצרך בתחילת הדף תלוי בו.
כמו כן, אם יש סקריפט גדול מאוד שממנו אנחנו משתמשים רק בכמה שורות, ניתן לקחת רק את השורות שבשימוש ולבטל את הטינה של הקובץ הגדול.