זה לא סוד שאלמנטור לא תמיד הכלי האופטימלי ביותר לבניית אתרים מהצד של ביצועים, ה-DOM (מבנה ה-HTML) היה מאוד מסורבל, היו המון JS שנטענו וקבצי ה-CSS היו שמנים ביותר.
זה אולי לא הורגש באתרים קטנים או דפי נחיתה, אבל באתרים גדולים ומורכבים יותר, המעבד והזיכרון בשרתי האחסון היו עובדים קשה מאוד.
היו לא מעט ביקורות על הנושא, הקהילה אמרה את שלה לא פעם, רבים אפילו הספידו.
ואז נראה שאלמנטור אמרו די… בחמשת הגרסאות האחרונות שיצאו (גרסא 3.18 ועד 3.22) אנחנו רואים עדכונים שהם לא פחות מדרמטיים בהקשר ליעילות ומהירות האתרים בכל המדדים.
החל משיפור ה-TTFB (ר״ת: Time To First Bit) שאומר שלשרת לוקח פחות זמן להגיש את העמוד לבקשת הגולש, ועד לשיפורי אופטימיזציה מובנים כמו טעינת תמונות יעילה יותר ואפילו מנגנון Dynamic Cache שיודע לעשות קאשינג ברמת אלמנט!!! (רואים את ההתלהבות?).
אנחנו נעבור על העדכונים מהגרסאות האחרונות ונפרק אותם אחד-אחד, יש כאן צבר של פיצ׳רים שכנראה עבדו עליהם לא מעט והשקיעו הרבה מחשבה.
חוץ מזה, בגלל שאני גם לא מוכן להסתפק ב-״תאמין לנו, שיפרנו את המהירות…״ אני הולך לעשות מבחן השוואה בין גרסא 3.17 כנגד 3.22 כדי לראות באמת כמה התקדמו באלמנטור.
הנושא של צמצום הקוד זאת מגמה שאני באופן אישי רואה שאלמנטור הולכים בה כבר הרבה זמן.
חשוב להבין שזה משהו שמאוד לא פשוט לבצע מהסיבה שאלמנטור זה כבר לא אותו פלאגין צעיר שמשרת כמה אלפי אתרים בישראל (היי ימי Pojo העליזים) אלא תוסף שמותקן במליוני אתרים.
מליוני אתרים אומר שיש סיביבו גם כמה אלפי או עשרות אלפי פלאגינים תומכים וכל שינוי בקוד ובמבנה שלו עשוי לגרום לבעיות באתרים הקיימים.
בעדכון הזה, אלמנטור הורידו את ה-UI controls וצמצמו עוד את הקוד שעוטף את האלמנטים השונים באתר וזה כמובן צעד נוסף שמשפר לנו את זמן הטעינה (TTFB) של האתר.
פחות קוד לייצר ולטען בשרת = הביט הראשון מגיע מהר יותר.
לצורך הדוגמא, קונטיינר שהקמתי בסביבת בדיקות בשני גרסאות לפני ואחרי השיפורים:
גרסא 3.17 – 810bit ו-346bit ב-compressed
<div class="elementor-element elementor-element-966d697 e-grid e-con-boxed e-con e-child" data-id="966d697" data-element_type="container" data-settings="{"container_type":"grid", "grid_columns_grid":{"unit":"fr", "size":2,"sizes":[]},"grid_rows_grid":{"unit":"fr", "size":1,"sizes":[]},"content_width":"boxed", "grid_outline":"yes", "grid_columns_grid_laptop":{"unit":"fr", "size":", "sizes":[]},"grid_columns_grid_tablet":{"unit":"fr", "size":", "sizes":[]},"grid_columns_grid_mobile":{"unit":"fr", "size":1,"sizes":[]},"grid_rows_grid_laptop":{"unit":"fr", "size":", "sizes":[]},"grid_rows_grid_tablet":{"unit":"fr", "size":", "sizes":[]},"grid_rows_grid_mobile":{"unit":"fr", "size":", "sizes":[]},"grid_auto_flow":"row", "grid_auto_flow_laptop":"row", "grid_auto_flow_tablet":"row", "grid_auto_flow_mobile":"row"}">גרסא 3.22 – 144bit ו-132bit ב-compressed
<div class="elementor-element elementor-element-d8897d1 e-grid e-con-boxed e-con e-child" data-id="d8897d1" data-element_type="container">אנחנו רואים פה הבדלים מאוד משמעותיים של צמצום ב-560% בגרסא הלא מכווצת, זה משמועתי מאוד, וזה רק בקונטיינר אחד מתוך כל העמוד.
בואו נתחיל מהפיצ׳ר הראשון שנכנס בגרסאות האחרונות והוא טעינה מאוחרת של תמונות רקע.
בכמה מילים, Lazy Load זה קונספט שאומר לדפדפן את הדבר הבא:
״דפדפן שומע? המשתמש נכנס עכשיו לפולד הראשון בעמוד הזה, תטען רק את התמונות שיש באיזור הזה, אל תטרח לטעון את כללל התמונות בעמוד, זה סתם בזבוז זמן, כשנגיע אליהן תטען אותן ותציג.״
עכשיו Lazy Load זה לא משהו חדש, לא באלמנטור ולא בכלל בוורדפרס, יש הרבה תוספים כמו WP Rocket שעושים את זה בעצמם עבור התמונות.
אבל… לא על תמונות רקע.
אז אלמנטור הכניסו פיצ׳ר קטן שמאפשר לטעון גם את תמונות הרקע הכבדות (כי הן לרוב על כל המסך), בטעינה מאוחרת.
1-0 לאלמנטור על מהירות הטעינה, עבודה יפה.
לדעתי פה מדובר על לא פחות מפצצה שנחתה בתחום!
למי שעקב אחרי המאמרים האחרונים פה, דיברתי לא מעט על קאש והאחרון שבהם נגע בתוספי קאש בוורדפרס.
בגרסא 3.22 אלמנטור באו עם חידוש שאני מכיר ממערכות הרבה יותר חדישות ומתוחכמות מוורדפרס וזה היכולת לבצע קאש דינאמי על חלקים בעמוד במקום לשמור את העמוד כולו.
בואו נעשה תזכורת קצרה על מה זה Full Page Cache.
ברגע שגולש מגיע לעמוד, השרת הולך לבסיס הנתונים, מייצר את העמוד כולו ומחזיר לגולש.
אם יש לנו תוסף קאש, השרת יודע לשמור את העמוד שהרגע הגיש ובפעם הבאה להגיש אותו מהקובץ ששמר.
זה חוסך הרבה משאבים והופך את כל העסק למהיר יותר.
אבל מה קורה כשיש לנו עמוד מאוד גדול, עמוד בית לדוגמא, אבל רק איזור אחד בו משתנה, גריד מוצרים לדוגמא בחנויות.
אנחנו לא רוצים שכל פעם שמחיר של מוצר משתנה במבצע נצטרך למחוק את הקאש של כל העמוד וליצור אותו מחדש נכון?
ופה נכנס לתמונה הקאש הדינאמי או בצורה שאלמנטור קוראים לו Element Cache.
הם הוסיפו אפשרות לבחור שאלמנט ספציפי לא יישמר בקאש ובכך הוא תמיד ישאר דינאמי. כל שאר העמוד יטען מקאש בצורה מהירה ורק האלמנט שהחרגנו, רק הוא יטען בצורה דינאמית.
לדעתי זה לא פחות ממדהים. אהבתי מאוד.
אין ספק שיש פה שיפורים משמעותיים, אבל כבר אמרנו שאני לא אוהב לקחת דברים כמובן מאליו והלכתי לבדוק בעצמי.
סביבת הבדיקות שהקמתי הייתה לפי הנתונים הבאים:
ככה נראה העמוד שהקמתי:
הדבר הראשון שרציתי לבדוק זה מה ההשפעה של צמצום ה-DOM על גודל העמוד שצריך להשלח לגולש וראיתי שיפור, אמנם לא משמעותי כמו שציפיתי, אבל היה קיים. (11.8kb בגרסא 3.22 יותר אל מול 12.4kb ב-3.17).
אם תשימו לב בתמונה למעלה, כל העמוד כולל הסקריפטים וקבצי ה-CSS הצטמצם בכ-200kb שזה כבר משמעותי.
לאחר מכן הלכתי לבדוק ולהשוות את שני האתרים ב-GTMetrix, אכן נצפה שיפור, אך לא מאוד משמעותי כמו שציפיתי.
מצד שמאל אנחנו רואים את הנתונים של גרסאת Elementor v3.22 עם נתונים עדיפים ושיפור משמעותי ב-Total Page Size שזה משקל הדף, נתון שמשתקף לנו גם בציון ה-Structure Score כשיפור של 6% (לעמוד שלי).
לעומת זאת, מהתוצאות שלי ה-TTFB מעט פחות טוב בגרסא הזאת ומראה נתון של 719ms לעומת 541ms בגרסאת Elementor v3.17. זה כמובן לא מונע מהאתר להטען מהר יותר (ב-0.3 שניות) בגרסא החדשה
חשוב לציין שמדובר בנתון שמבוסס על בדיקה אחת עם GTMetrix ולא נתון סטטיסטי על פני עשרות בדיקות, פניתי בעניין הזה לצוות הרלוונטי באלמנטור, מבטיח לעדכן בממצאים כשיהיו.
לינק לדוח השוואה ב-GTMetrix אפשר למצוא כאן – https://gtmetrix.com/compare/THrwpX3A/w9gWIgyy
נראה שאלמנטור הולכים בכיוון מאוד חיובי בעניין הביצועים. יש עוד לאן להתקדם, כמו בכל מקום, אבל הפיצ׳רים החדשים שנכנסו בגרסאות האחרונות זאת התקדמות משמעותית.
אסור לשכוח שמדובר על תוסף שפרוס על מליוני אתרים ולכן הצעדים לא יכולים להיות דרסטיים כמו בבילדרים אחרים קטנים יותר.
ובכל זאת, אנחנו רואים שחידושים משמעותיים מגיעים, כמו למשל ה-Element Cache שפותח ויצא בגרסא 3.22.
חשוב לציין שחלק מהפיצ׳רים החדשים עדיין במצב של Experience או Beta ולא מגיעים פעילים או מוכנים לעבודה בסביבת פרודקשן, אבל הם בכיוון.
