מה התפקיד של הסקריפטים שאלמנטור טוען באתר

אחד הכלים הכי חזקים לשיפור ביצועים הוא לצמצם טעינה של קבצים לא נצרכים. אבל לא פשוט לעשות את זה בלי להבין מה עושים. בפוסט הזה אתמקד בביטול טעינה בהקשר של אלמנטור.
Assets improvements in elementor

תוכן עניינים

אלמנטור טוענים קבצי 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 – ניתן לאחר את טעינתו. כמובן שצריך לדעת אם זה אפשרי כי לפעמים סריפט אחר שכן נצרך בתחילת הדף תלוי בו.

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

תוכן עניינים

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

הרשמה
Notify of
4 תגובות
חדש ביותר
הישן ביותר הכי הרבה דירוגים
Inline Feedbacks
הצג את כל התגובות

גם הפוסטים הבאים יעניינו אותך

4
0
אשמח לשמוע את דעתכם, מוזמנים להשאיר תגובהx