10 דרכים לשפר מהירות אתר וורדפרס ואלמנטור

אני אוהב את אלמנטור, הוא כלי נהדר. אבל הוא לא חף מבעיות בהקשר של ביצועים (1, 2, 3, 4, 5, 6). אני מניח שזה נובע משתי סיבות,

1. הצורך לתמוך ברצונות של 5 מיליון לקוחות וכנראה לא מספיק כוח אדם בפיתוח.
2. בייס קוד קטן שאולי התחיל בכלל מ Pojo שגדל וגדל ונוצרו תלויות רבות כך שהיום כבר לא פשוט לעשות אותו light weight.

מה שמאוד מאכזב עם אלמנטור, זו התמיכה העלובה (כן זאת המילה לצערי) שלהם בקהילה ב GitHub. קחו לדוגמה את ה-issue הזה: Table of Content SEO Improvement או זה: Make Elementor powerful and performance omptimized.

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

עניין הביצועים הוא לא משהו שקשור דווקא לאלמנטור, page builders מטבעם הם כאלה, אבל אם אפשר לשפר לפחות חלק מהדברים, בואו נעשה את זה.

לפניכם רשימה של 10 דרכים לעבוד עם אלמנטור ולמזער את הפגיעה במהירות האתר.

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

בחירת תבנית

הדבר הראשון הוא בחירת תבנית רזה או שכתובה עם מחשבה על מהירות. הבחירה בהרבה מקרים צריכה להיות שימוש ב- hello של אלמנטור אבל יש יתרונות לשימוש בתבניות מוצלחות אחרות. אם לציין שלוש מהן: GeneratePress, Genesis, Astra.

כיבוי ווידג'טים שלא בשימוש

אני אוהב פלאגינים שנותנים אופציה להדליק רק מה שבשימוש. אלמנטור לא נותנים את האופציה הזאת וחבל. אבל אפשר לכתוב קוד שעושה את זה. או להתקין פלאגין שמישהו כבר כתב ועושה בדיוק את זה. ההשפעה תהיה על מהירות טעינת דף עריכה של אלמנטור.

שימוש חכם ביכולות של אלמנטור

אלמנטור מגיע עם כמה יכולות שיכולות (מוזר לקרוא את זה :0) ליתר את הצורך בפלאגינים אחרים. אם כבר אתם משתמשים באלמנטור, עשו זאת בחכמה והימנעו מהתקנת פלאגינים מיותרים. לדוגמה: כותרת דביקה, כפתורי שיתוף, כפתור Up, טפסים, טפסים מרובי שלבים ועוד.

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

ביטול טעינת גוגל פונטס

נושא הפונטים בהקשר של ביצועים הוא רחב וצריך לתת עליו את הדעת בלי קשר לאלמנטור, שימוש במספר משפחות ופונטים מועט, שימוש ב web fonts, טעינה עם swap ועוד.
אבל במקרה הזה אני רק רוצה לציין שניתן לבטל את טעינת גוגל פונטס שאלמנטור עושה ולהשתמש לדוגמה בטעינה לוקאלית של גוגל פונטס או פתרון אחר. כמו כן, פתרון ל-swap לפונטים שאלמנטור טוען. קוד לביצוע בסוף הפוסט.

ביטול טעינת Font Awesome

אלמנטור טוענים את FA בצורה חכמה, כל הכבוד להם. רק בדפים שיש באמת שימוש בהם ה-CSS הרלוונטי יטען. אבל אם יש לכם פתרון אחר כמו שימוש במספר אייקונים מצומצם של svg או קובץ שמכיל רק את מספר הפונטים המצומצם של FA שאתם באמת צריכים לאתר, תוכלו לכבות לגמרי את הטעינה של FA. קוד לביצוע בסוף הפוסט. תוכלו לקרוא פה בפירוט איך ליצור סט אייקונים מצומצם ואיך להשתמש בו באתר.

ביטול טעינת אייקונים של אלמנטור

כמו הסעיף הקודם, גם את טעינת הפונטים של אלמנטור תוכלו לכבות אם יש לכם פתרון אחר בשבילם. אם אתם משתמשים בתפריט המבורגר במובייל, לא יהיו לכם אייקונים אם  אחרי הצעד הזה, לכן תצטרכו לשנות את ה-CSS של התפריט כך שיציג את האייקון שיש לכם או טקסט במקום אייקון. כמו כן, כל האייקונים של אלמנטור בעורך לא יעבדו אבל גם לזה יש פתרון. קוד לביצוע בסוף הפוסט.

אופטימיזציית CSS

אלמנטור טוען הרבה CSS לכל דף באתר. הרבה ממנו לחינם. יש כמה דברים שאתם יכולים לעשות (זה נכון לא רק לגבי אלמנטור כמובן).

