עולם בניית אתרי וורדפרס השתנה לגמרי לפני מספר שנים עם כניסתם המאסיבית של בוני הדפים לשוק. אם פעם, בונה אתרים בוורדפרס היה בסיכוי גדול גם בעל ידע בתכנות, היום, אדם שאומר שהוא עובד בבנית אתרים כבר ממש לא בטוח מתכנת. במקרה הטוב הוא מכיר קצת HTML\CSS. מה שהוא כן צריך לדעת, זה להשתמש נכון באחד הבוני דפים (page builders).
אין ספק שעשו כאן עבודה טובה בתחום, שוק חדש ממש נפתח וכמעט כל אחד יכול היום לבנות אתר יפה בלי להיות מתכנת. ומליוני ההורדות של בוני הדפים מוכיחים מעל כל ספק על הצורך שהיה ועל ההצלחה.
לפני שחלקכם יקפצו, אני לא אומר שזה האידיאלי אלא שזה המצב בפועל. דעתי היא שאדם שבונה אתר, גם אם יצא לו משהו מוצלח מאוד אבל אין לו הבנה (גם אם לא hands on ממש) ב JS ו PHP, חסר לו משהו בסטאק. כנ"ל אם אין לו הבנה באיך וורדפרס עובד.
העניין הוא שיש מבחר לא קטן של בוני דפים, אז במי כדאי לנו לבחור? בשביל זה המדריך שלפניכם.
מה נבדוק
השוואה בין בוני דפים יכולה להתחלק בגדול לשלושה סעיפים.
- מחיר
- פיצ'רים
- ביצועים/יעילות/מהירות
אני הולך להתמקד בעיקר בסעיף השלישי וכמה אזכורים גם לסעיף השני.
לגבי ביצועים, אני רוצה לבדוק כמה דברים:
- כמה קבצים (js+css בלבד) התוסף טוען מעבר למה שהיה נטען ללא השימוש בו
- גדול המשאבים שעובר ברשת "באשמת" התוסף – לפני כיווץ
- גודל ה html שהתוסף יוצר – לפני כיווץ
- מספר שאילתות
- עוד כמה דברים קטנים שנראה בהמשך
לאחר מכן אעשה השוואה כללית שמתחשבת בעוד פרמטרים ולסיום אכתוב את הדירוג שלי.
מה לא נבדוק
לצורך ההשוואה לא נעשה שום שימוש בכלי בדיקה כגון gtmatrix, pingdom, google page speed ודומיהם. זה לא מעניין. ראיתי כמה השוואות שעשו בין בוני דפים בודדים ושם מיד הראו תמונה של פינגדום או כלי אחר. למה זה חשוב חוץ מלמשוך קוראים?
אני רוצה לדעת איך התוסף עובד, עד כמה הוא טוב בבסיס שלו בצורה דיפולטית ללא משחקים ושינויים. מזה כמובן תגזר גם מהירות עליית הדף אבל לזה יכולים להיכנס עוד הרבה הפרעות שלא עניינו של ה page builder ואת זה אפשר לשפר במיליון דרכים לאחר מכן. לכן אין עניין לבדוק את זה כאן. אנחנו נבדוק את התוסף עצמו, ותהיו בטוחים שלפי המדדים שתראו תוכלו לדעת מי בבסיס באמת הכי יעיל.
איך הבדיקה התבצעה
לצורך כך יצרתי אתרים כמספר התוספים שבדקתי, כל אחד מהם עם תצורה זהה לחלוטין. בכל אתר השתמשתי באותה תבנית – Twenty Twenty – התקנתי רק את התוסף הרלוונטי לבדיקה ויצרתי דף פשוט שמכיל תמונה, טקסט, כותרת, כפתור ועוד אלמנט או שניים פשוטים. לא רציתי לבדוק על ריק לגמרי ומצד שני בדיקה מלאה, כלומר סוגי דפים שונים עם ווידג'טים שונים שמשפיעים בצורה שונה על הדף, היתה הופכת להיות מסובכת מאוד וגם לא בטוח מספיק אמינה.
הבדיקה משקפת את המציאות?
את המציאות עם ה הידיעה, לא. אולי שטות מצידי לכתוב את זה בפוסט שעושה השוואה אבל זו האמת. לא ניתן לעשות בדיקות ביצועים שישקפו את המציאות. הבדיקה משקפת מציאות מסויימת. ניתן בהחלט להשליך עליה למקרים דומים, ניתן להסיק ממנה מסקנות מסויימות שאולי נכונות ברוב המקרים אבל לא ניתן להגיד באופן מוחלט שהבדיקה משפקת את כל המציאות. זה לא רק בהשוואה של בוני אתרים ולא רק בוורדפרס אלא בכל עולם התוכנה (ואולי לא רק).
אז למה בכל זאת עשיתי את זה? ובכלל למה אני בכל זאת אוהב השוואת ביצועים?
כי כמו שכתבתי, זה בהחלט מלמד אותנו וניתן להסיק מזה מסקנות, אני פשוט רוצה לדייק שמזה לא ניתן ללמוד לכל המקרים. מה למשל יכול להשפיע? פרוטוקול אינטרנט, גרסת התוסף, גרסת php, גרסת וורדפרס, תצורת שרת (בעיקר מנגנוני קאש), שיטת העבודה של בונה האתר, שימוש/אי שימוש בפיצ'רים מסויימים, אופטימיזציות מקוסטמות לבונה אתרים הספציפי, תוספים שונים נוספים שמותקנים או לא מותקנים, מצב השרת ברגע נתון, דפדפן, גרסת דפדפן ויש אפילו עוד משתנים אבל הבנתם את הרעיון. וכמובן טעות אנוש, כלומר טעות שלי בבדיקה או ברישום התוצאות.
אילו תוספים בדקתי
- WP Page Builder
- Pootle
- Visual Composer
- SiteOrigin
- WPBakery
- Themify
- Oxygen
- Divi
- Beaver
- Brizy
- Elementor
- ואחרון חביב, בעיקר לצורך בסיס להשוואה – Gutenberg
אני חושב שכיסיתי את רוב הנפוצים. אחד שבכוונה לא בדקתי זה Thrive. אני ממש לא סובל אותו אז לא טרחתי. אם יש אחרים שהחסרתי, לא בכוונה פשוט מתישהו הייתי צריך להגיד די.
גרסאות תוספים
כל התוספים היו בגרסתם האחרונה נכון לאמצע אוגוסט. כלומר אלמנטור לדוגמה לא היה עדיין בגרסה 3 כך שהשיפור בגדול ה DOM לא נכלל בבדיקה. קחו בחשבון שבגרסה 3 יש שיפור כלשהו אם כי השיפור לא יהיה דרמטי במקרה הבדיקה כי יצרתי דף קטן יחסית.
עוד נקודה חשובה, כל התוספים שמאפשרים הורדת גרסה חינמית, נבדקו בגרסה החינמית. זה קצת משפיע על הבדיקה כי תוספים מסויימים טוענים resources נוספים ואולי מריצים גם שאילתות נוספות ברגע שמותקנת גרסת פרו. אני לא יודע עד כמה שימוש בגרסת הפרו בכל התוספים היה משנה את התמונה בצורה משמעותית אבל חשוב לשים לב לזה.
ונקודה אחרונה לגבי Oxygen התוצאות פה אפילו פחות טובות ממה שניתן להגיע במקרה שמי שבונה יודע בדיוק מה הוא עושה. אני לא מדבר על אפוטימיזציה לאחר הבניה, אלא לאופן הבניה עצמה.
תוצאות
חפרתי מספיק, בואו נראה את התוצאות.
הגרף מציג את גודל ה html בק"ב שבונה הדפים מייצר. בגלל שמדובר בגודל הלא מכווץ, אנחנו מגיעים לגדלים שאסור להגיע אליהם. בבדיקה שעשיתי, לאחר כיווץ, הגדלים היו כבר בסדר אבל זכרו שמדובר בדף די רזה. לכן זהו מדד חשוב מאוד. ההמלצה היא שדף ה html לא יעבור את ה 14 ק"ב לאחר כיווץ.
הגרף מציג את מספר הבקשות לקבצי css+js שנעשו בגלל התוסף. מדובר במצב כמו שהוא בלי איחודים למיניהם. הנתון הזה קצת שנוי במחלוקת. כי לפעמים חלוקה למספר קבצים דווקא מעידה על פיתוח נכון (הסרת תלות) ואם בכל מקרה עושים minify ולפעמים גם merge וכמעט כולם תומכים היום ב http\2 וחלקכם כבר אפילו עושים push אז לא כזה מפריע שיהיו הרבה קבצים. אבל כל זה נכון אם החלוקה התבצעה בכוונה ובאמת יש צורך בכל הטעינות האלה, מה שהרבה פעמים לא נכון לצערי. לכן אני כן מעלה את הגרף הזה, ואני כן מחשיב אותו בספירת הנקודות אבל זכרו שהוא אולי פחות משמעותי.
הגרף מציג את גודל המשאבים (רק css+js) שצריכים לעבור ברשת בצורתם הלא מכווצת. בשונה מהגרף הקודם של מספר הבקשות, כאן ההשפעה לרעה לא נתונה למחלוקת.
הגרף מציג את מספר השאילתות שהתוסף גורם להם בדף. הנתון נלקח בעזרת Query Monitor במצב של משתמש subscriber – כלומר ללא שום יכולות אדמין/עורך וכדומה. הבעיה שעדיין מדובר במשתמש מחובר ולכן אולי היתה השפעה. לכן קחו את נתון עם הסתייגות קלה.
ועוד שני גרפים שמסכמים מה שכבר ראינו:
נתונים עיקריים
לא לפי סדר מסויים
| שם | גודל html | מספר בקשות | גודל בקשות | שאילתות |
| Gutenberg | 23.3 | 6 | 179 | 0 |
| Visual Composer | 19.7 | 13 | 219 | 13 |
| Oxygen | 25 | 7 | 145 | 19 |
| WPBakery | 25.5 | 13 | 828 | 15 |
| Beaver | 26.9 | 10 | 364 | 22 |
| Pootle | 27.1 | 11 | 400 | 3 |
| Divi | 28.8 | 13 | 1500 | 20 |
| Elementor | 30.4 | 23 | 891 | 36 |
| SiteOrigin | 31.5 | 22 | 340 | 9 |
| Themify | 41.2 | 19 | 611 | 16 |
| Brizy | 57.2 | 11 | 1500 | 30 |
| WP Page Builder | 84.4 | 18 | 523 | 0 |
מסקנות
האמת, לא כזה פשוט. מבחינת ביצועים נטו, אפשר לומר ששלושת הראשונים הם: Gutenberg, Oxygen ו Visual Composer. במקום טוב באמצע נמצאים Pootle ו -Beaver. לאחר מכן כל השאר.
אבל אם נצא רגע מעניין הביצועים בלבד, יש עוד כמה דברים לשקול לפני שבוחרים. פיצ'רים, UX טוב, קלות שימוש ומהירות בה ניתן להגיע לתוצאה, קהילה, תוספים משלימים, ספריית טמפלייטים ועוד.
דברים אלו הם בהחלט שיקול לגיטימי לא פחות מביצועים ולכן צריך לשקלל גם אותם במהלך בחירתכם באיזה בונה דפים תשתמשו.
לגבי השוואת פיצ'רים, כל אחד חשוב לו דברים אחרים. כנסו לאלה שאתם מסתפקים ביניהם ובדקו מה הם מציעים. לכולם יש פירוט רב בנושא ואין לי מה להוסיף.
לעומת זאת לגבי דברים שלא ניתנים למדידה מהסתכלות באתר של התוסף אני אוסיף את ההתרשמות הסובייקטיבית שלי, לאחר שהתנסיתי זמן מסוים בכל אחד מהבילדרים האלה. הטבלה היא ללא התחשבות בביצועים בכלל.
| שם | גרסה חינמית | Frontend builder Live Preview | קלות שימוש | UI\UX |
| Elementor | V | V | 5 | 5 |
| Brizy | V | V | 5 | 5 |
| Divi | X | V | 5 | 4 |
| WP Page Builder | V | V | 4 | 4 |
| Oxygen | X | V | 3 | 4 |
| WPBakery | X | V | 5 | 3 |
| Beaver | X | V | 5 | 3 |
| Pootle | V | V | 3 | 3 |
| Visual Composer | V | V | 5 | 2 |
| Themify | V | X | 3 | 1 |
| SiteOrigin | V | X | 2 | 1 |
סיכום
אז מה תכלס לבחור? אני יכול לכתוב רק מה אני הייתי עושה.
מבחינתי הבחירה הדיפולטית היא Elementor. כן, עם כל הכבדות שלו והבעיות האחרות, הם עשו חתיכת עבודה בכל שאר הדברים ואי אפשר לקחת את זה מהם. מבחינתי, כבונה דפים, הוא במקום הראשון בלי ספק ואת עניין הביצועים צריך לסדר כמובן בתהליך האופטימיזציה שנעשה לאתר.
לאחר מכן, או יותר נכון, באתרים מסוימים (או אם יש דרישה מחמירה של ביצועים) Oxygen. הם עשו עבודה מדהימה! זה בא עם עקומת למידה גבוהה יותר אבל זה עושה שכל למי שמבין איך מבנה של דף אמור להיות.
עד פה אלו הבחירות שלי. אבל רק בשביל הדירוג בואו נמשיך.
בין Brizy ל Divi – אני ללא ספק בוחר ב Brizy. הוא הרבה יותר נכון וטוב לדעתי ויש בו כמה פיצ'רים מעולים. יש לי הרגשה שאנשי WiX יתחברו ל Divi. אני אישית לא סובל אותו כל כך.
לאחר מכן, Beaver ו WPBakery אם כי מבחינתי לא התחברתי אליהם אבל בשביל הדירוג.
לאחר מכן, Visual Composer, WP Page Builder ו Pootle.
ולסיום SiteOrigin ו Themify.
אם כך, הדירוג המשוקלל שלי הוא:
- Elementor
- Oxygen
- Brizy
- Divi
- Beaver & WPBakery
- Visual Composer, WP Page Builder & Pootle.
- SiteOrigin & Themify
מה עם Gutenberg?
כמובן אם אין לכם צורך בשום בנאי, תהנו מ Gutenberg. ההשוואה המשוקללת היא בלעדיו.