1. מיניפיקציה – זה תהליך שלא יזיק בשום מצב וקצת עוזר. תוכלו לעשות את זה עם כל תוסף קאש כמעט וגם עם Cloudflare אם אתם משתמשים בו. מוזמנים לקרוא את המדריך להגדרת Cloudflare.
2. יצירת Critical CSS – בשביל זה תצטרכו תוסף שנותן את האופציה (Swift Performance או WP Rocket לדוגמה אבל יש עוד הרבה) או השתמשו באתר כמו זה. בשונה מהסעיף הקודם, דבר זה לרוב יעבוד בסדר וישפר את מהירות טעינת העמוד אבל תצטרכו לבדוק היטב ששום דבר בעמוד לא נשבר. במקרה שכן, השתמשו בהגדרות התוסף ביכולת ההחרגה של CSS בעייתים. בנוסף קחו בחשבון שלא תמיד התועלת מזה תהיה גדולה מספיק כדי שתהיה שווה את המאמץ אבל ממליץ לפחות לנסות ולבדוק איך משפיע על האתר שלכם.
3. ביטול טעינת CSS מיותרים לפי עמוד או סוג עמוד/פוסט – תעזרו בלשונית cover בכרום ובדקו אם יש css שלגמרי לא בשימוש בעמודים מסוימים, אם ראיתם כאלה, בטלו את הטעינה שלהם. תוכלו לעשות זאת בעזרת קוד php לא מסובך או, פשוט ועדיף יותר, להשתמש בתוסף כמו Asset Cleanup.

יש עוד דברים כמו merge (פחות חשוב אבל אם תעשו critical זה בכל מקרה גם מרג') או הסרת unused css (יכול להיות מעולה אבל לא פשוט בכלל) אבל שלושת הדברים שציינתי יכולים להספיק. אם אתם רוצים להתעמק יותר, קראו את הפוסט על שיפור ביצועים בוורדפרס ואת הפוסט על איך להגדיר את Swfit Perfomance.

שימוש חכם בסקריפטים

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

הכוונה היא לשימוש ב defer, async או lazy. סקריפטים נטענים לפי סדר הופעתם, לרוב בהדר, מפורסרים ומורצים וכך מעכבים בהרבה את רינדור העמוד. הפתרון לזה הוא פשוט. לאחר את ההרצה. ככלל אצבע, השתמשו ב defer ולא ב async. כך גם תשמרו על הרצה לפי סדר ההופעה של הסקריפט ב html וגם תריצו את הסקריפט בסוף הפרסור. לגבי lazy אני ממליץ מאוד על תוסף שנקרא Flying Script, בעזרתו תוכלו לבחור שסקריפטים מסוימים ירוצו רק לאחר x שניות של idle או בעת טריגר של המשתמש. רק שימו לב שלא תוכלו סתם לאחר הכל כי דברים ישברו לכם. למשל הרבה סקריפטים מסתמכים על זה שיש jquery אז אותו אל תאחרו (תוכלו עדיין לשחק איתו גם להזיז אותו לפוטר ובתקווה שאם כל השאר ב defer הוא ירוץ לפניהם). וגם לגבי עניין ה lazy, שימו לב שאתם לא שמים שם סקריפטים שנצרכים לשימוש מיידי בעמוד.

טעינת וידאו חכמה

אלמנטור מאפשר לנו לנגן וידאו מיוטיוב או vimeo, וזה דבר מעולה אבל עולה הרבה בביצועים. לכן אתם חייבים לטעון אותם באיחור. תוכלו לעשות זאת באמצעות תוסף הקאש (גם פה יש ל Swift Performance ול WP Rocket יכולת כזאת) או להשתמש בתוסף ייעודי לזה – למשל WP YouTube Lyte.

טעינה מאוחרת לתמונות רקע

הבעיה עם תמונות רקע ב CSS שיותר מסובך לתמוך בטעינה מאוחרת אצלם. אלמטור לא תומכים בזה אבל יש תוספים שונים שתומכים בזה למשל Swift Performance או WP Rocket אם תפעלו לפי המדריך שכתבתי "טעינה מאוחרת של תמונות רקע עם WP-Rocket" ויש גם תוסף שמישהו כתב בשביל זה Lazy Load Elementor Background Images.

דוגמאות קוד

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

// disable google fonts
add_filter( 'elementor/frontend/print_google_fonts', '__return_false' );

// add font-display swap to elementor custom fonts
add_filter( 'elementor_pro/custom_fonts/font_display', function( $current_value, $font_family, $data ) {
	return 'swap';
	// you can also play also with $current_value & $font_family for specific requirments
}, 10, 3 );

// disble FA
add_action( 'elementor/frontend/after_register_styles',function() {
	foreach( [ 'solid', 'regular', 'brands' ] as $style ) {
		wp_deregister_style( 'elementor-icons-fa-' . $style );
	}
}, 20 );

// if you want to replace FA with your cutom set or critical icons file use this
add_action( 'wp_enqueue_scripts', 'replace_font_awesome', 3 );
function replace_font_awesome() {
	wp_enqueue_style( 'font-awesome', 'path to your file' );
}

// disable eicons
add_action( 'wp_enqueue_scripts', 'remove_eicons', 20 ); 
function remove_eicons() { 
	// if you want the icons for admin in the backend	
	if ( is_admin() ) {
        	return;
    	}
	wp_deregister_style( 'elementor-icons' ); 
}

/*for hamburger menu icons use this CSS in the menu widget:*/
 .eicon-menu-bar {
	display: inline-block;
	font-size: inherit;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
 /*for open menu*/
.elementor-menu-toggle i:before {
	your svg font or fa or text;
}

/*for close menu*/
.elementor-menu-toggle.elementor-active i:before {
	your svg font or fa or text;
}

ניתן לראות את דוגמאות הקוד גם בגיטאהב.